From 04d115225f10cf0c7eef0d154e509bb782a3bfe5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Gr=C3=A9gory=20Copin?= Date: Fri, 18 Mar 2016 15:04:04 +0100 Subject: [PATCH] feat: Data table component with selectable rows refactor: selectable is now activate by an @Input instead of a class feat: selectable embed value and fire events on change refactor: code review feat: add some tests about selecatable data table refactor: revamp all selectable process to follow observable pattern --- examples/all.ts | 3 + .../components/data_table/basic_usage.html | 22 ++ examples/components/data_table/basic_usage.ts | 15 ++ examples/components/data_table/readme.md | 1 + .../data_table/selectable_usage.html | 22 ++ .../components/data_table/selectable_usage.ts | 19 ++ ng2-material/all.ts | 6 +- ng2-material/components.scss | 1 + ng2-material/components/data_table/README.md | 40 +++ .../components/data_table/data_table.scss | 46 ++++ .../components/data_table/data_table.ts | 71 ++++++ .../components/data_table/data_table_tr.ts | 72 ++++++ test/components/data_table/data_table_spec.ts | 143 +++++++++++ tsconfig.build.json | 4 +- tsconfig.json | 229 +++++++++--------- 15 files changed, 580 insertions(+), 114 deletions(-) create mode 100644 examples/components/data_table/basic_usage.html create mode 100644 examples/components/data_table/basic_usage.ts create mode 100644 examples/components/data_table/readme.md create mode 100644 examples/components/data_table/selectable_usage.html create mode 100644 examples/components/data_table/selectable_usage.ts create mode 100644 ng2-material/components/data_table/README.md create mode 100644 ng2-material/components/data_table/data_table.scss create mode 100644 ng2-material/components/data_table/data_table.ts create mode 100644 ng2-material/components/data_table/data_table_tr.ts create mode 100644 test/components/data_table/data_table_spec.ts diff --git a/examples/all.ts b/examples/all.ts index d24f6fb8..c45b5113 100644 --- a/examples/all.ts +++ b/examples/all.ts @@ -6,6 +6,8 @@ import CardBasicUsage from "./components/card/basic_usage"; import CardInlineActions from "./components/card/inline_actions"; import ButtonBasicUsage from "./components/button/basic_usage"; import CardActionButtons from "./components/card/action_buttons"; +import DataTableBasicUsage from './components/data_table/basic_usage'; +import DataTableSelectableUsage from './components/data_table/selectable_usage'; import DialogBasicUsage from "./components/dialog/basic_usage"; import ToolbarBasicUsage from "./components/toolbar/basic_usage"; import ToolbarScrollShrink from "./components/toolbar/scroll_shrink"; @@ -30,6 +32,7 @@ export const DEMO_DIRECTIVES: Type[] = CONST_EXPR([ CardBasicUsage, CardInlineActions, CardActionButtons, ButtonBasicUsage, CheckboxBasicUsage, CheckboxSyncing, + DataTableBasicUsage, DataTableSelectableUsage, DialogBasicUsage, InputBasicUsage, InputFormBuilder, diff --git a/examples/components/data_table/basic_usage.html b/examples/components/data_table/basic_usage.html new file mode 100644 index 00000000..6e58f2c9 --- /dev/null +++ b/examples/components/data_table/basic_usage.html @@ -0,0 +1,22 @@ + +
+ + + + + Material + Quantity + Unit price + + + + + {{ material.name }} + {{ material.quantity }} + {{ material.price }} + + + + +
+ diff --git a/examples/components/data_table/basic_usage.ts b/examples/components/data_table/basic_usage.ts new file mode 100644 index 00000000..59223b95 --- /dev/null +++ b/examples/components/data_table/basic_usage.ts @@ -0,0 +1,15 @@ +import {Component} from 'angular2/core'; +import {MATERIAL_DIRECTIVES} from 'ng2-material/all'; + +@Component({ + selector: 'data-table-basic-usage', + templateUrl: 'examples/components/data_table/basic_usage.html', + directives: [MATERIAL_DIRECTIVES] +}) +export default class DataTableBasicUsage { + materials: Array = [ + {'id': 1, 'name': 'Acrylic (Transparent)', 'quantity': '25', 'price': '$2.90'}, + {'id': 2, 'name': 'Plywood (Birch)', 'quantity': '50', 'price': '$1.25'}, + {'id': 3, 'name': 'Laminate (Gold on Blue)', 'quantity': '10', 'price': '$2.35'} + ] +} diff --git a/examples/components/data_table/readme.md b/examples/components/data_table/readme.md new file mode 100644 index 00000000..65c13133 --- /dev/null +++ b/examples/components/data_table/readme.md @@ -0,0 +1 @@ +An enhanced version of data table, with selectable row (in progress), sortable column (todo) and auto-truncate of header's label (todo) diff --git a/examples/components/data_table/selectable_usage.html b/examples/components/data_table/selectable_usage.html new file mode 100644 index 00000000..19641660 --- /dev/null +++ b/examples/components/data_table/selectable_usage.html @@ -0,0 +1,22 @@ + +
+ + + + + Material + Quantity + Unit price + + + + + {{ material.name }} + {{ material.quantity }} + {{ material.price }} + + + + +
+ diff --git a/examples/components/data_table/selectable_usage.ts b/examples/components/data_table/selectable_usage.ts new file mode 100644 index 00000000..7497bd3e --- /dev/null +++ b/examples/components/data_table/selectable_usage.ts @@ -0,0 +1,19 @@ +import {Component} from 'angular2/core'; +import {MATERIAL_DIRECTIVES} from 'ng2-material/all'; + +@Component({ + selector: 'data-table-selectable-usage', + templateUrl: 'examples/components/data_table/selectable_usage.html', + directives: [MATERIAL_DIRECTIVES] +}) +export default class DataTableSelectableUsage { + materials: Array = [ + {'id': 1, 'name': 'Acrylic (Transparent)', 'quantity': '25', 'price': '$2.90'}, + {'id': 2, 'name': 'Plywood (Birch)', 'quantity': '50', 'price': '$1.25'}, + {'id': 3, 'name': 'Laminate (Gold on Blue)', 'quantity': '10', 'price': '$2.35'} + ]; + + logEvent(datas) { + console.log('Event fired', datas); + } +} diff --git a/ng2-material/all.ts b/ng2-material/all.ts index 065e321c..09fbac3f 100644 --- a/ng2-material/all.ts +++ b/ng2-material/all.ts @@ -2,6 +2,7 @@ import {CONST_EXPR, Type} from "angular2/src/facade/lang"; import {MdAnchor, MdButton} from "./components/button/button"; import {MdCheckbox} from "./components/checkbox/checkbox"; import {MdContent} from "./components/content/content"; +import {MdDataTable, MdDataTableTr} from './components/data_table/data_table'; import {MdDialog} from "./components/dialog/dialog"; import {MdDivider} from "./components/divider/divider"; import {MdIcon} from "./components/icon/icon"; @@ -35,6 +36,8 @@ export * from './components/checkbox/checkbox'; export * from './components/content/content'; +export * from './components/data_table/data_table'; + export * from './components/dialog/dialog'; export * from './components/divider/divider'; @@ -97,7 +100,8 @@ export const MATERIAL_DIRECTIVES: Type[] = CONST_EXPR([ MdSubheader, MdSwitch, MdToolbar, - MdTab, MdTabs + MdTab, MdTabs, + MdDataTable, MdDataTableTr ]); /** diff --git a/ng2-material/components.scss b/ng2-material/components.scss index 349195dc..60cd36a1 100644 --- a/ng2-material/components.scss +++ b/ng2-material/components.scss @@ -3,6 +3,7 @@ @import "components/card/card"; @import "components/content/content"; @import "components/checkbox/checkbox"; +@import "components/data_table/data_table"; @import "components/dialog/dialog"; @import "components/divider/divider"; @import "components/icon/icon"; diff --git a/ng2-material/components/data_table/README.md b/ng2-material/components/data_table/README.md new file mode 100644 index 00000000..55537f5d --- /dev/null +++ b/ng2-material/components/data_table/README.md @@ -0,0 +1,40 @@ +# MdDataTable +MdDataTable is an enhancment of classic data tables. + +## Basic data table +### Classes +| Name | Target | Description | +| --- | --- | --- | +| md-data-table-cell-non-numeric | thead th, tbody td | Disable the automatic right alignement of the cells. | + +## Selectable data table +### Properties +| Name | Target | Type | Description | +| --- | --- | --- | --- | +| selectable | md-data-table | boolean | Enable one checkbox per line and a master checkbox to rule them all. | +| selectableValue | tbody tr | string | value of the checkbox. If it's not set the checkbox's value will be the index of the row. | + +### Events +| Name | Description | +| --- | --- | +| selectable_change | Emmited when the user select or unselect a row | + +## Examples +``` + + + + Material + Quantity + Unit price + + + + + {{ material.name }} + {{ material.quantity }} + {{ material.price }} + + + +``` diff --git a/ng2-material/components/data_table/data_table.scss b/ng2-material/components/data_table/data_table.scss new file mode 100644 index 00000000..d74688e4 --- /dev/null +++ b/ng2-material/components/data_table/data_table.scss @@ -0,0 +1,46 @@ +@import "../../core/style/variables"; + +// TODO(jelbourn): This goes away. +@import "../../core/style/default-theme"; + +md-data-table { + display: table; + border-spacing: 0; + border-collapse: collapse; + + md-checkbox { + margin: 0; + } + tr { + vertical-align: top; + } + th { + padding: 22px 12px; + font-size: 12px; + font-weight: 600; + text-align: left; + color: md-color($md-foreground, text); + } + td { + border-top: 1px solid md-color($md-foreground, divider); + padding: 14px 12px; + font-size: 13px; + text-align: right; + color: md-color($md-foreground, secondary-text); + + &.md-data-table-cell-non-numeric { text-align: left; } + } + th:first-child, td:first-child{ + padding-left: 24px; + } + th:last-child, td:last-child{ + padding-right: 24px; + } + + tr:hover td { + background-color: md-color($md-grey, 200); + } + .active td { + background-color: md-color($md-grey, 100); + } +} diff --git a/ng2-material/components/data_table/data_table.ts b/ng2-material/components/data_table/data_table.ts new file mode 100644 index 00000000..08b42824 --- /dev/null +++ b/ng2-material/components/data_table/data_table.ts @@ -0,0 +1,71 @@ +import {Component, Input, Output, EventEmitter, ContentChildren, QueryList} from 'angular2/core'; +import {Observable} from 'rxjs/Observable'; +import {Observer} from 'rxjs/Observer'; +import {MdDataTableTr} from './data_table_tr'; +import {MdCheckbox} from '../checkbox/checkbox'; +import 'rxjs/add/operator/share'; + +export * from './data_table_tr'; + +@Component({ + selector: 'md-data-table', + template: ``, + directives: [MdDataTableTr] +}) +export class MdDataTable { + @Input() selectable: boolean; + @Output() onSelectableAll: EventEmitter = new EventEmitter(false); + @Output() onSelectableChange: EventEmitter = new EventEmitter(false); + + @ContentChildren(MdDataTableTr, true) _rows: QueryList; + selected: Array = []; + + constructor() { + this.onSelectableChange.share(); + } + + /** + * Fill/Empty the array of selected values + * + * @param {MdDataTableTr} tr + */ + toggleActivity(tr: MdDataTableTr) { + let event: any = { + name: 'selectable_change', + allSelected: false, + values: [] + }; + + if (true === tr.isInHeader) { + if (true === tr.isActive) { + event.allSelected = true; + event.values = this._getRowsValues(); + } + } else { + event.values = this.selected.slice(0); + + if (true === tr.isActive) { + event.values.push(tr.selectableValue); + } else { + let index = event.values.indexOf(tr.selectableValue); + if (-1 !== index) { + event.values.splice(index, 1); + } + } + } + + // dispatch change + this.selected = event.values; + this.onSelectableChange.emit(event); + } + + /** + * @returns {Array} + */ + _getRowsValues() { + return this._rows.toArray() + .filter((data, index) => index > 0) + .map((tr: MdDataTableTr) => tr.selectableValue); + } + +} diff --git a/ng2-material/components/data_table/data_table_tr.ts b/ng2-material/components/data_table/data_table_tr.ts new file mode 100644 index 00000000..2f71b87d --- /dev/null +++ b/ng2-material/components/data_table/data_table_tr.ts @@ -0,0 +1,72 @@ +import {Component, Input, Inject, forwardRef, ElementRef, AfterContentInit} from 'angular2/core'; +import {Observable} from 'rxjs/Observable'; +import {Observer} from 'rxjs/Observer'; +import 'rxjs/add/operator/map'; +import {MdDataTable} from './data_table'; +import {MdCheckbox} from '../checkbox/checkbox'; + +@Component({ + selector: 'tr', + template: ` + + + + + + + + `, + directives: [MdCheckbox], + host: { + '[class.active]': 'isActive' + } +}) +export class MdDataTableTr implements AfterContentInit { + @Input() selectableValue: string; + isInHeader: boolean = false; + isActive: boolean = false; + thDisplayed: boolean = false; + tdDisplayed: boolean = false; + + constructor(@Inject(forwardRef(() => MdDataTable)) public table: MdDataTable, private _element: ElementRef) { + + } + + change() { + this.isActive = !this.isActive; + this.table.toggleActivity(this); + } + + _initListeners() { + if (true === this.isInHeader) { + this.table.onSelectableChange + .map(event => event.allSelected) + .subscribe(newActiveStatus => this.isActive = newActiveStatus); + } else { + this.table.onSelectableChange + .map(event => { + return undefined !== event.values && + event.values.length && + (event.values.findIndex((value: string) => value === this.selectableValue)) !== -1; + }) + .subscribe(newActiveStatus => this.isActive = newActiveStatus); + } + } + + ngAfterContentInit() { + let element = this._element.nativeElement; + this.isInHeader = element.parentElement.localName === 'thead'; + this._initListeners(); + + this.thDisplayed = this.table.selectable && this.isInHeader; + this.tdDisplayed = this.table.selectable && !this.isInHeader; + + if (false === this.isInHeader && undefined === this.selectableValue) { + this.selectableValue = Array.prototype.indexOf.call(element.parentNode.children, element).toString(); + } + } +} diff --git a/test/components/data_table/data_table_spec.ts b/test/components/data_table/data_table_spec.ts new file mode 100644 index 00000000..45f74842 --- /dev/null +++ b/test/components/data_table/data_table_spec.ts @@ -0,0 +1,143 @@ +import {componentSanityCheck} from "../../util"; +import { + TestComponentBuilder, + beforeEach, + describe, + expect, + inject, + it, + injectAsync, + ComponentFixture +} from "angular2/testing"; +import {Component, DebugElement} from "angular2/core"; +import {CORE_DIRECTIVES} from "angular2/common"; +import {MdDataTable, MdDataTableTr} from 'ng2-material/components/data_table/data_table'; +import {DOM} from "angular2/src/platform/dom/dom_adapter"; +import {KeyCodes} from "../../../ng2-material/core/key_codes"; +import {By} from "angular2/platform/browser"; + + +export function main() { + + interface IDataTableFixture { + fixture: ComponentFixture; + comp: MdDataTable; + debug: DebugElement; + } + @Component({ + selector: 'test-app', + directives: [CORE_DIRECTIVES, MdDataTable, MdDataTableTr], + template: ` + + + Material + Quantity + Unit price + + + + + Acrylic (Transparent) + 25 + $2.90 + + + Plywood (Birch) + 50 + $1.25 + + + ` + }) + class TestComponent { + selected: Array = []; + } + + componentSanityCheck('Data table', 'md-data-table', ``); + + describe('Data table', () => { + let builder: TestComponentBuilder; + + function setup(checked: boolean = false, disabled: boolean = false): Promise { + return builder.createAsync(TestComponent).then((fixture: ComponentFixture) => { + let debug = fixture.debugElement.query(By.css('md-data-table')); + let comp: MdDataTable = debug.componentInstance; + let testComp = fixture.debugElement.componentInstance; + testComp.selected = []; + fixture.detectChanges(); + return { + fixture: fixture, + comp: comp, + debug: debug + }; + }).catch(console.error.bind(console)); + } + + beforeEach(inject([TestComponentBuilder], (tcb) => { + builder = tcb; + })); + + describe('md-data-table', () => { + it('should initialize selected', injectAsync([], () => { + return setup().then((api: IDataTableFixture) => { + expect(api.comp.selected.length).toEqual(0); + api.fixture.destroy(); + }); + })); + + it('should toggle checked value when a click is fired on a row checkbox', injectAsync([], () => { + return setup(true).then((api: IDataTableFixture) => { + let rowCheckbox = api.debug.query(By.css('tbody tr:first-child md-checkbox')); + rowCheckbox.nativeElement.click(); + expect(api.comp.selected.length).toEqual(1); + expect(api.comp.selected[0]).toEqual('0'); + rowCheckbox.nativeElement.click(); + expect(api.comp.selected.length).toEqual(0); + api.fixture.destroy(); + }); + })); + + it('should check all row checkbox when a click is fired on master checkbox', injectAsync([], () => { + return setup(true).then((api: IDataTableFixture) => { + let masterCheckbox = api.debug.query(By.css('thead tr:first-child md-checkbox')); + masterCheckbox.nativeElement.click(); + expect(api.comp.selected.length).toEqual(2); + expect(api.comp.selected[0]).toEqual('0'); + masterCheckbox.nativeElement.click(); + expect(api.comp.selected.length).toEqual(0); + api.fixture.destroy(); + }); + })); + + it('should uncheck master checkbox if a row checkbox is unchecked', injectAsync([], () => { + return setup(true).then((api: IDataTableFixture) => { + let masterCheckbox = api.debug.query(By.css('thead tr:first-child md-checkbox')), + rowCheckbox = api.debug.query(By.css('tbody tr:first-child md-checkbox')).nativeElement; + + masterCheckbox.nativeElement.click(); + rowCheckbox.click(); + expect(api.comp.selected.length).toEqual(1); + expect(api.comp.selected[0]).toEqual('1'); + expect(masterCheckbox.componentInstance.checked).toBe(true); + api.fixture.destroy(); + }); + })); + + it('should fire a selectable_change event when a row checkbox change', injectAsync([], () => { + return setup(true).then((api: IDataTableFixture) => { + let rowCheckbox = api.debug.query(By.css('tbody tr:first-child md-checkbox')).nativeElement; + + api.comp.onSelectableAll.subscribe((event) => { + expect(event.name).toBe('selectable_change'); + }); + + rowCheckbox.click(); + api.fixture.destroy(); + }); + })); + }); + }); + + +} + diff --git a/tsconfig.build.json b/tsconfig.build.json index d9c86995..a6da4baf 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -26,6 +26,8 @@ "ng2-material/components/card/card.ts", "ng2-material/components/checkbox/checkbox.ts", "ng2-material/components/content/content.ts", + "ng2-material/components/data_table/data_table.ts", + "ng2-material/components/data_table/data_table_tr.ts", "ng2-material/components/dialog/dialog.ts", "ng2-material/components/dialog/dialog_basic.ts", "ng2-material/components/dialog/dialog_config.ts", @@ -57,4 +59,4 @@ "ng2-material/webpack_all.ts", "ng2-material/webpack_styles.ts" ] -} +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index e5c19c2c..3f426774 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,113 +1,118 @@ { - "version": "1.6.0", - "compilerOptions": { - "target": "es5", - "module": "commonjs", - "declaration": false, - "noImplicitAny": false, - "removeComments": true, - "noLib": false, - "emitDecoratorMetadata": true, - "experimentalDecorators": true, - "sourceMap": true - }, - "filesGlob": [ - "node_modules/angular2/typings/browser.d.ts", - "dist/ng2-material.d.ts", - "ng2-material/**/*.ts", - "examples/**/*.ts", - "test/**/*.ts" - ], - "compileOnSave": true, - "files": [ - "node_modules/angular2/typings/browser.d.ts", - "dist/ng2-material.d.ts", - "ng2-material/all.ts", - "ng2-material/components/backdrop/backdrop.ts", - "ng2-material/components/button/button.ts", - "ng2-material/components/card/card.ts", - "ng2-material/components/checkbox/checkbox.ts", - "ng2-material/components/content/content.ts", - "ng2-material/components/dialog/dialog.ts", - "ng2-material/components/dialog/dialog_basic.ts", - "ng2-material/components/dialog/dialog_config.ts", - "ng2-material/components/dialog/dialog_container.ts", - "ng2-material/components/dialog/dialog_ref.ts", - "ng2-material/components/divider/divider.ts", - "ng2-material/components/form/messages.ts", - "ng2-material/components/form/validators.ts", - "ng2-material/components/icon/icon.ts", - "ng2-material/components/ink/ink.ts", - "ng2-material/components/input/input.ts", - "ng2-material/components/list/list.ts", - "ng2-material/components/peekaboo/peekaboo.ts", - "ng2-material/components/progress_circular/progress_circular.ts", - "ng2-material/components/progress_linear/progress_linear.ts", - "ng2-material/components/radio/radio_button.ts", - "ng2-material/components/radio/radio_dispatcher.ts", - "ng2-material/components/sidenav/sidenav.ts", - "ng2-material/components/sidenav/sidenav_service.ts", - "ng2-material/components/subheader/subheader.ts", - "ng2-material/components/switcher/switch.ts", - "ng2-material/components/tabs/tabs.ts", - "ng2-material/components/toolbar/toolbar.ts", - "ng2-material/core/key_codes.ts", - "ng2-material/core/util/animate.ts", - "ng2-material/core/util/ink.ts", - "ng2-material/core/util/media.ts", - "ng2-material/core/util/util.ts", - "ng2-material/webpack_all.ts", - "ng2-material/webpack_styles.ts", - "examples/all.ts", - "examples/app.ts", - "examples/components/button/basic_usage.ts", - "examples/components/card/action_buttons.ts", - "examples/components/card/basic_usage.ts", - "examples/components/card/inline_actions.ts", - "examples/components/checkbox/basic_usage.ts", - "examples/components/checkbox/syncing.ts", - "examples/components/dialog/basic_usage.ts", - "examples/components/input/basic_usage.ts", - "examples/components/input/form_builder.ts", - "examples/components/list/basic_usage.ts", - "examples/components/progress_circular/basic_usage.ts", - "examples/components/progress_linear/basic_usage.ts", - "examples/components/radio/basic_usage.ts", - "examples/components/sidenav/basic_usage.ts", - "examples/components/switch/basic_usage.ts", - "examples/components/tabs/dynamic_height.ts", - "examples/components/tabs/dynamic_tabs.ts", - "examples/components/toolbar/basic_usage.ts", - "examples/components/toolbar/scroll_shrink.ts", - "examples/components/whiteframe/basic_usage.ts", - "examples/example.ts", - "examples/highlight.ts", - "examples/routes/component.ts", - "examples/routes/index.ts", - "examples/services/components.ts", - "examples/services/navigation.ts", - "examples/services/version.ts", - "test/bootstrap.ts", - "test/components/backdrop/backdrop_spec.ts", - "test/components/button/button_spec.ts", - "test/components/checkbox/checkbox_spec.ts", - "test/components/dialog/dialog_spec.ts", - "test/components/form/messages_spec.ts", - "test/components/form/validators_spec.ts", - "test/components/ink/ink_spec.ts", - "test/components/input/input_spec.ts", - "test/components/list/list_spec.ts", - "test/components/peekaboo/peekaboo_spec.ts", - "test/components/progress_circular/progress_circular_spec.ts", - "test/components/progress_linear/progress_linear_spec.ts", - "test/components/radio/radio_spec.ts", - "test/components/sidenav/sidenav_service_spec.ts", - "test/components/sidenav/sidenav_spec.ts", - "test/components/subheader/subheader_spec.ts", - "test/components/switch/switch_spec.ts", - "test/components/tabs/tabs_spec.ts", - "test/components/toolbar/toolbar_spec.ts", - "test/test_url_resolver.ts", - "test/util.ts" - ] -} + "version": "1.6.0", + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "declaration": false, + "noImplicitAny": false, + "removeComments": true, + "noLib": false, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "sourceMap": true + }, + "filesGlob": [ + "node_modules/angular2/typings/browser.d.ts", + "dist/ng2-material.d.ts", + "ng2-material/**/*.ts", + "examples/**/*.ts", + "test/**/*.ts" + ], + "compileOnSave": true, + "files": [ + "node_modules/angular2/typings/browser.d.ts", + "dist/ng2-material.d.ts", + "ng2-material/all.ts", + "ng2-material/components/backdrop/backdrop.ts", + "ng2-material/components/button/button.ts", + "ng2-material/components/card/card.ts", + "ng2-material/components/checkbox/checkbox.ts", + "ng2-material/components/content/content.ts", + "ng2-material/components/data_table/data_table.ts", + "ng2-material/components/data_table/data_table_tr.ts", + "ng2-material/components/dialog/dialog.ts", + "ng2-material/components/dialog/dialog_basic.ts", + "ng2-material/components/dialog/dialog_config.ts", + "ng2-material/components/dialog/dialog_container.ts", + "ng2-material/components/dialog/dialog_ref.ts", + "ng2-material/components/divider/divider.ts", + "ng2-material/components/form/messages.ts", + "ng2-material/components/form/validators.ts", + "ng2-material/components/icon/icon.ts", + "ng2-material/components/ink/ink.ts", + "ng2-material/components/input/input.ts", + "ng2-material/components/list/list.ts", + "ng2-material/components/peekaboo/peekaboo.ts", + "ng2-material/components/progress_circular/progress_circular.ts", + "ng2-material/components/progress_linear/progress_linear.ts", + "ng2-material/components/radio/radio_button.ts", + "ng2-material/components/radio/radio_dispatcher.ts", + "ng2-material/components/sidenav/sidenav.ts", + "ng2-material/components/sidenav/sidenav_service.ts", + "ng2-material/components/subheader/subheader.ts", + "ng2-material/components/switcher/switch.ts", + "ng2-material/components/tabs/tabs.ts", + "ng2-material/components/toolbar/toolbar.ts", + "ng2-material/core/key_codes.ts", + "ng2-material/core/util/animate.ts", + "ng2-material/core/util/ink.ts", + "ng2-material/core/util/media.ts", + "ng2-material/core/util/util.ts", + "ng2-material/webpack_all.ts", + "ng2-material/webpack_styles.ts", + "examples/all.ts", + "examples/app.ts", + "examples/components/button/basic_usage.ts", + "examples/components/card/action_buttons.ts", + "examples/components/card/basic_usage.ts", + "examples/components/card/inline_actions.ts", + "examples/components/checkbox/basic_usage.ts", + "examples/components/checkbox/syncing.ts", + "examples/components/data_table/basic_usage.ts", + "examples/components/data_table/selectable_usage.ts", + "examples/components/dialog/basic_usage.ts", + "examples/components/input/basic_usage.ts", + "examples/components/input/form_builder.ts", + "examples/components/list/basic_usage.ts", + "examples/components/progress_circular/basic_usage.ts", + "examples/components/progress_linear/basic_usage.ts", + "examples/components/radio/basic_usage.ts", + "examples/components/sidenav/basic_usage.ts", + "examples/components/switch/basic_usage.ts", + "examples/components/tabs/dynamic_height.ts", + "examples/components/tabs/dynamic_tabs.ts", + "examples/components/toolbar/basic_usage.ts", + "examples/components/toolbar/scroll_shrink.ts", + "examples/components/whiteframe/basic_usage.ts", + "examples/example.ts", + "examples/highlight.ts", + "examples/routes/component.ts", + "examples/routes/index.ts", + "examples/services/components.ts", + "examples/services/navigation.ts", + "examples/services/version.ts", + "test/bootstrap.ts", + "test/components/backdrop/backdrop_spec.ts", + "test/components/button/button_spec.ts", + "test/components/checkbox/checkbox_spec.ts", + "test/components/data_table/data_table_spec.ts", + "test/components/dialog/dialog_spec.ts", + "test/components/form/messages_spec.ts", + "test/components/form/validators_spec.ts", + "test/components/ink/ink_spec.ts", + "test/components/input/input_spec.ts", + "test/components/list/list_spec.ts", + "test/components/peekaboo/peekaboo_spec.ts", + "test/components/progress_circular/progress_circular_spec.ts", + "test/components/progress_linear/progress_linear_spec.ts", + "test/components/radio/radio_spec.ts", + "test/components/sidenav/sidenav_service_spec.ts", + "test/components/sidenav/sidenav_spec.ts", + "test/components/subheader/subheader_spec.ts", + "test/components/switch/switch_spec.ts", + "test/components/tabs/tabs_spec.ts", + "test/components/toolbar/toolbar_spec.ts", + "test/test_url_resolver.ts", + "test/util.ts" + ] +} \ No newline at end of file