Create Expansion Panel.

Author: josephperrott

src/demo-app/demo-app-module.ts

@@ -38,13 +38,15 @@ import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {ExpansionDemo} from './expansion/expansion-demo';
 import {FullscreenOverlayContainer, OverlayContainer} from '@angular/material';
 import {
   MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdCardModule, MdCheckboxModule,
-  MdChipsModule, MdCoreModule, MdDatepickerModule, MdDialogModule, MdGridListModule, MdIconModule,
-  MdInputModule, MdListModule, MdMenuModule, MdNativeDateModule, MdProgressBarModule, MdRadioModule,
-  MdProgressSpinnerModule, MdRippleModule, MdSelectModule, MdSidenavModule, MdSliderModule,
-  MdSlideToggleModule, MdSnackBarModule, MdTabsModule, MdToolbarModule, MdTooltipModule
+  MdChipsModule, MdCoreModule, MdDatepickerModule, MdDialogModule, MdExpansionModule, 
+  MdGridListModule, MdIconModule, MdInputModule, MdListModule, MdMenuModule, MdNativeDateModule,
+  MdProgressBarModule, MdRadioModule, MdProgressSpinnerModule, MdRippleModule, MdSelectModule,
+  MdSidenavModule, MdSliderModule, MdSlideToggleModule, MdSnackBarModule, MdTabsModule,
+  MdToolbarModule, MdTooltipModule
 } from '@angular/material';
 
 /**
@@ -60,6 +62,7 @@ import {
     MdChipsModule,
     MdDatepickerModule,
     MdDialogModule,
+    MdExpansionModule,
     MdGridListModule,
     MdIconModule,
     MdInputModule,
@@ -140,6 +143,7 @@ export class DemoMaterialModule {}
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    ExpansionDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

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

@@ -42,6 +42,7 @@ export class DemoApp {
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Datepicker', route: 'datepicker'},
     {name: 'Dialog', route: 'dialog'},
+    {name: 'Expansion Panel', route: 'expansion'},
     {name: 'Gestures', route: 'gestures'},
     {name: 'Grid List', route: 'grid-list'},
     {name: 'Icon', route: 'icon'},

src/demo-app/demo-app/routes.ts

@@ -33,6 +33,7 @@ import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
+import {ExpansionDemo} from '../expansion/expansion-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -68,4 +69,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
+  {path: 'expansion', component: ExpansionDemo},
 ];

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

@@ -0,0 +1,58 @@
+<h1>Single Expansion Panel</h1>
+<md-expansion-panel class="md-expansion-demo-width" #myPanel>
+  <md-expansion-panel-header>
+    <span class="md-expansion-panel-header-description">This is a panel description.</span>
+    <span class="md-expansion-panel-header-title">Panel Title</span>
+  </md-expansion-panel-header>
+    This is the content text that makes sense here.
+  <div md-action-row>
+    <button md-button (click)="myPanel.expanded = false">CANCEL</button>
+    <button md-button>SAVE</button>
+  </div>
+</md-expansion-panel>
+<br>
+<h1>Accordion</h1>
+<div>
+  <p>Accordion Options</p>
+  <div>
+    <md-slide-toggle [(ngModel)]="multi">Allow Multi Expansion</md-slide-toggle>
+    <md-slide-toggle [(ngModel)]="hideToggle">Hide Indicators</md-slide-toggle>
+    <md-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</md-slide-toggle>
+  </div>
+  <p>Accordion Style</p>
+  <md-radio-group [(ngModel)]="displayMode">
+    <md-radio-button value="default">Default</md-radio-button>
+    <md-radio-button value="flat">Flat</md-radio-button>
+  </md-radio-group>
+  <p>Accordion Panel(s)</p>
+  <div>
+    <md-checkbox [(ngModel)]="panel1.expanded">Panel 1</md-checkbox>
+    <md-checkbox [(ngModel)]="panel2.expanded">Panel 2</md-checkbox>
+  </div>
+</div>
+<br>
+<div cdk-accordion [displayMode]="displayMode" [multi]="multi"
+     class="md-expansion-demo-width">
+  <md-expansion-panel #panel1  [hideToggle]="hideToggle">
+    <md-expansion-panel-header>
+      Section 1
+    </md-expansion-panel-header>
+    <p>This is the content text that makes sense here.</p>
+  </md-expansion-panel>
+  <md-expansion-panel #panel2 [hideToggle]="hideToggle">
+    <md-expansion-panel-header>
+      Section 2
+    </md-expansion-panel-header>
+    <p>This is the content text that makes sense here.</p>
+  </md-expansion-panel>
+  <md-expansion-panel #panel3 *ngIf="showPanel3" [hideToggle]="hideToggle">
+    <md-expansion-panel-header>
+      Section 3
+    </md-expansion-panel-header>
+    <md-checkbox #showButtons>Reveal Buttons Below</md-checkbox>
+    <div md-action-row *ngIf="showButtons.checked">
+      <button md-button (click)="panel2.expanded = true">OPEN SECTION 2</button>
+      <button md-button (click)="panel3.expanded = false">CLOSE</button>
+    </div>
+  </md-expansion-panel>
+</div>

src/demo-app/expansion/expansion-demo.scss

@@ -0,0 +1,3 @@
+.md-expansion-demo-width {
+  width: 600px;
+}

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

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

src/lib/core/theming/_all-theme.scss

@@ -8,6 +8,7 @@
 @import '../../chips/chips-theme';
 @import '../../datepicker/datepicker-theme';
 @import '../../dialog/dialog-theme';
+@import '../../expansion/expansion-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
 @import '../../input/input-theme';
@@ -36,6 +37,7 @@
   @include mat-chips-theme($theme);
   @include mat-datepicker-theme($theme);
   @include mat-dialog-theme($theme);
+  @include mat-expansion-panel-theme($theme);
   @include mat-grid-list-theme($theme);
   @include mat-icon-theme($theme);
   @include mat-input-theme($theme);

src/lib/expansion/_expansion-theme.scss

@@ -0,0 +1,36 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+
+@mixin mat-expansion-panel-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-expansion-panel {
+    background: mat-color($background, card);
+    color: mat-color($foreground, base);
+  }
+
+  [mat-action-row],
+  [md-action-row] {
+    border-top-color: mat-color($foreground, divider);
+  }
+
+  .mat-expansion-panel-header {
+    &:focus, 
+    &:hover {
+      background: mat-color($background, hover);
+    }
+
+    .title {
+      color: mat-color($foreground, text);
+    }
+
+    .description {
+      color: mat-color($foreground, secondary-text);
+    }
+
+    .mat-expansion-indicator::after {
+      color: mat-color($foreground, secondary-text);
+    }
+  }
+}

src/lib/expansion/accordion-item.ts

@@ -0,0 +1,27 @@
+import {Output, EventEmitter, OnDestroy} from '@angular/core';
+
+/** Used to generate unique ID for each expansion panel. */
+let nextId = 0;
+
+
+/**
+ * An abstract class to be extended and decorated as a component.  Sets up all
+ * events and attributes needed to be managed by a CdkAccordion parent.
+ */
+export abstract class CdkAccordionItem implements OnDestroy {
+  /** Event emitted every time the MdAccordianChild is closed. */
+  @Output() closed = new EventEmitter<void>();
+  /** Event emitted every time the MdAccordianChild is opened. */
+  @Output() opened = new EventEmitter<void>();
+  /** Event emitted when the MdAccordianChild is destroyed. */
+  @Output() destroyed = new EventEmitter<void>();
+  /** Whether the MdAccordianChild is expanded. */
+  expanded: boolean;
+  /** The unique MdAccordianChild id. */
+  readonly id = `cdk-accordion-child-${nextId++}`;
+
+  /** Emits an event for the accordion child being destroyed. */
+  ngOnDestroy() {
+    this.destroyed.emit();
+  }
+}

