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

Refactors expand/collapse all after accordion item moved to CDK.

Closes #6929

Author: henetiriki

src/cdk/accordion/accordion-item.ts

@@ -72,12 +72,12 @@ export class CdkAccordionItem implements OnDestroy {
               private _changeDetectorRef: ChangeDetectorRef,
               protected _expansionDispatcher: UniqueSelectionDispatcher) {
     this._removeUniqueSelectionListener =
-        _expansionDispatcher.listen((id: string, accordionId: string) => {
-          if (this.accordion && !this.accordion.multi &&
-              this.accordion.id === accordionId && this.id !== id) {
-            this.expanded = false;
-          }
-        });
+      _expansionDispatcher.listen((id: string, accordionId: string) => {
+        if (this.accordion && !this.accordion.multi &&
+            this.accordion.id === accordionId && this.id !== id) {
+          this.expanded = false;
+        }
+      });
   }
 
   /** Emits an event for the accordion item being destroyed. */

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/demo-app/expansion/expansion-demo.html

@@ -41,7 +41,7 @@ <h1>matAccordion</h1>
   </mat-radio-group>
   <p>Accordion Actions <sup>('Multi Expansion' mode only)</sup></p>
   <div>
-    <button mat-button (click)="accordion.expandAll()" [disabled]="!multi">Expand All</button>&nbsp;
+    <button mat-button (click)="accordion.expandAll()" [disabled]="!multi">Expand All</button>
     <button mat-button (click)="accordion.collapseAll()" [disabled]="!multi">Collapse All</button>
   </div>
   <p>Accordion Panel(s)</p>

src/lib/expansion/accordion.ts

@@ -9,6 +9,7 @@
 import {Directive, Input} from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {CdkAccordion} from '@angular/cdk/accordion';
+import {Subject} from 'rxjs/Subject';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _CdkAccordion = CdkAccordion;
@@ -27,6 +28,9 @@ export type MatAccordionDisplayMode = 'default' | 'flat';
   }
 })
 export class MatAccordion extends _CdkAccordion {
+  /** Stream that emits true/false when expandAll/collapseAll is triggered. */
+  readonly _expandCollapseAllActions: Subject<boolean> = new Subject<boolean>();
+
   /** Whether the expansion indicator should be hidden. */
   @Input() get hideToggle(): boolean { return this._hideToggle; }
   set hideToggle(show: boolean) { this._hideToggle = coerceBooleanProperty(show); }
@@ -35,10 +39,30 @@ export class MatAccordion extends _CdkAccordion {
   /**
    * The display mode used for all expansion panels in the accordion. Currently two display
    * modes exist:
-   *   default - a gutter-like spacing is placed around any expanded panel, placing the expanded
+   *  default - a gutter-like spacing is placed around any expanded panel, placing the expanded
    *     panel at a different elevation from the reset of the accordion.
    *  flat - no spacing is placed around expanded panels, showing all panels at the same
    *     elevation.
    */
   @Input() displayMode: MatAccordionDisplayMode = 'default';
+
+  /**
+   * Expands all enabled expansion panels in an accordion where multi is enabled.
+   */
+  expandAll(): void {
+    this._expandCollapseAll(true);
+  }
+
+  /**
+   * Collapses all enabled expansion panels in an accordion where multi is enabled.
+   */
+  collapseAll(): void {
+    this._expandCollapseAll(false);
+  }
+
+  _expandCollapseAll(expanded: boolean): void {
+    if (this.multi) {
+      this._expandCollapseAllActions.next(expanded);
+    }
+  }
 }

src/lib/expansion/expansion-panel.ts

@@ -25,6 +25,7 @@ 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 {Subscription} from 'rxjs/Subscription';
 import {MatAccordion} from './accordion';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
@@ -90,6 +91,8 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
 })
 export class MatExpansionPanel extends _MatExpansionPanelMixinBase
     implements CanDisable, OnChanges, OnDestroy {
+  private _expandCollapseAllSubscription = Subscription.EMPTY;
+
   /** Whether the toggle indicator should be hidden. */
   @Input() hideToggle: boolean = false;
 
@@ -104,6 +107,11 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase
               _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
     super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher);
     this.accordion = accordion;
+
+    // When an expansion panel is hosted in an accordion, subscribe to the expand/collapse subject.
+    if (this.accordion) {
+      this._expandCollapseAllSubscription = this._subscribeToExpandCollapseAllActions();
+    }
   }
 
   /** Whether the expansion indicator should be hidden. */
@@ -133,6 +141,17 @@ export class MatExpansionPanel extends _MatExpansionPanelMixinBase
 
   ngOnDestroy() {
     this._inputChanges.complete();
+    this._expandCollapseAllSubscription.unsubscribe();
+  }
+
+  _subscribeToExpandCollapseAllActions(): Subscription {
+    return this.accordion._expandCollapseAllActions
+        .subscribe(expanded => {
+          // Only change state if item is enabled
+          if (!this.disabled) {
+            this.expanded = expanded;
+          }
+        });
   }
 }
 

src/material-examples/example-module.ts

@@ -521,7 +521,7 @@ export const EXAMPLE_COMPONENTS = {
     selectorName: null
   },
   'select-no-ripple': {
-    title: 'Select with cno option ripple ',
+    title: 'Select with no option ripple ',
     component: SelectNoRippleExample,
     additionalFiles: null,
     selectorName: null