+
+
+
diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.ts b/src/e2e-app/fullscreen/fullscreen-e2e.ts
new file mode 100644
index 000000000000..f95dc7a46147
--- /dev/null
+++ b/src/e2e-app/fullscreen/fullscreen-e2e.ts
@@ -0,0 +1,62 @@
+import {Component, ElementRef, Output, EventEmitter} from '@angular/core';
+import {MdDialog, MdDialogRef} from '@angular/material';
+
+@Component({
+ moduleId: module.id,
+ selector: 'fullscreen-e2e',
+ templateUrl: 'fullscreen-e2e.html'
+})
+export class FullscreenE2E {
+
+ dialogRef: MdDialogRef
-
+
-
+
diff --git a/src/e2e-app/radio/radio-e2e.ts b/src/e2e-app/radio/radio-e2e.ts
index 5df27b942fcc..1959c19bcc08 100644
--- a/src/e2e-app/radio/radio-e2e.ts
+++ b/src/e2e-app/radio/radio-e2e.ts
@@ -7,4 +7,5 @@ import {Component} from '@angular/core';
})
export class SimpleRadioButtons {
isGroupDisabled: boolean = false;
+ groupValue: string;
}
diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts
index ae360cddecfd..e5615524cb8e 100644
--- a/src/e2e-app/system-config.ts
+++ b/src/e2e-app/system-config.ts
@@ -1,5 +1,5 @@
/** Type declaration for ambient System. */
-declare var System: any;
+declare const System: any;
// Apply the CLI SystemJS configuration.
System.config({
diff --git a/src/e2e-app/tsconfig.json b/src/e2e-app/tsconfig.json
index 898fe4d4aceb..bc4ee42255a7 100644
--- a/src/e2e-app/tsconfig.json
+++ b/src/e2e-app/tsconfig.json
@@ -4,7 +4,6 @@
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "es2015", "dom"],
- "mapRoot": "",
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
@@ -15,8 +14,7 @@
"stripInternal": false,
"baseUrl": "",
"typeRoots": [
- "../../node_modules/@types",
- "../../node_modules"
+ "../../node_modules/@types/!(node)"
],
"paths": {
"@angular/material": [
diff --git a/src/examples/autocomplete-overview/autocomplete-overview-example.css b/src/examples/autocomplete-overview/autocomplete-overview-example.css
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/src/examples/autocomplete-overview/autocomplete-overview-example.html b/src/examples/autocomplete-overview/autocomplete-overview-example.html
new file mode 100644
index 000000000000..e5217f9c2f52
--- /dev/null
+++ b/src/examples/autocomplete-overview/autocomplete-overview-example.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+ {{ state }}
+
+
\ No newline at end of file
diff --git a/src/examples/autocomplete-overview/autocomplete-overview-example.ts b/src/examples/autocomplete-overview/autocomplete-overview-example.ts
new file mode 100644
index 000000000000..7b28b28b998b
--- /dev/null
+++ b/src/examples/autocomplete-overview/autocomplete-overview-example.ts
@@ -0,0 +1,78 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import 'rxjs/add/operator/startWith';
+
+@Component({
+ selector: 'autocomplete-overview-example',
+ templateUrl: './autocomplete-overview-example.html',
+})
+export class AutocompleteOverviewExample {
+ stateCtrl: FormControl;
+ filteredStates: any;
+
+ states = [
+ 'Alabama',
+ 'Alaska',
+ 'Arizona',
+ 'Arkansas',
+ 'California',
+ 'Colorado',
+ 'Connecticut',
+ 'Delaware',
+ 'Florida',
+ 'Georgia',
+ 'Hawaii',
+ 'Idaho',
+ 'Illinois',
+ 'Indiana',
+ 'Iowa',
+ 'Kansas',
+ 'Kentucky',
+ 'Louisiana',
+ 'Maine',
+ 'Maryland',
+ 'Massachusetts',
+ 'Michigan',
+ 'Minnesota',
+ 'Mississippi',
+ 'Missouri',
+ 'Montana',
+ 'Nebraska',
+ 'Nevada',
+ 'New Hampshire',
+ 'New Jersey',
+ 'New Mexico',
+ 'New York',
+ 'North Carolina',
+ 'North Dakota',
+ 'Ohio',
+ 'Oklahoma',
+ 'Oregon',
+ 'Pennsylvania',
+ 'Rhode Island',
+ 'South Carolina',
+ 'South Dakota',
+ 'Tennessee',
+ 'Texas',
+ 'Utah',
+ 'Vermont',
+ 'Virginia',
+ 'Washington',
+ 'West Virginia',
+ 'Wisconsin',
+ 'Wyoming',
+ ];
+
+ constructor() {
+ this.stateCtrl = new FormControl();
+ this.filteredStates = this.stateCtrl.valueChanges
+ .startWith(null)
+ .map(name => this.filterStates(name));
+ }
+
+ filterStates(val: string) {
+ return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
+ : this.states;
+ }
+
+}
diff --git a/src/examples/button-overview/button-overview-example.css b/src/examples/button-overview/button-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/button-overview/button-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/button-overview/button-overview-example.html b/src/examples/button-overview/button-overview-example.html
new file mode 100644
index 000000000000..56f6fa44fb6b
--- /dev/null
+++ b/src/examples/button-overview/button-overview-example.html
@@ -0,0 +1 @@
+
diff --git a/src/examples/button-overview/button-overview-example.ts b/src/examples/button-overview/button-overview-example.ts
new file mode 100644
index 000000000000..41a52022f263
--- /dev/null
+++ b/src/examples/button-overview/button-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'button-overview-example',
+ templateUrl: './button-overview-example.html',
+})
+export class ButtonOverviewExample {}
diff --git a/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.css b/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.css
new file mode 100644
index 000000000000..d21ca3ce57fb
--- /dev/null
+++ b/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.css
@@ -0,0 +1,3 @@
+.example-selected-value {
+ margin: 15px 0;
+}
diff --git a/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.html
new file mode 100644
index 000000000000..dd5cd2771788
--- /dev/null
+++ b/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.html
@@ -0,0 +1,15 @@
+
+
+ format_align_left
+
+
+ format_align_center
+
+
+ format_align_right
+
+
+ format_align_justify
+
+
+Toggle me!
diff --git a/src/examples/button-toggle-overview/button-toggle-overview-example.ts b/src/examples/button-toggle-overview/button-toggle-overview-example.ts
new file mode 100644
index 000000000000..38a4afd0561d
--- /dev/null
+++ b/src/examples/button-toggle-overview/button-toggle-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'button-toggle-overview-example',
+ templateUrl: './button-toggle-overview-example.html',
+})
+export class ButtonToggleOverviewExample {}
diff --git a/src/examples/button-types/button-types-example.css b/src/examples/button-types/button-types-example.css
new file mode 100644
index 000000000000..b0b34952fcc1
--- /dev/null
+++ b/src/examples/button-types/button-types-example.css
@@ -0,0 +1,9 @@
+.example-container {
+ width: 500px;
+}
+
+.example-button-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
diff --git a/src/examples/button-types/button-types-example.html b/src/examples/button-types/button-types-example.html
new file mode 100644
index 000000000000..4c5783de9c7a
--- /dev/null
+++ b/src/examples/button-types/button-types-example.html
@@ -0,0 +1,17 @@
+
+
+
+ Shiba Inu
+ Dog Breed
+
+ 
+
+
+
+
+
+
+
diff --git a/src/examples/card-fancy/card-fancy-example.ts b/src/examples/card-fancy/card-fancy-example.ts
new file mode 100644
index 000000000000..8e19840d7cd4
--- /dev/null
+++ b/src/examples/card-fancy/card-fancy-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'card-fancy-example',
+ templateUrl: './card-fancy-example.html',
+ styleUrls: ['./card-fancy-example.css'],
+})
+export class CardFancyExample {}
diff --git a/src/examples/card-overview/card-overview-example.css b/src/examples/card-overview/card-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/card-overview/card-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/card-overview/card-overview-example.html b/src/examples/card-overview/card-overview-example.html
new file mode 100644
index 000000000000..5e0c2b6dfe13
--- /dev/null
+++ b/src/examples/card-overview/card-overview-example.html
@@ -0,0 +1 @@
+Simple card
diff --git a/src/examples/card-overview/card-overview-example.ts b/src/examples/card-overview/card-overview-example.ts
new file mode 100644
index 000000000000..55fc9a690d54
--- /dev/null
+++ b/src/examples/card-overview/card-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'card-overview-example',
+ templateUrl: './card-overview-example.html',
+})
+export class CardOverviewExample {}
diff --git a/src/examples/checkbox-configurable/checkbox-configurable-example.css b/src/examples/checkbox-configurable/checkbox-configurable-example.css
new file mode 100644
index 000000000000..558293fbb5b8
--- /dev/null
+++ b/src/examples/checkbox-configurable/checkbox-configurable-example.css
@@ -0,0 +1,14 @@
+.example-h2 {
+ margin: 10px;
+}
+
+.example-section {
+ display: flex;
+ align-content: center;
+ align-items: center;
+ height: 60px;
+}
+
+.example-margin {
+ margin: 0 10px;
+}
diff --git a/src/examples/checkbox-configurable/checkbox-configurable-example.html b/src/examples/checkbox-configurable/checkbox-configurable-example.html
new file mode 100644
index 000000000000..5876c05c6c46
--- /dev/null
+++ b/src/examples/checkbox-configurable/checkbox-configurable-example.html
@@ -0,0 +1,40 @@
+
+
+
+ Checked
+ Indeterminate
+
+
+
+
+
+ Start
+ End
+
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+ I'm a checkbox
+
+
+
+
+
diff --git a/src/examples/checkbox-configurable/checkbox-configurable-example.ts b/src/examples/checkbox-configurable/checkbox-configurable-example.ts
new file mode 100644
index 000000000000..2c0149199cc5
--- /dev/null
+++ b/src/examples/checkbox-configurable/checkbox-configurable-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'checkbox-configurable-example',
+ templateUrl: './checkbox-configurable-example.html',
+ styleUrls: ['./checkbox-configurable-example.css'],
+})
+export class CheckboxConfigurableExample {
+ checked = false;
+ indeterminate = false;
+ align = 'start';
+ disabled = false;
+}
diff --git a/src/examples/checkbox-overview/checkbox-overview-example.css b/src/examples/checkbox-overview/checkbox-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/checkbox-overview/checkbox-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/checkbox-overview/checkbox-overview-example.html b/src/examples/checkbox-overview/checkbox-overview-example.html
new file mode 100644
index 000000000000..c301bbe5ccc2
--- /dev/null
+++ b/src/examples/checkbox-overview/checkbox-overview-example.html
@@ -0,0 +1 @@
+Check me!
diff --git a/src/examples/checkbox-overview/checkbox-overview-example.ts b/src/examples/checkbox-overview/checkbox-overview-example.ts
new file mode 100644
index 000000000000..be9aefc592f0
--- /dev/null
+++ b/src/examples/checkbox-overview/checkbox-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'checkbox-overview-example',
+ templateUrl: './checkbox-overview-example.html',
+})
+export class CheckboxOverviewExample {}
diff --git a/src/examples/chips-overview/chips-overview-example.css b/src/examples/chips-overview/chips-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/chips-overview/chips-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/chips-overview/chips-overview-example.html b/src/examples/chips-overview/chips-overview-example.html
new file mode 100644
index 000000000000..bb0410569251
--- /dev/null
+++ b/src/examples/chips-overview/chips-overview-example.html
@@ -0,0 +1,6 @@
+
+ One fish
+ Two fish
+ Primary fish
+ Accent fish
+
diff --git a/src/examples/chips-overview/chips-overview-example.ts b/src/examples/chips-overview/chips-overview-example.ts
new file mode 100644
index 000000000000..fa1bbf7c12c4
--- /dev/null
+++ b/src/examples/chips-overview/chips-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'chips-overview-example',
+ templateUrl: './chips-overview-example.html',
+})
+export class ChipsOverviewExample {}
diff --git a/src/examples/chips-stacked/chips-stacked-example.css b/src/examples/chips-stacked/chips-stacked-example.css
new file mode 100644
index 000000000000..dfb2f8c00aa2
--- /dev/null
+++ b/src/examples/chips-stacked/chips-stacked-example.css
@@ -0,0 +1,3 @@
+md-chip {
+ max-width: 200px;
+}
diff --git a/src/examples/chips-stacked/chips-stacked-example.html b/src/examples/chips-stacked/chips-stacked-example.html
new file mode 100644
index 000000000000..27677b1c6e6d
--- /dev/null
+++ b/src/examples/chips-stacked/chips-stacked-example.html
@@ -0,0 +1,7 @@
+
+
+ {{chipColor.name}}
+
+
diff --git a/src/examples/chips-stacked/chips-stacked-example.ts b/src/examples/chips-stacked/chips-stacked-example.ts
new file mode 100644
index 000000000000..8c48ccc929e0
--- /dev/null
+++ b/src/examples/chips-stacked/chips-stacked-example.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'chips-stacked-example',
+ templateUrl: './chips-stacked-example.html',
+ styleUrls: ['./chips-stacked-example.css'],
+})
+export class ChipsStackedExample {
+ color: string;
+
+ availableColors = [
+ { name: 'none', color: '' },
+ { name: 'Primary', color: 'primary' },
+ { name: 'Accent', color: 'accent' },
+ { name: 'Warn', color: 'warn' }
+ ];
+}
diff --git a/src/examples/dialog-elements/dialog-elements-example-dialog.html b/src/examples/dialog-elements/dialog-elements-example-dialog.html
new file mode 100644
index 000000000000..5238b0eb6c19
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example-dialog.html
@@ -0,0 +1,5 @@
+) {}
+}
diff --git a/src/examples/example-data.ts b/src/examples/example-data.ts
new file mode 100644
index 000000000000..a1fc1c8838a6
--- /dev/null
+++ b/src/examples/example-data.ts
@@ -0,0 +1,48 @@
+import {EXAMPLE_COMPONENTS} from './example-module';
+
+
+/**
+ * Example data
+ * with information about Component name, selector, files used in example, and path to examples
+ */
+export class ExampleData {
+ // TODO: figure out how do we get these variables.
+ description: string = 'Some description for material';
+ // TODO: use real example and delete the example/ folder.
+ examplePath = '/assets/example/';
+ exampleFiles = ['button-demo.html', 'button-demo.scss', 'button-demo.ts'];
+
+ // TODO: extract these variables from example code.
+ selectorName = 'button-demo';
+ indexFilename = 'button-demo';
+ componentName = 'ButtonDemo';
+
+ constructor(example: string) {
+ if (example && EXAMPLE_COMPONENTS[example]) {
+ this.examplePath = `/assets/plunker/examples/${example}/`;
+ // TODO(tinayuangao): Do not hard-code extensions
+ this.exampleFiles = ['html', 'ts', 'css']
+ .map((extension) => `${example}-example.${extension}`);
+ if (EXAMPLE_COMPONENTS[example].additionalFiles) {
+ this.exampleFiles = this.exampleFiles.concat(EXAMPLE_COMPONENTS[example].additionalFiles);
+ }
+ this.selectorName = this.indexFilename = `${example}-example`;
+
+ var exampleName = example.replace(/(?:^\w|\b\w)/g, function(letter) {
+ return letter.toUpperCase();
+ });
+
+ if (EXAMPLE_COMPONENTS[example].title) {
+ this.description = EXAMPLE_COMPONENTS[example].title;
+ } else {
+ this.description = exampleName.replace(/[\-]+/g, ' ') + ' Example';
+ }
+
+ if (EXAMPLE_COMPONENTS[example].selectorName) {
+ this.componentName = EXAMPLE_COMPONENTS[example].selectorName;
+ } else {
+ this.componentName = exampleName.replace(/[\-]+/g, '') + 'Example';
+ }
+ }
+ }
+}
diff --git a/src/examples/example-module.ts b/src/examples/example-module.ts
new file mode 100644
index 000000000000..9c1b974af865
--- /dev/null
+++ b/src/examples/example-module.ts
@@ -0,0 +1,236 @@
+import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {CommonModule} from '@angular/common';
+import {MaterialModule} from '@angular/material';
+import {AutocompleteOverviewExample} from './autocomplete-overview/autocomplete-overview-example';
+import {ButtonOverviewExample} from './button-overview/button-overview-example';
+import {ButtonTypesExample} from './button-types/button-types-example';
+import {CheckboxOverviewExample} from './checkbox-overview/checkbox-overview-example';
+import {SliderConfigurableExample} from './slider-configurable/slider-configurable-example';
+import {TabsOverviewExample} from './tabs-overview/tabs-overview-example';
+import {
+ PizzaPartyComponent,
+ SnackBarComponentExample
+} from './snack-bar-component/snack-bar-component-example';
+import {
+ ProgressBarConfigurableExample
+} from './progress-bar-configurable/progress-bar-configurable-example';
+import {
+ DialogOverviewExampleDialog,
+ DialogOverviewExample
+} from './dialog-overview/dialog-overview-example';
+import {RadioNgModelExample} from './radio-ng-model/radio-ng-model-example';
+import {CardFancyExample} from './card-fancy/card-fancy-example';
+import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
+import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
+import {MenuIconsExample} from './menu-icons/menu-icons-example';
+import {GridListDynamicExample} from './grid-list-dynamic/grid-list-dynamic-example';
+import {IconOverviewExample} from './icon-overview/icon-overview-example';
+import {ProgressBarOverviewExample} from './progress-bar-overview/progress-bar-overview-example';
+import {SlideToggleOverviewExample} from './slide-toggle-overview/slide-toggle-overview-example';
+import {InputOverviewExample} from './input-overview/input-overview-example';
+import {MenuOverviewExample} from './menu-overview/menu-overview-example';
+import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example';
+import {
+ ButtonToggleExclusiveExample
+} from './button-toggle-exclusive/button-toggle-exclusive-example';
+import {ListSectionsExample} from './list-sections/list-sections-example';
+import {SnackBarOverviewExample} from './snack-bar-overview/snack-bar-overview-example';
+import {
+ DialogResultExampleDialog,
+ DialogResultExample
+} from './dialog-result/dialog-result-example';
+import {
+ DialogElementsExampleDialog,
+ DialogElementsExample
+} from './dialog-elements/dialog-elements-example';
+import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
+import {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
+import {GridListOverviewExample} from './grid-list-overview/grid-list-overview-example';
+import {TooltipPositionExample} from './tooltip-position/tooltip-position-example';
+import {
+ ProgressSpinnerConfigurableExample
+} from './progress-spinner-configurable/progress-spinner-configurable-example';
+import {InputFormExample} from './input-form/input-form-example';
+import {ListOverviewExample} from './list-overview/list-overview-example';
+import {SliderOverviewExample} from './slider-overview/slider-overview-example';
+import {
+ SlideToggleConfigurableExample
+} from './slide-toggle-configurable/slide-toggle-configurable-example';
+import {IconSvgExample} from './icon-svg-example/icon-svg-example';
+import {SidenavFabExample} from './sidenav-fab/sidenav-fab-example';
+import {CardOverviewExample} from './card-overview/card-overview-example';
+import {
+ ProgressSpinnerOverviewExample
+} from './progress-spinner-overview/progress-spinner-overview-example';
+import {TabsTemplateLabelExample} from './tabs-template-label/tabs-template-label-example';
+import {RadioOverviewExample} from './radio-overview/radio-overview-example';
+import {SidenavOverviewExample} from './sidenav-overview/sidenav-overview-example';
+import {SelectOverviewExample} from './select-overview/select-overview-example';
+import {ChipsOverviewExample} from './chips-overview/chips-overview-example';
+import {ChipsStackedExample} from './chips-stacked/chips-stacked-example';
+import {SelectFormExample} from './select-form/select-form-example';
+
+
+export interface LiveExample {
+ title: string;
+ component: any;
+ additionalFiles: string[];
+ selectorName: string;
+}
+
+/**
+ * The list of example components.
+ * Key is the example name which will be used in `material-docs-example="key"`.
+ * Value is the component.
+ */
+export const EXAMPLE_COMPONENTS = {
+ 'autocomplete-overview': {title: 'Basic autocomplete', component: AutocompleteOverviewExample},
+ 'button-overview': {title: 'Basic buttons', component: ButtonOverviewExample},
+ 'button-types': {title: 'Button varieties', component: ButtonTypesExample},
+ 'button-toggle-exclusive': {
+ title: 'Exclusive selection',
+ component: ButtonToggleExclusiveExample
+ },
+ 'button-toggle-overview': {title: 'Basic button-toggles', component: ButtonToggleOverviewExample},
+ 'chips-overview': {title: 'Basic chips', component: ChipsOverviewExample},
+ 'chips-stacked': {title: 'Stacked chips', component: ChipsStackedExample},
+ 'card-fancy': {title: 'Card with multiple sections', component: CardFancyExample},
+ 'card-overview': {title: 'Basic cards', component: CardOverviewExample},
+ 'checkbox-configurable': {title: 'Configurable checkbox', component: CheckboxConfigurableExample},
+ 'checkbox-overview': {title: 'Basic checkboxes', component: CheckboxOverviewExample},
+ 'dialog-overview': {
+ title: 'Basic dialog',
+ component: DialogOverviewExample,
+ additionalFiles: ['dialog-overview-example-dialog.html'],
+ selectorName: 'DialogOverviewExample, DialogOverviewExampleDialog',
+ },
+ 'dialog-result': {
+ title: 'Dialog with a result',
+ component: DialogResultExample,
+ additionalFiles: ['dialog-result-example-dialog.html'],
+ selectorName: 'DialogResultExample, DialogResultExampleDialog',
+ },
+ 'dialog-elements': {
+ title: 'Dialog elements',
+ component: DialogElementsExample,
+ additionalFiles: ['dialog-elements-example-dialog.html'],
+ selectorName: 'DialogElementsExample, DialogElementsExampleDialog',
+ },
+ 'grid-list-dynamic': {title: 'Dynamic grid-list', component: GridListDynamicExample},
+ 'grid-list-overview': {title: 'Basic grid-list', component: GridListOverviewExample},
+ 'icon-overview': {title: 'Basic icons', component: IconOverviewExample},
+ 'icon-svg': {title: 'SVG icons', component: IconSvgExample},
+ 'input-form': {title: 'Inputs in a form', component: InputFormExample},
+ 'input-overview': {title: 'Basic inputs', component: InputOverviewExample},
+ 'list-overview': {title: 'Basic list', component: ListOverviewExample},
+ 'list-sections': {title: 'List with sections', component: ListSectionsExample},
+ 'menu-icons': {title: 'Menu with icons', component: MenuIconsExample},
+ 'menu-overview': {title: 'Basic menu', component: MenuOverviewExample},
+ 'progress-bar-configurable': {
+ title: 'Configurable progress-bar',
+ component: ProgressBarConfigurableExample
+ },
+ 'progress-bar-overview': {title: 'Basic progress-bar', component: ProgressBarOverviewExample},
+ 'progress-spinner-configurable': {
+ title: 'Configurable progress-bar',
+ component: ProgressSpinnerConfigurableExample
+ },
+ 'progress-spinner-overview': {
+ title: 'Basic progress-spinner',
+ component: ProgressSpinnerOverviewExample
+ },
+ 'radio-ng-model': {title: 'Radios with ngModel', component: RadioNgModelExample},
+ 'radio-overview': {title: 'Basic radios', component: RadioOverviewExample},
+ 'select-overview': {title: 'Basic select', component: SelectOverviewExample},
+ 'select-form': {title: 'Select in a form', component: SelectFormExample},
+ 'sidenav-fab': {title: 'Sidenav with a FAB', component: SidenavFabExample},
+ 'sidenav-overview': {title: 'Basic sidenav', component: SidenavOverviewExample},
+ 'slider-configurable': {title: 'Configurable slider', component: SliderConfigurableExample},
+ 'slider-overview': {title: 'Basic slider', component: SliderOverviewExample},
+ 'slide-toggle-configurable': {
+ title: 'Configurable slide-toggle',
+ component: SlideToggleConfigurableExample
+ },
+ 'slide-toggle-overview': {title: 'Basic slide-toggles', component: SlideToggleOverviewExample},
+ 'snack-bar-component': {
+ title: 'Snack-bar with a custom component',
+ component: SnackBarComponentExample
+ },
+ 'snack-bar-overview': {title: 'Basic snack-bar', component: SnackBarOverviewExample},
+ 'tabs-overview': {title: 'Basic tabs', component: TabsOverviewExample},
+ 'tabs-template-label': {title: 'Coming soon!', component: TabsTemplateLabelExample},
+ 'toolbar-multirow': {title: 'Multi-row toolbar', component: ToolbarMultirowExample},
+ 'toolbar-overview': {title: 'basic toolbar', component: ToolbarOverviewExample},
+ 'tooltip-overview': {title: 'Basic tooltip', component: TooltipOverviewExample},
+ 'tooltip-position': {title: 'Tooltip with custom position', component: TooltipPositionExample},
+};
+
+/**
+ * The list of all example components.
+ * We need to put them in both `declarations` and `entryComponents` to make them work.
+ */
+export const EXAMPLE_LIST = [
+ AutocompleteOverviewExample,
+ ButtonOverviewExample,
+ ButtonToggleExclusiveExample,
+ ButtonToggleOverviewExample,
+ ButtonTypesExample,
+ CardFancyExample,
+ CardOverviewExample,
+ ChipsOverviewExample,
+ ChipsStackedExample,
+ CheckboxConfigurableExample,
+ CheckboxOverviewExample,
+ DialogOverviewExample,
+ DialogOverviewExampleDialog,
+ DialogResultExample,
+ DialogResultExampleDialog,
+ DialogElementsExample,
+ DialogElementsExampleDialog,
+ GridListDynamicExample,
+ GridListOverviewExample,
+ IconOverviewExample,
+ IconSvgExample,
+ InputFormExample,
+ InputOverviewExample,
+ ListOverviewExample,
+ ListSectionsExample,
+ MenuIconsExample,
+ MenuOverviewExample,
+ ProgressBarConfigurableExample,
+ ProgressBarOverviewExample,
+ ProgressSpinnerConfigurableExample,
+ ProgressSpinnerOverviewExample,
+ RadioNgModelExample,
+ RadioOverviewExample,
+ SidenavFabExample,
+ SelectOverviewExample,
+ SelectFormExample,
+ SidenavOverviewExample,
+ SliderConfigurableExample,
+ SliderOverviewExample,
+ SlideToggleConfigurableExample,
+ SlideToggleOverviewExample,
+ SnackBarComponentExample,
+ PizzaPartyComponent,
+ SnackBarOverviewExample,
+ TabsOverviewExample,
+ TabsTemplateLabelExample,
+ ToolbarMultirowExample,
+ ToolbarOverviewExample,
+ TooltipOverviewExample,
+ TooltipPositionExample,
+];
+
+@NgModule({
+ declarations: EXAMPLE_LIST,
+ entryComponents: EXAMPLE_LIST,
+ imports: [
+ MaterialModule,
+ FormsModule,
+ ReactiveFormsModule,
+ CommonModule,
+ ]
+})
+export class ExampleModule { }
diff --git a/src/examples/grid-list-dynamic/grid-list-dynamic-example.css b/src/examples/grid-list-dynamic/grid-list-dynamic-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/grid-list-dynamic/grid-list-dynamic-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/grid-list-dynamic/grid-list-dynamic-example.html b/src/examples/grid-list-dynamic/grid-list-dynamic-example.html
new file mode 100644
index 000000000000..19c84dd5b853
--- /dev/null
+++ b/src/examples/grid-list-dynamic/grid-list-dynamic-example.html
@@ -0,0 +1,9 @@
+
+
+ {{tile.text}}
+
+
diff --git a/src/examples/grid-list-dynamic/grid-list-dynamic-example.ts b/src/examples/grid-list-dynamic/grid-list-dynamic-example.ts
new file mode 100644
index 000000000000..8f0834fa0aeb
--- /dev/null
+++ b/src/examples/grid-list-dynamic/grid-list-dynamic-example.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'grid-list-dynamic-example',
+ templateUrl: './grid-list-dynamic-example.html',
+})
+export class GridListDynamicExample {
+ tiles = [
+ {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
+ {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
+ {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
+ {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
+ ];
+}
diff --git a/src/examples/grid-list-overview/grid-list-overview-example.css b/src/examples/grid-list-overview/grid-list-overview-example.css
new file mode 100644
index 000000000000..2598f58f5190
--- /dev/null
+++ b/src/examples/grid-list-overview/grid-list-overview-example.css
@@ -0,0 +1,3 @@
+md-grid-tile {
+ background: lightblue;
+}
diff --git a/src/examples/grid-list-overview/grid-list-overview-example.html b/src/examples/grid-list-overview/grid-list-overview-example.html
new file mode 100644
index 000000000000..6651887f603f
--- /dev/null
+++ b/src/examples/grid-list-overview/grid-list-overview-example.html
@@ -0,0 +1,6 @@
+
+ 1
+ 2
+ 3
+ 4
+
diff --git a/src/examples/grid-list-overview/grid-list-overview-example.ts b/src/examples/grid-list-overview/grid-list-overview-example.ts
new file mode 100644
index 000000000000..ba23f5740b98
--- /dev/null
+++ b/src/examples/grid-list-overview/grid-list-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+ selector: 'grid-list-overview-example',
+ styleUrls: ['./grid-list-overview-example.css'],
+ templateUrl: './grid-list-overview-example.html',
+})
+export class GridListOverviewExample {}
diff --git a/src/examples/icon-overview/icon-overview-example.css b/src/examples/icon-overview/icon-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/icon-overview/icon-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/icon-overview/icon-overview-example.html b/src/examples/icon-overview/icon-overview-example.html
new file mode 100644
index 000000000000..dd46af80f6cb
--- /dev/null
+++ b/src/examples/icon-overview/icon-overview-example.html
@@ -0,0 +1 @@
+home
diff --git a/src/examples/icon-overview/icon-overview-example.ts b/src/examples/icon-overview/icon-overview-example.ts
new file mode 100644
index 000000000000..90ed28a61266
--- /dev/null
+++ b/src/examples/icon-overview/icon-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'icon-overview-example',
+ templateUrl: './icon-overview-example.html',
+})
+export class IconOverviewExample {}
diff --git a/src/examples/icon-svg-example/icon-svg-example.css b/src/examples/icon-svg-example/icon-svg-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/icon-svg-example/icon-svg-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/icon-svg-example/icon-svg-example.html b/src/examples/icon-svg-example/icon-svg-example.html
new file mode 100644
index 000000000000..ac74cf7908dd
--- /dev/null
+++ b/src/examples/icon-svg-example/icon-svg-example.html
@@ -0,0 +1 @@
+
+
+
diff --git a/src/examples/input-overview/input-overview-example.ts b/src/examples/input-overview/input-overview-example.ts
new file mode 100644
index 000000000000..2bdc3fd6b206
--- /dev/null
+++ b/src/examples/input-overview/input-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'input-overview-example',
+ templateUrl: './input-overview-example.html',
+})
+export class InputOverviewExample {}
diff --git a/src/examples/list-overview/list-overview-example.css b/src/examples/list-overview/list-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/list-overview/list-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/list-overview/list-overview-example.html b/src/examples/list-overview/list-overview-example.html
new file mode 100644
index 000000000000..ada715ee0acf
--- /dev/null
+++ b/src/examples/list-overview/list-overview-example.html
@@ -0,0 +1,5 @@
+
+ Item 1
+ Item 2
+ Item 3
+
diff --git a/src/examples/list-overview/list-overview-example.ts b/src/examples/list-overview/list-overview-example.ts
new file mode 100644
index 000000000000..f38e186020d8
--- /dev/null
+++ b/src/examples/list-overview/list-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'list-overview-example',
+ templateUrl: './list-overview-example.html',
+})
+export class ListOverviewExample {}
diff --git a/src/examples/list-sections/list-sections-example.css b/src/examples/list-sections/list-sections-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/list-sections/list-sections-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/list-sections/list-sections-example.html b/src/examples/list-sections/list-sections-example.html
new file mode 100644
index 000000000000..38d20f97eedc
--- /dev/null
+++ b/src/examples/list-sections/list-sections-example.html
@@ -0,0 +1,15 @@
+
+
+ folder
+
+
+ note
+
+
diff --git a/src/examples/list-sections/list-sections-example.ts b/src/examples/list-sections/list-sections-example.ts
new file mode 100644
index 000000000000..d6fd703390aa
--- /dev/null
+++ b/src/examples/list-sections/list-sections-example.ts
@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'list-sections-example',
+ templateUrl: './list-sections-example.html',
+})
+export class ListSectionsExample {
+ folders = [
+ {
+ name: 'Photos',
+ updated: new Date('1/1/16'),
+ },
+ {
+ name: 'Recipes',
+ updated: new Date('1/17/16'),
+ },
+ {
+ name: 'Work',
+ updated: new Date('1/28/16'),
+ }
+ ];
+ notes = [
+ {
+ name: 'Vacation Itinerary',
+ updated: new Date('2/20/16'),
+ },
+ {
+ name: 'Kitchen Remodel',
+ updated: new Date('1/18/16'),
+ }
+ ];
+}
diff --git a/src/examples/menu-icons/menu-icons-example.css b/src/examples/menu-icons/menu-icons-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/menu-icons/menu-icons-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/menu-icons/menu-icons-example.html b/src/examples/menu-icons/menu-icons-example.html
new file mode 100644
index 000000000000..e14942451644
--- /dev/null
+++ b/src/examples/menu-icons/menu-icons-example.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
diff --git a/src/examples/menu-icons/menu-icons-example.ts b/src/examples/menu-icons/menu-icons-example.ts
new file mode 100644
index 000000000000..070bc434bdb7
--- /dev/null
+++ b/src/examples/menu-icons/menu-icons-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'menu-icons-example',
+ templateUrl: './menu-icons-example.html',
+})
+export class MenuIconsExample {}
diff --git a/src/examples/menu-overview/menu-overview-example.css b/src/examples/menu-overview/menu-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/menu-overview/menu-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/menu-overview/menu-overview-example.html b/src/examples/menu-overview/menu-overview-example.html
new file mode 100644
index 000000000000..2b5d246c298e
--- /dev/null
+++ b/src/examples/menu-overview/menu-overview-example.html
@@ -0,0 +1,5 @@
+
+
+
+
+
diff --git a/src/examples/menu-overview/menu-overview-example.ts b/src/examples/menu-overview/menu-overview-example.ts
new file mode 100644
index 000000000000..b5b8c8a8df47
--- /dev/null
+++ b/src/examples/menu-overview/menu-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'menu-overview-example',
+ templateUrl: './menu-overview-example.html',
+})
+export class MenuOverviewExample {}
diff --git a/src/examples/progress-bar-configurable/progress-bar-configurable-example.css b/src/examples/progress-bar-configurable/progress-bar-configurable-example.css
new file mode 100644
index 000000000000..558293fbb5b8
--- /dev/null
+++ b/src/examples/progress-bar-configurable/progress-bar-configurable-example.css
@@ -0,0 +1,14 @@
+.example-h2 {
+ margin: 10px;
+}
+
+.example-section {
+ display: flex;
+ align-content: center;
+ align-items: center;
+ height: 60px;
+}
+
+.example-margin {
+ margin: 0 10px;
+}
diff --git a/src/examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/examples/progress-bar-configurable/progress-bar-configurable-example.html
new file mode 100644
index 000000000000..93937b77a8b8
--- /dev/null
+++ b/src/examples/progress-bar-configurable/progress-bar-configurable-example.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+ Primary
+
+
+ Accent
+
+
+ Warn
+
+
+
+
+
+
+
+
+ Determinate
+
+
+ Indeterminate
+
+
+ Buffer
+
+
+ Query
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/examples/progress-bar-configurable/progress-bar-configurable-example.ts b/src/examples/progress-bar-configurable/progress-bar-configurable-example.ts
new file mode 100644
index 000000000000..f3fa937826bd
--- /dev/null
+++ b/src/examples/progress-bar-configurable/progress-bar-configurable-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'progress-bar-configurable-example',
+ templateUrl: './progress-bar-configurable-example.html',
+ styleUrls: ['./progress-bar-configurable-example.css'],
+})
+export class ProgressBarConfigurableExample {
+ color = 'primary';
+ mode = 'determinate';
+ value = 50;
+ bufferValue = 75;
+}
diff --git a/src/examples/progress-bar-overview/progress-bar-overview-example.css b/src/examples/progress-bar-overview/progress-bar-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/progress-bar-overview/progress-bar-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/progress-bar-overview/progress-bar-overview-example.html b/src/examples/progress-bar-overview/progress-bar-overview-example.html
new file mode 100644
index 000000000000..8ab16e9cfc13
--- /dev/null
+++ b/src/examples/progress-bar-overview/progress-bar-overview-example.html
@@ -0,0 +1 @@
+
+
+
+
+
+
+ Primary
+
+
+ Accent
+
+
+ Warn
+
+
+
+
+
+
+
+
+ Determinate
+
+
+ Indeterminate
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts b/src/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts
new file mode 100644
index 000000000000..b621aaa51e6f
--- /dev/null
+++ b/src/examples/progress-spinner-configurable/progress-spinner-configurable-example.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'progress-spinner-configurable-example',
+ templateUrl: './progress-spinner-configurable-example.html',
+ styleUrls: ['./progress-spinner-configurable-example.css'],
+})
+export class ProgressSpinnerConfigurableExample {
+ color = 'primary';
+ mode = 'determinate';
+ value = 50;
+}
diff --git a/src/examples/progress-spinner-overview/progress-spinner-overview-example.css b/src/examples/progress-spinner-overview/progress-spinner-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/progress-spinner-overview/progress-spinner-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/progress-spinner-overview/progress-spinner-overview-example.html b/src/examples/progress-spinner-overview/progress-spinner-overview-example.html
new file mode 100644
index 000000000000..cd768c67385c
--- /dev/null
+++ b/src/examples/progress-spinner-overview/progress-spinner-overview-example.html
@@ -0,0 +1 @@
+
+
+ {{season}}
+
+
+
+ Option 1
+ Option 2
+
diff --git a/src/examples/radio-overview/radio-overview-example.ts b/src/examples/radio-overview/radio-overview-example.ts
new file mode 100644
index 000000000000..a845835e41f4
--- /dev/null
+++ b/src/examples/radio-overview/radio-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'radio-overview-example',
+ templateUrl: './radio-overview-example.html',
+})
+export class RadioOverviewExample {}
diff --git a/src/examples/select-form/select-form-example.css b/src/examples/select-form/select-form-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/select-form/select-form-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/select-form/select-form-example.html b/src/examples/select-form/select-form-example.html
new file mode 100644
index 000000000000..6dea33cc5963
--- /dev/null
+++ b/src/examples/select-form/select-form-example.html
@@ -0,0 +1,9 @@
+
diff --git a/src/examples/select-form/select-form-example.ts b/src/examples/select-form/select-form-example.ts
new file mode 100644
index 000000000000..684bf016e5a9
--- /dev/null
+++ b/src/examples/select-form/select-form-example.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'select-form-example',
+ templateUrl: './select-form-example.html',
+})
+export class SelectFormExample {
+ selectedValue: string;
+
+ foods = [
+ {value: 'steak-0', viewValue: 'Steak'},
+ {value: 'pizza-1', viewValue: 'Pizza'},
+ {value: 'tacos-2', viewValue: 'Tacos'}
+ ];
+}
diff --git a/src/examples/select-overview/select-overview-example.css b/src/examples/select-overview/select-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/select-overview/select-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/select-overview/select-overview-example.html b/src/examples/select-overview/select-overview-example.html
new file mode 100644
index 000000000000..a4017ca5c242
--- /dev/null
+++ b/src/examples/select-overview/select-overview-example.html
@@ -0,0 +1,5 @@
+
+
+ {{ food.viewValue }}
+
+
diff --git a/src/examples/select-overview/select-overview-example.ts b/src/examples/select-overview/select-overview-example.ts
new file mode 100644
index 000000000000..8162dc7f616d
--- /dev/null
+++ b/src/examples/select-overview/select-overview-example.ts
@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'select-overview-example',
+ templateUrl: './select-overview-example.html',
+})
+export class SelectOverviewExample {
+ foods = [
+ {value: 'steak-0', viewValue: 'Steak'},
+ {value: 'pizza-1', viewValue: 'Pizza'},
+ {value: 'tacos-2', viewValue: 'Tacos'}
+ ];
+}
diff --git a/src/examples/sidenav-fab/sidenav-fab-example.css b/src/examples/sidenav-fab/sidenav-fab-example.css
new file mode 100644
index 000000000000..98d497acfe3d
--- /dev/null
+++ b/src/examples/sidenav-fab/sidenav-fab-example.css
@@ -0,0 +1,25 @@
+.example-sidenav-fab-container {
+ width: 500px;
+ height: 300px;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-fab-container md-sidenav {
+ max-width: 200px;
+}
+
+.example-sidenav-fab-container .md-sidenav-content,
+.example-sidenav-fab-container md-sidenav {
+ display: flex;
+ overflow: visible;
+}
+
+.example-scrolling-content {
+ overflow: auto;
+}
+
+.example-fab {
+ position: absolute;
+ right: 20px;
+ bottom: 10px;
+}
diff --git a/src/examples/sidenav-fab/sidenav-fab-example.html b/src/examples/sidenav-fab/sidenav-fab-example.html
new file mode 100644
index 000000000000..f194c09852e2
--- /dev/null
+++ b/src/examples/sidenav-fab/sidenav-fab-example.html
@@ -0,0 +1,32 @@
+
+
+
+
+
+
diff --git a/src/examples/sidenav-fab/sidenav-fab-example.ts b/src/examples/sidenav-fab/sidenav-fab-example.ts
new file mode 100644
index 000000000000..a86050b2957d
--- /dev/null
+++ b/src/examples/sidenav-fab/sidenav-fab-example.ts
@@ -0,0 +1,10 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+ selector: 'sidenav-fab-example',
+ templateUrl: './sidenav-fab-example.html',
+ styleUrls: ['./sidenav-fab-example.css'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class SidenavFabExample {}
diff --git a/src/examples/sidenav-overview/sidenav-overview-example.css b/src/examples/sidenav-overview/sidenav-overview-example.css
new file mode 100644
index 000000000000..8ab00588bb34
--- /dev/null
+++ b/src/examples/sidenav-overview/sidenav-overview-example.css
@@ -0,0 +1,16 @@
+.example-container {
+ width: 500px;
+ height: 300px;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+.example-sidenav {
+ padding: 20px;
+}
diff --git a/src/examples/sidenav-overview/sidenav-overview-example.html b/src/examples/sidenav-overview/sidenav-overview-example.html
new file mode 100644
index 000000000000..83f34793b0a4
--- /dev/null
+++ b/src/examples/sidenav-overview/sidenav-overview-example.html
@@ -0,0 +1,12 @@
+
+
+ Jolly good!
+
+
+
diff --git a/src/examples/sidenav-overview/sidenav-overview-example.ts b/src/examples/sidenav-overview/sidenav-overview-example.ts
new file mode 100644
index 000000000000..533802a9099f
--- /dev/null
+++ b/src/examples/sidenav-overview/sidenav-overview-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'sidenav-overview-example',
+ templateUrl: './sidenav-overview-example.html',
+ styleUrls: ['./sidenav-overview-example.css'],
+})
+export class SidenavOverviewExample {}
diff --git a/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.css b/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.css
new file mode 100644
index 000000000000..060532ee7d9f
--- /dev/null
+++ b/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.css
@@ -0,0 +1,14 @@
+.example-h2 {
+ margin: 10px;
+}
+
+.example-section {
+ display: flex;
+ align-content: center;
+ align-items: center;
+ height: 60px;
+}
+
+.example-margin {
+ margin: 10px;
+}
diff --git a/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.html b/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.html
new file mode 100644
index 000000000000..88099f4b0254
--- /dev/null
+++ b/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+ Primary
+
+
+ Accent
+
+
+ Warn
+
+
+
+
+
+ Checked
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+ Slide me!
+
+
+
+
diff --git a/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.ts b/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
new file mode 100644
index 000000000000..cfa28ceddd4d
--- /dev/null
+++ b/src/examples/slide-toggle-configurable/slide-toggle-configurable-example.ts
@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'slide-toggle-configurable-example',
+ templateUrl: './slide-toggle-configurable-example.html',
+ styleUrls: ['./slide-toggle-configurable-example.css'],
+})
+export class SlideToggleConfigurableExample {
+ color = 'accent';
+ checked = false;
+ disabled = false;
+}
diff --git a/src/examples/slide-toggle-overview/slide-toggle-overview-example.css b/src/examples/slide-toggle-overview/slide-toggle-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/slide-toggle-overview/slide-toggle-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/slide-toggle-overview/slide-toggle-overview-example.html b/src/examples/slide-toggle-overview/slide-toggle-overview-example.html
new file mode 100644
index 000000000000..6b9586e148fc
--- /dev/null
+++ b/src/examples/slide-toggle-overview/slide-toggle-overview-example.html
@@ -0,0 +1 @@
+Slide me!
diff --git a/src/examples/slide-toggle-overview/slide-toggle-overview-example.ts b/src/examples/slide-toggle-overview/slide-toggle-overview-example.ts
new file mode 100644
index 000000000000..0f35c9d5e9b1
--- /dev/null
+++ b/src/examples/slide-toggle-overview/slide-toggle-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'slide-toggle-overview-example',
+ templateUrl: './slide-toggle-overview-example.html',
+})
+export class SlideToggleOverviewExample {}
diff --git a/src/examples/slider-configurable/slider-configurable-example.css b/src/examples/slider-configurable/slider-configurable-example.css
new file mode 100644
index 000000000000..389e65bd7ac0
--- /dev/null
+++ b/src/examples/slider-configurable/slider-configurable-example.css
@@ -0,0 +1,22 @@
+.example-h2 {
+ margin: 10px;
+}
+
+.example-section {
+ display: flex;
+ align-content: center;
+ align-items: center;
+ height: 60px;
+}
+
+.example-margin {
+ margin: 10px;
+}
+
+.md-slider-horizontal {
+ width: 300px;
+}
+
+.md-slider-vertical {
+ height: 300px;
+}
diff --git a/src/examples/slider-configurable/slider-configurable-example.html b/src/examples/slider-configurable/slider-configurable-example.html
new file mode 100644
index 000000000000..ba886e760363
--- /dev/null
+++ b/src/examples/slider-configurable/slider-configurable-example.html
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show ticks
+
+ Auto ticks
+
+
+
+
+
+
+
+ Show thumb label
+
+
+
+ Vertical
+ Inverted
+
+
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/examples/slider-configurable/slider-configurable-example.ts b/src/examples/slider-configurable/slider-configurable-example.ts
new file mode 100644
index 000000000000..933a9dee7311
--- /dev/null
+++ b/src/examples/slider-configurable/slider-configurable-example.ts
@@ -0,0 +1,29 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({
+ selector: 'slider-configurable-example',
+ templateUrl: './slider-configurable-example.html',
+ styleUrls: ['./slider-configurable-example.css'],
+ encapsulation: ViewEncapsulation.None,
+})
+export class SliderConfigurableExample {
+ autoTicks = false;
+ disabled = false;
+ invert = false;
+ max = 100;
+ min = 0;
+ showTicks = false;
+ step = 1;
+ thumbLabel = false;
+ value = 0;
+ vertical = false;
+
+ get tickInterval(): number | 'auto' {
+ return this.showTicks ? (this.autoTicks ? 'auto' : this._tickInterval) : null;
+ }
+ set tickInterval(v) {
+ this._tickInterval = Number(v);
+ }
+ private _tickInterval = 1;
+}
diff --git a/src/examples/slider-overview/slider-overview-example.css b/src/examples/slider-overview/slider-overview-example.css
new file mode 100644
index 000000000000..8dfe08ccc21d
--- /dev/null
+++ b/src/examples/slider-overview/slider-overview-example.css
@@ -0,0 +1,4 @@
+/** No CSS for this example */
+md-slider {
+ width: 300px;
+}
diff --git a/src/examples/slider-overview/slider-overview-example.html b/src/examples/slider-overview/slider-overview-example.html
new file mode 100644
index 000000000000..9a92c8f867dd
--- /dev/null
+++ b/src/examples/slider-overview/slider-overview-example.html
@@ -0,0 +1 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/examples/snack-bar-overview/snack-bar-overview-example.ts b/src/examples/snack-bar-overview/snack-bar-overview-example.ts
new file mode 100644
index 000000000000..312de83ea671
--- /dev/null
+++ b/src/examples/snack-bar-overview/snack-bar-overview-example.ts
@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+
+@Component({
+ selector: 'snack-bar-overview-example',
+ templateUrl: './snack-bar-overview-example.html',
+})
+export class SnackBarOverviewExample {
+ constructor(public snackBar: MdSnackBar) {}
+
+ openSnackBar(message: string, action: string) {
+ this.snackBar.open(message, action, {
+ duration: 2000,
+ });
+ }
+}
diff --git a/src/examples/tabs-overview/tabs-overview-example.css b/src/examples/tabs-overview/tabs-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/tabs-overview/tabs-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/tabs-overview/tabs-overview-example.html b/src/examples/tabs-overview/tabs-overview-example.html
new file mode 100644
index 000000000000..173ece5dc477
--- /dev/null
+++ b/src/examples/tabs-overview/tabs-overview-example.html
@@ -0,0 +1,4 @@
+
+ Content 1
+ Content 2
+
diff --git a/src/examples/tabs-overview/tabs-overview-example.ts b/src/examples/tabs-overview/tabs-overview-example.ts
new file mode 100644
index 000000000000..4f222c112621
--- /dev/null
+++ b/src/examples/tabs-overview/tabs-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'tabs-overview-example',
+ templateUrl: './tabs-overview-example.html',
+})
+export class TabsOverviewExample {}
diff --git a/src/examples/tabs-template-label/tabs-template-label-example.css b/src/examples/tabs-template-label/tabs-template-label-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/tabs-template-label/tabs-template-label-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/tabs-template-label/tabs-template-label-example.html b/src/examples/tabs-template-label/tabs-template-label-example.html
new file mode 100644
index 000000000000..bde67b8e9138
--- /dev/null
+++ b/src/examples/tabs-template-label/tabs-template-label-example.html
@@ -0,0 +1 @@
+More examples coming soon!
diff --git a/src/examples/tabs-template-label/tabs-template-label-example.ts b/src/examples/tabs-template-label/tabs-template-label-example.ts
new file mode 100644
index 000000000000..7015b1f74182
--- /dev/null
+++ b/src/examples/tabs-template-label/tabs-template-label-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'tabs-template-label-example',
+ templateUrl: './tabs-template-label-example.html',
+})
+export class TabsTemplateLabelExample {}
diff --git a/src/examples/toolbar-multirow/toolbar-multirow-example.css b/src/examples/toolbar-multirow/toolbar-multirow-example.css
new file mode 100644
index 000000000000..d7c40156ba97
--- /dev/null
+++ b/src/examples/toolbar-multirow/toolbar-multirow-example.css
@@ -0,0 +1,7 @@
+.example-icon {
+ padding: 0 14px;
+}
+
+.example-spacer {
+ flex: 1 1 auto;
+}
diff --git a/src/examples/toolbar-multirow/toolbar-multirow-example.html b/src/examples/toolbar-multirow/toolbar-multirow-example.html
new file mode 100644
index 000000000000..9b178a21249f
--- /dev/null
+++ b/src/examples/toolbar-multirow/toolbar-multirow-example.html
@@ -0,0 +1,16 @@
+
+ Custom Toolbar
+
+
+ Second Line
+
+ verified_user
+
+
+
+ Third Line
+
+ favorite
+ delete
+
+
diff --git a/src/examples/toolbar-multirow/toolbar-multirow-example.ts b/src/examples/toolbar-multirow/toolbar-multirow-example.ts
new file mode 100644
index 000000000000..132b98174f67
--- /dev/null
+++ b/src/examples/toolbar-multirow/toolbar-multirow-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'toolbar-multirow-example',
+ templateUrl: './toolbar-multirow-example.html',
+ styleUrls: ['./toolbar-multirow-example.css'],
+})
+export class ToolbarMultirowExample {}
diff --git a/src/examples/toolbar-overview/toolbar-overview-example.css b/src/examples/toolbar-overview/toolbar-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/toolbar-overview/toolbar-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/toolbar-overview/toolbar-overview-example.html b/src/examples/toolbar-overview/toolbar-overview-example.html
new file mode 100644
index 000000000000..bf8cc3998630
--- /dev/null
+++ b/src/examples/toolbar-overview/toolbar-overview-example.html
@@ -0,0 +1 @@
+My App
diff --git a/src/examples/toolbar-overview/toolbar-overview-example.ts b/src/examples/toolbar-overview/toolbar-overview-example.ts
new file mode 100644
index 000000000000..6919aca4f3fc
--- /dev/null
+++ b/src/examples/toolbar-overview/toolbar-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'toolbar-overview-example',
+ templateUrl: './toolbar-overview-example.html',
+})
+export class ToolbarOverviewExample {}
diff --git a/src/examples/tooltip-overview/tooltip-overview-example.css b/src/examples/tooltip-overview/tooltip-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/tooltip-overview/tooltip-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/tooltip-overview/tooltip-overview-example.html b/src/examples/tooltip-overview/tooltip-overview-example.html
new file mode 100644
index 000000000000..8319a8545846
--- /dev/null
+++ b/src/examples/tooltip-overview/tooltip-overview-example.html
@@ -0,0 +1 @@
+I have a tooltip
diff --git a/src/examples/tooltip-overview/tooltip-overview-example.ts b/src/examples/tooltip-overview/tooltip-overview-example.ts
new file mode 100644
index 000000000000..cf9eefc94557
--- /dev/null
+++ b/src/examples/tooltip-overview/tooltip-overview-example.ts
@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'tooltip-overview-example',
+ templateUrl: './tooltip-overview-example.html',
+})
+export class TooltipOverviewExample {}
diff --git a/src/examples/tooltip-position/tooltip-position-example.css b/src/examples/tooltip-position/tooltip-position-example.css
new file mode 100644
index 000000000000..04ec59dd1fc7
--- /dev/null
+++ b/src/examples/tooltip-position/tooltip-position-example.css
@@ -0,0 +1,9 @@
+.example-tooltip-host {
+ display: inline-flex;
+ align-items: center;
+ margin: 50px;
+}
+
+.example-select {
+ margin: 0 10px;
+}
diff --git a/src/examples/tooltip-position/tooltip-position-example.html b/src/examples/tooltip-position/tooltip-position-example.html
new file mode 100644
index 000000000000..156a5bf68492
--- /dev/null
+++ b/src/examples/tooltip-position/tooltip-position-example.html
@@ -0,0 +1,11 @@
+();
+
+ /** Whether or not the placeholder state is being overridden. */
+ private _manuallyFloatingPlaceholder = false;
+
+ /** View -> model callback called when value changes */
+ _onChange = (value: any) => {};
+
+ /** View -> model callback called when autocomplete has been touched */
+ _onTouched = () => {};
+
+ /* The autocomplete panel to be attached to this trigger. */
+ @Input('mdAutocomplete') autocomplete: MdAutocomplete;
+
+ /** Property with mat- prefix for no-conflict mode. */
+ @Input('matAutocomplete')
+ get _matAutocomplete(): MdAutocomplete {
+ return this.autocomplete;
+ }
+
+ set _matAutocomplete(autocomplete: MdAutocomplete) {
+ this.autocomplete = autocomplete;
+ }
+
+ constructor(private _element: ElementRef, private _overlay: Overlay,
+ private _viewContainerRef: ViewContainerRef,
+ @Optional() private _dir: Dir, private _zone: NgZone,
+ @Optional() @Host() private _inputContainer: MdInputContainer) {}
+
+ ngOnDestroy() {
+ if (this._panelPositionSubscription) {
+ this._panelPositionSubscription.unsubscribe();
+ }
+
+ this._destroyPanel();
+ }
+
+ /* Whether or not the autocomplete panel is open. */
+ get panelOpen(): boolean {
+ return this._panelOpen && this.autocomplete.showPanel;
+ }
+
+ /** Opens the autocomplete suggestion panel. */
+ openPanel(): void {
+ if (!this._overlayRef) {
+ this._createOverlay();
+ } else {
+ /** Update the panel width, in case the host width has changed */
+ this._overlayRef.getState().width = this._getHostWidth();
+ }
+
+ if (!this._overlayRef.hasAttached()) {
+ this._overlayRef.attach(this._portal);
+ this._subscribeToClosingActions();
+ }
+
+ this._panelOpen = true;
+ this._floatPlaceholder();
+ }
+
+ /** Closes the autocomplete suggestion panel. */
+ closePanel(): void {
+ if (this._overlayRef && this._overlayRef.hasAttached()) {
+ this._overlayRef.detach();
+ }
+
+ this._panelOpen = false;
+ this._resetPlaceholder();
+ }
+
+ /**
+ * A stream of actions that should close the autocomplete panel, including
+ * when an option is selected, on blur, and when TAB is pressed.
+ */
+ get panelClosingActions(): Observable {
+ return Observable.merge(
+ this.optionSelections,
+ this._blurStream.asObservable(),
+ this.autocomplete._keyManager.tabOut
+ );
+ }
+
+ /** Stream of autocomplete option selections. */
+ get optionSelections(): Observable {
+ return Observable.merge(...this.autocomplete.options.map(option => option.onSelectionChange));
+ }
+
+ /** The currently active option, coerced to MdOption type. */
+ get activeOption(): MdOption {
+ if (this.autocomplete._keyManager) {
+ return this.autocomplete._keyManager.activeItem as MdOption;
+ }
+ }
+
+ /**
+ * Sets the autocomplete's value. Part of the ControlValueAccessor interface
+ * required to integrate with Angular's core forms API.
+ *
+ * @param value New value to be written to the model.
+ */
+ writeValue(value: any): void {
+ Promise.resolve(null).then(() => this._setTriggerValue(value));
+ }
+
+ /**
+ * Saves a callback function to be invoked when the autocomplete's value
+ * changes from user input. Part of the ControlValueAccessor interface
+ * required to integrate with Angular's core forms API.
+ *
+ * @param fn Callback to be triggered when the value changes.
+ */
+ registerOnChange(fn: (value: any) => {}): void {
+ this._onChange = fn;
+ }
+
+ /**
+ * Saves a callback function to be invoked when the autocomplete is blurred
+ * by the user. Part of the ControlValueAccessor interface required
+ * to integrate with Angular's core forms API.
+ *
+ * @param fn Callback to be triggered when the component has been touched.
+ */
+ registerOnTouched(fn: () => {}) {
+ this._onTouched = fn;
+ }
+
+ _handleKeydown(event: KeyboardEvent): void {
+ if (this.activeOption && event.keyCode === ENTER) {
+ this.activeOption._selectViaInteraction();
+ } else {
+ this.autocomplete._keyManager.onKeydown(event);
+ if (event.keyCode === UP_ARROW || event.keyCode === DOWN_ARROW) {
+ this.openPanel();
+ Promise.resolve().then(() => this._scrollToOption());
+ }
+ }
+ }
+
+ _handleInput(event: KeyboardEvent): void {
+ // We need to ensure that the input is focused, because IE will fire the `input`
+ // event on focus/blur/load if the input has a placeholder. See:
+ // https://connect.microsoft.com/IE/feedback/details/885747/
+ if (document.activeElement === event.target) {
+ this._onChange((event.target as HTMLInputElement).value);
+ this.openPanel();
+ }
+ }
+
+ _handleBlur(newlyFocusedTag: string): void {
+ this._onTouched();
+
+ // Only emit blur event if the new focus is *not* on an option.
+ if (newlyFocusedTag !== 'MD-OPTION') {
+ this._blurStream.next(null);
+ }
+ }
+
+ /**
+ * In "auto" mode, the placeholder will animate down as soon as focus is lost.
+ * This causes the value to jump when selecting an option with the mouse.
+ * This method manually floats the placeholder until the panel can be closed.
+ */
+ private _floatPlaceholder(): void {
+ if (this._inputContainer && this._inputContainer.floatPlaceholder === 'auto') {
+ this._inputContainer.floatPlaceholder = 'always';
+ this._manuallyFloatingPlaceholder = true;
+ }
+ }
+
+ /** If the placeholder has been manually elevated, return it to its normal state. */
+ private _resetPlaceholder(): void {
+ if (this._manuallyFloatingPlaceholder) {
+ this._inputContainer.floatPlaceholder = 'auto';
+ this._manuallyFloatingPlaceholder = false;
+ }
+ }
+
+ /**
+ * Given that we are not actually focusing active options, we must manually adjust scroll
+ * to reveal options below the fold. First, we find the offset of the option from the top
+ * of the panel. The new scrollTop will be that offset - the panel height + the option
+ * height, so the active option will be just visible at the bottom of the panel.
+ */
+ private _scrollToOption(): void {
+ const optionOffset =
+ this.autocomplete._keyManager.activeItemIndex * AUTOCOMPLETE_OPTION_HEIGHT;
+ const newScrollTop =
+ Math.max(0, optionOffset - AUTOCOMPLETE_PANEL_HEIGHT + AUTOCOMPLETE_OPTION_HEIGHT);
+ this.autocomplete._setScrollTop(newScrollTop);
+ }
+
+ /**
+ * This method listens to a stream of panel closing actions and resets the
+ * stream every time the option list changes.
+ */
+ private _subscribeToClosingActions(): void {
+ // When the zone is stable initially, and when the option list changes...
+ Observable.merge(this._zone.onStable.first(), this.autocomplete.options.changes)
+ // create a new stream of panelClosingActions, replacing any previous streams
+ // that were created, and flatten it so our stream only emits closing events...
+ .switchMap(() => {
+ this._resetPanel();
+ return this.panelClosingActions;
+ })
+ // when the first closing event occurs...
+ .first()
+ // set the value, close the panel, and complete.
+ .subscribe(event => this._setValueAndClose(event));
+ }
+
+ /** Destroys the autocomplete suggestion panel. */
+ private _destroyPanel(): void {
+ if (this._overlayRef) {
+ this.closePanel();
+ this._overlayRef.dispose();
+ this._overlayRef = null;
+ }
+ }
+
+ private _setTriggerValue(value: any): void {
+ const toDisplay = this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
+ this._element.nativeElement.value = toDisplay || '';
+ }
+
+ /**
+ * This method closes the panel, and if a value is specified, also sets the associated
+ * control to that value. It will also mark the control as dirty if this interaction
+ * stemmed from the user.
+ */
+ private _setValueAndClose(event: MdOptionSelectionChange | null): void {
+ if (event) {
+ this._setTriggerValue(event.source.value);
+ this._onChange(event.source.value);
+ }
+
+ this.closePanel();
+ }
+
+ private _createOverlay(): void {
+ this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef);
+ this._overlayRef = this._overlay.create(this._getOverlayConfig());
+ }
+
+ private _getOverlayConfig(): OverlayState {
+ const overlayState = new OverlayState();
+ overlayState.positionStrategy = this._getOverlayPosition();
+ overlayState.width = this._getHostWidth();
+ overlayState.direction = this._dir ? this._dir.value : 'ltr';
+ return overlayState;
+ }
+
+ private _getOverlayPosition(): PositionStrategy {
+ this._positionStrategy = this._overlay.position().connectedTo(
+ this._element,
+ {originX: 'start', originY: 'bottom'}, {overlayX: 'start', overlayY: 'top'})
+ .withFallbackPosition(
+ {originX: 'start', originY: 'top'}, {overlayX: 'start', overlayY: 'bottom'}
+ );
+ this._subscribeToPositionChanges(this._positionStrategy);
+ return this._positionStrategy;
+ }
+
+ /**
+ * This method subscribes to position changes in the autocomplete panel, so the panel's
+ * y-offset can be adjusted to match the new position.
+ */
+ private _subscribeToPositionChanges(strategy: ConnectedPositionStrategy) {
+ this._panelPositionSubscription = strategy.onPositionChange.subscribe(change => {
+ this.autocomplete.positionY = change.connectionPair.originY === 'top' ? 'above' : 'below';
+ });
+ }
+
+ /** Returns the width of the input element, so the panel width can match it. */
+ private _getHostWidth(): number {
+ return this._element.nativeElement.getBoundingClientRect().width;
+ }
+
+ /** Reset active item to null so arrow events will activate the correct options.*/
+ private _resetActiveItem(): void {
+ this.autocomplete._keyManager.setActiveItem(null);
+ }
+
+ /**
+ * Resets the active item and re-calculates alignment of the panel in case its size
+ * has changed due to fewer or greater number of options.
+ */
+ private _resetPanel() {
+ this._resetActiveItem();
+ this._positionStrategy.recalculateLastPosition();
+ this.autocomplete._setVisibility();
+ }
+
+}
+
diff --git a/src/lib/autocomplete/autocomplete.html b/src/lib/autocomplete/autocomplete.html
index f0d1cbc032a0..cd94ceeb7340 100644
--- a/src/lib/autocomplete/autocomplete.html
+++ b/src/lib/autocomplete/autocomplete.html
@@ -1 +1,5 @@
-I'm an autocomplete!
\ No newline at end of file
+
+
+
+
+```
+
+Next, create the autocomplete panel and the options displayed inside it. Each option should be defined by an
+`md-option` tag. Set each option's value property to whatever you'd like the value of the text input to be
+upon that option's selection.
+
+*my-comp.html*
+```html
+
+
+ {{ option }}
+
+
+```
+
+Now we'll need to link the text input to its panel. We can do this by exporting the autocomplete panel instance into a
+local template variable (here we called it "auto"), and binding that variable to the input's `mdAutocomplete` property.
+
+*my-comp.html*
+```html
+
+
+
+
+
+
+ {{ option }}
+
+
+```
+
+### Adding a custom filter
+
+At this point, the autocomplete panel should be toggleable on focus and options should be selectable. But if we want
+our options to filter when we type, we need to add a custom filter.
+
+You can filter the options in any way you like based on the text input*. Here we will perform a simple string test on
+the option value to see if it matches the input value, starting from the option's first letter. We already have access
+to the built-in `valueChanges` observable on the `FormControl`, so we can simply map the text input's values to the
+suggested options by passing them through this filter. The resulting observable (`filteredOptions`) can be added to the
+template in place of the `options` property using the `async` pipe.
+
+Below we are also priming our value change stream with `null` so that the options are filtered by that value on init
+(before there are any value changes).
+
+*For optimal accessibility, you may want to consider adding text guidance on the page to explain filter criteria.
+This is especially helpful for screenreader users if you're using a non-standard filter that doesn't limit matches
+to the beginning of the string.
+
+*my-comp.ts*
+```ts
+class MyComp {
+ myControl = new FormControl();
+ options = [
+ 'One',
+ 'Two',
+ 'Three'
+ ];
+ filteredOptions: Observable;
+
+ ngOnInit() {
+ this.filteredOptions = this.myControl.valueChanges
+ .startWith(null)
+ .map(val => val ? this.filter(val) : this.options.slice());
+ }
+
+ filter(val: string): string[] {
+ return this.options.filter(option => new RegExp(`^${val}`, 'gi').test(option));
+ }
+}
+```
+
+*my-comp.html*
+```html
+
+
+
+
+
+
+ {{ option }}
+
+
+```
+
+### Setting separate control and display values
+
+If you want the option's control value (what is saved in the form) to be different than the option's display value
+(what is displayed in the actual text field), you'll need to set the `displayWith` property on your autocomplete
+element. A common use case for this might be if you want to save your data as an object, but display just one of
+the option's string properties.
+
+To make this work, create a function on your component class that maps the control value to the desired display value.
+Then bind it to the autocomplete's `displayWith` property.
+
+```html
+
+
+
+
+
+
+ {{ option.name }}
+
+
+```
+
+*my-comp.ts*
+```ts
+class MyComp {
+ myControl = new FormControl();
+ options = [
+ new User('Mary'),
+ new User('Shelley'),
+ new User('Igor')
+ ];
+ filteredOptions: Observable;
+
+ ngOnInit() {
+ this.filteredOptions = this.myControl.valueChanges
+ .startWith(null)
+ .map(user => user && typeof user === 'object' ? user.name : user)
+ .map(name => name ? this.filter(name) : this.options.slice());
+ }
+
+ filter(name: string): User[] {
+ return this.options.filter(option => new RegExp(`^${name}`, 'gi').test(option));
+ }
+
+ displayFn(user: User): string {
+ return user ? user.name : user;
+ }
+}
+```
+
+
+#### Keyboard interaction:
+- DOWN_ARROW: Next option becomes active.
+- UP_ARROW: Previous option becomes active.
+- ENTER: Select currently active item.
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
index e69de29bb2d1..a72841cbbd54 100644
--- a/src/lib/autocomplete/autocomplete.scss
+++ b/src/lib/autocomplete/autocomplete.scss
@@ -0,0 +1,38 @@
+@import '../core/style/menu-common';
+
+/**
+ * The max-height of the panel, currently matching md-select value.
+ * TODO: Check value with MD team.
+ */
+$mat-autocomplete-panel-max-height: 256px !default;
+
+/** When in "below" position, the panel needs a slight y-offset to ensure the input underline displays. */
+$mat-autocomplete-panel-below-offset: 6px !default;
+
+/** When in "above" position, the panel needs a larger y-offset to ensure the label has room to display. */
+$mat-autocomplete-panel-above-offset: -24px !default;
+
+.mat-autocomplete-panel {
+ @include mat-menu-base();
+ visibility: hidden;
+
+ max-width: none;
+ max-height: $mat-autocomplete-panel-max-height;
+ position: relative;
+
+ &.mat-autocomplete-panel-below {
+ top: $mat-autocomplete-panel-below-offset;
+ }
+
+ &.mat-autocomplete-panel-above {
+ top: $mat-autocomplete-panel-above-offset;
+ }
+
+ &.mat-autocomplete-visible {
+ visibility: visible;
+ }
+
+ &.mat-autocomplete-hidden {
+ visibility: hidden;
+ }
+}
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 158a6cf263d6..7118f73ae3cb 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1,29 +1,1149 @@
-import {TestBed, async} from '@angular/core/testing';
-import {Component} from '@angular/core';
-import {MdAutocompleteModule} from './index';
+import {TestBed, async, fakeAsync, tick, ComponentFixture} from '@angular/core/testing';
+import {Component, OnDestroy, QueryList, ViewChild, ViewChildren} from '@angular/core';
+import {By} from '@angular/platform-browser';
+import {MdAutocompleteModule, MdAutocompleteTrigger} from './index';
+import {OverlayContainer} from '../core/overlay/overlay-container';
+import {MdInputModule} from '../input/index';
+import {Dir, LayoutDirection} from '../core/rtl/dir';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {Subscription} from 'rxjs/Subscription';
+import {ENTER, DOWN_ARROW, SPACE, UP_ARROW} from '../core/keyboard/keycodes';
+import {MdOption} from '../core/option/option';
+import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
+import {FakeViewportRuler} from '../core/overlay/position/fake-viewport-ruler';
+import {MdAutocomplete} from './autocomplete';
+import {MdInputContainer} from '../input/input-container';
+import {Observable} from 'rxjs/Observable';
+import {dispatchFakeEvent} from '../core/testing/dispatch-events';
+import {typeInElement} from '../core/testing/type-in-element';
+
+import 'rxjs/add/operator/map';
describe('MdAutocomplete', () => {
+ let overlayContainerElement: HTMLElement;
+ let dir: LayoutDirection;
beforeEach(async(() => {
+ dir = 'ltr';
TestBed.configureTestingModule({
- imports: [MdAutocompleteModule.forRoot()],
- declarations: [SimpleAutocomplete],
- providers: []
+ imports: [
+ MdAutocompleteModule.forRoot(), MdInputModule.forRoot(), FormsModule, ReactiveFormsModule
+ ],
+ declarations: [
+ SimpleAutocomplete,
+ AutocompleteWithoutForms,
+ NgIfAutocomplete,
+ AutocompleteWithNgModel
+ ],
+ providers: [
+ {provide: OverlayContainer, useFactory: () => {
+ overlayContainerElement = document.createElement('div');
+ document.body.appendChild(overlayContainerElement);
+
+ // remove body padding to keep consistent cross-browser
+ document.body.style.padding = '0';
+ document.body.style.margin = '0';
+
+ return {getContainerElement: () => overlayContainerElement};
+ }},
+ {provide: Dir, useFactory: () => {
+ return {value: dir};
+ }},
+ {provide: ViewportRuler, useClass: FakeViewportRuler}
+ ]
});
TestBed.compileComponents();
}));
- it('should have a test', () => {
- expect(true).toBe(true);
+ describe('panel toggling', () => {
+ let fixture: ComponentFixture;
+ let input: HTMLInputElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SimpleAutocomplete);
+ fixture.detectChanges();
+
+ input = fixture.debugElement.query(By.css('input')).nativeElement;
+ });
+
+ it('should open the panel when the input is focused', async(() => {
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected panel state to start out closed.`);
+
+ dispatchFakeEvent(input, 'focus');
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(true, `Expected panel state to read open when input is focused.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('Alabama', `Expected panel to display when input is focused.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('California', `Expected panel to display when input is focused.`);
+ });
+ }));
+
+ it('should open the panel programmatically', async(() => {
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected panel state to start out closed.`);
+
+ fixture.componentInstance.trigger.openPanel();
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(true, `Expected panel state to read open when opened programmatically.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('Alabama', `Expected panel to display when opened programmatically.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('California', `Expected panel to display when opened programmatically.`);
+ });
+ }));
+
+ it('should close the panel when blurred', async(() => {
+ dispatchFakeEvent(input, 'focus');
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ dispatchFakeEvent(input, 'blur');
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected clicking outside the panel to set its state to closed.`);
+ expect(overlayContainerElement.textContent)
+ .toEqual('', `Expected clicking outside the panel to close the panel.`);
+ });
+ }));
+
+ it('should close the panel when an option is clicked', async(() => {
+ dispatchFakeEvent(input, 'focus');
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const option = overlayContainerElement.querySelector('md-option') as HTMLElement;
+ option.click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected clicking an option to set the panel state to closed.`);
+ expect(overlayContainerElement.textContent)
+ .toEqual('', `Expected clicking an option to close the panel.`);
+ });
+ }));
+
+ it('should close the panel when a newly created option is clicked', async(() => {
+ dispatchFakeEvent(input, 'focus');
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ // Filter down the option list to a subset of original options ('Alabama', 'California')
+ typeInElement('al', input);
+ fixture.detectChanges();
+
+ let options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[0].click();
+
+ // Changing value from 'Alabama' to 'al' to re-populate the option list,
+ // ensuring that 'California' is created new.
+ typeInElement('al', input);
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected clicking a new option to set the panel state to closed.`);
+ expect(overlayContainerElement.textContent)
+ .toEqual('', `Expected clicking a new option to close the panel.`);
+ });
+ });
+ }));
+
+ it('should close the panel programmatically', () => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.componentInstance.trigger.closePanel();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected closing programmatically to set the panel state to closed.`);
+ expect(overlayContainerElement.textContent)
+ .toEqual('', `Expected closing programmatically to close the panel.`);
+ });
+
+ it('should hide the panel when the options list is empty', async(() => {
+ dispatchFakeEvent(input, 'focus');
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ const panel =
+ overlayContainerElement.querySelector('.mat-autocomplete-panel') as HTMLElement;
+ expect(panel.classList)
+ .toContain('mat-autocomplete-visible', `Expected panel to start out visible.`);
+
+ // Filter down the option list such that no options match the value
+ typeInElement('af', input);
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ expect(panel.classList)
+ .toContain('mat-autocomplete-hidden', `Expected panel to hide itself when empty.`);
+ });
+ });
+ }));
+
+ it('should keep the label floating until the panel closes', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+ expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+ .toEqual('always', 'Expected placeholder to float as soon as panel opens.');
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+ .toEqual('auto', 'Expected placeholder to return to auto state after panel closes.');
+ });
+ }));
+
+ it('should not open the panel when the `input` event is invoked on a non-focused input', () => {
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected panel state to start out closed.`);
+
+ input.value = 'Alabama';
+ dispatchFakeEvent(input, 'input');
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected panel state to stay closed.`);
+ });
+
+ it('should not mess with placeholder placement if set to never', async(() => {
+ fixture.componentInstance.placeholder = 'never';
+ fixture.detectChanges();
+
+ fixture.componentInstance.trigger.openPanel();
+ expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+ .toEqual('never', 'Expected placeholder to stay static.');
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+ .toEqual('never', 'Expected placeholder to stay in static state after close.');
+ });
+ }));
+
+ it('should not mess with placeholder placement if set to always', async(() => {
+ fixture.componentInstance.placeholder = 'always';
+ fixture.detectChanges();
+
+ fixture.componentInstance.trigger.openPanel();
+ expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+ .toEqual('always', 'Expected placeholder to stay elevated on open.');
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.inputContainer.floatPlaceholder)
+ .toEqual('always', 'Expected placeholder to stay elevated after close.');
+ });
+ }));
+
});
+ it('should have the correct text direction in RTL', () => {
+ dir = 'rtl';
+
+ const rtlFixture = TestBed.createComponent(SimpleAutocomplete);
+ rtlFixture.detectChanges();
+
+ rtlFixture.componentInstance.trigger.openPanel();
+ rtlFixture.detectChanges();
+
+ const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane');
+ expect(overlayPane.getAttribute('dir')).toEqual('rtl');
+
+ });
+
+ describe('forms integration', () => {
+ let fixture: ComponentFixture;
+ let input: HTMLInputElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SimpleAutocomplete);
+ fixture.detectChanges();
+
+ input = fixture.debugElement.query(By.css('input')).nativeElement;
+ });
+
+ it('should update control value as user types with input value', () => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ typeInElement('a', input);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.value)
+ .toEqual('a', 'Expected control value to be updated as user types.');
+
+ typeInElement('al', input);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.value)
+ .toEqual('al', 'Expected control value to be updated as user types.');
+ });
+
+ it('should update control value when option is selected with option value', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.value)
+ .toEqual({code: 'CA', name: 'California'},
+ 'Expected control value to equal the selected option value.');
+ });
+ }));
+
+ it('should update control back to string if user types after option is selected', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ typeInElement('Californi', input);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.value)
+ .toEqual('Californi', 'Expected control value to revert back to string.');
+ });
+ }));
+
+ it('should fill the text field with display value when an option is selected', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(input.value)
+ .toContain('California', `Expected text field to fill with selected value.`);
+ });
+ }));
+
+ it('should fill the text field with value if displayWith is not set', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.panel.displayWith = null;
+ fixture.componentInstance.options.toArray()[1].value = 'test value';
+ fixture.detectChanges();
+
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+
+ fixture.detectChanges();
+ expect(input.value)
+ .toContain('test value', `Expected input to fall back to selected option's value.`);
+ });
+ }));
+
+ it('should fill the text field correctly if value is set to obj programmatically', async(() => {
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.stateCtrl.setValue({code: 'AL', name: 'Alabama'});
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ expect(input.value)
+ .toContain('Alabama', `Expected input to fill with matching option's viewValue.`);
+ });
+ });
+ }));
+
+ it('should clear the text field if value is reset programmatically', async(() => {
+ typeInElement('Alabama', input);
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.stateCtrl.reset();
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ expect(input.value).toEqual('', `Expected input value to be empty after reset.`);
+ });
+ });
+ }));
+
+ it('should disable input in view when disabled programmatically', () => {
+ const inputUnderline =
+ fixture.debugElement.query(By.css('.mat-input-underline')).nativeElement;
+
+ expect(input.disabled)
+ .toBe(false, `Expected input to start out enabled in view.`);
+ expect(inputUnderline.classList.contains('mat-disabled'))
+ .toBe(false, `Expected input underline to start out with normal styles.`);
+
+ fixture.componentInstance.stateCtrl.disable();
+ fixture.detectChanges();
+
+ expect(input.disabled)
+ .toBe(true, `Expected input to be disabled in view when disabled programmatically.`);
+ expect(inputUnderline.classList.contains('mat-disabled'))
+ .toBe(true, `Expected input underline to display disabled styles.`);
+ });
+
+
+ it('should mark the autocomplete control as dirty as user types', () => {
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(false, `Expected control to start out pristine.`);
+
+ typeInElement('a', input);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(true, `Expected control to become dirty when the user types into the input.`);
+ });
+
+ it('should mark the autocomplete control as dirty when an option is selected', async(() => {
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(false, `Expected control to start out pristine.`);
+
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ options[1].click();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(true, `Expected control to become dirty when an option was selected.`);
+ });
+ }));
+
+ it('should not mark the control dirty when the value is set programmatically', () => {
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(false, `Expected control to start out pristine.`);
+
+ fixture.componentInstance.stateCtrl.setValue('AL');
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(false, `Expected control to stay pristine if value is set programmatically.`);
+ });
+
+ it('should mark the autocomplete control as touched on blur', () => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+ expect(fixture.componentInstance.stateCtrl.touched)
+ .toBe(false, `Expected control to start out untouched.`);
+
+ dispatchFakeEvent(input, 'blur');
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.touched)
+ .toBe(true, `Expected control to become touched on blur.`);
+ });
+
+ });
+
+ describe('keyboard events', () => {
+ let fixture: ComponentFixture;
+ let input: HTMLInputElement;
+ let DOWN_ARROW_EVENT: KeyboardEvent;
+ let ENTER_EVENT: KeyboardEvent;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SimpleAutocomplete);
+ fixture.detectChanges();
+
+ input = fixture.debugElement.query(By.css('input')).nativeElement;
+ DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+ ENTER_EVENT = new MockKeyboardEvent(ENTER) as KeyboardEvent;
+
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+ });
+
+ it('should not focus the option when DOWN key is pressed', async(() => {
+ fixture.whenStable().then(() => {
+ spyOn(fixture.componentInstance.options.first, 'focus');
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ expect(fixture.componentInstance.options.first.focus).not.toHaveBeenCalled();
+ });
+ }));
+
+ it('should not close the panel when DOWN key is pressed', async(() => {
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(true, `Expected panel state to stay open when DOWN key is pressed.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('Alabama', `Expected panel to keep displaying when DOWN key is pressed.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('California', `Expected panel to keep displaying when DOWN key is pressed.`);
+ });
+ }));
+
+ it('should set the active item to the first option when DOWN key is pressed', fakeAsync(() => {
+ tick();
+ const optionEls =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.activeOption)
+ .toBe(fixture.componentInstance.options.first, 'Expected first option to be active.');
+ expect(optionEls[0].classList).toContain('mat-active');
+ expect(optionEls[1].classList).not.toContain('mat-active');
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.activeOption)
+ .toBe(fixture.componentInstance.options.toArray()[1],
+ 'Expected second option to be active.');
+ expect(optionEls[0].classList).not.toContain('mat-active');
+ expect(optionEls[1].classList).toContain('mat-active');
+ }));
+
+ it('should set the active item to the last option when UP key is pressed', fakeAsync(() => {
+ tick();
+ const optionEls =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+
+ const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
+ fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.activeOption)
+ .toBe(fixture.componentInstance.options.last, 'Expected last option to be active.');
+ expect(optionEls[10].classList).toContain('mat-active');
+ expect(optionEls[0].classList).not.toContain('mat-active');
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.activeOption)
+ .toBe(fixture.componentInstance.options.first,
+ 'Expected first option to be active.');
+ expect(optionEls[0].classList).toContain('mat-active');
+ }));
+
+ it('should set the active item properly after filtering', fakeAsync(() => {
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ typeInElement('o', input);
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ const optionEls =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+
+ expect(fixture.componentInstance.trigger.activeOption)
+ .toBe(fixture.componentInstance.options.first,
+ 'Expected first option to be active.');
+ expect(optionEls[0].classList).toContain('mat-active');
+ expect(optionEls[1].classList).not.toContain('mat-active');
+ }));
+
+ it('should fill the text field when an option is selected with ENTER', async(() => {
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
+ fixture.detectChanges();
+ expect(input.value)
+ .toContain('Alabama', `Expected text field to fill with selected value on ENTER.`);
+ });
+ });
+ }));
+
+ it('should fill the text field, not select an option, when SPACE is entered', async(() => {
+ fixture.whenStable().then(() => {
+ typeInElement('New', input);
+ fixture.detectChanges();
+
+ const SPACE_EVENT = new MockKeyboardEvent(SPACE) as KeyboardEvent;
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ fixture.componentInstance.trigger._handleKeydown(SPACE_EVENT);
+ fixture.detectChanges();
+
+ expect(input.value)
+ .not.toContain('New York', `Expected option not to be selected on SPACE.`);
+ });
+ });
+ }));
+
+ it('should mark the control dirty when selecting an option from the keyboard', async(() => {
+ fixture.whenStable().then(() => {
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(false, `Expected control to start out pristine.`);
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.stateCtrl.dirty)
+ .toBe(true, `Expected control to become dirty when option was selected by ENTER.`);
+ });
+ });
+ }));
+
+ it('should open the panel again when typing after making a selection', async(() => {
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ fixture.whenStable().then(() => {
+ fixture.componentInstance.trigger._handleKeydown(ENTER_EVENT);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(false, `Expected panel state to read closed after ENTER key.`);
+ expect(overlayContainerElement.textContent)
+ .toEqual('', `Expected panel to close after ENTER key.`);
+
+ typeInElement('Alabama', input);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(true, `Expected panel state to read open when typing in input.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('Alabama', `Expected panel to display when typing in input.`);
+ });
+ });
+ }));
+
+ it('should scroll to active options below the fold', fakeAsync(() => {
+ tick();
+ const scrollContainer =
+ document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+ expect(scrollContainer.scrollTop).toEqual(0, `Expected panel not to scroll.`);
+
+ // These down arrows will set the 6th option active, below the fold.
+ [1, 2, 3, 4, 5].forEach(() => {
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ });
+
+ // Expect option bottom minus the panel height (288 - 256 = 32)
+ expect(scrollContainer.scrollTop)
+ .toEqual(32, `Expected panel to reveal the sixth option.`);
+ }));
+
+ it('should scroll to active options on UP arrow', fakeAsync(() => {
+ tick();
+ const scrollContainer =
+ document.querySelector('.cdk-overlay-pane .mat-autocomplete-panel');
+
+ const UP_ARROW_EVENT = new MockKeyboardEvent(UP_ARROW) as KeyboardEvent;
+ fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ // Expect option bottom minus the panel height (528 - 256 = 272)
+ expect(scrollContainer.scrollTop).toEqual(272, `Expected panel to reveal last option.`);
+ }));
+
+ });
+
+ describe('aria', () => {
+ let fixture: ComponentFixture;
+ let input: HTMLInputElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SimpleAutocomplete);
+ fixture.detectChanges();
+
+ input = fixture.debugElement.query(By.css('input')).nativeElement;
+ });
+
+ it('should set role of input to combobox', () => {
+ expect(input.getAttribute('role'))
+ .toEqual('combobox', 'Expected role of input to be combobox.');
+ });
+
+ it('should set role of autocomplete panel to listbox', () => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel')).nativeElement;
+
+ expect(panel.getAttribute('role'))
+ .toEqual('listbox', 'Expected role of the panel to be listbox.');
+ });
+
+ it('should set aria-autocomplete to list', () => {
+ expect(input.getAttribute('aria-autocomplete'))
+ .toEqual('list', 'Expected aria-autocomplete attribute to equal list.');
+ });
+
+ it('should set aria-multiline to false', () => {
+ expect(input.getAttribute('aria-multiline'))
+ .toEqual('false', 'Expected aria-multiline attribute to equal false.');
+ });
+
+ it('should set aria-activedescendant based on the active option', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+ fixture.whenStable().then(() => {
+ expect(input.hasAttribute('aria-activedescendant'))
+ .toBe(false, 'Expected aria-activedescendant to be absent if no active item.');
+
+ const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ expect(input.getAttribute('aria-activedescendant'))
+ .toEqual(fixture.componentInstance.options.first.id,
+ 'Expected aria-activedescendant to match the active item after 1 down arrow.');
+
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ expect(input.getAttribute('aria-activedescendant'))
+ .toEqual(fixture.componentInstance.options.toArray()[1].id,
+ 'Expected aria-activedescendant to match the active item after 2 down arrows.');
+ });
+ });
+
+ });
+ }));
+
+ it('should set aria-expanded based on whether the panel is open', async(() => {
+ expect(input.getAttribute('aria-expanded'))
+ .toBe('false', 'Expected aria-expanded to be false while panel is closed.');
+
+ fixture.componentInstance.trigger.openPanel();
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ expect(input.getAttribute('aria-expanded'))
+ .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+
+ fixture.componentInstance.trigger.closePanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ expect(input.getAttribute('aria-expanded'))
+ .toBe('false', 'Expected aria-expanded to be false when panel closes again.');
+ });
+ });
+ }));
+
+ it('should set aria-expanded properly when the panel is hidden', async(() => {
+ fixture.componentInstance.trigger.openPanel();
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ expect(input.getAttribute('aria-expanded'))
+ .toBe('true', 'Expected aria-expanded to be true while panel is open.');
+
+ typeInElement('zz', input);
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+ expect(input.getAttribute('aria-expanded'))
+ .toBe('false', 'Expected aria-expanded to be false when panel hides itself.');
+ });
+ });
+ });
+ }));
+
+ it('should set aria-owns based on the attached autocomplete', () => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ const panel = fixture.debugElement.query(By.css('.mat-autocomplete-panel')).nativeElement;
+
+ expect(input.getAttribute('aria-owns'))
+ .toEqual(panel.getAttribute('id'), 'Expected aria-owns to match attached autocomplete.');
+
+ });
+
+ });
+
+ describe('Fallback positions', () => {
+ let fixture: ComponentFixture;
+ let input: HTMLInputElement;
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SimpleAutocomplete);
+ fixture.detectChanges();
+
+ input = fixture.debugElement.query(By.css('input')).nativeElement;
+ });
+
+ it('should use below positioning by default', () => {
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ const inputBottom = input.getBoundingClientRect().bottom;
+ const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+ const panelTop = panel.getBoundingClientRect().top;
+
+ // Panel is offset by 6px in styles so that the underline has room to display.
+ expect((inputBottom + 6).toFixed(1))
+ .toEqual(panelTop.toFixed(1), `Expected panel top to match input bottom by default.`);
+ expect(fixture.componentInstance.trigger.autocomplete.positionY)
+ .toEqual('below', `Expected autocomplete positionY to default to below.`);
+ });
+
+ it('should fall back to above position if panel cannot fit below', () => {
+ // Push the autocomplete trigger down so it won't have room to open "below"
+ input.style.top = '600px';
+ input.style.position = 'relative';
+
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ const inputTop = input.getBoundingClientRect().top;
+ const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+ const panelBottom = panel.getBoundingClientRect().bottom;
+
+ // Panel is offset by 24px in styles so that the label has room to display.
+ expect((inputTop - 24).toFixed(1))
+ .toEqual(panelBottom.toFixed(1), `Expected panel to fall back to above position.`);
+ expect(fixture.componentInstance.trigger.autocomplete.positionY)
+ .toEqual('above', `Expected autocomplete positionY to be "above" if panel won't fit.`);
+ });
+
+ it('should align panel properly when filtering in "above" position', async(() => {
+ // Push the autocomplete trigger down so it won't have room to open "below"
+ input.style.top = '600px';
+ input.style.position = 'relative';
+
+ fixture.componentInstance.trigger.openPanel();
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ typeInElement('f', input);
+ fixture.detectChanges();
+
+ const inputTop = input.getBoundingClientRect().top;
+ const panel = overlayContainerElement.querySelector('.mat-autocomplete-panel');
+ const panelBottom = panel.getBoundingClientRect().bottom;
+
+ // Panel is offset by 24px in styles so that the label has room to display.
+ expect((inputTop - 24).toFixed(1))
+ .toEqual(panelBottom.toFixed(1), `Expected panel to stay aligned after filtering.`);
+ expect(fixture.componentInstance.trigger.autocomplete.positionY)
+ .toEqual('above', `Expected autocomplete positionY to be "above" if panel won't fit.`);
+ });
+ }));
+
+ });
+
+ describe('misc', () => {
+
+ it('should allow basic use without any forms directives', () => {
+ expect(() => {
+ const fixture = TestBed.createComponent(AutocompleteWithoutForms);
+ fixture.detectChanges();
+
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+ typeInElement('d', input);
+ fixture.detectChanges();
+
+ const options =
+ overlayContainerElement.querySelectorAll('md-option') as NodeListOf;
+ expect(options.length).toBe(1);
+ }).not.toThrowError();
+ });
+
+ it('should display an empty input when the value is undefined with ngModel', async(() => {
+ const fixture = TestBed.createComponent(AutocompleteWithNgModel);
+
+ fixture.detectChanges();
+
+ fixture.whenStable().then(() => {
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+
+ expect(input.value).toBe('');
+ });
+ }));
+
+ it('should work when input is wrapped in ngIf', async(() => {
+ const fixture = TestBed.createComponent(NgIfAutocomplete);
+ fixture.detectChanges();
+
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+ dispatchFakeEvent(input, 'focus');
+
+ fixture.whenStable().then(() => {
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.trigger.panelOpen)
+ .toBe(true, `Expected panel state to read open when input is focused.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('One', `Expected panel to display when input is focused.`);
+ expect(overlayContainerElement.textContent)
+ .toContain('Two', `Expected panel to display when input is focused.`);
+ });
+ }));
+
+ it('should filter properly with ngIf after setting the active item', fakeAsync(() => {
+ const fixture = TestBed.createComponent(NgIfAutocomplete);
+ fixture.detectChanges();
+
+ fixture.componentInstance.trigger.openPanel();
+ tick();
+ fixture.detectChanges();
+
+ const DOWN_ARROW_EVENT = new MockKeyboardEvent(DOWN_ARROW) as KeyboardEvent;
+ fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT);
+ tick();
+ fixture.detectChanges();
+
+ const input = fixture.debugElement.query(By.css('input')).nativeElement;
+ typeInElement('o', input);
+ fixture.detectChanges();
+
+ expect(fixture.componentInstance.mdOptions.length).toBe(2);
+ }));
+
+ });
+
+ it('should have correct width when opened', () => {
+ const widthFixture = TestBed.createComponent(SimpleAutocomplete);
+ widthFixture.componentInstance.width = 300;
+ widthFixture.detectChanges();
+
+ widthFixture.componentInstance.trigger.openPanel();
+ widthFixture.detectChanges();
+
+ const overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+ // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
+ expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(300);
+
+ widthFixture.componentInstance.trigger.closePanel();
+ widthFixture.detectChanges();
+
+ widthFixture.componentInstance.width = 500;
+ widthFixture.detectChanges();
+
+ widthFixture.componentInstance.trigger.openPanel();
+ widthFixture.detectChanges();
+
+ // Firefox, edge return a decimal value for width, so we need to parse and round it to verify
+ expect(Math.ceil(parseFloat(overlayPane.style.width))).toEqual(500);
+
+ });
});
@Component({
template: `
-
+
+
+
+
+
+ {{ state.code }}: {{ state.name }}
+
+
+ `
+})
+class SimpleAutocomplete implements OnDestroy {
+ stateCtrl = new FormControl();
+ filteredStates: any[];
+ valueSub: Subscription;
+ placeholder = 'auto';
+ width: number;
+
+ @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
+ @ViewChild(MdAutocomplete) panel: MdAutocomplete;
+ @ViewChild(MdInputContainer) inputContainer: MdInputContainer;
+ @ViewChildren(MdOption) options: QueryList;
+
+ states = [
+ {code: 'AL', name: 'Alabama'},
+ {code: 'CA', name: 'California'},
+ {code: 'FL', name: 'Florida'},
+ {code: 'KS', name: 'Kansas'},
+ {code: 'MA', name: 'Massachusetts'},
+ {code: 'NY', name: 'New York'},
+ {code: 'OR', name: 'Oregon'},
+ {code: 'PA', name: 'Pennsylvania'},
+ {code: 'TN', name: 'Tennessee'},
+ {code: 'VA', name: 'Virginia'},
+ {code: 'WY', name: 'Wyoming'},
+ ];
+
+
+ constructor() {
+ this.filteredStates = this.states;
+ this.valueSub = this.stateCtrl.valueChanges.subscribe(val => {
+ this.filteredStates = val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi')))
+ : this.states;
+ });
+ }
+
+ displayFn(value: any): string {
+ return value ? value.name : value;
+ }
+
+ ngOnDestroy() {
+ this.valueSub.unsubscribe();
+ }
+
+}
+
+@Component({
+ template: `
+
+
+
+
+
+
+ {{option}}
+
+
`
})
-class SimpleAutocomplete {}
+class NgIfAutocomplete {
+ optionCtrl = new FormControl();
+ filteredOptions: Observable;
+ isVisible = true;
+ options = ['One', 'Two', 'Three'];
+
+ @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger;
+ @ViewChildren(MdOption) mdOptions: QueryList;
+
+ constructor() {
+ this.filteredOptions = this.optionCtrl.valueChanges.startWith(null).map((val) => {
+ return val ? this.options.filter(option => new RegExp(val, 'gi').test(option))
+ : this.options.slice();
+ });
+ }
+}
+
+
+@Component({
+ template: `
+
+
+
+
+
+
+ {{ state }}
+
+
+ `
+})
+class AutocompleteWithoutForms {
+ filteredStates: any[];
+ states = ['Alabama', 'California', 'Florida'];
+
+ constructor() {
+ this.filteredStates = this.states.slice();
+ }
+
+ onInput(value: any) {
+ this.filteredStates = this.states.filter(s => new RegExp(value, 'gi').test(s));
+ }
+
+}
+
+
+@Component({
+ template: `
+
+
+
+
+
+
+ {{ state }}
+
+
+ `
+})
+class AutocompleteWithNgModel {
+ filteredStates: any[];
+ selectedState: string;
+ states = ['New York', 'Washington', 'Oregon'];
+
+ constructor() {
+ this.filteredStates = this.states.slice();
+ }
+
+ onInput(value: any) {
+ this.filteredStates = this.states.filter(s => new RegExp(value, 'gi').test(s));
+ }
+
+}
+/** This is a mock keyboard event to test keyboard events in the autocomplete. */
+class MockKeyboardEvent {
+ constructor(public keyCode: number) {}
+ preventDefault() {}
+}
diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
index 18545cb2c6e2..f516c80c532c 100644
--- a/src/lib/autocomplete/autocomplete.ts
+++ b/src/lib/autocomplete/autocomplete.ts
@@ -1,4 +1,24 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {
+ AfterContentInit,
+ Component,
+ ContentChildren,
+ ElementRef,
+ Input,
+ QueryList,
+ TemplateRef,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
+import {MdOption} from '../core';
+import {ActiveDescendantKeyManager} from '../core/a11y/activedescendant-key-manager';
+
+/**
+ * Autocomplete IDs need to be unique across components, so this counter exists outside of
+ * the component definition.
+ */
+let _uniqueAutocompleteIdCounter = 0;
+
+export type AutocompletePositionY = 'above' | 'below';
@Component({
moduleId: module.id,
@@ -6,6 +26,60 @@ import {Component, ViewEncapsulation} from '@angular/core';
templateUrl: 'autocomplete.html',
styleUrls: ['autocomplete.css'],
encapsulation: ViewEncapsulation.None,
+ exportAs: 'mdAutocomplete',
+ host: {
+ '[class.mat-autocomplete]': 'true'
+ }
})
-export class MdAutocomplete {}
+export class MdAutocomplete implements AfterContentInit {
+
+ /** Manages active item in option list based on key events. */
+ _keyManager: ActiveDescendantKeyManager;
+
+ /** Whether the autocomplete panel displays above or below its trigger. */
+ positionY: AutocompletePositionY = 'below';
+
+ /** Whether the autocomplete panel should be visible, depending on option length. */
+ showPanel = false;
+
+ @ViewChild(TemplateRef) template: TemplateRef;
+ @ViewChild('panel') panel: ElementRef;
+ @ContentChildren(MdOption) options: QueryList;
+
+ /** Function that maps an option's control value to its display value in the trigger. */
+ @Input() displayWith: (value: any) => string;
+
+ /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
+ id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`;
+
+ ngAfterContentInit() {
+ this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap();
+ }
+
+ /**
+ * Sets the panel scrollTop. This allows us to manually scroll to display
+ * options below the fold, as they are not actually being focused when active.
+ */
+ _setScrollTop(scrollTop: number): void {
+ if (this.panel) {
+ this.panel.nativeElement.scrollTop = scrollTop;
+ }
+ }
+
+ /** Panel should hide itself when the option list is empty. */
+ _setVisibility() {
+ Promise.resolve().then(() => this.showPanel = !!this.options.length);
+ }
+
+ /** Sets a class on the panel based on its position (used to set y-offset). */
+ _getClassList() {
+ return {
+ 'mat-autocomplete-panel-below': this.positionY === 'below',
+ 'mat-autocomplete-panel-above': this.positionY === 'above',
+ 'mat-autocomplete-visible': this.showPanel,
+ 'mat-autocomplete-hidden': !this.showPanel
+ };
+ }
+
+}
diff --git a/src/lib/autocomplete/index.ts b/src/lib/autocomplete/index.ts
index 92bb41a39a65..7694e665ebbc 100644
--- a/src/lib/autocomplete/index.ts
+++ b/src/lib/autocomplete/index.ts
@@ -1,18 +1,25 @@
import {ModuleWithProviders, NgModule} from '@angular/core';
-import {DefaultStyleCompatibilityModeModule} from '../core';
+
+import {MdOptionModule, OverlayModule, OVERLAY_PROVIDERS, CompatibilityModule} from '../core';
+import {CommonModule} from '@angular/common';
import {MdAutocomplete} from './autocomplete';
-export * from './autocomplete';
+import {MdAutocompleteTrigger} from './autocomplete-trigger';
@NgModule({
- imports: [DefaultStyleCompatibilityModeModule],
- exports: [MdAutocomplete, DefaultStyleCompatibilityModeModule],
- declarations: [MdAutocomplete],
+ imports: [MdOptionModule, OverlayModule, CompatibilityModule, CommonModule],
+ exports: [MdAutocomplete, MdOptionModule, MdAutocompleteTrigger, CompatibilityModule],
+ declarations: [MdAutocomplete, MdAutocompleteTrigger],
})
export class MdAutocompleteModule {
+ /** @deprecated */
static forRoot(): ModuleWithProviders {
return {
ngModule: MdAutocompleteModule,
- providers: []
+ providers: [OVERLAY_PROVIDERS]
};
}
}
+
+
+export * from './autocomplete';
+export * from './autocomplete-trigger';
diff --git a/src/lib/button-toggle/README.md b/src/lib/button-toggle/README.md
index befdfbebdff9..fb4499d1cda0 100644
--- a/src/lib/button-toggle/README.md
+++ b/src/lib/button-toggle/README.md
@@ -1,139 +1 @@
-# md-button-toggle
-
-`MdButtonToggle` is a group of buttons that can be toggled.
-There are two modes, `multiple` and `exclusive`.
-When in 'exclusive' mode, only one button can be selected at a time (like radio buttons).
-When in 'multiple' mode, multiple buttons can be selected at once (like checkboxes).
-You can read more about button toggles in the
-[Material Design spec](https://material.google.com/components/buttons.html#buttons-toggle-buttons).
-
-## Usage
-
-### Basic Usage
-
-`md-button-toggle` can be used on its own and acts as a checkbox.
-
-```html
-Bold
-```
-
-Output:
-
-
-
-### Exclusive Selection
-
-`md-button-toggle` can be used in an exclusive selection group when surrounded by
-`md-button-toggle-group`. This styles all buttons within the group to appear as a single
-group of button toggles and allows only one button toggle to be selected at a time.
-
-```html
-
- format_align_left format_align_center format_align_right format_align_justify
-```
-
-Output:
-
-
-
-### Multiple Selection
-
-`md-button-toggle` can be used in a multiple selection group when surrounded by
-`md-button-toggle-group multiple`. This styles all buttons within the group to appear as a single
-group of button toggles. This component does not yet support `NgModel` when using `multiple` mode.
-
-```html
-
- Flour
- Eggs
- Sugar
- Milk
-
-```
-
-Output:
-
-
-
-## Dynamic Exclusive Selection
-
-`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for
-a group.
-
-```html
-
-
- {{pie}}
-
-
-
- One
- Two
- Three
-
-
-
- Red
- Blue
-
-```
-
-Output:
-
-
-
-## ``
-
-### Bound Properties
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `id` | string | The unique ID of the toggle. IDs are generated by default when not specified. |
-| `name` | string | Optional, defaults to parent group name if one exists for exclusive selection toggles, otherwise null. This is used to differentiate between different groups. |
-| `value` | any | Value of the toggle. Only used when in a group to determine which are selected. |
-| `checked` | boolean | Optional, default = `false`. Whether or not the toggle is checked. |
-| `disabled` | boolean | Optional, default = `false`. Whether or not the toggle is disabled |
-
-### Events
-
-| Name | Description |
-| --- | --- |
-| `change` | Emitted when the `checked` value is changed. |
-
-## ``
-
-### Bound Properties
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `name` | string | Optional, the name of the group. |
-| `disabled` | boolean | Optional, default = `false`. |
-| `value` | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. |
-| `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. |
-| `vertical` | boolean | Whether the group should show the toggles vertically. Default is `false`. |
-
-### Attributes
-
-| Name | Type | Description |
-| --- | --- | --- |
-| `multiple` | boolean | Optional, default = `false`. Whether or not the group allows multiple selection. |
-
-### Events
-
-| Name | Description |
-| --- | --- |
-| `change` | Emitted when the `value` of the group changes. |
+Please see the official documentation at https://material.angular.io/components/component/button-toggle
\ No newline at end of file
diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
index 23ede0f16c3b..bebdd1e7be3a 100644
--- a/src/lib/button-toggle/_button-toggle-theme.scss
+++ b/src/lib/button-toggle/_button-toggle-theme.scss
@@ -1,14 +1,38 @@
@import '../core/theming/palette';
@import '../core/theming/theming';
+// Applies a focus style to an md-button-toggle element for each of the supported palettes.
+@mixin _mat-button-toggle-focus-color($theme) {
+ $background: map-get($theme, background);
-@mixin md-button-toggle-theme($theme) {
+ .mat-button-toggle-focus-overlay {
+ background-color: mat-color($background, focused-button);
+ }
+}
+
+@mixin mat-button-toggle-theme($theme) {
$foreground: map-get($theme, foreground);
+ $background: map-get($theme, background);
+
+ .mat-button-toggle {
+ color: mat-color($foreground, hint-text);
- .md-button-toggle-checked .md-button-toggle-label-content {
- background-color: md-color($md-grey, 300);
+ &.cdk-focused {
+ @include _mat-button-toggle-focus-color($theme);
+ }
}
- .md-button-toggle-disabled .md-button-toggle-label-content {
- background-color: md-color($foreground, disabled);
+
+ .mat-button-toggle-checked {
+ background-color: mat-color($background, selected-button);
+ color: mat-color($foreground, base);
+ }
+
+ .mat-button-toggle-disabled {
+ background-color: mat-color($background, disabled-button-toggle);
+ color: mat-color($foreground, disabled-button);
+
+ &.mat-button-toggle-checked {
+ background-color: mat-color($background, selected-disabled-button);
+ }
}
}
diff --git a/src/lib/button-toggle/button-toggle.html b/src/lib/button-toggle/button-toggle.html
index 60cccfd2e44a..fffdfa7c3e25 100644
--- a/src/lib/button-toggle/button-toggle.html
+++ b/src/lib/button-toggle/button-toggle.html
@@ -1,5 +1,5 @@
-
Selected value: {{group.value}}
diff --git a/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts
new file mode 100644
index 000000000000..d014b8a2846d
--- /dev/null
+++ b/src/examples/button-toggle-exclusive/button-toggle-exclusive-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'button-toggle-exclusive-example',
+ templateUrl: './button-toggle-exclusive-example.html',
+ styleUrls: ['./button-toggle-exclusive-example.css'],
+})
+export class ButtonToggleExclusiveExample {}
diff --git a/src/examples/button-toggle-overview/button-toggle-overview-example.css b/src/examples/button-toggle-overview/button-toggle-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/button-toggle-overview/button-toggle-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/button-toggle-overview/button-toggle-overview-example.html b/src/examples/button-toggle-overview/button-toggle-overview-example.html
new file mode 100644
index 000000000000..bb215d5b5425
--- /dev/null
+++ b/src/examples/button-toggle-overview/button-toggle-overview-example.html
@@ -0,0 +1 @@
+
+
diff --git a/src/examples/button-types/button-types-example.ts b/src/examples/button-types/button-types-example.ts
new file mode 100644
index 000000000000..9dbb329f1e0d
--- /dev/null
+++ b/src/examples/button-types/button-types-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'button-types-example',
+ templateUrl: './button-types-example.html',
+ styleUrls: ['./button-types-example.css'],
+})
+export class ButtonTypesExample {}
diff --git a/src/examples/card-fancy/card-fancy-example.css b/src/examples/card-fancy/card-fancy-example.css
new file mode 100644
index 000000000000..daef28f16152
--- /dev/null
+++ b/src/examples/card-fancy/card-fancy-example.css
@@ -0,0 +1,8 @@
+.example-card {
+ width: 400px;
+}
+
+.example-header-image {
+ background-image: url('assets/img/examples/shiba1.jpg');
+ background-size: cover;
+}
diff --git a/src/examples/card-fancy/card-fancy-example.html b/src/examples/card-fancy/card-fancy-example.html
new file mode 100644
index 000000000000..07d25dfb8d8e
--- /dev/null
+++ b/src/examples/card-fancy/card-fancy-example.html
@@ -0,0 +1,19 @@
+Normal Buttons
+ + +Link Buttons
+ +
+ + The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. + A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally + bred for hunting. +
+Checkbox configuration
+ +Result
+ +Dialog with elements
+This dialog showcases the title, close, content and actions elements.
+
+
+
diff --git a/src/examples/dialog-elements/dialog-elements-example.css b/src/examples/dialog-elements/dialog-elements-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/dialog-elements/dialog-elements-example.html b/src/examples/dialog-elements/dialog-elements-example.html
new file mode 100644
index 000000000000..40637c4bd638
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example.html
@@ -0,0 +1 @@
+
diff --git a/src/examples/dialog-elements/dialog-elements-example.ts b/src/examples/dialog-elements/dialog-elements-example.ts
new file mode 100644
index 000000000000..aba941a571b0
--- /dev/null
+++ b/src/examples/dialog-elements/dialog-elements-example.ts
@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {MdDialog} from '@angular/material';
+
+
+@Component({
+ selector: 'dialog-elements-example',
+ templateUrl: './dialog-elements-example.html',
+})
+export class DialogElementsExample {
+ constructor(public dialog: MdDialog) { }
+
+ openDialog() {
+ this.dialog.open(DialogElementsExampleDialog);
+ }
+}
+
+
+@Component({
+ selector: 'dialog-elements-example-dialog',
+ templateUrl: './dialog-elements-example-dialog.html',
+})
+export class DialogElementsExampleDialog { }
diff --git a/src/examples/dialog-overview/dialog-overview-example-dialog.html b/src/examples/dialog-overview/dialog-overview-example-dialog.html
new file mode 100644
index 000000000000..751e1339b43c
--- /dev/null
+++ b/src/examples/dialog-overview/dialog-overview-example-dialog.html
@@ -0,0 +1 @@
+Hi, I'm a dialog!
diff --git a/src/examples/dialog-overview/dialog-overview-example.css b/src/examples/dialog-overview/dialog-overview-example.css new file mode 100644 index 000000000000..7432308753e6 --- /dev/null +++ b/src/examples/dialog-overview/dialog-overview-example.css @@ -0,0 +1 @@ +/** No CSS for this example */ diff --git a/src/examples/dialog-overview/dialog-overview-example.html b/src/examples/dialog-overview/dialog-overview-example.html new file mode 100644 index 000000000000..176a3c411e7f --- /dev/null +++ b/src/examples/dialog-overview/dialog-overview-example.html @@ -0,0 +1 @@ + diff --git a/src/examples/dialog-overview/dialog-overview-example.ts b/src/examples/dialog-overview/dialog-overview-example.ts new file mode 100644 index 000000000000..9bc9882ac034 --- /dev/null +++ b/src/examples/dialog-overview/dialog-overview-example.ts @@ -0,0 +1,22 @@ +import {Component} from '@angular/core'; +import {MdDialog} from '@angular/material'; + + +@Component({ + selector: 'dialog-overview-example', + templateUrl: './dialog-overview-example.html', +}) +export class DialogOverviewExample { + constructor(public dialog: MdDialog) {} + + openDialog() { + this.dialog.open(DialogOverviewExampleDialog); + } +} + + +@Component({ + selector: 'dialog-overview-example-dialog', + templateUrl: './dialog-overview-example-dialog.html', +}) +export class DialogOverviewExampleDialog {} diff --git a/src/examples/dialog-result/dialog-result-example-dialog.html b/src/examples/dialog-result/dialog-result-example-dialog.html new file mode 100644 index 000000000000..0e4dd6339a94 --- /dev/null +++ b/src/examples/dialog-result/dialog-result-example-dialog.html @@ -0,0 +1,6 @@ +Dialog
+What would you like to do?
+
+
+
+
diff --git a/src/examples/dialog-result/dialog-result-example.css b/src/examples/dialog-result/dialog-result-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/dialog-result/dialog-result-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/dialog-result/dialog-result-example.html b/src/examples/dialog-result/dialog-result-example.html
new file mode 100644
index 000000000000..04850b42d247
--- /dev/null
+++ b/src/examples/dialog-result/dialog-result-example.html
@@ -0,0 +1,2 @@
+
+You chose: {{selectedOption}}
diff --git a/src/examples/dialog-result/dialog-result-example.ts b/src/examples/dialog-result/dialog-result-example.ts
new file mode 100644
index 000000000000..ec25f92f1341
--- /dev/null
+++ b/src/examples/dialog-result/dialog-result-example.ts
@@ -0,0 +1,29 @@
+import {Component} from '@angular/core';
+import {MdDialog, MdDialogRef} from '@angular/material';
+
+
+@Component({
+ selector: 'dialog-result-example',
+ templateUrl: './dialog-result-example.html',
+})
+export class DialogResultExample {
+ selectedOption: string;
+
+ constructor(public dialog: MdDialog) {}
+
+ openDialog() {
+ let dialogRef = this.dialog.open(DialogResultExampleDialog);
+ dialogRef.afterClosed().subscribe(result => {
+ this.selectedOption = result;
+ });
+ }
+}
+
+
+@Component({
+ selector: 'dialog-result-example-dialog',
+ templateUrl: './dialog-result-example-dialog.html',
+})
+export class DialogResultExampleDialog {
+ constructor(public dialogRef: MdDialogRefFolders
+{{folder.name}}
+{{folder.updated | date}}
+Notes
+{{note.name}}
+{{note.updated | date}}
+Progress bar configuration
+ +Result
+ +Progress circle configuration
+ +Result
+ +Your favorite season is: {{favoriteSeason}}
diff --git a/src/examples/radio-ng-model/radio-ng-model-example.ts b/src/examples/radio-ng-model/radio-ng-model-example.ts
new file mode 100644
index 000000000000..42e93bc5d1ba
--- /dev/null
+++ b/src/examples/radio-ng-model/radio-ng-model-example.ts
@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'radio-ng-model-example',
+ templateUrl: './radio-ng-model-example.html',
+ styleUrls: ['./radio-ng-model-example.css'],
+})
+export class RadioNgModelExample {
+ favoriteSeason: string;
+
+ seasons = [
+ 'Winter',
+ 'Spring',
+ 'Summer',
+ 'Autumn',
+ ];
+}
diff --git a/src/examples/radio-overview/radio-overview-example.css b/src/examples/radio-overview/radio-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/radio-overview/radio-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/radio-overview/radio-overview-example.html b/src/examples/radio-overview/radio-overview-example.html
new file mode 100644
index 000000000000..4038381cc49e
--- /dev/null
+++ b/src/examples/radio-overview/radio-overview-example.html
@@ -0,0 +1,4 @@
+
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus,
+ fusce vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam
+ nunc id, neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna
+ aliquam magna. Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor
+ vel urna occaecat cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at,
+ ligula ipsum dui sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu
+ enim fringilla. Arcu erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis,
+ tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet.
+ Taciti dui, sapien consectetuer.
+
+
+ Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce
+ vel in pellentesque. Nisl rutrum etiam morbi consectetuer tempor magna, aenean nullam nunc id,
+ neque vivamus interdum sociis nulla scelerisque sem, dolor id wisi turpis magna aliquam magna.
+ Risus accumsan hac eget etiam donec sed, senectus erat mattis quam, tempor vel urna occaecat
+ cras, metus urna augue nec at. Et morbi amet dui praesent, nec eu at, ligula ipsum dui
+ sollicitudin, quis nisl massa viverra ligula, mauris fermentum orci arcu enim fringilla. Arcu
+ erat nulla in aenean lacinia ullamcorper, urna ante nam et sagittis, tristique vehicula nibh
+ ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien
+ consectetuer.
+
+
+
+
+
+Slider configuration
+ +Result
+ +Slider configuration
+ +Result
+ +
+ Show tooltip
+
+ Before
+ After
+ Above
+ Below
+ Left
+ Right
+
+
diff --git a/src/examples/tooltip-position/tooltip-position-example.ts b/src/examples/tooltip-position/tooltip-position-example.ts
new file mode 100644
index 000000000000..0b580c722bfc
--- /dev/null
+++ b/src/examples/tooltip-position/tooltip-position-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'tooltip-position-example',
+ templateUrl: './tooltip-position-example.html',
+ styleUrls: ['./tooltip-position-example.css'],
+})
+export class TooltipPositionExample {
+ position = 'before';
+}
diff --git a/src/lib/autocomplete/README.md b/src/lib/autocomplete/README.md
index 1bc0814e9eec..73bddeb68ee6 100644
--- a/src/lib/autocomplete/README.md
+++ b/src/lib/autocomplete/README.md
@@ -1,5 +1 @@
-
-## Not yet implemented!
-
-The autocomplete is not yet implemented. This is only a scaffold to make
-subsequent PRs easier to read. Please do not try to use yet :)
\ No newline at end of file
+See documentation on [material.angular.io](https://material.angular.io/).
\ No newline at end of file
diff --git a/src/lib/autocomplete/_autocomplete-theme.scss b/src/lib/autocomplete/_autocomplete-theme.scss
index b77fff253e0c..7cce6dfe1c56 100644
--- a/src/lib/autocomplete/_autocomplete-theme.scss
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -1,5 +1,19 @@
@import '../core/theming/theming';
-@mixin md-autocomplete-theme($theme) {
+@mixin mat-autocomplete-theme($theme) {
+ $foreground: map-get($theme, foreground);
+ $background: map-get($theme, background);
+
+ .mat-autocomplete-panel {
+ background: mat-color($background, card);
+ color: mat-color($foreground, text);
+
+ .mat-option {
+ &.mat-selected:not(.mat-active) {
+ background: mat-color($background, card);
+ color: mat-color($foreground, text);
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
new file mode 100644
index 000000000000..6d3c550022fc
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -0,0 +1,371 @@
+import {
+ Directive,
+ ElementRef,
+ forwardRef,
+ Host,
+ Input,
+ NgZone,
+ Optional,
+ OnDestroy,
+ ViewContainerRef,
+} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {Overlay, OverlayRef, OverlayState, TemplatePortal} from '../core';
+import {MdAutocomplete} from './autocomplete';
+import {PositionStrategy} from '../core/overlay/position/position-strategy';
+import {ConnectedPositionStrategy} from '../core/overlay/position/connected-position-strategy';
+import {Observable} from 'rxjs/Observable';
+import {MdOptionSelectionChange, MdOption} from '../core/option/option';
+import {ENTER, UP_ARROW, DOWN_ARROW} from '../core/keyboard/keycodes';
+import {Dir} from '../core/rtl/dir';
+import {Subscription} from 'rxjs/Subscription';
+import {Subject} from 'rxjs/Subject';
+import 'rxjs/add/observable/merge';
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/switchMap';
+import {MdInputContainer} from '../input/input-container';
+
+/**
+ * The following style constants are necessary to save here in order
+ * to properly calculate the scrollTop of the panel. Because we are not
+ * actually focusing the active item, scroll must be handled manually.
+ */
+
+/** The height of each autocomplete option. */
+export const AUTOCOMPLETE_OPTION_HEIGHT = 48;
+
+/** The total height of the autocomplete panel. */
+export const AUTOCOMPLETE_PANEL_HEIGHT = 256;
+
+/**
+ * Provider that allows the autocomplete to register as a ControlValueAccessor.
+ * @docs-private
+ */
+export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = {
+ provide: NG_VALUE_ACCESSOR,
+ useExisting: forwardRef(() => MdAutocompleteTrigger),
+ multi: true
+};
+
+@Directive({
+ selector: 'input[mdAutocomplete], input[matAutocomplete]',
+ host: {
+ 'role': 'combobox',
+ 'autocomplete': 'off',
+ 'aria-autocomplete': 'list',
+ 'aria-multiline': 'false',
+ '[attr.aria-activedescendant]': 'activeOption?.id',
+ '[attr.aria-expanded]': 'panelOpen.toString()',
+ '[attr.aria-owns]': 'autocomplete?.id',
+ '(focus)': 'openPanel()',
+ '(blur)': '_handleBlur($event.relatedTarget?.tagName)',
+ '(input)': '_handleInput($event)',
+ '(keydown)': '_handleKeydown($event)',
+ },
+ providers: [MD_AUTOCOMPLETE_VALUE_ACCESSOR]
+})
+export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
+ private _overlayRef: OverlayRef;
+ private _portal: TemplatePortal;
+ private _panelOpen: boolean = false;
+
+ /** The subscription to positioning changes in the autocomplete panel. */
+ private _panelPositionSubscription: Subscription;
+
+ private _positionStrategy: ConnectedPositionStrategy;
+
+ /** Stream of blur events that should close the panel. */
+ private _blurStream = new Subject
+
+
\ No newline at end of file
diff --git a/src/lib/autocomplete/autocomplete.md b/src/lib/autocomplete/autocomplete.md
new file mode 100644
index 000000000000..f5d139ae100d
--- /dev/null
+++ b/src/lib/autocomplete/autocomplete.md
@@ -0,0 +1,154 @@
+
+The autocomplete is a normal text input enhanced by a panel of suggested options. You can read more about
+autocompletes in the [Material Design spec](https://material.io/guidelines/components/text-fields.html#text-fields-auto-complete-text-field).
+
+### Simple autocomplete
+
+Start by adding a regular `mdInput` to the page. Let's assume you're using the `formControl` directive from the
+`@angular/forms` module to track the value of the input.
+
+*my-comp.html*
+```html
+Your favorite type of pie is: {{favoritePie}}
-``` - -### Disabled Button Toggle - -`md-button-toggle-group` and `md-button-toggle` can both be disabled by adding a `disabled` -attribute to either one. Adding `disabled` to an exclusive group or a multiple group will disable -the entire group. Adding `disabled` to a single toggle will disable that toggle. - -```html -