src/lib/expansion/accordion.spec.ts

@@ -0,0 +1,62 @@
+import {async, TestBed} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MdExpansionModule} from './index';
+
+
+describe('CdkAccordion', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdExpansionModule],
+      declarations: [
+        SetOfItems
+      ],
+    });
+    TestBed.compileComponents();
+  }));
+
+  it('should ensure only one item is expanded at a time', () => {
+    let fixture = TestBed.createComponent(SetOfItems);
+    let items = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
+
+    fixture.componentInstance.firstPanelExpanded = true;
+    fixture.detectChanges();
+    expect(items[0].classes['mat-expanded']).toBeTruthy();
+    expect(items[1].classes['mat-expanded']).toBeFalsy();
+
+    fixture.componentInstance.secondPanelExpanded = true;
+    fixture.detectChanges();
+    expect(items[0].classes['mat-expanded']).toBeFalsy();
+    expect(items[1].classes['mat-expanded']).toBeTruthy();
+  });
+
+  it('should allow multiple items to be expanded simultaneously', () => {
+    let fixture = TestBed.createComponent(SetOfItems);
+    let panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
+
+    fixture.componentInstance.multi = true;
+    fixture.componentInstance.firstPanelExpanded = true;
+    fixture.componentInstance.secondPanelExpanded = true;
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeTruthy();
+    expect(panels[1].classes['mat-expanded']).toBeTruthy();
+  });
+});
+
+
+@Component({template: `
+  <div cdk-accordion [multi]="multi">
+    <md-expansion-panel [expanded]="firstPanelExpanded">
+      <md-expansion-panel-header>Summary</md-expansion-panel-header>
+      <p>Content</p>
+    </md-expansion-panel>
+    <md-expansion-panel [expanded]="secondPanelExpanded">
+      <md-expansion-panel-header>Summary</md-expansion-panel-header>
+      <p>Content</p>
+    </md-expansion-panel>
+  </div>`})
+class SetOfItems {
+  multi: boolean = false;
+  firstPanelExpanded: boolean = false;
+  secondPanelExpanded: boolean = false;
+}

