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

Add expandAll()/collapseAll() to perform expand/collapse all on multiple expandable accordions.

Closes #6929

Author: henetiriki

src/demo-app/expansion/expansion-demo.html

@@ -39,6 +39,11 @@ <h1>matAccordion</h1>
     <mat-radio-button value="default">Default</mat-radio-button>
     <mat-radio-button value="flat">Flat</mat-radio-button>
   </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.collapseAll()" [disabled]="!multi">Collapse All</button>
+  </div>
   <p>Accordion Panel(s)</p>
   <div>
     <mat-checkbox [(ngModel)]="panel1.expanded">Panel 1</mat-checkbox>

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

@@ -1,14 +1,17 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {MatAccordion} from '@angular/material';
 
 @Component({
   moduleId: module.id,
   selector: 'expansion-demo',
   styleUrls: ['expansion-demo.css'],
   templateUrl: 'expansion-demo.html',
   encapsulation: ViewEncapsulation.None,
-  preserveWhitespaces: false,
+  preserveWhitespaces: true,
 })
 export class ExpansionDemo {
+  @ViewChild(MatAccordion) accordion: MatAccordion;
+
   displayMode: string = 'default';
   multi = false;
   hideToggle = false;

src/lib/expansion/accordion.spec.ts

@@ -1,9 +1,8 @@
 import {async, TestBed} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatExpansionModule} from './index';
