chore(accordion): adds disabled property to CDK accordion-item (#8141)

Adds a disabled property to Accordion Item in the CDK.

Closes #8141

Author: Louw Swart

src/cdk/accordion/accordion-item.spec.ts

@@ -31,45 +31,96 @@ describe('CdkAccordionItem', () => {
         .injector.get(CdkAccordionItem);
     });
 
-    it('should toggle its expanded state', () => {
-      expect(item.expanded).toBeFalsy();
-      item.toggle();
-      expect(item.expanded).toBeTruthy();
-      item.toggle();
-      expect(item.expanded).toBeFalsy();
+    describe('that is not disabled', () => {
+      beforeEach(() => {
+        item.disabled = false;
+      });
+
+      it('should toggle its expanded state', () => {
+        expect(item.expanded).toBeFalsy();
+        item.toggle();
+        expect(item.expanded).toBeTruthy();
+        item.toggle();
+        expect(item.expanded).toBeFalsy();
+      });
+
+      it('should set its expanded state to expanded', () => {
+        item.expanded = false;
+        item.open();
+        expect(item.expanded).toBeTruthy();
+      });
+
+      it('should set its expanded state to closed', () => {
+        item.expanded = true;
+        item.close();
+        expect(item.expanded).toBeFalsy();
+      });
+
+      it('should emit a closed event', () => {
+        spyOn(item.closed, 'emit');
+        item.close();
+        fixture.detectChanges();
+        expect(item.closed.emit).toHaveBeenCalledWith();
+      });
+
+      it('should emit an opened event', () => {
+        spyOn(item.opened, 'emit');
+        item.open();
+        fixture.detectChanges();
+        expect(item.opened.emit).toHaveBeenCalledWith();
+      });
+
+      it('should emit a destroyed event', () => {
+        spyOn(item.destroyed, 'emit');
+        item.ngOnDestroy();
+        fixture.detectChanges();
+        expect(item.destroyed.emit).toHaveBeenCalledWith();
+      });
     });
 
-    it('should set its expanded state to expanded', () => {
-      item.expanded = false;
-      item.open();
-      expect(item.expanded).toBeTruthy();
-    });
-
-    it('should set its expanded state to closed', () => {
-      item.expanded = true;
-      item.close();
-      expect(item.expanded).toBeFalsy();
-    });
-
-    it('should emit a closed event', () => {
-      spyOn(item.closed, 'emit');
-      item.close();
-      fixture.detectChanges();
-      expect(item.closed.emit).toHaveBeenCalledWith();
-    });
-
-    it('should emit an opened event', () => {
-      spyOn(item.opened, 'emit');
-      item.open();
-      fixture.detectChanges();
-      expect(item.opened.emit).toHaveBeenCalledWith();
-    });
-
-    it('should emit an destroyed event', () => {
-      spyOn(item.destroyed, 'emit');
-      item.ngOnDestroy();
-      fixture.detectChanges();
-      expect(item.destroyed.emit).toHaveBeenCalledWith();
+    describe('that is disabled', () => {
+      beforeEach(() => {
+        item.disabled = true;
+      });
+
+      it('should not toggle its expanded state', () => {
+        expect(item.expanded).toBeFalsy();
+        item.toggle();
+        expect(item.expanded).toBeFalsy();
+      });
+
+      it('should not set its expanded state to expanded', () => {
+        item.expanded = false;
+        item.open();
+        expect(item.expanded).toBeFalsy();
+      });
+
+      it('should not set its expanded state to closed', () => {
+        item.expanded = true;
+        item.close();
+        expect(item.expanded).toBeTruthy();
+      });
+
+      it('should not emit a closed event', () => {
+        spyOn(item.closed, 'emit');
+        item.close();
+        fixture.detectChanges();
+        expect(item.closed.emit).not.toHaveBeenCalled();
+      });
+
+      it('should not emit an opened event', () => {
+        spyOn(item.opened, 'emit');
+        item.open();
+        fixture.detectChanges();
+        expect(item.opened.emit).not.toHaveBeenCalled();
+      });
+
+      it('should emit a destroyed event', () => {
+        spyOn(item.destroyed, 'emit');
+        item.ngOnDestroy();
+        fixture.detectChanges();
+        expect(item.destroyed.emit).toHaveBeenCalledWith();
+      });
     });
   });
 
@@ -99,6 +150,20 @@ describe('CdkAccordionItem', () => {
       expect(firstItem.expanded).toBeTruthy();
       expect(secondItem.expanded).toBeTruthy();
     });
+
+    it('should not change expanded state for disabled items', () => {
+      firstItem.disabled = true;
+      expect(firstItem.expanded).toBeFalsy();
+      expect(secondItem.expanded).toBeFalsy();
+      firstItem.open();
+      fixture.detectChanges();
+      expect(firstItem.expanded).toBeFalsy();
+      expect(secondItem.expanded).toBeFalsy();
+      secondItem.open();
+      fixture.detectChanges();
+      expect(firstItem.expanded).toBeFalsy();
+      expect(secondItem.expanded).toBeTruthy();
+    });
   });
 
 

src/cdk/accordion/accordion-item.ts

@@ -15,6 +15,7 @@ import {
   Optional,
   ChangeDetectorRef,
 } from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
 import {CdkAccordion} from './accordion';
 
@@ -65,6 +66,12 @@ export class CdkAccordionItem implements OnDestroy {
   }
   private _expanded: boolean;
 
+  /** Whether the AccordionItem is disabled. */
+  @Input()
+  get disabled() { return this._disabled; }
+  set disabled(disabled: boolean) { this._disabled = coerceBooleanProperty(disabled); }
+  private _disabled: boolean = false;
+
   /** Unregister function for _expansionDispatcher. */
   private _removeUniqueSelectionListener: () => void = () => {};
 
@@ -88,16 +95,22 @@ export class CdkAccordionItem implements OnDestroy {
 
   /** Toggles the expanded state of the accordion item. */
   toggle(): void {
-    this.expanded = !this.expanded;
+    if (!this.disabled) {
+      this.expanded = !this.expanded;
+    }
   }
 
   /** Sets the expanded state of the accordion item to false. */
   close(): void {
-    this.expanded = false;
+    if (!this.disabled) {
+      this.expanded = false;
+    }
   }
 
   /** Sets the expanded state of the accordion item to true. */
   open(): void {
-    this.expanded = true;
+    if (!this.disabled) {
+      this.expanded = true;
+    }
   }
 }

src/cdk/accordion/accordion.ts

@@ -23,7 +23,7 @@ export class CdkAccordion {
   /** A readonly id value to use for unique selection coordination. */
   readonly id = `cdk-accordion-${nextId++}`;
 
-  /** Whether the accordion should allow multiple expanded accordion items simulateously. */
+  /** Whether the accordion should allow multiple expanded accordion items simultaneously. */
   @Input() get multi(): boolean { return this._multi; }
   set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
   private  _multi: boolean = false;

src/cdk/accordion/public-api.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- export {CdkAccordionItem} from './accordion-item';
+export {CdkAccordionItem} from './accordion-item';
 export {CdkAccordion} from './accordion';
 export * from './accordion-module';

src/lib/expansion/expansion-module.ts

@@ -14,8 +14,7 @@ import {A11yModule} from '@angular/cdk/a11y';
 import {MatAccordion} from './accordion';
 import {
   MatExpansionPanel,
-  MatExpansionPanelActionRow,
-  MatExpansionPanelBase
+  MatExpansionPanelActionRow
 } from './expansion-panel';
 import {
   MatExpansionPanelDescription,
@@ -35,7 +34,6 @@ import {
     MatExpansionPanelDescription
   ],
   declarations: [
-    MatExpansionPanelBase,
     MatAccordion,
     MatExpansionPanel,
     MatExpansionPanelActionRow,

src/lib/expansion/expansion-panel-header.ts

@@ -111,9 +111,7 @@ export class MatExpansionPanelHeader implements OnDestroy {
 
   /** Toggles the expanded state of the panel. */
   _toggle(): void {
-    if (!this.panel.disabled) {
-      this.panel.toggle();
-    }
+    this.panel.toggle();
   }
 
   /** Gets whether the panel is expanded. */

src/lib/expansion/expansion-panel.ts

@@ -12,7 +12,6 @@ import {
   ChangeDetectorRef,
   Component,
   Directive,
-  forwardRef,
   Host,
   Input,
   OnChanges,
@@ -23,7 +22,6 @@ import {
 } from '@angular/core';
 import {CdkAccordionItem} from '@angular/cdk/accordion';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
-import {CanDisable, mixinDisabled} from '@angular/material/core';
 import {Subject} from 'rxjs/Subject';
 import {MatAccordion} from './accordion';
 
@@ -33,24 +31,6 @@ export const _CdkAccordionItem = CdkAccordionItem;
 /** Time and timing curve for expansion panel animations. */
 export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)';
 
-// Boilerplate for applying mixins to MatExpansionPanel.
-/** @docs-private */
-@Component({
-  template: '',
-  moduleId: module.id,
-  encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MatExpansionPanelBase extends _CdkAccordionItem {
-  constructor(accordion: MatAccordion,
-              _changeDetectorRef: ChangeDetectorRef,
-              _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
-    super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
-  }
-}
-export const _MatExpansionPanelMixinBase = mixinDisabled(MatExpansionPanelBase);
-
 /** MatExpansionPanel's states. */
 export type MatExpansionPanelState = 'expanded' | 'collapsed';
 
@@ -78,9 +58,6 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
     '[class.mat-expanded]': 'expanded',
     '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
   },
-  providers: [
-    {provide: _MatExpansionPanelMixinBase, useExisting: forwardRef(() => MatExpansionPanel)}
-  ],
   animations: [
     trigger('bodyExpansion', [
       state('collapsed', style({height: '0px', visibility: 'hidden'})),
@@ -89,8 +66,7 @@ export type MatExpansionPanelState = 'expanded' | 'collapsed';
     ]),
   ],
 })
-export class MatExpansionPanel extends _MatExpansionPanelMixinBase
-    implements CanDisable, OnChanges, OnDestroy {
+export class MatExpansionPanel extends _CdkAccordionItem implements OnChanges, OnDestroy {
   /** Whether the toggle indicator should be hidden. */
   @Input() hideToggle: boolean = false;