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,52 @@
+<h1>Single Expansion Panel</h1>
+<md-expansion-panel class="md-expansion-demo-width" #myPanel>
+  <md-expansion-panel-header>
+    <mat-panel-description>This is a panel description.</mat-panel-description>
+    <mat-panel-title>Panel Title</mat-panel-title>
+  </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);
+    }
+
+    .mat-expansion-panel-header-title {
+      color: mat-color($foreground, text);
+    }
+
+    .mat-expansion-panel-header-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,56 @@
+import {Output, EventEmitter, Input, OnDestroy, Optional, Host} from '@angular/core';
+import {UniqueSelectionDispatcher} from '../core';
+import {CdkAccordion} from './accordion';
+
+/** 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>();
+  /** The unique MdAccordianChild id. */
+  readonly id = `cdk-accordion-child-${nextId++}`;
+  /** Whether the MdAccordianChild is expanded. */
+  @Input() get expanded(): boolean { return this._expanded; }
+  set expanded(expanded: boolean) {
+    // Only emit events and update the internal value if the value changes.
+    if (this._expanded !== expanded) {
+      this._expanded = expanded;
+      if (expanded) {
+        this.opened.emit();
+        /**
+         * In the unique selection dispatcher, the id parameter is the id of the CdkAccordonItem,
+         * the name value is the id of the accordion.
+         */
+        let accordionId = this.accordion ? this.accordion.id : this.id;
+        this._uniqueSelectionDispatcher.notify(this.id, accordionId);
+      } else {
+        this.closed.emit();
+      }
+    }
+  }
+  private _expanded: boolean;
+
+  constructor(@Optional() @Host() public accordion: CdkAccordion,
+              protected _uniqueSelectionDispatcher: UniqueSelectionDispatcher) {
+     _uniqueSelectionDispatcher.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 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,39 @@
+import {Directive, Input} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
+import {coerceBooleanProperty} from '../core/coercion/boolean-property';
+import 'rxjs/add/operator/takeUntil';
+
+export type CdkAccordionDisplayMode = 'default' | 'flat';
+
+/** Unique ID counter */
+let nextId = 0;
+
+/**
+ * Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
+ */
+@Directive({
+  selector: '[cdk-accordion]',
+})
+export class CdkAccordion {
+  /** A readonly id value to use for unique selection coordination. */
+  readonly id = `cdk-accordion-${nextId++}`;
+
+  /** Whether the expansion indicator should be hidden. */
+  @Input() get hideToggle(): boolean { return this._hideToggle; }
+  set hideToggle(show: boolean) { this._hideToggle = coerceBooleanProperty(show); }
+  private  _hideToggle: boolean = false;
+
+  /** Whether the panel set should use flat styling. */
+  @Input() displayMode: CdkAccordionDisplayMode = 'default';
+
+  /** Whether the panel set should allow multiple open panels. */
+  @Input() get multi(): boolean { return this._multi; }
+  set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
+  private  _multi: boolean = false;
+}

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

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