diff --git a/.gitignore b/.gitignore
index 67f5b41b67df..9fded7174921 100644
--- a/.gitignore
+++ b/.gitignore
@@ -33,4 +33,4 @@
/libpeerconnection.log
npm-debug.log
testem.log
-/.chrome
\ No newline at end of file
+/.chrome
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 98e5bacf9ec6..20213136d1fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,166 @@
+
+# [2.0.0-beta.2 flannel-papaya](https://github.com/angular/material2/compare/2.0.0-beta.1...2.0.0-beta.2) (2017-02-15)
+
+### Breaking changes from beta.1
+* Styling is no longer prefixed by `md-`. All styling is now prefixed by `mat-` so that apps can upgrade from AngularJS Material to Angular Material without styling conflicts between the two library components.
+See ([#2790](https://github.com/angular/material2/issues/2790)) for the details on the code change and some useful regular expressions that can help migrate styles.
+* Checkbox tab index @Input has been changed from `tabindex` to `tabIndex`. ([#2953](https://github.com/angular/material2/issues/2953))
+* Ripple no longer has the `mdRippleBackgroundColor` input to change the background color. ([#2859](https://github.com/angular/material2/issues/2859))
+* The deprecated use of `` and `` has been removed. Use `mdInput` on an input or textarea within a `md-input-container`. `md-prefix` and `md-suffix` are now `mdPrefix` and `mdSuffix`. ([#2788](https://github.com/angular/material2/issues/2788))
+
+ ```html
+
+
+
+ ```
+
+* The deprecated use of `` has been removed. Use `` instead. ([#2283](https://github.com/angular/material2/issues/2283))
+* Input floating placeholder @Input has changed from a boolean (`true` and `false`) to a state (`always`, `never`, and `auto`) and was renamed from `floatingPlaceholder` to `floatPlaceholder`. For details on when to use which state, see ([#2585](https://github.com/angular/material2/issues/2585))
+* The use of Module `forRoot` has been deprecated and will be removed in the next release. Instead, just simply import MaterialModule directly:
+
+ ```ts
+ @NgModule({
+ imports: [
+ ...
+ MaterialModule,
+ ...
+ ]
+ ...
+ });
+ ```
+
+### Bug Fixes
+
+* **autocomplete:** add mat version of autocomplete [@Input](https://github.com/Input) ([#2928](https://github.com/angular/material2/issues/2928)) ([e5521a8](https://github.com/angular/material2/commit/e5521a8))
+* **autocomplete:** allow basic use without forms directives ([#2958](https://github.com/angular/material2/issues/2958)) ([4ee2980](https://github.com/angular/material2/commit/4ee2980))
+* **autocomplete:** close panel when options list is empty ([#2834](https://github.com/angular/material2/issues/2834)) ([8a3b6fd](https://github.com/angular/material2/commit/8a3b6fd))
+* **autocomplete:** double-clicking input shouldnt close the panel ([#2835](https://github.com/angular/material2/issues/2835)) ([18969f4](https://github.com/angular/material2/commit/18969f4))
+* **autocomplete:** hide instead of close when options empty ([#2997](https://github.com/angular/material2/issues/2997)) ([a022035](https://github.com/angular/material2/commit/a022035))
+* **autocomplete:** placeholder should float while panel is open ([#2730](https://github.com/angular/material2/issues/2730)) ([eec4dc6](https://github.com/angular/material2/commit/eec4dc6))
+* **autocomplete:** scroll options below fold into view ([#2728](https://github.com/angular/material2/issues/2728)) ([6c84603](https://github.com/angular/material2/commit/6c84603))
+* **autocomplete:** support rtl ([#2648](https://github.com/angular/material2/issues/2648)) ([4f59ad0](https://github.com/angular/material2/commit/4f59ad0))
+* **autocomplete:** up arrow should set last item active ([#2776](https://github.com/angular/material2/issues/2776)) ([fd5e4d9](https://github.com/angular/material2/commit/fd5e4d9))
+* **autosize:** export md-autosize directive ([#2432](https://github.com/angular/material2/issues/2432)) ([f2d73da](https://github.com/angular/material2/commit/f2d73da)), closes [#2419](https://github.com/angular/material2/issues/2419)
+* **button:** add default color for mat-raised-button ([#3052](https://github.com/angular/material2/issues/3052)) ([6fe1d9a](https://github.com/angular/material2/commit/6fe1d9a))
+* **button:** only flat button and icon buttons should inherit the color ([#2561](https://github.com/angular/material2/issues/2561)) ([ac363df](https://github.com/angular/material2/commit/ac363df)), closes [#2539](https://github.com/angular/material2/issues/2539)
+* **button:** raised buttons in dark theme ([#3070](https://github.com/angular/material2/issues/3070)) ([87ab712](https://github.com/angular/material2/commit/87ab712))
+* **button:** reuse _getHostElement() to avoid redundant elementRef.nativeElement calls ([#2625](https://github.com/angular/material2/issues/2625)) ([c7d1c17](https://github.com/angular/material2/commit/c7d1c17))
+* **button-toggle:** add the setDisabledState from ControlValueAccessor ([#2430](https://github.com/angular/material2/issues/2430)) ([fb750b4](https://github.com/angular/material2/commit/fb750b4))
+* **button-toggle:** conflict with radio component ([#2343](https://github.com/angular/material2/issues/2343)) ([9e99374](https://github.com/angular/material2/commit/9e99374)), closes [#2274](https://github.com/angular/material2/issues/2274)
+* **button-toggle:** make conform with design specs ([#2570](https://github.com/angular/material2/issues/2570)) ([fed5d7b](https://github.com/angular/material2/commit/fed5d7b))
+* **card:** fix padding for md-card-actions in xs screens ([#2567](https://github.com/angular/material2/issues/2567)) ([ad0df31](https://github.com/angular/material2/commit/ad0df31))
+* **checkbox:** Emit event when checkbox's indeterminate value changes ([#2130](https://github.com/angular/material2/issues/2130)) ([f11c5eb](https://github.com/angular/material2/commit/f11c5eb))
+* **checkbox:** rename tabindex to tabIndex ([#2953](https://github.com/angular/material2/issues/2953)) ([b91964a](https://github.com/angular/material2/commit/b91964a))
+* **checkbox:** ripple color does not change ([#2857](https://github.com/angular/material2/issues/2857)) ([7ac29f8](https://github.com/angular/material2/commit/7ac29f8))
+* **checkbox, radio:** not using theme border color ([#2744](https://github.com/angular/material2/issues/2744)) ([07ec765](https://github.com/angular/material2/commit/07ec765))
+* **compatibility:** add missing mat- selectors ([#2923](https://github.com/angular/material2/issues/2923)) ([f29f7ab](https://github.com/angular/material2/commit/f29f7ab))
+* **connected-position-strategy:** wrong logic when determining whether element is on screen ([#2677](https://github.com/angular/material2/issues/2677)) ([e055d05](https://github.com/angular/material2/commit/e055d05)), closes [#2102](https://github.com/angular/material2/issues/2102) [#2658](https://github.com/angular/material2/issues/2658)
+* **dialog:** escape key not working once element loses focus ([#3082](https://github.com/angular/material2/issues/3082)) ([a08dc55](https://github.com/angular/material2/commit/a08dc55)), closes [#3009](https://github.com/angular/material2/issues/3009)
+* **dialog:** prevent error when restoring focus on IE ([#2771](https://github.com/angular/material2/issues/2771)) ([153fcd3](https://github.com/angular/material2/commit/153fcd3)), closes [#2760](https://github.com/angular/material2/issues/2760)
+* **dialog:** prevent the close button from submitting forms ([#2659](https://github.com/angular/material2/issues/2659)) ([29f939a](https://github.com/angular/material2/commit/29f939a)), closes [#2599](https://github.com/angular/material2/issues/2599)
+* **dialog:** use injector from viewContainerRef if provided ([#2655](https://github.com/angular/material2/issues/2655)) ([be0da09](https://github.com/angular/material2/commit/be0da09))
+* **docs:** properly create links in guide files ([#2770](https://github.com/angular/material2/issues/2770)) ([60f03ed](https://github.com/angular/material2/commit/60f03ed))
+* **icon:** add caching of md-icon aria-label ([#2649](https://github.com/angular/material2/issues/2649)) ([08e9d70](https://github.com/angular/material2/commit/08e9d70)), closes [#2642](https://github.com/angular/material2/issues/2642)
+* **input:** add more padding so that the hint doesn't overflow the container ([#2246](https://github.com/angular/material2/issues/2246)) ([d7831d9](https://github.com/angular/material2/commit/d7831d9))
+* **input:** camel-case md-prefix and md-suffix ([#2639](https://github.com/angular/material2/issues/2639)) ([7562322](https://github.com/angular/material2/commit/7562322)), closes [#2636](https://github.com/angular/material2/issues/2636)
+* **input:** disable underline with reactive forms ([#2565](https://github.com/angular/material2/issues/2565)) ([f9dd34f](https://github.com/angular/material2/commit/f9dd34f)), closes [#2558](https://github.com/angular/material2/issues/2558)
+* **input:** disabled inputs should be grayed out ([#2513](https://github.com/angular/material2/issues/2513)) ([ed3ffe0](https://github.com/angular/material2/commit/ed3ffe0))
+* **input:** ensure that property bindings work ([#2431](https://github.com/angular/material2/issues/2431)) ([b4b4224](https://github.com/angular/material2/commit/b4b4224)), closes [#2428](https://github.com/angular/material2/issues/2428)
+* **input:** fix chrome 56 warning ([#2906](https://github.com/angular/material2/issues/2906)) ([62189a3](https://github.com/angular/material2/commit/62189a3))
+* **input:** fix placeholder for number input with bad input. ([#2362](https://github.com/angular/material2/issues/2362)) ([52aa715](https://github.com/angular/material2/commit/52aa715))
+* **input:** hints not being read out by screen readers ([#2856](https://github.com/angular/material2/issues/2856)) ([f899b5f](https://github.com/angular/material2/commit/f899b5f)), closes [#2798](https://github.com/angular/material2/issues/2798)
+* **input:** horizontal overflow in IE and Edge ([#2784](https://github.com/angular/material2/issues/2784)) ([e0fe635](https://github.com/angular/material2/commit/e0fe635))
+* **input:** properly determine input value ([#2455](https://github.com/angular/material2/issues/2455)) ([3a11927](https://github.com/angular/material2/commit/3a11927)), closes [#2441](https://github.com/angular/material2/issues/2441) [#2363](https://github.com/angular/material2/issues/2363)
+* **input:** remove md-input and md-textarea in favor of md-input-container ([#2788](https://github.com/angular/material2/issues/2788)) ([7b30fdc](https://github.com/angular/material2/commit/7b30fdc))
+* **input:** vendor-prefix ::placeholder ([#2547](https://github.com/angular/material2/issues/2547)) ([3b16648](https://github.com/angular/material2/commit/3b16648))
+* **input-container:** prefix and suffix stretching together with parent ([#2496](https://github.com/angular/material2/issues/2496)) ([64f6d1b](https://github.com/angular/material2/commit/64f6d1b)), closes [#2493](https://github.com/angular/material2/issues/2493) [#1881](https://github.com/angular/material2/issues/1881) [#1421](https://github.com/angular/material2/issues/1421)
+* **input-container:** reduce redundancy when forwarding the NgControl classes ([#2442](https://github.com/angular/material2/issues/2442)) ([8c0eef2](https://github.com/angular/material2/commit/8c0eef2))
+* **option:** revert duplicate prop ([#3051](https://github.com/angular/material2/issues/3051)) ([516720f](https://github.com/angular/material2/commit/516720f))
+* **overlay:** disable pointer events if overlay is detached ([#2747](https://github.com/angular/material2/issues/2747)) ([453fa7f](https://github.com/angular/material2/commit/453fa7f)), closes [#2739](https://github.com/angular/material2/issues/2739)
+* **overlay:** fix pointer events for ie11 ([#3023](https://github.com/angular/material2/issues/3023)) ([597e3de](https://github.com/angular/material2/commit/597e3de)), closes [#3022](https://github.com/angular/material2/issues/3022)
+* **progress-bar:** buffer animation not working in IE ([#2941](https://github.com/angular/material2/issues/2941)) ([ab8f98f](https://github.com/angular/material2/commit/ab8f98f)), closes [#2881](https://github.com/angular/material2/issues/2881)
+* **progress-bar:** unable to apply visibility in indeterminate mode and reduce CSS ([#2417](https://github.com/angular/material2/issues/2417)) ([eb96b0c](https://github.com/angular/material2/commit/eb96b0c)), closes [#2413](https://github.com/angular/material2/issues/2413)
+* **progress-spinner:** fix color input on md-spinner ([#2396](https://github.com/angular/material2/issues/2396)) ([6cb6576](https://github.com/angular/material2/commit/6cb6576)), closes [#2393](https://github.com/angular/material2/issues/2393)
+* **radio:** change radio button trigger element to input element ([#2838](https://github.com/angular/material2/issues/2838)) ([2f10a95](https://github.com/angular/material2/commit/2f10a95))
+* **ripple:** camel-cased CSS classes ([#2340](https://github.com/angular/material2/issues/2340)) ([c67f4e5](https://github.com/angular/material2/commit/c67f4e5))
+* **ripple:** make ripples conform with specs ([#2859](https://github.com/angular/material2/issues/2859)) ([6381948](https://github.com/angular/material2/commit/6381948))
+* **select:** avoid going into infinite loop under certain conditions ([#2955](https://github.com/angular/material2/issues/2955)) ([998a583](https://github.com/angular/material2/commit/998a583)), closes [#2950](https://github.com/angular/material2/issues/2950)
+* **select:** don't open menu if there are no options ([#2924](https://github.com/angular/material2/issues/2924)) ([cc77ef4](https://github.com/angular/material2/commit/cc77ef4))
+* **select:** fix select panel animation ([#2699](https://github.com/angular/material2/issues/2699)) ([15eb33a](https://github.com/angular/material2/commit/15eb33a)), closes [#2695](https://github.com/angular/material2/issues/2695)
+* **select:** fix selection color ([#2697](https://github.com/angular/material2/issues/2697)) ([4e94da4](https://github.com/angular/material2/commit/4e94da4)), closes [#2696](https://github.com/angular/material2/issues/2696)
+* **select:** selected option not being highlighted when options are added asynchronously ([#2499](https://github.com/angular/material2/issues/2499)) ([7fc38b9](https://github.com/angular/material2/commit/7fc38b9)), closes [#2497](https://github.com/angular/material2/issues/2497)
+* **select:** set default font size ([#2976](https://github.com/angular/material2/issues/2976)) ([40bc486](https://github.com/angular/material2/commit/40bc486))
+* **select:** set select value to trigger height and center text ([#3021](https://github.com/angular/material2/issues/3021)) ([ac9c090](https://github.com/angular/material2/commit/ac9c090))
+* **select:** support use inside a custom value accessor ([#2704](https://github.com/angular/material2/issues/2704)) ([651440f](https://github.com/angular/material2/commit/651440f)), closes [#2609](https://github.com/angular/material2/issues/2609)
+* **select:** transparent background when overscrolling ([#2117](https://github.com/angular/material2/issues/2117)) ([d9b2d85](https://github.com/angular/material2/commit/d9b2d85))
+* **select:** trim long labels inside md-option ([#2444](https://github.com/angular/material2/issues/2444)) ([416f56f](https://github.com/angular/material2/commit/416f56f)), closes [#2440](https://github.com/angular/material2/issues/2440)
+* **select:** view not updating when using OnPush detection strategy ([#2894](https://github.com/angular/material2/issues/2894)) ([3bcb7c3](https://github.com/angular/material2/commit/3bcb7c3)), closes [#2663](https://github.com/angular/material2/issues/2663) [#2269](https://github.com/angular/material2/issues/2269)
+* **select:** parent align affects placeholder ([#2572](https://github.com/angular/material2/issues/2572)) ([a1c90b3](https://github.com/angular/material2/commit/a1c90b3))
+* **sidenav:** animate content resizing for side mode. ([#2486](https://github.com/angular/material2/issues/2486)) ([4d33449](https://github.com/angular/material2/commit/4d33449))
+* **sidenav:** fix animation issue for initially open sidenav ([#3045](https://github.com/angular/material2/issues/3045)) ([37e4bad](https://github.com/angular/material2/commit/37e4bad))
+* **slide-toggle:** consistent naming of aria attributes ([#2688](https://github.com/angular/material2/issues/2688)) ([10bd6da](https://github.com/angular/material2/commit/10bd6da))
+* **slider:** fire change event on value change via keyboard. ([#2807](https://github.com/angular/material2/issues/2807)) ([7f50d11](https://github.com/angular/material2/commit/7f50d11))
+* **slider:** hide ticks when slider is disabled ([#2687](https://github.com/angular/material2/issues/2687)) ([e9ec8ab](https://github.com/angular/material2/commit/e9ec8ab))
+* apply font-family to text components ([#2821](https://github.com/angular/material2/issues/2821)) ([d11673a](https://github.com/angular/material2/commit/d11673a))
+* **slider:** make disabled state look like mocks ([#2604](https://github.com/angular/material2/issues/2604)) ([8263ffb](https://github.com/angular/material2/commit/8263ffb))
+* **slider:** make min value style match mocks ([#2641](https://github.com/angular/material2/issues/2641)) ([737b608](https://github.com/angular/material2/commit/737b608))
+* **slider:** round decimals in the thumb label ([#2527](https://github.com/angular/material2/issues/2527)) ([987897c](https://github.com/angular/material2/commit/987897c)), closes [#2511](https://github.com/angular/material2/issues/2511)
+* **snack-bar:** improper button styling and improved handling of long text ([#2991](https://github.com/angular/material2/issues/2991)) ([93937e6](https://github.com/angular/material2/commit/93937e6)), closes [#2979](https://github.com/angular/material2/issues/2979)
+* **snack-bar:** prevent error when opening multiple snack bars in fast succession ([#2392](https://github.com/angular/material2/issues/2392)) ([161f319](https://github.com/angular/material2/commit/161f319)), closes [#2390](https://github.com/angular/material2/issues/2390)
+* **snack-bar:** SimpleSnackBar not being exported ([#3016](https://github.com/angular/material2/issues/3016)) ([a7a3967](https://github.com/angular/material2/commit/a7a3967)), closes [#3010](https://github.com/angular/material2/issues/3010)
+* **tabs:** crashing on chrome under certain conditions ([#2411](https://github.com/angular/material2/issues/2411)) ([727ce53](https://github.com/angular/material2/commit/727ce53)), closes [#2151](https://github.com/angular/material2/issues/2151)
+* **tabs:** fix ink not showing on chrome 57 ([#3041](https://github.com/angular/material2/issues/3041)) ([f24832c](https://github.com/angular/material2/commit/f24832c))
+* **tabs:** infinite loop when selectedIndex is set to NaN ([#2389](https://github.com/angular/material2/issues/2389)) ([f4cfc2d](https://github.com/angular/material2/commit/f4cfc2d))
+* **toolbar:** add toolbar role to host element ([#2914](https://github.com/angular/material2/issues/2914)) ([67032ca](https://github.com/angular/material2/commit/67032ca)), closes [#2909](https://github.com/angular/material2/issues/2909)
+* **toolbar:** correct font-weight ([#2485](https://github.com/angular/material2/issues/2485)) ([1b44880](https://github.com/angular/material2/commit/1b44880))
+* **toolbar:** prevent content overflow and line-wrapping ([#2454](https://github.com/angular/material2/issues/2454)) ([e728771](https://github.com/angular/material2/commit/e728771)), closes [#2451](https://github.com/angular/material2/issues/2451)
+* **tooltip:** better handling of multi-line text ([#2472](https://github.com/angular/material2/issues/2472)) ([7863e38](https://github.com/angular/material2/commit/7863e38)), closes [#2205](https://github.com/angular/material2/issues/2205)
+* **tooltip:** not working properly with ChangeDetectionStrategy.OnPush ([#2721](https://github.com/angular/material2/issues/2721)) ([632b964](https://github.com/angular/material2/commit/632b964)), closes [#2713](https://github.com/angular/material2/issues/2713)
+* **tooltip:** provide a maximum width ([#2678](https://github.com/angular/material2/issues/2678)) ([fb5e1d4](https://github.com/angular/material2/commit/fb5e1d4)), closes [#2671](https://github.com/angular/material2/issues/2671)
+
+
+### Features
+
+* **autocomplete:** add autocomplete panel toggling ([#2452](https://github.com/angular/material2/issues/2452)) ([d4ab3d3](https://github.com/angular/material2/commit/d4ab3d3))
+* **autocomplete:** add fallback positions ([#2726](https://github.com/angular/material2/issues/2726)) ([8fc7706](https://github.com/angular/material2/commit/8fc7706))
+* **autocomplete:** add keyboard events to autocomplete ([#2723](https://github.com/angular/material2/issues/2723)) ([fcea9d4](https://github.com/angular/material2/commit/fcea9d4))
+* **autocomplete:** add screenreader support ([#2729](https://github.com/angular/material2/issues/2729)) ([bd7f240](https://github.com/angular/material2/commit/bd7f240))
+* **autocomplete:** add value support ([#2516](https://github.com/angular/material2/issues/2516)) ([5def001](https://github.com/angular/material2/commit/5def001))
+* **autocomplete:** allow use of obj values ([#2792](https://github.com/angular/material2/issues/2792)) ([55e1847](https://github.com/angular/material2/commit/55e1847))
+* **button-toggle:** Show selected option when md-button-toggle is disabled ([#3012](https://github.com/angular/material2/issues/3012)) ([1547440](https://github.com/angular/material2/commit/1547440)), closes [#3007](https://github.com/angular/material2/issues/3007)
+* **compatibility:** remove conflicts with material1 css styling ([#2790](https://github.com/angular/material2/issues/2790)) ([210ff02](https://github.com/angular/material2/commit/210ff02))
+* **dialog:** add a config option for passing in data ([#2266](https://github.com/angular/material2/issues/2266)) ([29cbe61](https://github.com/angular/material2/commit/29cbe61)), closes [#2181](https://github.com/angular/material2/issues/2181)
+* **dialog:** add events (observables) for open & closeAll ([#2522](https://github.com/angular/material2/issues/2522)) ([23ab152](https://github.com/angular/material2/commit/23ab152))
+* **dialog:** add the ability to align the content of md-dialog-actions ([#2557](https://github.com/angular/material2/issues/2557)) ([e18ab5d](https://github.com/angular/material2/commit/e18ab5d)), closes [#2483](https://github.com/angular/material2/issues/2483)
+* **dialog:** support open with TemplateRef ([#2910](https://github.com/angular/material2/issues/2910)) ([bf0f625](https://github.com/angular/material2/commit/bf0f625))
+* **focus-classes:** expose focus origin changes through observable ([#2974](https://github.com/angular/material2/issues/2974)) ([d4ba648](https://github.com/angular/material2/commit/d4ba648))
+* **FocusOriginMonitor:** add support for touch events ([#3020](https://github.com/angular/material2/issues/3020)) ([ec7e2e4](https://github.com/angular/material2/commit/ec7e2e4))
+* **input:** option to imperatively float placeholder ([#2585](https://github.com/angular/material2/issues/2585)) ([fb0cf8a](https://github.com/angular/material2/commit/fb0cf8a)), closes [#2466](https://github.com/angular/material2/issues/2466)
+* **list-key-manager:** active descendant support ([#2606](https://github.com/angular/material2/issues/2606)) ([e2ad3a0](https://github.com/angular/material2/commit/e2ad3a0))
+* **menu:** Added ability to show the menu overlay around the menu trigger ([#1771](https://github.com/angular/material2/issues/1771)) ([592f33f](https://github.com/angular/material2/commit/592f33f))
+* **overlay:** add fullscreen-enabled overlay class ([#1949](https://github.com/angular/material2/issues/1949)) ([0640302](https://github.com/angular/material2/commit/0640302))
+* **screenshot:** Add screenshot function to e2e test (button and checkbox) ([#2532](https://github.com/angular/material2/issues/2532)) ([8ba8deb](https://github.com/angular/material2/commit/8ba8deb))
+* **scripts:** push generated docs to material assets repo ([#2720](https://github.com/angular/material2/issues/2720)) ([ba12f44](https://github.com/angular/material2/commit/ba12f44))
+* **select:** emit change event ([#2458](https://github.com/angular/material2/issues/2458)) ([e5bd15c](https://github.com/angular/material2/commit/e5bd15c)), closes [#2248](https://github.com/angular/material2/issues/2248)
+* **sidenav:** add disableClose option ([#2501](https://github.com/angular/material2/issues/2501)) ([52ade97](https://github.com/angular/material2/commit/52ade97)), closes [#2462](https://github.com/angular/material2/issues/2462)
+* **slide-toggle:** add support for labelPosition ([#2836](https://github.com/angular/material2/issues/2836)) ([68a0c90](https://github.com/angular/material2/commit/68a0c90)), closes [#2820](https://github.com/angular/material2/issues/2820)
+* **slider:** emit input event when slider thumb moves ([#2325](https://github.com/angular/material2/issues/2325)) ([99963c4](https://github.com/angular/material2/commit/99963c4)), closes [#2296](https://github.com/angular/material2/issues/2296)
+* **snack-bar:** allow addition of extra css classes ([#2804](https://github.com/angular/material2/issues/2804)) ([e783494](https://github.com/angular/material2/commit/e783494)), closes [#2664](https://github.com/angular/material2/issues/2664)
+* **style:** add directive to determine how elements were focused. ([#2646](https://github.com/angular/material2/issues/2646)) ([8a6d902](https://github.com/angular/material2/commit/8a6d902))
+* **tabs:** add the ability to invert the header ([#2391](https://github.com/angular/material2/issues/2391)) ([a494c92](https://github.com/angular/material2/commit/a494c92)), closes [#2387](https://github.com/angular/material2/issues/2387)
+* **theming:** provide a content wrapper attribute ([#2170](https://github.com/angular/material2/issues/2170)) ([4bf4b87](https://github.com/angular/material2/commit/4bf4b87)), closes [#1938](https://github.com/angular/material2/issues/1938) [#2106](https://github.com/angular/material2/issues/2106)
+* **tooltip:** reposition on scroll ([#2703](https://github.com/angular/material2/issues/2703)) ([bc52298](https://github.com/angular/material2/commit/bc52298))
+* **viewport-ruler:** cache document client rect ([#2538](https://github.com/angular/material2/issues/2538)) ([d0c8f18](https://github.com/angular/material2/commit/d0c8f18))
+* add a common class to be used when dealing with selection logic ([#2562](https://github.com/angular/material2/issues/2562)) ([c295fa9](https://github.com/angular/material2/commit/c295fa9))
+* add simplified checkbox component for usage in other components ([#2619](https://github.com/angular/material2/issues/2619)) ([3b6cab0](https://github.com/angular/material2/commit/3b6cab0))
+* remove the need for forRoot on material NgModules ([#2556](https://github.com/angular/material2/issues/2556)) ([b49bfce](https://github.com/angular/material2/commit/b49bfce))
+
+
+### Performance Improvements
+
+* **tabs:** reduce amount of reflows when aligning the ink bar ([#2372](https://github.com/angular/material2/issues/2372)) ([dab742f](https://github.com/angular/material2/commit/dab742f))
+
+
# [2.0.0-beta.1 rebar-teacup](https://github.com/angular/material2/compare/2.0.0-beta.0...2.0.0-beta.1) (2016-12-23)
@@ -12,7 +175,7 @@
### Breaking changes from alpha.11
* The `svgSrc` propert of `` has been removed. All SVG URLs must now be explicitly marked
as trusted using Angular's `DomSanitizer` service.
-* The `` element is deprecated in favor of ``. This new component
+* The `` element is deprecated in favor of ``. This new component
allows for direct access to the native input element.
* All `@Input` properties have been changed to use their camelCase names for binding. The old names
are still available as deprecated but will be removed in the next release.
diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md
index 5009fbee2b7f..25b69346a9e7 100644
--- a/CODING_STANDARDS.md
+++ b/CODING_STANDARDS.md
@@ -43,8 +43,8 @@ if (!$attrs['tabindex']) {
For example, rather than doing this:
```html
Basic button
-FAB
-pony
+FAB
+pony
```
do this:
@@ -192,13 +192,13 @@ code organization.** This will allow users to much more easily override styles.
For example, rather than doing this:
```scss
-md-calendar {
+.mat-calendar {
display: block;
- .md-month {
+ .mat-month {
display: inline-block;
- .md-date.md-selected {
+ .mat-date.mat-selected {
font-weight: bold;
}
}
@@ -207,15 +207,15 @@ md-calendar {
do this:
```scss
-md-calendar {
+.mat-calendar {
display: block;
}
-.md-calendar-month {
+.mat-calendar-month {
display: inline-block;
}
-.md-calendar-date.md-selected {
+.mat-calendar-date.mat-selected {
font-weight: bold;
}
```
@@ -260,11 +260,11 @@ This is a low-effort task that makes a big difference for low-vision users. Exam
When it is not super obvious, include a brief description of what a class represents. For example:
```scss
// The calendar icon button used to open the calendar pane.
-.md-datepicker-button { ... }
+.mat-datepicker-button { ... }
// Floating pane that contains the calendar at the bottom of the input.
-.md-datepicker-calendar-pane { ... }
+.mat-datepicker-calendar-pane { ... }
// Portion of the floating panel that sits, invisibly, on top of the input.
-.md-datepicker-input-mask { }
+.mat-datepicker-input-mask { }
```
diff --git a/README.md b/README.md
index de6da4c78b37..63b9db6cd2be 100644
--- a/README.md
+++ b/README.md
@@ -39,6 +39,7 @@ Also see our [`Good for community contribution`](https://github.com/angular/mate
label.
High level items planned for January 2017:
+
* Initial version of md-autocomplete
* Prototyping for data-table
* Improvements to https://material.angular.io
@@ -73,8 +74,8 @@ High level items planned for January 2017:
| ripples | Available | [README][19] | [#108][0108] |
| dialog | Available | [README][22] | [#114][0114] |
| snackbar / toast | Available | [README][21] | [#115][0115] |
-| select | Available | - | [#118][0118] |
-| textarea | Available | - | - |
+| select | Available | [README][23] | [#118][0118] |
+| textarea | Available | [README][5] | - |
| autocomplete | In-progress | - | [#117][0117] |
| chips | Initial version, features evolving | - | [#120][0120] |
| theming | Available, need guidance overlays | [Guide][20] | - |
@@ -114,6 +115,7 @@ High level items planned for January 2017:
[20]: https://github.com/angular/material2/blob/master/guides/theming.md
[21]: https://github.com/angular/material2/blob/master/src/lib/snack-bar/README.md
[22]: https://github.com/angular/material2/blob/master/src/lib/dialog/README.md
+[23]: https://github.com/angular/material2/blob/master/src/lib/select/README.md
[0107]: https://github.com/angular/material2/issues/107
[0119]: https://github.com/angular/material2/issues/119
diff --git a/e2e/components/button/button.e2e.ts b/e2e/components/button/button.e2e.ts
index dd183358e118..91719f606425 100644
--- a/e2e/components/button/button.e2e.ts
+++ b/e2e/components/button/button.e2e.ts
@@ -1,4 +1,4 @@
-import {browser, by, element} from 'protractor';
+import {browser, by, element, ExpectedConditions} from 'protractor';
import {screenshot} from '../../screenshot';
@@ -9,12 +9,16 @@ describe('button', () => {
it('should prevent click handlers from executing when disabled', () => {
element(by.id('test-button')).click();
expect(element(by.id('click-counter')).getText()).toEqual('1');
- screenshot('clicked once');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('clicked once'));
element(by.id('disable-toggle')).click();
element(by.id('test-button')).click();
expect(element(by.id('click-counter')).getText()).toEqual('1');
- screenshot('click disabled');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('click disabled'));
});
});
});
diff --git a/e2e/components/checkbox/checkbox.e2e.ts b/e2e/components/checkbox/checkbox.e2e.ts
index b6b1a255b4a1..8c81f63100b0 100644
--- a/e2e/components/checkbox/checkbox.e2e.ts
+++ b/e2e/components/checkbox/checkbox.e2e.ts
@@ -1,4 +1,4 @@
-import {browser, by, element, Key} from 'protractor';
+import {browser, by, element, Key, ExpectedConditions} from 'protractor';
import {screenshot} from '../../screenshot';
describe('checkbox', function () {
@@ -17,14 +17,18 @@ describe('checkbox', function () {
checkboxEl.click();
inputEl.getAttribute('checked').then((value: string) => {
expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('checked'));
});
- screenshot('checked');
checkboxEl.click();
inputEl.getAttribute('checked').then((value: string) => {
expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('unchecked'));
});
- screenshot('unchecked');
});
it('should toggle the checkbox when pressing space', () => {
@@ -32,16 +36,13 @@ describe('checkbox', function () {
inputEl.getAttribute('checked').then((value: string) => {
expect(value).toBeFalsy('Expect checkbox "checked" property to be false');
- screenshot('start');
});
inputEl.sendKeys(Key.SPACE);
inputEl.getAttribute('checked').then((value: string) => {
expect(value).toBeTruthy('Expect checkbox "checked" property to be true');
- screenshot('pressed space');
});
});
-
});
});
diff --git a/e2e/components/dialog/dialog.e2e.ts b/e2e/components/dialog/dialog.e2e.ts
index 907713ceeaae..7a9d862384c0 100644
--- a/e2e/components/dialog/dialog.e2e.ts
+++ b/e2e/components/dialog/dialog.e2e.ts
@@ -11,6 +11,12 @@ describe('dialog', () => {
expectToExist('md-dialog-container');
});
+ it('should open a template dialog', () => {
+ expectToExist('.my-template-dialog', false);
+ element(by.id('template')).click();
+ expectToExist('.my-template-dialog');
+ });
+
it('should close by clicking on the backdrop', () => {
element(by.id('default')).click();
@@ -29,6 +35,16 @@ describe('dialog', () => {
});
});
+ it('should close by pressing escape when the first tabbable element has lost focus', () => {
+ element(by.id('default')).click();
+
+ waitForDialog().then(() => {
+ clickElementAtPoint('md-dialog-container', { x: 0, y: 0 });
+ pressKeys(Key.ESCAPE);
+ expectToExist('md-dialog-container', false);
+ });
+ });
+
it('should close by clicking on the "close" button', () => {
element(by.id('default')).click();
diff --git a/e2e/components/fullscreen/fullscreen.e2e.ts b/e2e/components/fullscreen/fullscreen.e2e.ts
index 63a3c65d06e5..3851de017cc0 100644
--- a/e2e/components/fullscreen/fullscreen.e2e.ts
+++ b/e2e/components/fullscreen/fullscreen.e2e.ts
@@ -1,38 +1,38 @@
-import {browser, by, element, Key, ProtractorBy} from 'protractor';
+import {browser, by, element} from 'protractor';
describe('fullscreen', () => {
- beforeEach(() => browser.get('/fullscreen'));
- let overlayInBody = () =>
- browser.isElementPresent(by.css('body > .cdk-overlay-container') as ProtractorBy);
- let overlayInFullscreen = () =>
- browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container') as ProtractorBy);
+ beforeEach(() => browser.get('/fullscreen'));
it('should open a dialog inside a fullscreen element and move it to the document body', () => {
element(by.id('fullscreen')).click();
element(by.id('dialog')).click();
- overlayInFullscreen().then((isPresent: boolean) => {
- expect(isPresent).toBe(true);
- element(by.id('exitfullscreenindialog')).click();
- overlayInBody().then((isPresent: boolean) => {
- expect(isPresent).toBe(true);
- });
- });
+ expectOverlayInFullscreen();
+
+ element(by.id('exitfullscreenindialog')).click();
+ expectOverlayInBody();
});
it('should open a dialog inside the document body and move it to a fullscreen element', () => {
element(by.id('dialog')).click();
- overlayInBody().then((isPresent: boolean) => {
- expect(isPresent).toBe(true);
- element(by.id('fullscreenindialog')).click();
- overlayInFullscreen().then((isPresent: boolean) => {
- expect(isPresent).toBe(true);
- element(by.id('exitfullscreenindialog')).click();
- overlayInBody().then((isPresent: boolean) => {
- expect(isPresent).toBe(true);
- });
- });
- });
+ expectOverlayInBody();
+
+ element(by.id('fullscreenindialog')).click();
+ expectOverlayInFullscreen();
+
+ element(by.id('exitfullscreenindialog')).click();
+ expectOverlayInBody();
});
+
+ /** Expects the overlay container to be inside of the body element. */
+ function expectOverlayInBody() {
+ expect(browser.isElementPresent(by.css('body > .cdk-overlay-container'))).toBe(true);
+ }
+
+ /** Expects the overlay container to be in fullscreen mode. */
+ function expectOverlayInFullscreen() {
+ expect(browser.isElementPresent(by.css('#fullscreenpane > .cdk-overlay-container'))).toBe(true);
+ }
+
});
diff --git a/e2e/components/grid-list/grid-list.e2e.ts b/e2e/components/grid-list/grid-list.e2e.ts
index 814e0bbbc697..848f2b04a3cb 100644
--- a/e2e/components/grid-list/grid-list.e2e.ts
+++ b/e2e/components/grid-list/grid-list.e2e.ts
@@ -1,11 +1,13 @@
import {browser} from 'protractor';
import {expectToExist} from '../../util/asserts';
+import {screenshot} from '../../screenshot';
describe('grid-list', () => {
beforeEach(() => browser.get('/grid-list'));
it('should render a grid list container', () => {
expectToExist('md-grid-list');
+ screenshot();
});
it('should render list items inside the grid list container', () => {
diff --git a/e2e/components/icon/icon.e2e.ts b/e2e/components/icon/icon.e2e.ts
index e0cb1caa6910..1407f517d1ef 100644
--- a/e2e/components/icon/icon.e2e.ts
+++ b/e2e/components/icon/icon.e2e.ts
@@ -1,4 +1,5 @@
import {browser, by, element} from 'protractor';
+import {screenshot} from '../../screenshot';
describe('icon', () => {
describe('font icons by ligature', () => {
@@ -13,6 +14,7 @@ describe('icon', () => {
testIcon.getAttribute('aria-label').then((attr: string) => {
expect(attr).toEqual('favorite');
});
+ screenshot();
});
it('should have the correct class when used', () => {
diff --git a/e2e/components/list/list.e2e.ts b/e2e/components/list/list.e2e.ts
index e616f1ffcde5..86da9dba1246 100644
--- a/e2e/components/list/list.e2e.ts
+++ b/e2e/components/list/list.e2e.ts
@@ -1,11 +1,13 @@
import {browser} from 'protractor';
import {expectToExist} from '../../util/asserts';
+import {screenshot} from '../../screenshot';
describe('list', () => {
beforeEach(() => browser.get('/list'));
it('should render a list container', () => {
expectToExist('md-list');
+ screenshot();
});
it('should render list items inside the list container', () => {
diff --git a/e2e/components/menu/menu-page.ts b/e2e/components/menu/menu-page.ts
index ffda502eba4f..0d5dc6f82142 100644
--- a/e2e/components/menu/menu-page.ts
+++ b/e2e/components/menu/menu-page.ts
@@ -3,7 +3,7 @@ import {browser, by, element, ElementFinder} from 'protractor';
export class MenuPage {
constructor() { browser.get('/menu'); }
- menu(): ElementFinder { return element(by.css('.md-menu-panel')); }
+ menu(): ElementFinder { return element(by.css('.mat-menu-panel')); }
start(): ElementFinder { return element(by.id('start')); }
@@ -23,11 +23,11 @@ export class MenuPage {
combinedTrigger(): ElementFinder { return element(by.id('combined-t')); }
- beforeMenu(): ElementFinder { return element(by.css('.md-menu-panel.before')); }
+ beforeMenu(): ElementFinder { return element(by.css('.mat-menu-panel.before')); }
- aboveMenu(): ElementFinder { return element(by.css('.md-menu-panel.above')); }
+ aboveMenu(): ElementFinder { return element(by.css('.mat-menu-panel.above')); }
- combinedMenu(): ElementFinder { return element(by.css('.md-menu-panel.combined')); }
+ combinedMenu(): ElementFinder { return element(by.css('.mat-menu-panel.combined')); }
getResultText() { return this.textArea().getText(); }
}
diff --git a/e2e/components/menu/menu.e2e.ts b/e2e/components/menu/menu.e2e.ts
index 36e330fbf60d..26b3e4dbb431 100644
--- a/e2e/components/menu/menu.e2e.ts
+++ b/e2e/components/menu/menu.e2e.ts
@@ -1,10 +1,11 @@
-import {browser, Key, protractor} from 'protractor';
+import {Key, protractor} from 'protractor';
import {MenuPage} from './menu-page';
import {expectToExist, expectAlignedWith, expectFocusOn, expectLocation} from '../../util/asserts';
import {pressKeys} from '../../util/actions';
+import {screenshot} from '../../screenshot';
describe('menu', () => {
- const menuSelector = '.md-menu-panel';
+ const menuSelector = '.mat-menu-panel';
let page: MenuPage;
beforeEach(() => page = new MenuPage());
@@ -15,28 +16,33 @@ describe('menu', () => {
expectToExist(menuSelector);
expect(page.menu().getText()).toEqual('One\nTwo\nThree\nFour');
+ screenshot();
});
it('should close menu when menu item is clicked', () => {
page.trigger().click();
page.items(0).click();
expectToExist(menuSelector, false);
+ screenshot();
});
it('should run click handlers on regular menu items', () => {
page.trigger().click();
page.items(0).click();
expect(page.getResultText()).toEqual('one');
+ screenshot('one');
page.trigger().click();
page.items(1).click();
expect(page.getResultText()).toEqual('two');
+ screenshot('two');
});
it('should run not run click handlers on disabled menu items', () => {
page.trigger().click();
page.items(2).click();
expect(page.getResultText()).toEqual('');
+ screenshot();
});
it('should support multiple triggers opening the same menu', () => {
@@ -60,7 +66,7 @@ describe('menu', () => {
it('should mirror classes on host to menu template in overlay', () => {
page.trigger().click();
page.menu().getAttribute('class').then((classes: string) => {
- expect(classes).toContain('md-menu-panel custom');
+ expect(classes).toContain('mat-menu-panel custom');
});
});
diff --git a/e2e/components/radio/radio.e2e.ts b/e2e/components/radio/radio.e2e.ts
index 09781fbedb92..a2a5188838d2 100644
--- a/e2e/components/radio/radio.e2e.ts
+++ b/e2e/components/radio/radio.e2e.ts
@@ -1,4 +1,5 @@
-import {browser, by, element} from 'protractor';
+import {browser, by, element, ExpectedConditions} from 'protractor';
+import {screenshot} from '../../screenshot';
describe('radio', () => {
describe('disabling behavior', () => {
@@ -7,7 +8,10 @@ describe('radio', () => {
it('should be checked when clicked', () => {
element(by.id('water')).click();
element(by.id('water')).getAttribute('class').then((value: string) => {
- expect(value).toContain('md-radio-checked');
+ expect(value).toContain('mat-radio-checked');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('water'));
});
element(by.css('input[id=water-input]')).getAttribute('checked').then((value: string) => {
expect(value).toBeTruthy();
@@ -18,7 +22,10 @@ describe('radio', () => {
element(by.id('leaf')).click();
element(by.id('leaf')).getAttribute('class').then((value: string) => {
- expect(value).toContain('md-radio-checked');
+ expect(value).toContain('mat-radio-checked');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('leaf'));
});
element(by.css('input[id=leaf-input]')).getAttribute('checked').then((value: string) => {
expect(value).toBeTruthy();
@@ -32,15 +39,20 @@ describe('radio', () => {
element(by.id('toggle-disable')).click();
element(by.id('water')).click();
element(by.id('water')).getAttribute('class').then((value: string) => {
- expect(value).toContain('md-radio-disabled');
+ expect(value).toContain('mat-radio-disabled');
+ browser.wait(ExpectedConditions.presenceOf(element(by.css('.mat-radio-disabled'))))
+ .then(() => screenshot('water'));
});
- element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
+ element(by.css('input[id=water-input]')).getAttribute('disabled').then((value: string) => {
expect(value).toBeTruthy();
});
element(by.id('leaf')).click();
element(by.id('leaf')).getAttribute('class').then((value: string) => {
- expect(value).toContain('md-radio-disabled');
+ expect(value).toContain('mat-radio-disabled');
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('leaf'));
});
element(by.css('input[id=leaf-input]')).getAttribute('disabled').then((value: string) => {
expect(value).toBeTruthy();
diff --git a/e2e/components/slide-toggle/slide-toggle.e2e.ts b/e2e/components/slide-toggle/slide-toggle.e2e.ts
index 96f839e6e3ef..c681c093942f 100644
--- a/e2e/components/slide-toggle/slide-toggle.e2e.ts
+++ b/e2e/components/slide-toggle/slide-toggle.e2e.ts
@@ -1,5 +1,6 @@
import {browser, element, by, Key} from 'protractor';
import {expectToExist} from '../../util/asserts';
+import {screenshot} from '../../screenshot';
describe('slide-toggle', () => {
const getInput = () => element(by.css('#normal-slide-toggle input'));
@@ -9,6 +10,7 @@ describe('slide-toggle', () => {
it('should render a slide-toggle', () => {
expectToExist('md-slide-toggle');
+ screenshot();
});
it('should change the checked state on click', () => {
@@ -19,6 +21,7 @@ describe('slide-toggle', () => {
getNormalToggle().click();
expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
+ screenshot();
});
it('should change the checked state on click', () => {
@@ -29,6 +32,7 @@ describe('slide-toggle', () => {
getNormalToggle().click();
expect(inputEl.getAttribute('checked')).toBeTruthy('Expect slide-toggle to be checked');
+ screenshot();
});
it('should not change the checked state on click when disabled', () => {
@@ -39,11 +43,12 @@ describe('slide-toggle', () => {
element(by.css('#disabled-slide-toggle')).click();
expect(inputEl.getAttribute('checked')).toBeFalsy('Expect slide-toggle to be unchecked');
+ screenshot();
});
it('should move the thumb on state change', () => {
let slideToggleEl = getNormalToggle();
- let thumbEl = element(by.css('#normal-slide-toggle .md-slide-toggle-thumb-container'));
+ let thumbEl = element(by.css('#normal-slide-toggle .mat-slide-toggle-thumb-container'));
let previousX = thumbEl.getLocation().then(pos => pos.x);
@@ -52,6 +57,7 @@ describe('slide-toggle', () => {
let newX = thumbEl.getLocation().then(pos => pos.x);
expect(previousX).not.toBe(newX);
+ screenshot();
});
it('should toggle the slide-toggle on space key', () => {
diff --git a/e2e/components/tabs/tabs.e2e.ts b/e2e/components/tabs/tabs.e2e.ts
index a8c7c5f72f57..4092aa2b5c4f 100644
--- a/e2e/components/tabs/tabs.e2e.ts
+++ b/e2e/components/tabs/tabs.e2e.ts
@@ -1,5 +1,14 @@
-import {browser, by, element, ElementArrayFinder, ElementFinder, Key} from 'protractor';
+import {
+ browser,
+ by,
+ element,
+ ElementArrayFinder,
+ ElementFinder,
+ Key,
+ ExpectedConditions
+} from 'protractor';
import {pressKeys} from '../../util/actions';
+import {screenshot} from '../../screenshot';
describe('tabs', () => {
describe('basic behavior', () => {
@@ -10,7 +19,7 @@ describe('tabs', () => {
beforeEach(() => {
browser.get('/tabs');
tabGroup = element(by.css('md-tab-group'));
- tabLabels = element.all(by.css('.md-tab-label'));
+ tabLabels = element.all(by.css('.mat-tab-label'));
tabBodies = element.all(by.css('md-tab-body'));
});
@@ -18,10 +27,16 @@ describe('tabs', () => {
tabLabels.get(1).click();
expect(getLabelActiveStates(tabLabels)).toEqual([false, true, false]);
expect(getBodyActiveStates(tabBodies)).toEqual([false, true, false]);
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('click1'));
tabLabels.get(0).click();
expect(getLabelActiveStates(tabLabels)).toEqual([true, false, false]);
expect(getBodyActiveStates(tabBodies)).toEqual([true, false, false]);
+ browser.wait(ExpectedConditions.not(
+ ExpectedConditions.presenceOf(element(by.css('div.mat-ripple-element')))))
+ .then(() => screenshot('click0'));
});
it('should change focus with keyboard interaction', () => {
@@ -67,12 +82,12 @@ function getFocusStates(elements: ElementArrayFinder) {
/** Returns an array of true/false that represents the active states for the provided elements. */
function getLabelActiveStates(elements: ElementArrayFinder) {
- return getClassStates(elements, 'md-tab-label-active');
+ return getClassStates(elements, 'mat-tab-label-active');
}
/** Returns an array of true/false that represents the active states for the provided elements */
function getBodyActiveStates(elements: ElementArrayFinder) {
- return getClassStates(elements, 'md-tab-body-active');
+ return getClassStates(elements, 'mat-tab-body-active');
}
/**
diff --git a/e2e/screenshot.ts b/e2e/screenshot.ts
index 28fad25225a2..e5df95c695d0 100644
--- a/e2e/screenshot.ts
+++ b/e2e/screenshot.ts
@@ -1,5 +1,4 @@
import * as fs from 'fs';
-import * as gulp from 'gulp';
import * as path from 'path';
import {browser} from 'protractor';
@@ -35,8 +34,8 @@ export class Screenshot {
return path.resolve(OUTPUT_DIR, this.filename);
}
- constructor(id: string) {
- this.id = `${currentJasmineSpecName} ${id}`;
+ constructor(id?: string) {
+ this.id = id ? `${currentJasmineSpecName} ${id}` : currentJasmineSpecName;
browser.takeScreenshot().then(png => this.storeScreenshot(png));
}
@@ -52,7 +51,7 @@ export class Screenshot {
}
}
-export function screenshot(id: string) {
+export function screenshot(id?: string) {
if (process.env['TRAVIS']) {
return new Screenshot(id);
}
diff --git a/guides/getting-started.md b/guides/getting-started.md
index b34323262ba7..02eb86b00feb 100644
--- a/guides/getting-started.md
+++ b/guides/getting-started.md
@@ -1,9 +1,9 @@
Get started with Angular Material using the Angular CLI.
-## Install the CLI
+## Install Angular CLI
```bash
- npm install -g angular-cli
+ npm install -g @angular/cli
```
## Create a new project
@@ -27,7 +27,7 @@ npm install --save @angular/material
import { MaterialModule } from '@angular/material';
// other imports
@NgModule({
- imports: [MaterialModule.forRoot()],
+ imports: [MaterialModule],
...
})
export class PizzaPartyAppModule { }
diff --git a/guides/theming-your-components.md b/guides/theming-your-components.md
index d413c639f037..91750546d8e8 100644
--- a/guides/theming-your-components.md
+++ b/guides/theming-your-components.md
@@ -24,8 +24,8 @@ All you need is to create a `@mixin` function in the custom-component-theme.scss
// Use md-color to extract individual colors from a palette as necessary.
.candy-carousel {
- background-color: md-color($primary);
- border-color: md-color($accent, A400);
+ background-color: mat-color($primary);
+ border-color: mat-color($accent, A400);
}
}
```
@@ -53,7 +53,7 @@ Styles that are affected by the theme should be placed in a separated theming fi
## Using colors from a palette
-You can consume the theming functions from the `@angular/material/core/theming/theming` and Material palette vars from `@angular/material/core/theming/palette`. You can use the `md-color` function to extract a specific color from a palette. For example:
+You can consume the theming functions from the `@angular/material/core/theming/theming` and Material palette vars from `@angular/material/core/theming/palette`. You can use the `mat-color` function to extract a specific color from a palette. For example:
```scss
// Import theming functions
@@ -61,9 +61,9 @@ You can consume the theming functions from the `@angular/material/core/theming/t
// Import your custom theme
@import 'src/unicorn-app-theme.scss';
-// Use md-color to extract individual colors from a palette as necessary.
+// Use mat-color to extract individual colors from a palette as necessary.
.candy-carousel {
- background-color: md-color($candy-app-primary);
- border-color: md-color($candy-app-accent, A400);
+ background-color: mat-color($candy-app-primary);
+ border-color: mat-color($candy-app-accent, A400);
}
```
diff --git a/guides/theming.md b/guides/theming.md
index 81a3617a6af7..78a5e59861c6 100644
--- a/guides/theming.md
+++ b/guides/theming.md
@@ -41,7 +41,7 @@ The actual path will depend on your server setup.
You can also concatenate the file with the rest of your application's css.
Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you
-need to add the `md-app-background` class to your wrapper element (for example the `body`). This
+need to add the `mat-app-background` class to your wrapper element (for example the `body`). This
ensures that the proper theme background is applied to your page.
### Defining a custom theme
@@ -55,19 +55,19 @@ the corresponding styles. A typical theme file will look something like this:
// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
-@include md-core();
+@include mat-core();
// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
-$candy-app-primary: md-palette($md-indigo);
-$candy-app-accent: md-palette($md-pink, A200, A100, A400);
+$candy-app-primary: mat-palette($mat-indigo);
+$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);
// The warn palette is optional (defaults to red).
-$candy-app-warn: md-palette($md-red);
+$candy-app-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: md-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
@@ -96,11 +96,11 @@ some selector. For example, we could append the following to the example above t
secondary dark theme:
```scss
.unicorn-dark-theme {
- $dark-primary: md-palette($md-blue-grey);
- $dark-accent: md-palette($md-amber, A200, A100, A400);
- $dark-warn: md-palette($md-deep-orange);
+ $dark-primary: mat-palette($mat-blue-grey);
+ $dark-accent: mat-palette($mat-amber, A200, A100, A400);
+ $dark-warn: mat-palette($mat-deep-orange);
- $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);
+ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include angular-material-theme($dark-theme);
}
diff --git a/package.json b/package.json
index a1f88577415f..427b8a5f5ff1 100644
--- a/package.json
+++ b/package.json
@@ -19,35 +19,35 @@
"docs": "gulp docs",
"api": "gulp api"
},
- "version": "2.0.0-beta.1",
+ "version": "2.0.0-beta.2",
"license": "MIT",
"engines": {
"node": ">= 5.4.1 < 7"
},
"dependencies": {
- "@angular/common": "^2.2.0",
- "@angular/compiler": "^2.2.0",
- "@angular/core": "^2.2.0",
- "@angular/forms": "^2.2.0",
- "@angular/http": "^2.2.0",
- "@angular/platform-browser": "^2.2.0",
+ "@angular/common": "^2.3.0",
+ "@angular/compiler": "^2.3.0",
+ "@angular/core": "^2.3.0",
+ "@angular/forms": "^2.3.0",
+ "@angular/http": "^2.3.0",
+ "@angular/platform-browser": "^2.3.0",
"core-js": "^2.4.1",
- "rxjs": "5.0.0-beta.12",
- "systemjs": "0.19.38",
- "zone.js": "^0.6.23"
+ "rxjs": "^5.0.1",
+ "systemjs": "0.19.43",
+ "zone.js": "^0.7.2"
},
"devDependencies": {
- "@angular/compiler-cli": "^2.2.0",
- "@angular/platform-browser-dynamic": "^2.2.0",
- "@angular/platform-server": "^2.2.0",
- "@angular/router": "^3.2.0",
+ "@angular/compiler-cli": "^2.3.0",
+ "@angular/platform-browser-dynamic": "^2.3.0",
+ "@angular/platform-server": "^2.3.0",
+ "@angular/router": "^3.3.0",
"@types/glob": "^5.0.30",
"@types/gulp": "^3.8.32",
"@types/hammerjs": "^2.0.34",
- "@types/jasmine": "^2.5.40",
+ "@types/jasmine": "2.5.41",
"@types/merge2": "^0.3.29",
"@types/minimist": "^1.2.0",
- "@types/node": "^6.0.34",
+ "@types/node": "^7.0.4",
"@types/run-sequence": "^0.0.28",
"@types/rx": "2.5.33",
"axe-core": "^2.1.7",
@@ -55,9 +55,9 @@
"conventional-changelog": "^1.1.0",
"dgeni": "^0.4.2",
"dgeni-packages": "^0.16.5",
- "firebase-admin": "^4.0.4",
+ "firebase-admin": "^4.0.6",
"firebase-tools": "^2.2.1",
- "fs-extra": "^1.0.0",
+ "fs-extra": "^2.0.0",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
@@ -66,37 +66,41 @@
"gulp-clean-css": "^2.3.2",
"gulp-cli": "^1.2.2",
"gulp-connect": "^5.0.0",
+ "gulp-flatten": "^0.3.1",
+ "gulp-highlight-files": "0.0.4",
"gulp-htmlmin": "^3.0.0",
"gulp-if": "^2.0.2",
"gulp-markdown": "^1.2.0",
+ "gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.4.0",
"gulp-transform": "^1.1.0",
- "gulp-typescript": "^3.1.4",
"hammerjs": "^2.0.8",
"highlight.js": "^9.9.0",
"jasmine-core": "^2.5.2",
- "karma": "^1.3.0",
- "karma-browserstack-launcher": "^1.1.1",
+ "karma": "^1.4.1",
+ "karma-browserstack-launcher": "^1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-firefox-launcher": "^1.0.0",
"karma-jasmine": "^1.1.0",
"karma-sauce-launcher": "^1.1.0",
"karma-sourcemap-loader": "^0.3.7",
- "madge": "^0.6.0",
+ "madge": "^1.5.0",
"merge2": "^1.0.2",
"minimist": "^1.2.0",
"node-sass": "^4.3.0",
- "protractor": "^5.0.0",
+ "protractor": "^5.1.0",
"resolve-bin": "^0.4.0",
"run-sequence": "^1.2.2",
"sass": "^0.5.0",
"selenium-webdriver": "^3.0.1",
- "stylelint": "^7.7.1",
+ "stylelint": "^7.8.0",
"travis-after-modes": "0.0.7",
"ts-node": "^2.0.0",
- "tslint": "^3.13.0",
+ "tslint": "^4.4.2",
+ "tslint-no-unused-var": "0.0.6",
"typescript": "~2.0.10",
- "uglify-js": "^2.7.5"
+ "uglify-js": "^2.7.5",
+ "web-animations-js": "^2.2.2"
}
}
diff --git a/scripts/ci/after-success.sh b/scripts/ci/after-success.sh
index 37524389d1e3..599f097f2cec 100755
--- a/scripts/ci/after-success.sh
+++ b/scripts/ci/after-success.sh
@@ -10,4 +10,5 @@ cd $(dirname $0)/../..
if [ "$TRAVIS_PULL_REQUEST" = "false" ] && $(npm bin)/travis-after-modes; then
echo "All travis modes passed. Publishing the build artifacts..."
./scripts/release/publish-build-artifacts.sh
-fi
\ No newline at end of file
+ ./scripts/release/publish-docs-content.sh
+fi
diff --git a/scripts/release/copy-docs.sh b/scripts/release/copy-docs.sh
index 4c9247b7c23a..a18c5acaddcc 100755
--- a/scripts/release/copy-docs.sh
+++ b/scripts/release/copy-docs.sh
@@ -7,7 +7,7 @@
# Use OVERVIEW.html when possible. If there's no OVERVIEW file exists, use README.html
usage='Usage: copy-docs.sh $destinationFolder'
-if [ $# -ne 1 ]; then
+if [ $# -ne 1 ]; then
echo "Missing destination folder. $usage"
exit
fi
@@ -23,7 +23,7 @@ fi
for file in $originFolder*
do
name=${file#$originFolder}
- overviewFile=$originFolder$name/OVERVIEW.html
+ overviewFile=$originFolder$name/$name.html
readmeFile=$originFolder$name/README.html
destFile=$destFolder/$name.html
if [ -f $overviewFile ]; then
diff --git a/scripts/release/publish-docs-content.sh b/scripts/release/publish-docs-content.sh
new file mode 100755
index 000000000000..5074ff1aa65f
--- /dev/null
+++ b/scripts/release/publish-docs-content.sh
@@ -0,0 +1,77 @@
+#!/bin/bash
+
+# Publish material2 docs assets to the material2-docs-content repo
+# material.angular.io will pull from this assets repo to get the latest docs
+
+cd "$(dirname $0)/../../"
+
+docsPath="./dist/docs"
+repoPath="/tmp/material2-docs-content"
+repoUrl="https://github.com/DevVersion/material2-docs-content"
+examplesSource="./dist/docs/examples"
+
+# If the docs directory is not present, generate docs
+if [ ! -d $docsPath ]; then
+ $(npm bin)/gulp docs
+fi
+
+# Get git meta info for commit
+commitSha="$(git rev-parse --short HEAD)"
+commitAuthorName="$(git --no-pager show -s --format='%an' HEAD)"
+commitAuthorEmail="$(git --no-pager show -s --format='%ae' HEAD)"
+commitMessage="$(git log --oneline -n 1)"
+
+# create directory and clone test repo
+rm -rf $repoPath
+mkdir -p $repoPath
+git clone $repoUrl $repoPath
+
+# Clean out repo directory and copy contents of dist/docs into it
+rm -rf $repoPath/*
+mkdir $repoPath/overview
+mkdir $repoPath/guides
+mkdir $repoPath/api
+mkdir $repoPath/examples
+
+# Move api files over to $repoPath/api
+cp -r $docsPath/api/* $repoPath/api
+
+# Flatten the markdown docs structure and move it into $repoPath/overview
+overviewFiles=$docsPath/markdown/
+for filename in $overviewFiles*
+do
+ if [ -d $filename ]; then
+ for _ in $filename/*
+ do
+ markdownFile=${filename#$overviewFiles}.html
+ # Filename should be same as folder name with .html extension
+ if [ -e $filename/$markdownFile ]; then
+ cp -r $filename/$markdownFile $repoPath/overview/
+ fi
+ done
+ fi
+done
+
+# Move guide files over to $repoPath/guides
+for filename in $overviewFiles*
+do
+ if [ -f $filename ]; then
+ cp -r $filename $repoPath/guides
+ fi
+done
+
+# Move highlighted examples into $repoPath
+cp -r $examplesSource/* $repoPath/examples
+
+# Push content to repo
+cd $repoPath
+git config user.name "$commitAuthorName"
+git config user.email "$commitAuthorEmail"
+git config credential.helper "store --file=.git/credentials"
+
+echo "https://${MATERIAL2_BUILDS_TOKEN}:@github.com" > .git/credentials
+
+git add -A
+git commit -m "$commitMessage"
+git tag "$commitSha"
+git push origin master --tags
diff --git a/scripts/saucelabs/start-tunnel.sh b/scripts/saucelabs/start-tunnel.sh
index 30a60bcf27ae..4110fe34aa91 100755
--- a/scripts/saucelabs/start-tunnel.sh
+++ b/scripts/saucelabs/start-tunnel.sh
@@ -2,7 +2,7 @@
set -e -o pipefail
-TUNNEL_FILE="sc-4.4.2-linux.tar.gz"
+TUNNEL_FILE="sc-4.4.3-linux.tar.gz"
TUNNEL_URL="https://saucelabs.com/downloads/$TUNNEL_FILE"
TUNNEL_DIR="/tmp/saucelabs-connect"
diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html
index 95e6a345b179..1124b22a5e2f 100644
--- a/src/demo-app/autocomplete/autocomplete-demo.html
+++ b/src/demo-app/autocomplete/autocomplete-demo.html
@@ -1,6 +1,9 @@
+Space above cards:
+
+ 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.
+
+
+
+
+
+
+
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 @@
+
+
+
+ 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.
+
+
+
+
+
+
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/slider-overview/slider-overview-example.ts b/src/examples/slider-overview/slider-overview-example.ts
new file mode 100644
index 000000000000..1f020fd662ff
--- /dev/null
+++ b/src/examples/slider-overview/slider-overview-example.ts
@@ -0,0 +1,9 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+ selector: 'slider-overview-example',
+ templateUrl: './slider-overview-example.html',
+ styleUrls: ['./slider-overview-example.css'],
+})
+export class SliderOverviewExample {}
diff --git a/src/examples/snack-bar-component/snack-bar-component-example-snack.css b/src/examples/snack-bar-component/snack-bar-component-example-snack.css
new file mode 100644
index 000000000000..fa7dc6749acf
--- /dev/null
+++ b/src/examples/snack-bar-component/snack-bar-component-example-snack.css
@@ -0,0 +1,3 @@
+.example-pizza-party {
+ color: hotpink;
+}
diff --git a/src/examples/snack-bar-component/snack-bar-component-example-snack.html b/src/examples/snack-bar-component/snack-bar-component-example-snack.html
new file mode 100644
index 000000000000..d43b91e9a961
--- /dev/null
+++ b/src/examples/snack-bar-component/snack-bar-component-example-snack.html
@@ -0,0 +1,3 @@
+
+ 🍕🍕🍕🍕🍕 Pizza party!!! 🍕🍕🍕🍕🍕
+
diff --git a/src/examples/snack-bar-component/snack-bar-component-example.html b/src/examples/snack-bar-component/snack-bar-component-example.html
new file mode 100644
index 000000000000..69fe01bc3dcb
--- /dev/null
+++ b/src/examples/snack-bar-component/snack-bar-component-example.html
@@ -0,0 +1,3 @@
+
diff --git a/src/examples/snack-bar-component/snack-bar-component-example.ts b/src/examples/snack-bar-component/snack-bar-component-example.ts
new file mode 100644
index 000000000000..03ef19e8a70d
--- /dev/null
+++ b/src/examples/snack-bar-component/snack-bar-component-example.ts
@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {MdSnackBar} from '@angular/material';
+
+
+@Component({
+ selector: 'snack-bar-component-example',
+ templateUrl: './snack-bar-component-example.html',
+})
+export class SnackBarComponentExample {
+ constructor(public snackBar: MdSnackBar) {}
+
+ openSnackBar() {
+ this.snackBar.openFromComponent(PizzaPartyComponent, {
+ duration: 500,
+ });
+ }
+}
+
+
+@Component({
+ selector: 'snack-bar-component-example-snack',
+ templateUrl: './snack-bar-component-example-snack.html',
+ styleUrls: ['./snack-bar-component-example-snack.css'],
+})
+export class PizzaPartyComponent {}
diff --git a/src/examples/snack-bar-overview/snack-bar-overview-example.css b/src/examples/snack-bar-overview/snack-bar-overview-example.css
new file mode 100644
index 000000000000..7432308753e6
--- /dev/null
+++ b/src/examples/snack-bar-overview/snack-bar-overview-example.css
@@ -0,0 +1 @@
+/** No CSS for this example */
diff --git a/src/examples/snack-bar-overview/snack-bar-overview-example.html b/src/examples/snack-bar-overview/snack-bar-overview-example.html
new file mode 100644
index 000000000000..91cb38c8b317
--- /dev/null
+++ b/src/examples/snack-bar-overview/snack-bar-overview-example.html
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
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 @@
+
+ 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 3e231a63148d..7cce6dfe1c56 100644
--- a/src/lib/autocomplete/_autocomplete-theme.scss
+++ b/src/lib/autocomplete/_autocomplete-theme.scss
@@ -1,17 +1,17 @@
@import '../core/theming/theming';
-@mixin md-autocomplete-theme($theme) {
+@mixin mat-autocomplete-theme($theme) {
$foreground: map-get($theme, foreground);
$background: map-get($theme, background);
- .md-autocomplete-panel {
- background: md-color($background, card);
- color: md-color($foreground, text);
+ .mat-autocomplete-panel {
+ background: mat-color($background, card);
+ color: mat-color($foreground, text);
- md-option {
- &.md-selected {
- background: md-color($background, card);
- color: md-color($foreground, text);
+ .mat-option {
+ &.mat-selected:not(.mat-active) {
+ background: mat-color($background, card);
+ color: mat-color($foreground, text);
}
}
}
diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 42d623b88da1..b6e841046605 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -1,40 +1,121 @@
import {
- Directive, ElementRef, Input, ViewContainerRef, Optional, OnDestroy
+ AfterContentInit,
+ Directive,
+ ElementRef,
+ forwardRef,
+ Host,
+ Input,
+ NgZone,
+ Optional,
+ OnDestroy,
+ ViewContainerRef,
} from '@angular/core';
-import {NgControl} from '@angular/forms';
+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 {MdOptionSelectEvent} from '../core/option/option';
-import 'rxjs/add/observable/merge';
+import {MdOptionSelectEvent, MdOption} from '../core/option/option';
+import {ActiveDescendantKeyManager} from '../core/a11y/activedescendant-key-manager';
+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, FloatPlaceholderType} 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;
-/** The panel needs a slight y-offset to ensure the input underline displays. */
-export const MD_AUTOCOMPLETE_PANEL_OFFSET = 6;
+/**
+ * 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: {
- '(focus)': 'openPanel()'
- }
+ '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.target.value)',
+ '(keydown)': '_handleKeydown($event)',
+ },
+ providers: [MD_AUTOCOMPLETE_VALUE_ACCESSOR]
})
-export class MdAutocompleteTrigger implements OnDestroy {
+export class MdAutocompleteTrigger implements AfterContentInit, ControlValueAccessor, OnDestroy {
private _overlayRef: OverlayRef;
private _portal: TemplatePortal;
private _panelOpen: boolean = false;
+ /** The subscription to positioning changes in the autocomplete panel. */
+ private _panelPositionSubscription: Subscription;
+
+ /** Manages active item in option list based on key events. */
+ private _keyManager: ActiveDescendantKeyManager;
+ private _positionStrategy: ConnectedPositionStrategy;
+
+ /** Stream of blur events that should close the panel. */
+ private _blurStream = new Subject();
+
+ /** 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 _controlDir: NgControl, @Optional() private _dir: Dir) {}
+ @Optional() private _dir: Dir, private _zone: NgZone,
+ @Optional() @Host() private _inputContainer: MdInputContainer) {}
+
+ ngAfterContentInit() {
+ this._keyManager = new ActiveDescendantKeyManager(this.autocomplete.options).withWrap();
+ }
- ngOnDestroy() { this._destroyPanel(); }
+ ngOnDestroy() {
+ if (this._panelPositionSubscription) {
+ this._panelPositionSubscription.unsubscribe();
+ }
+
+ this._destroyPanel();
+ }
/* Whether or not the autocomplete panel is open. */
get panelOpen(): boolean {
@@ -53,6 +134,7 @@ export class MdAutocompleteTrigger implements OnDestroy {
}
this._panelOpen = true;
+ this._floatPlaceholder('always');
}
/** Closes the autocomplete suggestion panel. */
@@ -62,35 +144,126 @@ export class MdAutocompleteTrigger implements OnDestroy {
}
this._panelOpen = false;
+ this._floatPlaceholder('auto');
}
/**
* A stream of actions that should close the autocomplete panel, including
- * when an option is selected and when the backdrop is clicked.
+ * when an option is selected, on blur, and when TAB is pressed.
*/
- get panelClosingActions(): Observable {
- // TODO(kara): add tab event observable with keyboard event PR
- return Observable.merge(...this.optionSelections, this._overlayRef.backdropClick());
+ get panelClosingActions(): Observable {
+ return Observable.merge(
+ ...this.optionSelections,
+ this._blurStream.asObservable(),
+ this._keyManager.tabOut
+ );
}
/** Stream of autocomplete option selections. */
- get optionSelections(): Observable[] {
+ get optionSelections(): Observable[] {
return this.autocomplete.options.map(option => option.onSelect);
}
+ /** The currently active option, coerced to MdOption type. */
+ get activeOption(): MdOption {
+ return this._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._keyManager.onKeydown(event);
+ if (event.keyCode === UP_ARROW || event.keyCode === DOWN_ARROW) {
+ this.openPanel();
+ this._scrollToOption();
+ }
+ }
+ }
+
+ _handleInput(value: string): void {
+ this._onChange(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(state: FloatPlaceholderType): void {
+ if (this._inputContainer) {
+ this._inputContainer.floatPlaceholder = state;
+ }
+ }
+
+ /**
+ * 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._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 {
- // Every time the option list changes...
- this.autocomplete.options.changes
- // and also at initialization, before there are any option changes...
- .startWith(null)
+ // 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.panelClosingActions)
+ .switchMap(() => {
+ this._resetPanel();
+ return this.panelClosingActions;
+ })
// when the first closing event occurs...
.first()
// set the value, close the panel, and complete.
@@ -106,6 +279,11 @@ export class MdAutocompleteTrigger implements OnDestroy {
}
}
+ private _setTriggerValue(value: any): void {
+ this._element.nativeElement.value =
+ this.autocomplete.displayWith ? this.autocomplete.displayWith(value) : value;
+ }
+
/**
* 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
@@ -113,10 +291,8 @@ export class MdAutocompleteTrigger implements OnDestroy {
*/
private _setValueAndClose(event: MdOptionSelectEvent | null): void {
if (event) {
- this._controlDir.control.setValue(event.source.value);
- if (event.isUserInput) {
- this._controlDir.control.markAsDirty();
- }
+ this._setTriggerValue(event.source.value);
+ this._onChange(event.source.value);
}
this.closePanel();
@@ -131,17 +307,29 @@ export class MdAutocompleteTrigger implements OnDestroy {
const overlayState = new OverlayState();
overlayState.positionStrategy = this._getOverlayPosition();
overlayState.width = this._getHostWidth();
- overlayState.hasBackdrop = true;
- overlayState.backdropClass = 'md-overlay-transparent-backdrop';
overlayState.direction = this._dir ? this._dir.value : 'ltr';
return overlayState;
}
private _getOverlayPosition(): PositionStrategy {
- return this._overlay.position().connectedTo(
+ this._positionStrategy = this._overlay.position().connectedTo(
this._element,
{originX: 'start', originY: 'bottom'}, {overlayX: 'start', overlayY: 'top'})
- .withOffsetY(MD_AUTOCOMPLETE_PANEL_OFFSET);
+ .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. */
@@ -149,5 +337,20 @@ export class MdAutocompleteTrigger implements OnDestroy {
return this._element.nativeElement.getBoundingClientRect().width;
}
+ /** Reset active item to null so arrow events will activate the correct options.*/
+ private _resetActiveItem(): void {
+ this._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 97727158af0c..cd94ceeb7340 100644
--- a/src/lib/autocomplete/autocomplete.html
+++ b/src/lib/autocomplete/autocomplete.html
@@ -1,5 +1,5 @@
-
+