feat(expansion): add accordion expand/collapse all (#6929)

Implements review feedback:
* missing return type
* updated JS Doc
* internal-use only underscore
* subscription in dedicated function
* decoupled event handling from Material implementaion

Closes #6929

Author: henetiriki

src/demo-app/expansion/expansion-demo.ts

@@ -7,7 +7,7 @@ import {MatAccordion} from '@angular/material';
   styleUrls: ['expansion-demo.css'],
   templateUrl: 'expansion-demo.html',
   encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: true,
+  preserveWhitespaces: false,
 })
 export class ExpansionDemo {
   @ViewChild(MatAccordion) accordion: MatAccordion;

src/lib/expansion/accordion-item.ts

@@ -16,7 +16,16 @@ import {
   ChangeDetectorRef,
 } from '@angular/core';
 import {UniqueSelectionDispatcher} from '@angular/cdk/collections';
+import {CanDisable, mixinDisabled} from '@angular/material/core';
 import {CdkAccordion} from './accordion';
+import {Subscription} from 'rxjs/Subscription';
+
+// Boilerplate for applying mixins to AccordionItem.
+/** @docs-private */
+export class AccordionItemBase {
+  constructor() {}
+}
+export const _AccordionItemMixinBase = mixinDisabled(AccordionItemBase);
 
 /** Used to generate unique ID for each expansion panel. */
 let nextId = 0;
@@ -26,7 +35,9 @@ let nextId = 0;
  * events and attributes needed to be managed by a CdkAccordion parent.
  */
 @Injectable()
-export class AccordionItem implements OnDestroy {
+export class AccordionItem extends _AccordionItemMixinBase
+    implements OnDestroy, CanDisable {
+  private _expandCollapseAllSubscription = Subscription.EMPTY;
   /** Event emitted every time the AccordionItem is closed. */
   @Output() closed = new EventEmitter<void>();
   /** Event emitted every time the AccordionItem is opened. */
@@ -68,18 +79,25 @@ export class AccordionItem implements OnDestroy {
   constructor(@Optional() public accordion: CdkAccordion,
               private _changeDetectorRef: ChangeDetectorRef,
               protected _expansionDispatcher: UniqueSelectionDispatcher) {
+    super();
     this._removeUniqueSelectionListener =
       _expansionDispatcher.listen((id: string, accordionId: string) => {
         if (this.accordion && !this.accordion.multi &&
             this.accordion.id === accordionId && this.id !== id) {
           this.expanded = false;
         }
       });
+
+    // When an accordion item is hosted in an accordion, subscribe to the expand/collapse subject.
+    if (this.accordion) {
+      this._expandCollapseAllSubscription = this._subscribeToExpandCollapseAllActions();
+    }
   }
 
   /** Emits an event for the accordion item being destroyed. */
   ngOnDestroy() {
     this.destroyed.emit();
+    this._expandCollapseAllSubscription.unsubscribe();
     this._removeUniqueSelectionListener();
   }
 
@@ -97,4 +115,14 @@ export class AccordionItem implements OnDestroy {
   open(): void {
     this.expanded = true;
   }
+
+  _subscribeToExpandCollapseAllActions(): Subscription {
+    return this.accordion._expandCollapseAllActions
+        .subscribe(expanded => {
+          // Only change state if item is enabled
+          if (!this.disabled) {
+            this.expanded = expanded;
+          }
+        });
+  }
 }

src/lib/expansion/accordion.ts

@@ -27,8 +27,8 @@ export class CdkAccordion {
   /** A readonly id value to use for unique selection coordination. */
   readonly id = `cdk-accordion-${nextId++}`;
 
-  /** Stream that emits when expandAll or collapseAll is triggered. */
-  readonly expandCollapseAllSubject: Subject<boolean> = new Subject<boolean>();
+  /** Stream that emits true/false when expandAll/collapseAll is triggered. */
+  readonly _expandCollapseAllActions: Subject<boolean> = new Subject<boolean>();
 
   /** Whether the accordion should allow multiple expanded accordion items simultaneously. */
   @Input() get multi(): boolean { return this._multi; }
@@ -51,22 +51,22 @@ export class CdkAccordion {
   @Input() displayMode: MatAccordionDisplayMode = 'default';
 
   /**
-   * Expands all enabled expansion panels in an accordion where multi is enabled
+   * Expands all enabled expansion panels in an accordion where multi is enabled.
    */
-  expandAll() {
+  expandAll(): void {
     this._expandCollapseAll(true);
   }
 
   /**
-   * Collapses all enabled expansion panels in an accordion where multi is enabled
+   * Collapses all enabled expansion panels in an accordion where multi is enabled.
    */
-  collapseAll() {
+  collapseAll(): void {
     this._expandCollapseAll(false);
   }
 
-  _expandCollapseAll(expanded: boolean) {
+  _expandCollapseAll(expanded: boolean): void {
     if (this.multi) {
-      this.expandCollapseAllSubject.next(expanded);
+      this._expandCollapseAllActions.next(expanded);
     }
   }
 }

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

@@ -83,7 +83,6 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MatExpansionPanel} from './expansion-p
 })
 export class MatExpansionPanelHeader implements OnDestroy {
   private _parentChangeSubscription = Subscription.EMPTY;
-  private _expandCollapseAllSubscription = Subscription.EMPTY;
 
   constructor(
     renderer: Renderer2,
@@ -102,17 +101,6 @@ export class MatExpansionPanelHeader implements OnDestroy {
     .subscribe(() => this._changeDetectorRef.markForCheck());
 
     _focusMonitor.monitor(_element.nativeElement, renderer, false);
-
-    // When a panel is hosted in an accordion, subscribe to the expand/collapse subject
-    if (this.panel.accordion) {
-      this._expandCollapseAllSubscription =
-        this.panel.accordion.expandCollapseAllSubject.subscribe((expanded: boolean) => {
-          // Only toggle if current state is not the intended state
-          if (!!this._isExpanded() !== expanded) {
-            this._toggle();
-          }
-        });
-    }
   }
 
   /** Height of the header while the panel is expanded. */
@@ -164,7 +152,6 @@ export class MatExpansionPanelHeader implements OnDestroy {
 
   ngOnDestroy() {
     this._parentChangeSubscription.unsubscribe();
-    this._expandCollapseAllSubscription.unsubscribe();
     this._focusMonitor.stopMonitoring(this._element.nativeElement);
   }
 }