Create Expansion Panel.

Author: josephperrott

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

@@ -43,6 +43,7 @@ import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
+import {ExpansionDemo} from './expansion/expansion-demo';
 
 
 @NgModule({
@@ -100,6 +101,7 @@ import {StyleDemo} from './style/style-demo';
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    ExpansionDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

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

@@ -26,6 +26,7 @@ export class DemoApp {
     {name: 'Chips', route: 'chips'},
     {name: 'Checkbox', route: 'checkbox'},
     {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

@@ -32,6 +32,7 @@ import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
+import {ExpansionDemo} from '../expansion/expansion-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -66,4 +67,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,60 @@
+<h1>Single Expansion Panel</h1>
+<md-expansion-panel class="md-expansion-demo-width" #myPanel>
+  <md-expansion-panel-header>
+    <span title>{{ myPanel.expanded ? 'My Best Work' : 'Not My Best Work' }}</span>
+    <span description *ngIf="myPanel.expanded">
+      This is a description only shows while expanded.
+    </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)]="showExpandIndicators">Show Indicators</md-slide-toggle>
+    <md-slide-toggle [(ngModel)]="showPanel3">Show Panel 3</md-slide-toggle>
+  </div>
+  <p>Accordion Style</p>
+  <md-radio-group [(ngModel)]="panelStyle">
+    <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 md-accordion [accordionStyle]="panelStyle" [multi]="multi"
+     class="md-expansion-demo-width">
+  <md-expansion-panel #panel1  [showExpandIndicator]="showExpandIndicators">
+    <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 [showExpandIndicator]="showExpandIndicators">
+    <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" [showExpandIndicator]="showExpandIndicators">
+    <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 {
+  panelStyle: string = 'default';
+  multi: boolean = false;
+  showExpandIndicators: boolean = true;
+  showPanel3 = true;
+}

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

@@ -7,6 +7,7 @@
 @import '../../checkbox/checkbox-theme';
 @import '../../chips/chips-theme';
 @import '../../dialog/dialog-theme';
+@import '../../expansion/expansion-theme';
 @import '../../grid-list/grid-list-theme';
 @import '../../icon/icon-theme';
 @import '../../input/input-theme';
@@ -34,6 +35,7 @@
   @include mat-checkbox-theme($theme);
   @include mat-chips-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,12 @@
+@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);
+  }
+}

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('MdAccordion', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [MdExpansionModule],
+      declarations: [
+        SetOfPanels
+      ],
+    });
+    TestBed.compileComponents();
+  }));
+
+  it('should close all other panels upon a panel being opened', () => {
+    let fixture = TestBed.createComponent(SetOfPanels);
+    let panels = fixture.debugElement.queryAll(By.css('.mat-expansion-panel'));
+
+    fixture.componentInstance.firstPanelExpanded = true;
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeTruthy();
+    expect(panels[1].classes['mat-expanded']).toBeFalsy();
+
+    fixture.componentInstance.secondPanelExpanded = true;
+    fixture.detectChanges();
+    expect(panels[0].classes['mat-expanded']).toBeFalsy();
+    expect(panels[1].classes['mat-expanded']).toBeTruthy();
+  });
+
+  it('should allow multiple panels to be open simultaneously', () => {
+    let fixture = TestBed.createComponent(SetOfPanels);
+    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 md-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 SetOfPanels {
+  multi: boolean = false;
+  firstPanelExpanded: boolean = false;
+  secondPanelExpanded: boolean = false;
+}

src/lib/expansion/accordion.ts

@@ -0,0 +1,120 @@
+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';
+
+/** Used to generate unique ID for each expansion panel. */
+let nextId = 0;
+
+export class MdAccordionChild implements OnDestroy {
+  /** Event emitted every time the MdAccordianChild is closed. */
+  @Output() close = new EventEmitter<null>();
+  /** Event emitted every time the MdAccordianChild is opened. */
+  @Output() open = new EventEmitter<null>();
+  /** Event emitted when the MdAccordianChild is destroyed. */
+  @Output() destroy = new EventEmitter<null>();
+  /** Whether the MdAccordianChild is expanded. */
+  expanded: boolean;
+
+  /** The unique MdAccordianChild id. */
+  private _id: number = nextId++;
+  get id(): string { return `md-accordion-child-${this._id}`; }
+  /** Emits an event for the accordion child being destroyed. */
+  ngOnDestroy() {
+    this.destroy.emit();
+  }
+}
+
+@Directive({
+  selector: '[md-accordion], [mat-accordion]',
+})
+export class MdAccordion implements AfterContentInit, OnDestroy {
+  /** Whether the expansion indicator should be shown. */
+  private  _showIndicator: boolean = true;
+  @Input()
+  get showExpandIndicator(): boolean { return this._showIndicator; }
+  set showExpandIndicator(show: boolean) { this._showIndicator = coerceBooleanProperty(show); }
+  /** Whether the panel set should use flat styling. */
+  @Input() accordionStyle: string = 'default';
+  /** Whether the panel set should allow multiple open panels. */
+  private  _multi: boolean = false;
+  @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 _childrenSet: Set<MdAccordionChild> = new Set();
+  /** QueryList of all expansion panels in the expansion panel set. */
+  @ContentChildren(MdAccordionChild) private _children: QueryList<MdAccordionChild>;
+
+  /** Set up event subscriptions for all panels for when they open, closing the other panels. */
+  ngAfterContentInit() {
+    this.registerChildren(this._children);
+    this._children.changes
+      .takeUntil(this._destroySubject)
+      .subscribe((children: QueryList<MdAccordionChild>) => {
+        this.registerChildren(children);
+      });
+  }
+
+  /** Clean up panel subscriptions. */
+  ngOnDestroy() {
+    this._destroySubject.next();
+    this._destroySubject.complete();
+  }
+
+  /** Registers a QueryList of panels. */
+  private registerChildren(panels: QueryList<MdAccordionChild>) {
+    this._children.forEach(panel => this.registerChild(panel));
+  }
+
+  /**
+   * Registers an MdExpansion panel if has not already been registered.  Creates subscriptions
+   * for the open and destroy events for the panel.
+   */
+  private registerChild(child: MdAccordionChild) {
+    // If the accordian child is already in the set, exit method.
+    if (this._childrenSet.has(child)) {
+      return;
+    }
+    // Subscribes to an accordion child's open event emitter to coordinate the expanded states.
+    child.open
+      .takeUntil(this._destroySubject)
+      .subscribe(() => {
+        if (!this.multi) {
+          this._childrenSet.forEach(c => c.expanded = child.id === c.id);
+        }
+      });
+    // Subscribes to an accordian child's destory event emitter to remove the accord child from the
+    // set when appropriate.
+    child.destroy
+      .takeUntil(this._destroySubject)
+      .subscribe(() => this._childrenSet.delete(child));
+    // Adds the accordian child to the set.
+    this._childrenSet.add(child);
+  }
+}

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

@@ -0,0 +1,7 @@
+<span class="mat-content">
+  <ng-content select="[title]"></ng-content>
+  <ng-content select="[description]"></ng-content>
+  <ng-content></ng-content>
+</span>
+<span [@indicatorRotate]="getExpandedState()" *ngIf="getShowExpandIndicator()" 
+      class="mat-expansion-indicator"></span>