-
+import {MatExpansionModule, MatAccordion} from './index';
 
 describe('CdkAccordion', () => {
   beforeEach(async(() => {
@@ -45,6 +44,45 @@ describe('CdkAccordion', () => {
     expect(panels[0].classes['mat-expanded']).toBeTruthy();
     expect(panels[1].classes['mat-expanded']).toBeTruthy();
   });
+
+  it('should expand or collapse all enabled items', () => {
+    const fixture = TestBed.createComponent(SetOfItems);
+    const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
+
+    fixture.componentInstance.multi = true;
+    fixture.componentInstance.secondPanelExpanded = true;
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeFalsy();
+    expect(panels[1].classes['mat-expanded']).toBeTruthy();
+
+    fixture.componentInstance.accordion.expandAll();
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeTruthy();
+    expect(panels[1].classes['mat-expanded']).toBeTruthy();
+
+    fixture.componentInstance.accordion.collapseAll();
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeFalsy();
+    expect(panels[1].classes['mat-expanded']).toBeFalsy();
+  });
+
+  it('should not expand or collapse disabled items', () => {
+    const fixture = TestBed.createComponent(SetOfItems);
+    const panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
+
+    fixture.componentInstance.multi = true;
+    fixture.componentInstance.secondPanelDisabled = true;
+    fixture.detectChanges();
+    fixture.componentInstance.accordion.expandAll();
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeTruthy();
+    expect(panels[1].classes['mat-expanded']).toBeFalsy();
+
+    fixture.componentInstance.accordion.collapseAll();
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeFalsy();
+    expect(panels[1].classes['mat-expanded']).toBeFalsy();
+  });
 });
 
 
@@ -54,13 +92,16 @@ describe('CdkAccordion', () => {
       <mat-expansion-panel-header>Summary</mat-expansion-panel-header>
       <p>Content</p>
     </mat-expansion-panel>
-    <mat-expansion-panel [expanded]="secondPanelExpanded">
+    <mat-expansion-panel [expanded]="secondPanelExpanded" [disabled]="secondPanelDisabled">
       <mat-expansion-panel-header>Summary</mat-expansion-panel-header>
       <p>Content</p>
     </mat-expansion-panel>
   </mat-accordion>`})
 class SetOfItems {
+  @ViewChild(MatAccordion) accordion: MatAccordion;
+
   multi: boolean = false;
   firstPanelExpanded: boolean = false;
   secondPanelExpanded: boolean = false;
+  secondPanelDisabled: boolean = false;
 }

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

@@ -83,6 +83,7 @@ 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,
@@ -101,6 +102,17 @@ 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. */
@@ -152,6 +164,7 @@ export class MatExpansionPanelHeader implements OnDestroy {
 
   ngOnDestroy() {
     this._parentChangeSubscription.unsubscribe();
+    this._expandCollapseAllSubscription.unsubscribe();
     this._focusMonitor.stopMonitoring(this._element.nativeElement);
   }
 }

src/material-examples/example-module.ts

@@ -39,6 +39,7 @@ import {DialogContentExampleDialog,DialogContentExample} from './dialog-content/
 import {DialogDataExampleDialog,DialogDataExample} from './dialog-data/dialog-data-example';
 import {DialogElementsExampleDialog,DialogElementsExample} from './dialog-elements/dialog-elements-example';
 import {DialogOverviewExampleDialog,DialogOverviewExample} from './dialog-overview/dialog-overview-example';
+import {ExpansionExpandCollapseAllExample} from './expansion-expand-collapse-all/expansion-expand-collapse-all-example';
 import {ExpansionOverviewExample} from './expansion-overview/expansion-overview-example';
 import {ExpansionStepsExample} from './expansion-steps/expansion-steps-example';
 import {MyTelInput,FormFieldCustomControlExample} from './form-field-custom-control/form-field-custom-control-example';
@@ -267,6 +268,12 @@ export const EXAMPLE_COMPONENTS = {
     additionalFiles: ["dialog-overview-example-dialog.html"],
     selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog'
   },
+  'expansion-expand-collapse-all': {
+    title: 'Accordion with expand/collapse all',
+    component: ExpansionExpandCollapseAllExample,
+    additionalFiles: null,
+    selectorName: null
+  },
   'expansion-overview': {
     title: 'Basic expansion panel',
     component: ExpansionOverviewExample,
@@ -716,6 +723,7 @@ export const EXAMPLE_LIST = [
   DialogDataExampleDialog,DialogDataExample,
   DialogElementsExampleDialog,DialogElementsExample,
   DialogOverviewExampleDialog,DialogOverviewExample,
+  ExpansionExpandCollapseAllExample,
   ExpansionOverviewExample,
   ExpansionStepsExample,
   MyTelInput,FormFieldCustomControlExample,

src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.css

@@ -0,0 +1,13 @@
+.example-action-buttons {
+  padding-bottom: 20px;
+}
+
+.example-headers-align .mat-expansion-panel-header-title,
+.example-headers-align .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+.example-headers-align .mat-expansion-panel-header-description {
+  justify-content: space-between;
+  align-items: center;
+}

src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.html

@@ -0,0 +1,60 @@
+<div class="example-action-buttons">
+  <button mat-button (click)="accordion.expandAll()">Expand All</button>
+  <button mat-button (click)="accordion.collapseAll()">Collapse All</button>
+</div>
+<mat-accordion class="example-headers-align" [multi]="true">
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Personal data
+      </mat-panel-title>
+      <mat-panel-description>
+        Type your name and age
+        <mat-icon>account_circle</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="First name">
+    </mat-form-field>
+
+    <mat-form-field>
+      <input matInput type="number" min="1" placeholder="Age">
+    </mat-form-field>
+
+  </mat-expansion-panel>
+
+  <mat-expansion-panel [disabled]="true">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Destination
+      </mat-panel-title>
+      <mat-panel-description>
+        Type the country name
+        <mat-icon>map</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="Country">
+    </mat-form-field>
+  </mat-expansion-panel>
+
+  <mat-expansion-panel>
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        Day of the trip
+      </mat-panel-title>
+      <mat-panel-description>
+        Inform the date you wish to travel
+        <mat-icon>date_range</mat-icon>
+      </mat-panel-description>
+    </mat-expansion-panel-header>
+
+    <mat-form-field>
+      <input matInput placeholder="Date" [matDatepicker]="picker" (focus)="picker.open()" readonly>
+    </mat-form-field>
+    <mat-datepicker #picker></mat-datepicker>
+  </mat-expansion-panel>
+
+</mat-accordion>

src/material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts

@@ -0,0 +1,14 @@
+import {Component, ViewChild} from '@angular/core';
+import {MatAccordion} from '@angular/material';
+
+/**
+ * @title Accordion with expand/collapse all
+ */
+@Component({
+  selector: 'expansion-toggle-all-example',
+  templateUrl: 'expansion-expand-collapse-all-example.html',
+  styleUrls: ['expansion-expand-collapse-all-example.css']
+})
+export class ExpansionExpandCollapseAllExample {
+  @ViewChild(MatAccordion) accordion: MatAccordion;
+}