src/lib/expansion/accordion.ts

@@ -0,0 +1,109 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  Host,
+  Input,
+  Output,
+  ViewEncapsulation,
+  AfterContentInit,
+  OnDestroy,
+  ContentChildren,
+  QueryList,
+  Optional,
+  forwardRef,
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
+import {coerceBooleanProperty} from '../core/coercion/boolean-property';
+import {Subscription} from 'rxjs/Subscription';
+import {Subject} from 'rxjs/Subject';
+import 'rxjs/add/operator/takeUntil';
+import {CdkAccordionItem} from './accordion-item';
+
+export type CdkAccordionDisplayMode = 'default' | 'flat';
+
+
+/**
+ * Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
+ */
+@Directive({
+  selector: '[cdk-accordion]',
+})
+export class CdkAccordion implements AfterContentInit, OnDestroy {
+  private  _hideToggle: boolean = false;
+  /** Whether the expansion indicator should be hidden. */
+  @Input() get hideToggle(): boolean { return this._hideToggle; }
+  set hideToggle(show: boolean) { this._hideToggle = coerceBooleanProperty(show); }
+
+  /** Whether the panel set should use flat styling. */
+  @Input() displayMode: CdkAccordionDisplayMode = 'default';
+
+  private  _multi: boolean = false;
+  /** Whether the panel set should allow multiple open panels. */
+  @Input() get multi(): boolean { return this._multi; }
+  set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
+
+  /** A subject to be completed on destroy to clean up subscriptions. */
+  private _destroySubject = new Subject();
+
+  /** A list of subscriptions for panel open events. */
+  private _itemsSet: Map<CdkAccordionItem, boolean> = new Map();
+
+  /** QueryList of all expansion panels in the expansion panel set. */
+  @ContentChildren(CdkAccordionItem) private _items: QueryList<CdkAccordionItem>;
+
+  /** Set up event subscriptions for all panels for when they open, closing the other panels. */
+  ngAfterContentInit() {
+    this._registerItems(this._items);
+    // Use takeUntil to properly clean up listening to the QueryList changes observable.
+    this._items.changes
+      .takeUntil(this._destroySubject)
+      .subscribe((items: QueryList<CdkAccordionItem>) => this._registerItems(items));
+  }
+
+  /** Clean up panel subscriptions. */
+  ngOnDestroy() {
+    this._destroySubject.next();
+    this._destroySubject.complete();
+  }
+
+  /** Registers a QueryList of panels. */
+  private _registerItems(panels: QueryList<CdkAccordionItem>) {
+    this._items.forEach(panel => this._registerItem(panel));
+  }
+
+  /**
+   * Registers a CdkAccordionItem panel if has not already been registered.  Creates subscriptions
+   * for the open and destroy events for the panel.
+   */
+  private _registerItem(item: CdkAccordionItem) {
+    // If the accordian item is already in the map, exit method.
+    if (this._itemsSet.has(item)) {
+      return;
+    }
+    // Subscribes to an accordion item's open event emitter to coordinate the expanded states.
+    item.opened
+      .takeUntil(this._destroySubject)
+      .subscribe(() => {
+        if (!this.multi) {
+          this._itemsSet.forEach(
+            (_: boolean, i: CdkAccordionItem) => {
+              i.expanded = (item.id === i.id);
+            });
+        }
+      });
+    // Subscribes to an accordian item's destory event emitter to remove the accord item from the
+    // map when appropriate.
+    item.destroyed
+      .takeUntil(this._destroySubject)
+      .subscribe(() => this._itemsSet.delete(item));
+    // Adds the accordian item to the map.
+    this._itemsSet.set(item, true);
+  }
+}