Create Expansion Panel.

Author: josephperrott

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

@@ -41,6 +41,7 @@ import {DataTableDemo} from './data-table/data-table-demo';
 import {PeopleDatabase} from './data-table/people-database';
 import {DatepickerDemo} from './datepicker/datepicker-demo';
 import {TypographyDemo} from './typography/typography-demo';
+import {ExpansionDemo} from './expansion/expansion-demo';
 import {
   CdkDataTableModule,
   FullscreenOverlayContainer,
@@ -53,6 +54,7 @@ import {
   MdCoreModule,
   MdDatepickerModule,
   MdDialogModule,
+  MdExpansionModule,
   MdGridListModule,
   MdIconModule,
   MdInputModule,
@@ -87,6 +89,7 @@ import {
     MdChipsModule,
     MdDatepickerModule,
     MdDialogModule,
+    MdExpansionModule,
     MdGridListModule,
     MdIconModule,
     MdInputModule,
@@ -170,6 +173,7 @@ export class DemoMaterialModule {}
     FoggyTabContent,
     PlatformDemo,
     TypographyDemo,
+    ExpansionDemo,
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer},

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

@@ -43,6 +43,7 @@ export class DemoApp {
     {name: 'Data Table', route: 'data-table'},
     {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

@@ -35,6 +35,7 @@ import {StyleDemo} from '../style/style-demo';
 import {DatepickerDemo} from '../datepicker/datepicker-demo';
 import {DataTableDemo} from '../data-table/data-table-demo';
 import {TypographyDemo} from '../typography/typography-demo';
+import {ExpansionDemo} from '../expansion/expansion-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -71,5 +72,6 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
-  {path: 'typography', component: TypographyDemo}
+  {path: 'typography', component: TypographyDemo},
+  {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.
+  <md-action-row>
+    <button md-button (click)="myPanel.expanded = false">CANCEL</button>
+    <button md-button>SAVE</button>
+  </md-action-row>
+</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>
+<md-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>
+    <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>
+    </md-action-row>
+  </md-expansion-panel>
+</md-accordion>

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

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

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';
@@ -37,6 +38,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,32 @@
+@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 {
+    border-top-color: mat-color($foreground, divider);
+  }
+
+  .mat-expansion-panel-header:focus, 
+  .mat-expansion-panel-header: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,72 @@
+import {Output, EventEmitter, Input, Injectable, OnDestroy, Optional} 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.
+ */
+@Injectable()
+export class AccordionItem 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._expansionDispatcher.notify(this.id, accordionId);
+      } else {
+        this.closed.emit();
+      }
+    }
+  }
+  private _expanded: boolean;
+
+  constructor(@Optional() public accordion: CdkAccordion,
+              protected _expansionDispatcher: UniqueSelectionDispatcher) {
+     _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. */
+  ngOnDestroy() {
+    this.destroyed.emit();
+  }
+
+  /** Toggles the expanded state of the accordion item. */
+  toggle(): void {
+    this.expanded = !this.expanded;
+  }
+
+  /** Sets the expanded state of the accordion item to false. */
+  close(): void {
+    this.expanded = false;
+  }
+
+  /** Sets the expanded state of the accordion item to true. */
+  open(): void {
+    this.expanded = true;
+  }
+}

src/lib/expansion/accordion.spec.ts

@@ -0,0 +1,66 @@
+import {async, TestBed} from '@angular/core/testing';
+import {Component} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MdExpansionModule} from './index';
+
+
+describe('CdkAccordion', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        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: `
+  <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>
+  </md-accordion>`})
+class SetOfItems {
+  multi: boolean = false;
+  firstPanelExpanded: boolean = false;
+  secondPanelExpanded: boolean = false;
+}

src/lib/expansion/accordion.ts

@@ -0,0 +1,50 @@
+import {Directive, Input} from '@angular/core';
+import {coerceBooleanProperty} from '../core/coercion/boolean-property';
+
+/** MdAccordion's display modes. */
+export type MdAccordionDisplayMode = '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 accordion should allow multiple expanded accordion items simulateously. */
+  @Input() get multi(): boolean { return this._multi; }
+  set multi(multi: boolean) { this._multi = coerceBooleanProperty(multi); }
+  private  _multi: boolean = false;
+
+  /** 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;
+
+  /**
+   * 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
+   *     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: MdAccordionDisplayMode = 'default';
+}
+
+/**
+ * Directive for a Material Design Accordion.
+ */
+@Directive({
+  selector: 'mat-accordion, md-accordion',
+  host: {
+    class: 'mat-accordion'
+  }
+})
+export class MdAccordion extends CdkAccordion {}

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>