From 0a9ba8bf9230ceb21ee76aa4828d62f7bcdf107b Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Thu, 8 Dec 2016 13:27:40 -0800 Subject: [PATCH 01/91] chore: update to alpha.11 (#2119) * chore: update to alpha.11 * reorder changelog --- CHANGELOG.md | 67 ++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- src/lib/package.json | 2 +- 3 files changed, 69 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7003cd93a2b2..18e30c67f4c2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,70 @@ + +# [2.0.0-alpha.11 polyester-golem](https://github.com/angular/material2/compare/2.0.0-alpha.9...2.0.0-alpha.11) (2016-12-08) + + +**NOTE:** Be sure to delete your previous install of `@angular/material` and install it fresh, as +`npm` sometimes doesn't see that there is a more recent alpha release. + +### Bug Fixes + +* **a11y:** improved accessibility in high contrast mode ([#1941](https://github.com/angular/material2/issues/1941)) ([5cf7d17](https://github.com/angular/material2/commit/5cf7d17)), closes [#421](https://github.com/angular/material2/issues/421) [#1769](https://github.com/angular/material2/issues/1769) +* **button:** ensure icons are aligned vertically. ([#1736](https://github.com/angular/material2/issues/1736)) ([d3a50b3](https://github.com/angular/material2/commit/d3a50b3)), closes [#1093](https://github.com/angular/material2/issues/1093) +* **button:** improved tap responsiveness on mobile ([#1792](https://github.com/angular/material2/issues/1792)) ([4183fbc](https://github.com/angular/material2/commit/4183fbc)), closes [#1316](https://github.com/angular/material2/issues/1316) +* **button:** remove `disabled` attribute when disabled value is false for MdAnchor ([#1789](https://github.com/angular/material2/issues/1789)) ([716372b](https://github.com/angular/material2/commit/716372b)) +* **checkbox:** fix native checked not being checked when MdCheckbox initial checked value is true ([#2055](https://github.com/angular/material2/issues/2055)) ([3fd3117](https://github.com/angular/material2/commit/3fd3117)) +* **checkbox, input, radio, slide-toggle:** implement setDisabledState from ControlValueAccessor ([#1750](https://github.com/angular/material2/issues/1750)) ([77a960c](https://github.com/angular/material2/commit/77a960c)), closes [#1171](https://github.com/angular/material2/issues/1171) +* **dialog:** add border radius ([#1872](https://github.com/angular/material2/issues/1872)) ([6aa7e22](https://github.com/angular/material2/commit/6aa7e22)), closes [#1868](https://github.com/angular/material2/issues/1868) +* **dialog:** avoid subpixel rendering issues and refactor GlobalPositionStrategy ([#1962](https://github.com/angular/material2/issues/1962)) ([1ea6d34](https://github.com/angular/material2/commit/1ea6d34)), closes [#932](https://github.com/angular/material2/issues/932) +* **dialog:** backdrop not being removed if it doesn't have transitions ([#1716](https://github.com/angular/material2/issues/1716)) ([accab20](https://github.com/angular/material2/commit/accab20)), closes [#1607](https://github.com/angular/material2/issues/1607) +* **elevation:** change elevations to match spec ([#1857](https://github.com/angular/material2/issues/1857)) ([c2597b6](https://github.com/angular/material2/commit/c2597b6)) +* **interactivity-checker:** improve robustness of isTabbable ([#1950](https://github.com/angular/material2/issues/1950)) ([4b7e52d](https://github.com/angular/material2/commit/4b7e52d)) +* **list:** prevent list item wrapper elements from collapsing ([#2075](https://github.com/angular/material2/issues/2075)) ([27f9c99](https://github.com/angular/material2/commit/27f9c99)), closes [#2012](https://github.com/angular/material2/issues/2012) +* **list-key-manager:** prevent the default keyboard actions ([#2009](https://github.com/angular/material2/issues/2009)) ([a8355e4](https://github.com/angular/material2/commit/a8355e4)) +* **menu:** reposition menu if it would open off screen ([#1761](https://github.com/angular/material2/issues/1761)) ([7572e34](https://github.com/angular/material2/commit/7572e34)) +* **overlay:** prevent blurry connected overlays ([#1784](https://github.com/angular/material2/issues/1784)) ([303dd69](https://github.com/angular/material2/commit/303dd69)) +* **overlay-directives:** update offsets if they change after overlay creation ([#1981](https://github.com/angular/material2/issues/1981)) ([b36db15](https://github.com/angular/material2/commit/b36db15)) +* **radio:** fix radio group behavior on change ([#1735](https://github.com/angular/material2/issues/1735)) ([bbc5f6a](https://github.com/angular/material2/commit/bbc5f6a)) +* **ripple:** Always remove ripple after a certain period ([#1915](https://github.com/angular/material2/issues/1915)) ([62cc830](https://github.com/angular/material2/commit/62cc830)) +* **ripple:** don't create background div until ripple becomes enabled ([#1849](https://github.com/angular/material2/issues/1849)) ([d7a54ef](https://github.com/angular/material2/commit/d7a54ef)) +* **ripple:** Fix the ripple position when page is scrolled ([#1907](https://github.com/angular/material2/issues/1907)) ([dd508ea](https://github.com/angular/material2/commit/dd508ea)) +* **sidenav:** resolve promise as false rather than ([#1930](https://github.com/angular/material2/issues/1930)) ([7816752](https://github.com/angular/material2/commit/7816752)) +* **slider:** emit change event after updating value accessor ([#1901](https://github.com/angular/material2/issues/1901)) ([8caf9a6](https://github.com/angular/material2/commit/8caf9a6)) +* **slider:** support for RTL and invert ([#1794](https://github.com/angular/material2/issues/1794)) ([5ac29dd](https://github.com/angular/material2/commit/5ac29dd)) +* **spinner:** animation not being cleaned up when used with AoT ([#1838](https://github.com/angular/material2/issues/1838)) ([83de14f](https://github.com/angular/material2/commit/83de14f)), closes [#1283](https://github.com/angular/material2/issues/1283) +* **tab-link:** avoid potential memory leak ([#1877](https://github.com/angular/material2/issues/1877)) ([e332f15](https://github.com/angular/material2/commit/e332f15)) +* **tabs:** tabs should update when tabs are added or removed ([#2014](https://github.com/angular/material2/issues/2014)) ([dfc580d](https://github.com/angular/material2/commit/dfc580d)) +* **tooltip:** check tooltip disposed on animation hidden ([#1816](https://github.com/angular/material2/issues/1816)) ([9c0d82a](https://github.com/angular/material2/commit/9c0d82a)) +* **tooltip:** don't show tooltip if message is empty or not present ([#2081](https://github.com/angular/material2/issues/2081)) ([2701aae](https://github.com/angular/material2/commit/2701aae)), closes [#2078](https://github.com/angular/material2/issues/2078) +* **tooltip:** throw a better error when an invalid position is passed ([#1986](https://github.com/angular/material2/issues/1986)) ([539e44e](https://github.com/angular/material2/commit/539e44e)) + + +### Features + +* **select** initial version of md-select (too many commits to list) +* **textarea:** add md-autosize directive (this will be more useful once the md-input refactoring is complete) ([#1846](https://github.com/angular/material2/issues/1846)) ([9ec17c0](https://github.com/angular/material2/commit/9ec17c0)) +* **tabs:** paginate tab header when exceeds width ([#2084](https://github.com/angular/material2/issues/2084)) ([92e26d7](https://github.com/angular/material2/commit/92e26d7)) +* **tabs:** add ripples to the tab group and nav bar links ([#1700](https://github.com/angular/material2/issues/1700)) ([b9fe75a](https://github.com/angular/material2/commit/b9fe75a)) +* **tabs:** animate tab change, include optional dynamic height ([#1788](https://github.com/angular/material2/issues/1788)) ([f6944e4](https://github.com/angular/material2/commit/f6944e4)) +* **tabs:** md-stretch-tabs ([#1909](https://github.com/angular/material2/issues/1909)) ([78464a2](https://github.com/angular/material2/commit/78464a2)), closes [#1353](https://github.com/angular/material2/issues/1353) +* **button-toggle:** add option for vertical toggle groups ([#1936](https://github.com/angular/material2/issues/1936)) ([cb0d6fc](https://github.com/angular/material2/commit/cb0d6fc)), closes [#1892](https://github.com/angular/material2/issues/1892) +* **dialog:** add configurable width, height and position ([#1848](https://github.com/angular/material2/issues/1848)) ([bc6cf6e](https://github.com/angular/material2/commit/bc6cf6e)), closes [#1698](https://github.com/angular/material2/issues/1698) +* **dialog:** add the ability to close all dialogs ([#1965](https://github.com/angular/material2/issues/1965)) ([b2999c9](https://github.com/angular/material2/commit/b2999c9)) +* **focus-trap:** add the ability to specify a focus target ([#1752](https://github.com/angular/material2/issues/1752)) ([72ac7a0](https://github.com/angular/material2/commit/72ac7a0)), closes [#1468](https://github.com/angular/material2/issues/1468) +* **icon:** added color attribute to md-icon for icon theming ([#1896](https://github.com/angular/material2/issues/1896)) ([da5febc](https://github.com/angular/material2/commit/da5febc)) +* **overlay:** emit position change event ([#1832](https://github.com/angular/material2/issues/1832)) ([b79c953](https://github.com/angular/material2/commit/b79c953)) +* **overlay:** support min width and min height ([#2063](https://github.com/angular/material2/issues/2063)) ([a695574](https://github.com/angular/material2/commit/a695574)) +* **overlay-directives:** attach and detach events ([#1972](https://github.com/angular/material2/issues/1972)) ([a5eab75](https://github.com/angular/material2/commit/a5eab75)) +* **overlay-directives:** support fallback positions ([#1865](https://github.com/angular/material2/issues/1865)) ([aa472a0](https://github.com/angular/material2/commit/aa472a0)) +* **sidenav:** emit event when backdrop is clicked ([#1638](https://github.com/angular/material2/issues/1638)) ([93807ed](https://github.com/angular/material2/commit/93807ed)), closes [#1427](https://github.com/angular/material2/issues/1427) +* **sidenav:** focus capturing ([#1695](https://github.com/angular/material2/issues/1695)) ([b9c3304](https://github.com/angular/material2/commit/b9c3304)) +* **slider:** keyboard support ([#1759](https://github.com/angular/material2/issues/1759)) ([13b7dd0](https://github.com/angular/material2/commit/13b7dd0)) +* **slider:** vertical mode ([#1878](https://github.com/angular/material2/issues/1878)) ([deb940f](https://github.com/angular/material2/commit/deb940f)) +* **snackbar:** add onAction to snackbar ref ([#1826](https://github.com/angular/material2/issues/1826)) ([a40cae9](https://github.com/angular/material2/commit/a40cae9)) +* **snackbar:** add timeout for snackbar ([#1856](https://github.com/angular/material2/issues/1856)) ([6ce6396](https://github.com/angular/material2/commit/6ce6396)) +* **tooltip:** show tooltip on longpress; remove delay on mouseleave ([#1819](https://github.com/angular/material2/issues/1819)) ([1552d70](https://github.com/angular/material2/commit/1552d70)) +* **a11y:** add wrap mode to key manager ([#1796](https://github.com/angular/material2/issues/1796)) ([3d4abac](https://github.com/angular/material2/commit/3d4abac)) + + # [2.0.0-alpha.10 mithril-hoverboard](https://github.com/angular/material2/compare/2.0.0-alpha.9...2.0.0-alpha.10) (2016-11-10) diff --git a/package.json b/package.json index 2a42fe397698..6f414a545df6 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "docs": "gulp docs", "api": "gulp api" }, - "version": "2.0.0-alpha.10", + "version": "2.0.0-alpha.11", "license": "MIT", "engines": { "node": ">= 5.4.1 < 7" diff --git a/src/lib/package.json b/src/lib/package.json index c7de45992811..dfb13f83193d 100644 --- a/src/lib/package.json +++ b/src/lib/package.json @@ -1,6 +1,6 @@ { "name": "@angular/material", - "version": "2.0.0-alpha.10", + "version": "2.0.0-alpha.11", "description": "Angular 2 Material", "main": "./material.umd.js", "module": "./index.js", From cd43fb61c44ee8885f348922c90774c9eff62995 Mon Sep 17 00:00:00 2001 From: tinayuangao Date: Sat, 10 Dec 2016 03:51:38 +0800 Subject: [PATCH 02/91] docs(radio): Delete example for two-way binding (#2138) --- src/lib/radio/README.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/lib/radio/README.md b/src/lib/radio/README.md index 7c30a1f812ac..ed83fe00000e 100644 --- a/src/lib/radio/README.md +++ b/src/lib/radio/README.md @@ -12,15 +12,6 @@ A basic radio group would have the following markup. ``` -A dynamic example, populated from a `data` variable: -```html - - - {{d.label}} - - -``` - A dynamic example for use inside a form showing support for `[(ngModel)]`: ```html From c32414238ca41e7d65a2465b9b7f128c3d310c05 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Fri, 9 Dec 2016 11:58:51 -0800 Subject: [PATCH 03/91] fix: add re-exports for symbols needed by Aot (#2149) --- package.json | 2 +- src/lib/input/index.ts | 1 + src/lib/menu/index.ts | 4 ++++ src/lib/package.json | 2 +- src/lib/select/index.ts | 2 ++ src/lib/tabs/index.ts | 6 ++++++ 6 files changed, 15 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 6f414a545df6..867cfda97952 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,7 @@ "docs": "gulp docs", "api": "gulp api" }, - "version": "2.0.0-alpha.11", + "version": "2.0.0-alpha.11-2", "license": "MIT", "engines": { "node": ">= 5.4.1 < 7" diff --git a/src/lib/input/index.ts b/src/lib/input/index.ts index e3365cb9065e..c630aefeaf7f 100644 --- a/src/lib/input/index.ts +++ b/src/lib/input/index.ts @@ -1 +1,2 @@ export * from './input'; +export {MdTextareaAutosize} from './autosize'; diff --git a/src/lib/menu/index.ts b/src/lib/menu/index.ts index 8267df70b37b..e85efa8bca0a 100644 --- a/src/lib/menu/index.ts +++ b/src/lib/menu/index.ts @@ -1 +1,5 @@ export * from './menu'; +export {MdMenuTrigger} from './menu-trigger'; +export {fadeInItems, transformMenu} from './menu-animations'; +export {MdMenu} from './menu-directive'; +export {MdMenuItem} from './menu-item'; diff --git a/src/lib/package.json b/src/lib/package.json index dfb13f83193d..3c2981baef64 100644 --- a/src/lib/package.json +++ b/src/lib/package.json @@ -1,6 +1,6 @@ { "name": "@angular/material", - "version": "2.0.0-alpha.11", + "version": "2.0.0-alpha.11-2", "description": "Angular 2 Material", "main": "./material.umd.js", "module": "./index.js", diff --git a/src/lib/select/index.ts b/src/lib/select/index.ts index 4ef91c1fe64f..a79c2a571bd7 100644 --- a/src/lib/select/index.ts +++ b/src/lib/select/index.ts @@ -9,6 +9,8 @@ import { OverlayModule, } from '../core'; export * from './select'; +export {MdOption} from './option'; +export {fadeInContent, transformPanel, transformPlaceholder} from './select-animations'; @NgModule({ diff --git a/src/lib/tabs/index.ts b/src/lib/tabs/index.ts index f40a858afd57..47c6cb9c3587 100644 --- a/src/lib/tabs/index.ts +++ b/src/lib/tabs/index.ts @@ -1 +1,7 @@ export * from './tab-group'; +export {MdInkBar} from './ink-bar'; +export {MdTabBody, MdTabBodyOriginState, MdTabBodyPositionState} from './tab-body'; +export {MdTabHeader, ScrollDirection} from './tab-header'; +export {MdTabLabelWrapper} from './tab-label-wrapper'; +export {MdTab} from './tab'; +export {MdTabLabel} from './tab-label'; From 9ed29fe58245311b358ba4a7d9b164821b7c64f8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 9 Dec 2016 20:59:06 +0100 Subject: [PATCH 04/91] build: fix wrong SASS paths (#2135) Fixes SASS errors when Material is imported directly. Fixes #2133. --- src/lib/button/button.scss | 2 +- src/lib/card/card.scss | 2 +- src/lib/dialog/dialog-container.scss | 2 +- src/lib/menu/menu.scss | 2 +- src/lib/select/select.scss | 2 +- src/lib/sidenav/sidenav.scss | 2 +- src/lib/slide-toggle/slide-toggle.scss | 2 +- src/lib/snack-bar/snack-bar-container.scss | 2 +- src/lib/tooltip/tooltip.scss | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 656e8497f833..eb6c245af397 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -2,7 +2,7 @@ // TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser. @import 'button-base'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; // TODO(kara): Replace attribute selectors with class selectors when possible [md-button], [md-icon-button] { diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss index a9cd3601d332..be1d355daa72 100644 --- a/src/lib/card/card.scss +++ b/src/lib/card/card.scss @@ -1,6 +1,6 @@ @import '../core/style/variables'; @import '../core/style/elevation'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-card-default-padding: 24px !default; diff --git a/src/lib/dialog/dialog-container.scss b/src/lib/dialog/dialog-container.scss index afb1169d3afd..c7675efbbbcc 100644 --- a/src/lib/dialog/dialog-container.scss +++ b/src/lib/dialog/dialog-container.scss @@ -1,5 +1,5 @@ @import '../core/style/elevation'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-dialog-padding: 24px !default; diff --git a/src/lib/menu/menu.scss b/src/lib/menu/menu.scss index ae3301eda9d4..6046f6232e30 100644 --- a/src/lib/menu/menu.scss +++ b/src/lib/menu/menu.scss @@ -4,7 +4,7 @@ @import '../core/style/button-common'; @import '../core/style/layout-common'; @import '../core/style/menu-common'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-menu-vertical-padding: 8px !default; diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss index 937e8d37c86c..0dc47e1177cb 100644 --- a/src/lib/select/select.scss +++ b/src/lib/select/select.scss @@ -1,7 +1,7 @@ @import '../core/style/menu-common'; @import '../core/style/list-common'; @import '../core/style/form-common'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-select-trigger-height: 30px !default; $md-select-trigger-min-width: 112px !default; diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index 06923ff59a08..1349cfee58df 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/src/lib/sidenav/sidenav.scss @@ -1,7 +1,7 @@ @import '../core/style/variables'; @import '../core/style/elevation'; @import '../core/style/layout-common'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; // Mixin to help with defining LTR/RTL 'transform: translate3d()' values. diff --git a/src/lib/slide-toggle/slide-toggle.scss b/src/lib/slide-toggle/slide-toggle.scss index 4cc8fefe7eb9..6b877ece57dc 100644 --- a/src/lib/slide-toggle/slide-toggle.scss +++ b/src/lib/slide-toggle/slide-toggle.scss @@ -1,7 +1,7 @@ @import '../core/style/variables'; @import '../core/ripple/ripple'; @import '../core/style/elevation'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-slide-toggle-width: 36px !default; diff --git a/src/lib/snack-bar/snack-bar-container.scss b/src/lib/snack-bar/snack-bar-container.scss index 06d6f6b9b327..049924165ac7 100644 --- a/src/lib/snack-bar/snack-bar-container.scss +++ b/src/lib/snack-bar/snack-bar-container.scss @@ -1,5 +1,5 @@ @import '../core/style/elevation'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-snack-bar-padding: 14px 24px !default; $md-snack-bar-height: 20px !default; diff --git a/src/lib/tooltip/tooltip.scss b/src/lib/tooltip/tooltip.scss index 8083b5ec642b..a273324cb831 100644 --- a/src/lib/tooltip/tooltip.scss +++ b/src/lib/tooltip/tooltip.scss @@ -1,5 +1,5 @@ @import '../core/style/variables'; -@import '../a11y/_a11y'; +@import '../core/a11y/a11y'; $md-tooltip-height: 22px; From 714c2a48dff5d9bdc0c75332f6e5bd4124a79002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksei=20Kuncevi=C4=8D?= Date: Sat, 10 Dec 2016 08:50:14 +1100 Subject: [PATCH 05/91] fix: TSError: ? Unable to compile TypeScript when running 'gulp:build' (#2132) --- tools/gulp/tasks/release.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tools/gulp/tasks/release.ts b/tools/gulp/tasks/release.ts index 8738235b066d..542d4eaebac6 100644 --- a/tools/gulp/tasks/release.ts +++ b/tools/gulp/tasks/release.ts @@ -34,7 +34,7 @@ task(':publish:whoami', execTask('npm', ['whoami'], { task(':publish:logout', execTask('npm', ['logout'])); -function _execNpmPublish(label: string): Promise { +function _execNpmPublish(label: string): Promise<{}> { const packageDir = DIST_COMPONENTS_ROOT; if (!statSync(packageDir).isDirectory()) { return; From 58d2aa3f9c7bafa184895aeb847e1be4c7150a8d Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 9 Dec 2016 22:57:28 +0100 Subject: [PATCH 06/91] chore: create build artifacts for each commit (#2082) * chore: create build artifacts for each commit * Switch to new npm package * Update version to latest * Publish the builds after all modes succeeded. * Address comments * Change snake_case to camelCase --- .travis.yml | 3 ++ package.json | 1 + scripts/ci/after-success.sh | 15 +++++++ scripts/release/publish-build-artifacts.sh | 46 ++++++++++++++++++++++ 4 files changed, 65 insertions(+) create mode 100755 scripts/ci/after-success.sh create mode 100755 scripts/release/publish-build-artifacts.sh diff --git a/.travis.yml b/.travis.yml index 7fda603158ad..2f9210e483e7 100644 --- a/.travis.yml +++ b/.travis.yml @@ -52,6 +52,9 @@ before_script: script: - ./scripts/ci/build-and-test.sh +after_success: + - ./scripts/ci/after-success.sh + cache: directories: - node_modules diff --git a/package.json b/package.json index 867cfda97952..90810722c8eb 100644 --- a/package.json +++ b/package.json @@ -87,6 +87,7 @@ "strip-ansi": "^3.0.0", "stylelint": "^7.5.0", "symlink-or-copy": "^1.0.1", + "travis-after-modes": "0.0.5", "ts-node": "^0.7.3", "tslint": "^3.13.0", "typedoc": "^0.5.1", diff --git a/scripts/ci/after-success.sh b/scripts/ci/after-success.sh new file mode 100755 index 000000000000..e1691eeff4d5 --- /dev/null +++ b/scripts/ci/after-success.sh @@ -0,0 +1,15 @@ +#!/bin/bash + +# Script which always runs when the current Travis mode succeeds. +# Used to run the travis-after-modes script, which checks if all other modes finished. + +# Go to the project root directory +cd $(dirname $0)/../.. + +npmBin=$(npm bin) +ciResult=$($npmBin/travis-after-modes) + +if [ "$ciResult" = "PASSED" ] && [ -z "$TRAVIS_PULL_REQUEST" ]; then + echo "All travis modes passed. Publishing the build artifacts..." + ./scripts/release/publish-build-artifacts.sh +fi \ No newline at end of file diff --git a/scripts/release/publish-build-artifacts.sh b/scripts/release/publish-build-artifacts.sh new file mode 100755 index 000000000000..c9351defa99d --- /dev/null +++ b/scripts/release/publish-build-artifacts.sh @@ -0,0 +1,46 @@ +#!/bin/bash + +# Script to publish the build artifacts to a GitHub repository. +# Builds will be automatically published once new changes are made to the repository. + +# Go to the project root directory +cd $(dirname $0)/../.. + +buildDir="dist/@angular/material" +buildVersion=$(sed -nE 's/^\s*"version": "(.*?)",$/\1/p' package.json) + +commitSha=$(git rev-parse --short HEAD) +commitAuthor=$(git --no-pager show -s --format='%an <%ae>' HEAD) +commitMessage=$(git log --oneline | head -n1) + +repoName="material-builds" +repoUrl="http://github.com/DevVersion/material-builds.git" +repoDir="tmp/$repoName" + +# Create a release of the current repository. +$(npm bin)/gulp build:release + +# Prepare cloning the builds repository +rm -rf $repoDir +mkdir -p $repoDir + +# Clone the repository +git clone $repoUrl $repoDir + +# Copy the build files to the repository +rm -rf $repoDir/* +cp -r $buildDir/* $repoDir + +# Create the build commit and push the changes to the repository. +cd $repoDir && + +# Setup the git repository authentication. +git config credential.helper "store --file=.git/credentials" && +echo "$MATERIAL2_BUILDS_TOKEN" > .git/credentials + +git add -A && +git commit -m "$commitMessage" --author "$commitAuthor" && +git tag "$buildVersion-$commitSha" && +git push origin master --tags + +echo "Finished publishing build artifacts" From a1331ec574ab97b8335e32f97ea5c49372554777 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 9 Dec 2016 23:06:03 +0100 Subject: [PATCH 07/91] feat(sidenav): close via escape key and restore focus to trigger element (#1990) * feat(sidenav): close via escape key and restore focus to trigger element * Adds the ability to close a sidenav by pressing escape. * Restores focus to the trigger element after a sidenav is closed. * fix: test failures in IE and blur element if there's no focusable trigger * fix: use the keycode instead of (keydown.escape) * fix: use the renderer for focusing and blurring and fix a typo * fix a faulty merge * Fix a linter warning. * Stop the propagation of the keydown event. * Pointless commit to resolve git issue. * Revert pointless commit. * Fix conflict between the new functionality and the focus trapping. * Move the focus trapping behavior to the onOpen listener for improved reliability. --- src/lib/core/keyboard/keycodes.ts | 2 ++ src/lib/sidenav/sidenav.scss | 1 + src/lib/sidenav/sidenav.spec.ts | 54 +++++++++++++++++++++++++++++++ src/lib/sidenav/sidenav.ts | 49 ++++++++++++++++++++++++---- 4 files changed, 100 insertions(+), 6 deletions(-) diff --git a/src/lib/core/keyboard/keycodes.ts b/src/lib/core/keyboard/keycodes.ts index 6204987a0e8a..af4c4b702f9a 100644 --- a/src/lib/core/keyboard/keycodes.ts +++ b/src/lib/core/keyboard/keycodes.ts @@ -18,3 +18,5 @@ export const END = 35; export const ENTER = 13; export const SPACE = 32; export const TAB = 9; + +export const ESCAPE = 27; diff --git a/src/lib/sidenav/sidenav.scss b/src/lib/sidenav/sidenav.scss index 1349cfee58df..bb0533cd473c 100644 --- a/src/lib/sidenav/sidenav.scss +++ b/src/lib/sidenav/sidenav.scss @@ -107,6 +107,7 @@ md-sidenav { bottom: 0; z-index: 3; min-width: 5%; + outline: 0; // TODO(kara): revisit scrolling behavior for sidenavs overflow-y: auto; diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts index ad24acffd9ee..5678797639b1 100644 --- a/src/lib/sidenav/sidenav.spec.ts +++ b/src/lib/sidenav/sidenav.spec.ts @@ -4,6 +4,7 @@ import {By} from '@angular/platform-browser'; import {MdSidenav, MdSidenavModule, MdSidenavToggleResult} from './sidenav'; import {A11yModule} from '../core/a11y/index'; import {PlatformModule} from '../core/platform/platform'; +import {ESCAPE} from '../core/keyboard/keycodes'; function endSidenavTransition(fixture: ComponentFixture) { @@ -235,6 +236,59 @@ describe('MdSidenav', () => { expect(testComponent.backdropClickedCount).toBe(1); })); + it('should close when pressing escape', fakeAsync(() => { + let fixture = TestBed.createComponent(BasicTestApp); + let testComponent: BasicTestApp = fixture.debugElement.componentInstance; + let sidenav: MdSidenav = fixture.debugElement + .query(By.directive(MdSidenav)).componentInstance; + + sidenav.open(); + + fixture.detectChanges(); + endSidenavTransition(fixture); + tick(); + + expect(testComponent.openCount).toBe(1); + expect(testComponent.closeCount).toBe(0); + + // Simulate pressing the escape key. + sidenav.handleKeydown({ + keyCode: ESCAPE, + stopPropagation: () => {} + } as KeyboardEvent); + + fixture.detectChanges(); + endSidenavTransition(fixture); + tick(); + + expect(testComponent.closeCount).toBe(1); + })); + + it('should restore focus to the trigger element on close', fakeAsync(() => { + let fixture = TestBed.createComponent(BasicTestApp); + let sidenav: MdSidenav = fixture.debugElement + .query(By.directive(MdSidenav)).componentInstance; + let trigger = document.createElement('button'); + + document.body.appendChild(trigger); + trigger.focus(); + sidenav.open(); + + fixture.detectChanges(); + endSidenavTransition(fixture); + tick(); + + sidenav.close(); + + fixture.detectChanges(); + endSidenavTransition(fixture); + tick(); + + expect(document.activeElement) + .toBe(trigger, 'Expected focus to be restored to the trigger on close.'); + + trigger.parentNode.removeChild(trigger); + })); }); describe('attributes', () => { diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index e6cc23d6e638..a993045b6602 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -16,9 +16,18 @@ import { ViewChild } from '@angular/core'; import {CommonModule} from '@angular/common'; -import {Dir, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core'; +import {Dir, MdError, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core'; import {A11yModule, A11Y_PROVIDERS} from '../core/a11y/index'; import {FocusTrap} from '../core/a11y/focus-trap'; +import {ESCAPE} from '../core/keyboard/keycodes'; + + +/** Exception thrown when two MdSidenav are matching the same side. */ +export class MdDuplicatedSidenavError extends MdError { + constructor(align: string) { + super(`A sidenav was already declared for 'align="${align}"'`); + } +} /** Sidenav toggle promise result. */ @@ -40,6 +49,7 @@ export class MdSidenavToggleResult { template: '', host: { '(transitionend)': '_onTransitionEnd($event)', + '(keydown)': 'handleKeydown($event)', // must prevent the browser from aligning text based on value '[attr.align]': 'null', '[class.md-sidenav-closed]': '_isClosed', @@ -51,6 +61,7 @@ export class MdSidenavToggleResult { '[class.md-sidenav-push]': '_modePush', '[class.md-sidenav-side]': '_modeSide', '[class.md-sidenav-invalid]': '!valid', + 'tabIndex': '-1' }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, @@ -128,7 +139,25 @@ export class MdSidenav implements AfterContentInit { * @param _elementRef The DOM element reference. Used for transition and width calculation. * If not available we do not hook on transitions. */ - constructor(private _elementRef: ElementRef) {} + constructor(private _elementRef: ElementRef, private _renderer: Renderer) { + this.onOpen.subscribe(() => { + this._elementFocusedBeforeSidenavWasOpened = document.activeElement as HTMLElement; + + if (!this.isFocusTrapDisabled) { + this._focusTrap.focusFirstTabbableElementWhenReady(); + } + }); + + this.onClose.subscribe(() => { + if (this._elementFocusedBeforeSidenavWasOpened instanceof HTMLElement) { + this._renderer.invokeElementMethod(this._elementFocusedBeforeSidenavWasOpened, 'focus'); + } else { + this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'blur'); + } + + this._elementFocusedBeforeSidenavWasOpened = null; + }); + } ngAfterContentInit() { // This can happen when the sidenav is set to opened in the template and the transition @@ -188,10 +217,6 @@ export class MdSidenav implements AfterContentInit { this.onCloseStart.emit(); } - if (!this.isFocusTrapDisabled) { - this._focusTrap.focusFirstTabbableElementWhenReady(); - } - if (this._toggleAnimationPromise) { this._resolveToggleAnimationPromise(false); } @@ -202,6 +227,16 @@ export class MdSidenav implements AfterContentInit { return this._toggleAnimationPromise; } + /** + * Handles the keyboard events. + */ + handleKeydown(event: KeyboardEvent) { + if (event.keyCode === ESCAPE) { + this.close(); + event.stopPropagation(); + } + } + /** * When transition has finished, set the internal state for classes and emit the proper event. * The event passed is actually of type TransitionEvent, but that type is not available in @@ -255,6 +290,8 @@ export class MdSidenav implements AfterContentInit { } return 0; } + + private _elementFocusedBeforeSidenavWasOpened: HTMLElement = null; } /** From 7b3a0590e4b9533dea623b1802634b2ed65c7671 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 9 Dec 2016 23:46:17 +0100 Subject: [PATCH 08/91] fix(input): label alignment in rtl (#2047) Fixes the focused label alignment being off in RTL. Fixes #2034. --- src/lib/input/input.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/lib/input/input.scss b/src/lib/input/input.scss index 54c5449c8427..5964abdd7b44 100644 --- a/src/lib/input/input.scss +++ b/src/lib/input/input.scss @@ -138,6 +138,8 @@ md-input, md-textarea { [dir='rtl'] & { transform-origin: bottom right; + left: auto; + right: 0; } } From ca2046b967c942d8dfdc83948d266e740c2447c7 Mon Sep 17 00:00:00 2001 From: mmalerba Date: Fri, 9 Dec 2016 15:17:10 -0800 Subject: [PATCH 09/91] feat(input): create md-input-container to eventually replace md-input (#2052) * created md-input-wrapper and removed useless inputs * added demo * remove ControlValueAccessor and start migrating input * finished converting most input attrs * typescript fixed, css needs work * removed duplicate directives. * fix scss * set up demo area * Fix disabled state * fixed some small bugs and converted more of demo * demo card #1 converted * finished converting demo * subscribe to ngModel changes * updated other demos to use new input * undo accidental changes to other inputs * working through tests * fixed all tests * fixed lint issues * fix firefox type=date issue * try removing ie11 checks, see if we need them * added md-input back to baseline demo * started md-input directive * more refactoring * fixed demos, tests still broken * remove useless imports * fix tests * fix tests for ff & ie * move input feature detection into service * addressed some comments * s/input-wrapper/input-container * s/NgModel/NgControl * remove FeatureDetector * s/MdPlatformModule/PlatformModule * Remove some problematic privates and add mat- versions of everything * fix import --- src/demo-app/baseline/baseline-demo.html | 12 +- src/demo-app/demo-app-module.ts | 2 + src/demo-app/demo-app/demo-app.ts | 1 + src/demo-app/demo-app/routes.ts | 2 + src/demo-app/input/input-container-demo.html | 265 ++++++++++++ src/demo-app/input/input-container-demo.ts | 31 ++ src/demo-app/platform/platform-demo.html | 12 + src/demo-app/platform/platform-demo.ts | 17 +- src/demo-app/ripple/ripple-demo.html | 15 +- src/demo-app/snack-bar/snack-bar-demo.html | 28 +- src/demo-app/tabs/tabs-demo.html | 14 +- src/demo-app/tooltip/tooltip-demo.html | 2 +- src/lib/core/a11y/index.ts | 2 +- src/lib/core/core.ts | 1 + src/lib/core/platform/features.ts | 36 ++ src/lib/core/platform/index.ts | 13 + src/lib/core/platform/platform.ts | 14 +- src/lib/input/_input-theme.scss | 4 +- src/lib/input/index.ts | 4 +- src/lib/input/input-container-errors.ts | 22 + src/lib/input/input-container.html | 35 ++ src/lib/input/input-container.scss | 29 ++ src/lib/input/input-container.spec.ts | 408 +++++++++++++++++++ src/lib/input/input-container.ts | 266 ++++++++++++ src/lib/input/input.ts | 55 ++- src/lib/module.ts | 2 +- src/lib/sidenav/sidenav.spec.ts | 2 +- 27 files changed, 1215 insertions(+), 79 deletions(-) create mode 100644 src/demo-app/input/input-container-demo.html create mode 100644 src/demo-app/input/input-container-demo.ts create mode 100644 src/demo-app/platform/platform-demo.html create mode 100644 src/lib/core/platform/features.ts create mode 100644 src/lib/core/platform/index.ts create mode 100644 src/lib/input/input-container-errors.ts create mode 100644 src/lib/input/input-container.html create mode 100644 src/lib/input/input-container.scss create mode 100644 src/lib/input/input-container.spec.ts create mode 100644 src/lib/input/input-container.ts diff --git a/src/demo-app/baseline/baseline-demo.html b/src/demo-app/baseline/baseline-demo.html index f745b02f22cd..e28173d99f94 100644 --- a/src/demo-app/baseline/baseline-demo.html +++ b/src/demo-app/baseline/baseline-demo.html @@ -10,7 +10,11 @@ | Text 3 | Radio 3 | Text 4 | - Label + + | Text 5 | + + + | Text After @@ -28,7 +32,11 @@

| Text 3 | Radio 3 | Text 4 | - Label + + | Text 5 | + + + | Text After

diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts index 2f692b92d089..0a85b5da9475 100644 --- a/src/demo-app/demo-app-module.ts +++ b/src/demo-app/demo-app-module.ts @@ -37,6 +37,7 @@ import {TabsDemo, SunnyTabContent, RainyTabContent, FoggyTabContent} from './tab import {ProjectionDemo, ProjectionTestComponent} from './projection/projection-demo'; import {PlatformDemo} from './platform/platform-demo'; import {AutocompleteDemo} from './autocomplete/autocomplete-demo'; +import {InputContainerDemo} from './input/input-container-demo'; @NgModule({ imports: [ @@ -62,6 +63,7 @@ import {AutocompleteDemo} from './autocomplete/autocomplete-demo'; Home, IconDemo, InputDemo, + InputContainerDemo, JazzDialog, ListDemo, LiveAnnouncerDemo, diff --git a/src/demo-app/demo-app/demo-app.ts b/src/demo-app/demo-app/demo-app.ts index 0f5424ee1fa7..5741b0b8888c 100644 --- a/src/demo-app/demo-app/demo-app.ts +++ b/src/demo-app/demo-app/demo-app.ts @@ -31,6 +31,7 @@ export class DemoApp { {name: 'Grid List', route: 'grid-list'}, {name: 'Icon', route: 'icon'}, {name: 'Input', route: 'input'}, + {name: 'Input Container', route: 'input-container'}, {name: 'List', route: 'list'}, {name: 'Menu', route: 'menu'}, {name: 'Live Announcer', route: 'live-announcer'}, diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts index 19a7dc1bd42e..41c16f5b5a27 100644 --- a/src/demo-app/demo-app/routes.ts +++ b/src/demo-app/demo-app/routes.ts @@ -32,6 +32,7 @@ import {ProjectionDemo} from '../projection/projection-demo'; import {TABS_DEMO_ROUTES} from '../tabs/routes'; import {PlatformDemo} from '../platform/platform-demo'; import {AutocompleteDemo} from '../autocomplete/autocomplete-demo'; +import {InputContainerDemo} from '../input/input-container-demo'; export const DEMO_APP_ROUTES: Routes = [ {path: '', component: Home}, @@ -51,6 +52,7 @@ export const DEMO_APP_ROUTES: Routes = [ {path: 'overlay', component: OverlayDemo}, {path: 'checkbox', component: CheckboxDemo}, {path: 'input', component: InputDemo}, + {path: 'input-container', component: InputContainerDemo}, {path: 'toolbar', component: ToolbarDemo}, {path: 'icon', component: IconDemo}, {path: 'list', component: ListDemo}, diff --git a/src/demo-app/input/input-container-demo.html b/src/demo-app/input/input-container-demo.html new file mode 100644 index 000000000000..27f10de9a6cf --- /dev/null +++ b/src/demo-app/input/input-container-demo.html @@ -0,0 +1,265 @@ + + Basic + +
+ + + + + + + +
+ + + + + + + +
+

+ + + + + + +

+ + + + +
+ + + + + + + + + + + {{postalCode.value.length}} / 5 + +
+
+ + + + + Prefix + Suffix + + + + $  + .00 + + + + + + Divider Colors + +

Input

+ + + + + + + + + + +

Textarea

+ + + + + + + + + + + + + + Hints + +

Input

+

+ + + {{characterCountInputHintExample.value.length}} / 100 + +

+ +

Textarea

+

+ + + {{characterCountTextareaHintExample.value.length}} / 100 + +

+ + + + + + Hello  + + + , + how are you? + + +

+ + + + + + +

+

+ + + +

+

+ + + {{input.value.length}} / 100 + +

+

+ + + +

+ +

+ + + + I favorite bold placeholder + + + I also home italic hint labels + + +

+

+ + + {{hintLabelWithCharCount.value.length}} + +

+

+ Check to change the divider color: + + + +

+

+ Check to make required: + + + +

+

+ Check to make floating label: + + + +

+ +

+ + +

Example: 
+ + + + .00 € + +
+ Both: + + + + email +   + + +  @gmail.com + + +

+ +

+ Empty: + +

+ + + + + Number Inputs + + + + + + + + + + + + +
Table + + + + +
{{i+1}} + + + + + + {{item.value}}
+ + + + + + Textarea Autosize + + +
+ + + +
+ + diff --git a/src/demo-app/input/input-container-demo.ts b/src/demo-app/input/input-container-demo.ts new file mode 100644 index 000000000000..cdc3e742064c --- /dev/null +++ b/src/demo-app/input/input-container-demo.ts @@ -0,0 +1,31 @@ +import {Component} from '@angular/core'; + + +let max = 5; + +@Component({ + moduleId: module.id, + selector: 'input-container-demo', + templateUrl: 'input-container-demo.html', + styleUrls: ['input-demo.css'], +}) +export class InputContainerDemo { + dividerColor: boolean; + requiredField: boolean; + floatingLabel: boolean; + name: string; + items: any[] = [ + { value: 10 }, + { value: 20 }, + { value: 30 }, + { value: 40 }, + { value: 50 }, + ]; + rows = 8; + + addABunch(n: number) { + for (let x = 0; x < n; x++) { + this.items.push({ value: ++max }); + } + } +} diff --git a/src/demo-app/platform/platform-demo.html b/src/demo-app/platform/platform-demo.html new file mode 100644 index 000000000000..d6fe9dbc49e6 --- /dev/null +++ b/src/demo-app/platform/platform-demo.html @@ -0,0 +1,12 @@ +

Is Android: {{ platform.ANDROID }}

+

Is iOS: {{ platform.IOS }}

+

Is Firefox: {{ platform.FIREFOX }}

+

Is Blink: {{ platform.BLINK }}

+

Is Webkit: {{ platform.WEBKIT }}

+

Is Trident: {{ platform.TRIDENT }}

+

Is Edge: {{ platform.EDGE }}

+ +

+ Supported input types: + {{ type }}, +

diff --git a/src/demo-app/platform/platform-demo.ts b/src/demo-app/platform/platform-demo.ts index c5b746a70fe5..227b0d135aea 100644 --- a/src/demo-app/platform/platform-demo.ts +++ b/src/demo-app/platform/platform-demo.ts @@ -1,17 +1,14 @@ import {Component} from '@angular/core'; -import {MdPlatform} from '@angular/material'; +import {MdPlatform, getSupportedInputTypes} from '@angular/material'; + @Component({ - template: ` -

Is Android: {{ platform.ANDROID }}

-

Is iOS: {{ platform.IOS }}

-

Is Firefox: {{ platform.FIREFOX }}

-

Is Blink: {{ platform.BLINK }}

-

Is Webkit: {{ platform.WEBKIT }}

-

Is Trident: {{ platform.TRIDENT }}

-

Is Edge: {{ platform.EDGE }}

- ` + moduleId: module.id, + selector: 'platform-demo', + templateUrl: 'platform-demo.html', }) export class PlatformDemo { + supportedInputTypes = getSupportedInputTypes(); + constructor(public platform: MdPlatform) {} } diff --git a/src/demo-app/ripple/ripple-demo.html b/src/demo-app/ripple/ripple-demo.html index b2bb986c0df3..75ddda95e698 100644 --- a/src/demo-app/ripple/ripple-demo.html +++ b/src/demo-app/ripple/ripple-demo.html @@ -27,9 +27,18 @@
- - - + + + + + + + + +
diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index faa23b684de6..bbfefec80e4c 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.html +++ b/src/demo-app/snack-bar/snack-bar-demo.html @@ -1,24 +1,32 @@

SnackBar demo

-
Message:
+
+ Message: +

Show button on snack bar

- + + +

Auto hide after duration

- + + +
- \ No newline at end of file + diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html index 6950c40864d0..fb9826927a7f 100644 --- a/src/demo-app/tabs/tabs-demo.html +++ b/src/demo-app/tabs/tabs-demo.html @@ -127,7 +127,9 @@

Tab Group Demo - Dynamic Height



- + + + @@ -169,7 +171,9 @@

Tab Group Demo - Fixed Height



- + + + @@ -192,7 +196,9 @@

Async Tabs




- + + + @@ -205,4 +211,4 @@

Tabs with simplified api

This tab is about combustion! - \ No newline at end of file + diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html index 6da3a8b8efc6..bba9c3fa3f8b 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -24,7 +24,7 @@

Tooltip Demo

Message: - +

Mouse over to diff --git a/src/lib/core/a11y/index.ts b/src/lib/core/a11y/index.ts index 0be8e05abeb6..4c1955615510 100644 --- a/src/lib/core/a11y/index.ts +++ b/src/lib/core/a11y/index.ts @@ -3,7 +3,7 @@ import {FocusTrap} from './focus-trap'; import {MdLiveAnnouncer} from './live-announcer'; import {InteractivityChecker} from './interactivity-checker'; import {CommonModule} from '@angular/common'; -import {PlatformModule} from '../platform/platform'; +import {PlatformModule} from '../platform/index'; export const A11Y_PROVIDERS = [MdLiveAnnouncer, InteractivityChecker]; diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index e5127292671d..0791f8842195 100644 --- a/src/lib/core/core.ts +++ b/src/lib/core/core.ts @@ -31,6 +31,7 @@ export * from './projection/projection'; // Platform export * from './platform/platform'; +export * from './platform/features'; // Overlay export {Overlay, OVERLAY_PROVIDERS} from './overlay/overlay'; diff --git a/src/lib/core/platform/features.ts b/src/lib/core/platform/features.ts new file mode 100644 index 000000000000..1f6c62ab0c3f --- /dev/null +++ b/src/lib/core/platform/features.ts @@ -0,0 +1,36 @@ +let supportedInputTypes: Set; + +/** @returns {Set} the input types supported by this browser. */ +export function getSupportedInputTypes(): Set { + if (!supportedInputTypes) { + let featureTestInput = document.createElement('input'); + supportedInputTypes = new Set([ + 'button', + 'checkbox', + 'color', + 'date', + 'datetime-local', + 'email', + 'file', + 'hidden', + 'image', + 'month', + 'number', + 'password', + 'radio', + 'range', + 'reset', + 'search', + 'submit', + 'tel', + 'text', + 'time', + 'url', + 'week', + ].filter(value => { + featureTestInput.setAttribute('type', value); + return featureTestInput.type === value; + })); + } + return supportedInputTypes; +} diff --git a/src/lib/core/platform/index.ts b/src/lib/core/platform/index.ts new file mode 100644 index 000000000000..d7e93942da24 --- /dev/null +++ b/src/lib/core/platform/index.ts @@ -0,0 +1,13 @@ +import {NgModule, ModuleWithProviders} from '@angular/core'; +import {MdPlatform} from './platform'; + + +@NgModule({}) +export class PlatformModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: PlatformModule, + providers: [MdPlatform], + }; + } +} diff --git a/src/lib/core/platform/platform.ts b/src/lib/core/platform/platform.ts index 44477046e4ef..3b2e655c7d13 100644 --- a/src/lib/core/platform/platform.ts +++ b/src/lib/core/platform/platform.ts @@ -1,4 +1,4 @@ -import {Injectable, NgModule, ModuleWithProviders} from '@angular/core'; +import {Injectable} from '@angular/core'; declare const window: any; @@ -12,7 +12,6 @@ const hasV8BreakIterator = (window.Intl && (window.Intl as any).v8BreakIterator) */ @Injectable() export class MdPlatform { - /** Layout Engines */ EDGE = /(edge)/i.test(navigator.userAgent); TRIDENT = /(msie|trident)/i.test(navigator.userAgent); @@ -35,15 +34,4 @@ export class MdPlatform { // Trident on mobile adds the android platform to the userAgent to trick detections. ANDROID = /android/i.test(navigator.userAgent) && !this.TRIDENT; - -} - -@NgModule({}) -export class PlatformModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: PlatformModule, - providers: [MdPlatform], - }; - } } diff --git a/src/lib/input/_input-theme.scss b/src/lib/input/_input-theme.scss index 0c424275b7ee..e4a52a093f54 100644 --- a/src/lib/input/_input-theme.scss +++ b/src/lib/input/_input-theme.scss @@ -39,8 +39,8 @@ } // See md-input-placeholder-floating mixin in input.scss - md-input input:-webkit-autofill + .md-input-placeholder, .md-input-placeholder.md-float.md-focused { - + input.md-input-element:-webkit-autofill + .md-input-placeholder, + .md-input-placeholder.md-float.md-focused { .md-placeholder-required { color: $input-required-placeholder-color; } diff --git a/src/lib/input/index.ts b/src/lib/input/index.ts index c630aefeaf7f..ab131b1f1f40 100644 --- a/src/lib/input/index.ts +++ b/src/lib/input/index.ts @@ -1,2 +1,4 @@ +export * from './autosize' export * from './input'; -export {MdTextareaAutosize} from './autosize'; +export * from './input-container'; +export * from './input-container-errors'; diff --git a/src/lib/input/input-container-errors.ts b/src/lib/input/input-container-errors.ts new file mode 100644 index 000000000000..214997f60f64 --- /dev/null +++ b/src/lib/input/input-container-errors.ts @@ -0,0 +1,22 @@ +import {MdError} from '../core/errors/error'; + + +export class MdInputContainerPlaceholderConflictError extends MdError { + constructor() { + super('Placeholder attribute and child element were both specified.'); + } +} + + +export class MdInputContainerUnsupportedTypeError extends MdError { + constructor(type: string) { + super(`Input type "${type}" isn't supported by md-input-container.`); + } +} + + +export class MdInputContainerDuplicatedHintError extends MdError { + constructor(align: string) { + super(`A hint was already declared for 'align="${align}"'.`); + } +} diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html new file mode 100644 index 000000000000..04f0f8ee1d16 --- /dev/null +++ b/src/lib/input/input-container.html @@ -0,0 +1,35 @@ +
+
+
+ +
+ + + +
+ +
+
+ +
+ +
+ +
{{hintLabel}}
+ +
diff --git a/src/lib/input/input-container.scss b/src/lib/input/input-container.scss new file mode 100644 index 000000000000..28c6086e5945 --- /dev/null +++ b/src/lib/input/input-container.scss @@ -0,0 +1,29 @@ +@import '../core/style/variables'; + +md-input-container { + display: inline-block; + position: relative; + font-family: $md-font-family; + line-height: normal; + + // To avoid problems with text-align. + text-align: left; + + [dir='rtl'] & { + text-align: right; + } +} + +.md-input-element { + &::placeholder { + visibility: hidden; + } + + .md-end & { + text-align: right; + + [dir='rtl'] & { + text-align: left; + } + } +} diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts new file mode 100644 index 000000000000..c0c2bd1985c6 --- /dev/null +++ b/src/lib/input/input-container.spec.ts @@ -0,0 +1,408 @@ +import {async, TestBed, inject} from '@angular/core/testing'; +import {Component} from '@angular/core'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {By} from '@angular/platform-browser'; +import {MdInputModule} from './input'; +import {MdInputContainer} from './input-container'; +import {MdPlatform} from '../core/platform/platform'; +import {PlatformModule} from '../core/platform/index'; + + +describe('MdInputContainer', function () { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + MdInputModule.forRoot(), + PlatformModule.forRoot(), + FormsModule, + ReactiveFormsModule + ], + declarations: [ + MdInputContainerPlaceholderRequiredTestComponent, + MdInputContainerPlaceholderElementTestComponent, + MdInputContainerPlaceholderAttrTestComponent, + MdInputContainerHintLabel2TestController, + MdInputContainerHintLabelTestController, + MdInputContainerInvalidTypeTestController, + MdInputContainerInvalidPlaceholderTestController, + MdInputContainerInvalidHint2TestController, + MdInputContainerInvalidHintTestController, + MdInputContainerBaseTestController, + MdInputContainerWithId, + MdInputContainerDateTestController, + MdInputContainerTextTestController, + MdInputContainerPasswordTestController, + MdInputContainerNumberTestController, + MdTextareaWithBindings, + MdInputContainerWithDisabled, + ], + }); + + TestBed.compileComponents(); + })); + + it('should default to floating placeholders', () => { + let fixture = TestBed.createComponent(MdInputContainerBaseTestController); + fixture.detectChanges(); + + let inputContainer = fixture.debugElement.query(By.directive(MdInputContainer)) + .componentInstance as MdInputContainer; + expect(inputContainer.floatingPlaceholder).toBe(true, + 'Expected MdInputContainer to default to having floating placeholders turned on'); + }); + + it('should not be treated as empty if type is date', + inject([MdPlatform], (platform: MdPlatform) => { + if (!(platform.TRIDENT || platform.FIREFOX)) { + let fixture = TestBed.createComponent(MdInputContainerDateTestController); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('md-empty')).toBe(false); + } + })); + + // Firefox and IE don't support type="date" and fallback to type="text". + it('should be treated as empty if type is date on Firefox and IE', + inject([MdPlatform], (platform: MdPlatform) => { + if (platform.TRIDENT || platform.FIREFOX) { + let fixture = TestBed.createComponent(MdInputContainerDateTestController); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('md-empty')).toBe(true); + } + })); + + it('should treat text input type as empty at init', () => { + let fixture = TestBed.createComponent(MdInputContainerTextTestController); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('md-empty')).toBe(true); + }); + + it('should treat password input type as empty at init', () => { + let fixture = TestBed.createComponent(MdInputContainerPasswordTestController); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('md-empty')).toBe(true); + }); + + it('should treat number input type as empty at init', () => { + let fixture = TestBed.createComponent(MdInputContainerNumberTestController); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('md-empty')).toBe(true); + }); + + it('should not be empty after input entered', async(() => { + let fixture = TestBed.createComponent(MdInputContainerTextTestController); + fixture.detectChanges(); + + let inputEl = fixture.debugElement.query(By.css('input')); + let el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el).not.toBeNull(); + expect(el.classList.contains('md-empty')).toBe(true, 'should be empty'); + + inputEl.nativeElement.value = 'hello'; + // Simulate input event. + inputEl.triggerEventHandler('input', {target: inputEl.nativeElement}); + fixture.detectChanges(); + + el = fixture.debugElement.query(By.css('label')).nativeElement; + expect(el.classList.contains('md-empty')).toBe(false, 'should not be empty'); + })); + + it('should add id', () => { + let fixture = TestBed.createComponent(MdInputContainerTextTestController); + fixture.detectChanges(); + + const inputElement: HTMLInputElement = + fixture.debugElement.query(By.css('input')).nativeElement; + const labelElement: HTMLInputElement = + fixture.debugElement.query(By.css('label')).nativeElement; + + expect(inputElement.id).toBeTruthy(); + expect(inputElement.id).toEqual(labelElement.getAttribute('for')); + }); + + it('should not overwrite existing id', () => { + let fixture = TestBed.createComponent(MdInputContainerWithId); + fixture.detectChanges(); + + const inputElement: HTMLInputElement = + fixture.debugElement.query(By.css('input')).nativeElement; + const labelElement: HTMLInputElement = + fixture.debugElement.query(By.css('label')).nativeElement; + + expect(inputElement.id).toBe('test-id'); + expect(labelElement.getAttribute('for')).toBe('test-id'); + }); + + it('validates there\'s only one hint label per side', () => { + let fixture = TestBed.createComponent(MdInputContainerInvalidHintTestController); + + expect(() => fixture.detectChanges()).toThrow(); + // TODO(jelbourn): .toThrow(new MdInputContainerDuplicatedHintError('start')); + // See https://github.com/angular/angular/issues/8348 + }); + + it('validates there\'s only one hint label per side (attribute)', () => { + let fixture = TestBed.createComponent(MdInputContainerInvalidHint2TestController); + + expect(() => fixture.detectChanges()).toThrow(); + // TODO(jelbourn): .toThrow(new MdInputContainerDuplicatedHintError('start')); + // See https://github.com/angular/angular/issues/8348 + }); + + it('validates there\'s only one placeholder', () => { + let fixture = TestBed.createComponent(MdInputContainerInvalidPlaceholderTestController); + + expect(() => fixture.detectChanges()).toThrow(); + // TODO(jelbourn): .toThrow(new MdInputContainerPlaceholderConflictError()); + // See https://github.com/angular/angular/issues/8348 + }); + + it('validates the type', () => { + let fixture = TestBed.createComponent(MdInputContainerInvalidTypeTestController); + + // Technically this throws during the OnChanges detection phase, + // so the error is really a ChangeDetectionError and it becomes + // hard to build a full exception to compare with. + // We just check for any exception in this case. + expect(() => fixture.detectChanges()).toThrow( + /* new MdInputContainerUnsupportedTypeError('file') */); + }); + + it('supports hint labels attribute', () => { + let fixture = TestBed.createComponent(MdInputContainerHintLabelTestController); + fixture.detectChanges(); + + // If the hint label is empty, expect no label. + expect(fixture.debugElement.query(By.css('.md-hint'))).toBeNull(); + + fixture.componentInstance.label = 'label'; + fixture.detectChanges(); + expect(fixture.debugElement.query(By.css('.md-hint'))).not.toBeNull(); + }); + + it('supports hint labels elements', () => { + let fixture = TestBed.createComponent(MdInputContainerHintLabel2TestController); + fixture.detectChanges(); + + // In this case, we should have an empty . + let el = fixture.debugElement.query(By.css('md-hint')).nativeElement; + expect(el.textContent).toBeFalsy(); + + fixture.componentInstance.label = 'label'; + fixture.detectChanges(); + el = fixture.debugElement.query(By.css('md-hint')).nativeElement; + expect(el.textContent).toBe('label'); + }); + + it('supports placeholder attribute', async(() => { + let fixture = TestBed.createComponent(MdInputContainerPlaceholderAttrTestComponent); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')); + expect(el).toBeNull(); + + fixture.componentInstance.placeholder = 'Other placeholder'; + fixture.detectChanges(); + + el = fixture.debugElement.query(By.css('label')); + expect(el).not.toBeNull(); + expect(el.nativeElement.textContent).toMatch('Other placeholder'); + expect(el.nativeElement.textContent).not.toMatch(/\*/g); + })); + + it('supports placeholder element', async(() => { + let fixture = TestBed.createComponent(MdInputContainerPlaceholderElementTestComponent); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')); + expect(el).not.toBeNull(); + expect(el.nativeElement.textContent).toMatch('Default Placeholder'); + + fixture.componentInstance.placeholder = 'Other placeholder'; + fixture.detectChanges(); + + el = fixture.debugElement.query(By.css('label')); + expect(el).not.toBeNull(); + expect(el.nativeElement.textContent).toMatch('Other placeholder'); + expect(el.nativeElement.textContent).not.toMatch(/\*/g); + })); + + it('supports placeholder required star', () => { + let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')); + expect(el).not.toBeNull(); + expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g); + }); + + it('supports the disabled attribute', async(() => { + let fixture = TestBed.createComponent(MdInputContainerWithDisabled); + fixture.detectChanges(); + + let underlineEl = fixture.debugElement.query(By.css('.md-input-underline')).nativeElement; + expect(underlineEl.classList.contains('md-disabled')).toBe(false, 'should not be disabled'); + + fixture.componentInstance.disabled = true; + fixture.detectChanges(); + expect(underlineEl.classList.contains('md-disabled')).toBe(true, 'should be disabled'); + })); + + it('supports textarea', () => { + let fixture = TestBed.createComponent(MdTextareaWithBindings); + fixture.detectChanges(); + + const textarea: HTMLTextAreaElement = fixture.nativeElement.querySelector('textarea'); + expect(textarea).not.toBeNull(); + }); +}); + +@Component({ + template: ` + + + ` +}) +class MdInputContainerWithId {} + +@Component({ + template: `` +}) +class MdInputContainerWithDisabled { + disabled: boolean; +} + +@Component({ + template: `` +}) +class MdInputContainerPlaceholderRequiredTestComponent {} + +@Component({ + template: ` + + + {{placeholder}} + ` +}) +class MdInputContainerPlaceholderElementTestComponent { + placeholder: string = 'Default Placeholder'; +} + +@Component({ + template: `` +}) +class MdInputContainerPlaceholderAttrTestComponent { + placeholder: string = ''; +} + +@Component({ + template: `{{label}}` +}) +class MdInputContainerHintLabel2TestController { + label: string = ''; +} + +@Component({ + template: `` +}) +class MdInputContainerHintLabelTestController { + label: string = ''; +} + +@Component({ + template: `` +}) +class MdInputContainerInvalidTypeTestController {} + +@Component({ + template: ` + + + World + ` +}) +class MdInputContainerInvalidPlaceholderTestController {} + +@Component({ + template: ` + + + World + ` +}) +class MdInputContainerInvalidHint2TestController {} + +@Component({ + template: ` + + + Hello + World + ` +}) +class MdInputContainerInvalidHintTestController {} + +@Component({ + template: `` +}) +class MdInputContainerBaseTestController { + model: any = ''; +} + +@Component({ + template: ` + + + ` +}) +class MdInputContainerDateTestController {} + +@Component({ + template: ` + + + ` +}) +class MdInputContainerTextTestController {} + +@Component({ + template: ` + + + ` +}) +class MdInputContainerPasswordTestController {} + +@Component({ + template: ` + + + ` +}) +class MdInputContainerNumberTestController {} + +@Component({ + template: ` + + + ` +}) +class MdTextareaWithBindings { + rows: number = 4; + cols: number = 8; + wrap: string = 'hard'; +} diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts new file mode 100644 index 000000000000..e50645f90f91 --- /dev/null +++ b/src/lib/input/input-container.ts @@ -0,0 +1,266 @@ +import { + Component, + Input, + Directive, + AfterContentInit, + ContentChild, + ContentChildren, + ElementRef, + QueryList, + ViewEncapsulation, + Optional, + Output, + EventEmitter, + Renderer +} from '@angular/core'; +import {coerceBooleanProperty} from '../core'; +import {NgControl} from '@angular/forms'; +import {getSupportedInputTypes} from '../core/platform/features'; +import { + MdInputContainerUnsupportedTypeError, + MdInputContainerPlaceholderConflictError, + MdInputContainerDuplicatedHintError +} from './input-container-errors'; + + +// Invalid input type. Using one of these will throw an MdInputContainerUnsupportedTypeError. +const MD_INPUT_INVALID_TYPES = [ + 'button', + 'checkbox', + 'color', + 'file', + 'hidden', + 'image', + 'radio', + 'range', + 'reset', + 'submit' +]; + + +let nextUniqueId = 0; + + +/** + * The placeholder directive. The content can declare this to implement more + * complex placeholders. + */ +@Directive({ + selector: 'md-placeholder, mat-placeholder' +}) +export class MdPlaceholder {} + + +/** The hint directive, used to tag content as hint labels (going under the input). */ +@Directive({ + selector: 'md-hint, mat-hint', + host: { + 'class': 'md-hint', + '[class.md-right]': 'align == "end"', + } +}) +export class MdHint { + // Whether to align the hint label at the start or end of the line. + @Input() align: 'start' | 'end' = 'start'; +} + + +/** The input directive, used to mark the input that `MdInputContainer` is wrapping. */ +@Directive({ + selector: 'input[md-input], textarea[md-input], input[mat-input], textarea[mat-input]', + host: { + 'class': 'md-input-element', + '[id]': 'id', + '(blur)': '_onBlur()', + '(focus)': '_onFocus()', + '(input)': '_onInput()', + } +}) +export class MdInputDirective implements AfterContentInit { + @Input() + get disabled() { return this._disabled; } + set disabled(value: any) { this._disabled = coerceBooleanProperty(value); } + private _disabled = false; + + @Input() + get id() { return this._id; }; + set id(value: string) { this._id = value || this._uid; } + private _id: string; + + @Input() + get placeholder() { return this._placeholder; } + set placeholder(value: string) { + if (this._placeholder != value) { + this._placeholder = value; + this._placeholderChange.emit(this._placeholder); + } + } + private _placeholder = ''; + + @Input() + get required() { return this._required; } + set required(value: any) { this._required = coerceBooleanProperty(value); } + private _required = false; + + @Input() + get type() { return this._type; } + set type(value: string) { + this._type = value || 'text'; + this._validateType(); + } + private _type = 'text'; + + value: any; + + /** + * Emits an event when the placeholder changes so that the `md-input-container` can re-validate. + */ + @Output() _placeholderChange = new EventEmitter(); + + get empty() { return (this.value == null || this.value == '') && !this._isNeverEmpty(); } + + focused = false; + + private get _uid() { return this._cachedUid = this._cachedUid || `md-input-${nextUniqueId++}`; } + private _cachedUid: string; + + private _neverEmptyInputTypes = [ + 'date', + 'datetime', + 'datetime-local', + 'month', + 'time', + 'week' + ].filter(t => getSupportedInputTypes().has(t)); + + constructor(private _elementRef: ElementRef, + private _renderer: Renderer, + @Optional() private _ngControl: NgControl) { + // Force setter to be called in case id was not specified. + this.id = this.id; + + if (this._ngControl) { + this._ngControl.valueChanges.subscribe((value) => { + this.value = value; + }); + } + } + + ngAfterContentInit() { + this.value = this._elementRef.nativeElement.value; + } + + /** Focus the input element. */ + focus() { this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus'); } + + _onFocus() { this.focused = true; } + + _onBlur() { this.focused = false; } + + _onInput() { this.value = this._elementRef.nativeElement.value; } + + /** Make sure the input is a supported type. */ + private _validateType() { + if (MD_INPUT_INVALID_TYPES.indexOf(this._type) != -1) { + throw new MdInputContainerUnsupportedTypeError(this._type); + } + } + + private _isNeverEmpty() { return this._neverEmptyInputTypes.indexOf(this._type) != -1; } +} + + +/** + * Component that represents a text input. It encapsulates the HTMLElement and + * improve on its behaviour, along with styling it according to the Material Design. + */ +@Component({ + moduleId: module.id, + selector: 'md-input-container, mat-input-container', + templateUrl: 'input-container.html', + styleUrls: ['input.css', 'input-container.css'], + host: { + // Remove align attribute to prevent it from interfering with layout. + '[attr.align]': 'null', + '(click)': '_focusInput()', + }, + encapsulation: ViewEncapsulation.None, +}) +export class MdInputContainer implements AfterContentInit { + @Input() align: 'start' | 'end' = 'start'; + + @Input() dividerColor: 'primary' | 'accent' | 'warn' = 'primary'; + + @Input() + get hintLabel() { return this._hintLabel; } + set hintLabel(value: string) { + this._hintLabel = value; + this._validateHints(); + } + private _hintLabel = ''; + + @Input() + get floatingPlaceholder(): boolean { return this._floatingPlaceholder; } + set floatingPlaceholder(value) { this._floatingPlaceholder = coerceBooleanProperty(value); } + private _floatingPlaceholder: boolean = true; + + @ContentChild(MdInputDirective) _mdInputChild: MdInputDirective; + + @ContentChild(MdPlaceholder) _placeholderChild: MdPlaceholder; + + @ContentChildren(MdHint) _hintChildren: QueryList; + + ngAfterContentInit() { + this._validateHints(); + this._validatePlaceholders(); + + // Re-validate when things change. + this._hintChildren.changes.subscribe(() => { + this._validateHints(); + }); + this._mdInputChild._placeholderChange.subscribe(() => { + this._validatePlaceholders(); + }); + } + + /** Whether the input has a placeholder. */ + _hasPlaceholder(): boolean { + return !!this._mdInputChild.placeholder || !!this._placeholderChild; + } + + _focusInput() { this._mdInputChild.focus(); } + + /** + * Ensure that there is only one placeholder (either `input` attribute or child element with the + * `md-placeholder` attribute. + */ + private _validatePlaceholders() { + if (this._mdInputChild.placeholder && this._placeholderChild) { + throw new MdInputContainerPlaceholderConflictError(); + } + } + + /** + * Ensure that there is a maximum of one of each `` alignment specified, with the + * attribute being considered as `align="start"`. + */ + private _validateHints() { + if (this._hintChildren) { + let startHint: MdHint = null; + let endHint: MdHint = null; + this._hintChildren.forEach((hint: MdHint) => { + if (hint.align == 'start') { + if (startHint || this.hintLabel) { + throw new MdInputContainerDuplicatedHintError('start'); + } + startHint = hint; + } else if (hint.align == 'end') { + if (endHint) { + throw new MdInputContainerDuplicatedHintError('end'); + } + endHint = hint; + } + }); + } + } +} diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index 22023da9caa7..c6c5735d499a 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -3,7 +3,6 @@ import { Component, HostBinding, Input, - Directive, AfterContentInit, ContentChild, SimpleChange, @@ -17,13 +16,15 @@ import { Output, NgModule, ModuleWithProviders, - ViewEncapsulation, + ViewEncapsulation } from '@angular/core'; import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms'; import {CommonModule} from '@angular/common'; import {MdError, coerceBooleanProperty} from '../core'; import {Observable} from 'rxjs/Observable'; +import {MdPlaceholder, MdInputContainer, MdHint, MdInputDirective} from './input-container'; import {MdTextareaAutosize} from './autosize'; +import {PlatformModule} from '../core/platform/index'; const noop = () => {}; @@ -65,30 +66,6 @@ export class MdInputDuplicatedHintError extends MdError { } - -/** - * The placeholder directive. The content can declare this to implement more - * complex placeholders. - */ -@Directive({ - selector: 'md-placeholder' -}) -export class MdPlaceholder {} - - -/** The hint directive, used to tag content as hint labels (going under the input). */ -@Directive({ - selector: 'md-hint', - host: { - '[class.md-right]': 'align == "end"', - '[class.md-hint]': 'true' - } -}) -export class MdHint { - // Whether to align the hint label at the start or end of the line. - @Input() align: 'start' | 'end' = 'start'; -} - /** * Component that represents a text input. It encapsulates the HTMLElement and * improve on its behaviour, along with styling it according to the Material Design. @@ -369,15 +346,33 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange @NgModule({ - declarations: [MdPlaceholder, MdInput, MdHint, MdTextareaAutosize], - imports: [CommonModule, FormsModule], - exports: [MdPlaceholder, MdInput, MdHint, MdTextareaAutosize], + declarations: [ + MdInput, + MdPlaceholder, + MdInputContainer, + MdHint, + MdTextareaAutosize, + MdInputDirective + ], + imports: [ + CommonModule, + FormsModule, + PlatformModule, + ], + exports: [ + MdInput, + MdPlaceholder, + MdInputContainer, + MdHint, + MdTextareaAutosize, + MdInputDirective + ], }) export class MdInputModule { static forRoot(): ModuleWithProviders { return { ngModule: MdInputModule, - providers: [] + providers: PlatformModule.forRoot().providers, }; } } diff --git a/src/lib/module.ts b/src/lib/module.ts index 8819356f0aa3..c74a5bcf61a5 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -32,7 +32,7 @@ import {MdToolbarModule} from './toolbar/index'; import {MdTooltipModule} from './tooltip/index'; import {MdMenuModule} from './menu/index'; import {MdDialogModule} from './dialog/index'; -import {PlatformModule} from './core/platform/platform'; +import {PlatformModule} from './core/platform/index'; import {MdAutocompleteModule} from './autocomplete/index'; const MATERIAL_MODULES = [ diff --git a/src/lib/sidenav/sidenav.spec.ts b/src/lib/sidenav/sidenav.spec.ts index 5678797639b1..34062c9e9d39 100644 --- a/src/lib/sidenav/sidenav.spec.ts +++ b/src/lib/sidenav/sidenav.spec.ts @@ -3,7 +3,7 @@ import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {MdSidenav, MdSidenavModule, MdSidenavToggleResult} from './sidenav'; import {A11yModule} from '../core/a11y/index'; -import {PlatformModule} from '../core/platform/platform'; +import {PlatformModule} from '../core/platform/index'; import {ESCAPE} from '../core/keyboard/keycodes'; From e85d1080ef60c28c49c4d28caad4be01746784ad Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 9 Dec 2016 15:18:23 -0800 Subject: [PATCH 10/91] feat(tooltip): add input for delaying show and hide (#2101) * feat(tooltip): add input for delaying show and hide * change input for delays to number * remove fakeasyc from tests that dont need show tick * fix comment * rename new inputs to camelCase --- src/demo-app/tooltip/tooltip-demo.html | 16 +++++++- src/demo-app/tooltip/tooltip-demo.ts | 2 + src/lib/tooltip/tooltip.spec.ts | 46 +++++++++++++++++++--- src/lib/tooltip/tooltip.ts | 54 +++++++++++++++++--------- 4 files changed, 92 insertions(+), 26 deletions(-) diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/demo-app/tooltip/tooltip-demo.html index bba9c3fa3f8b..82858ca89835 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -6,7 +6,9 @@

Tooltip Demo

md-raised-button color="primary" [md-tooltip]="message" - [tooltip-position]="position"> + [tooltip-position]="position" + [tooltipShowDelay]="showDelay" + [tooltipHideDelay]="hideDelay"> Mouse over to see the tooltip

@@ -27,11 +29,21 @@

Tooltip Demo

+

+ Show Delay (ms): + +

+ +

+ Hide Delay (ms): + +

+ Mouse over to - - + + Button + Checkbox + Dialog + Grid list + Icon + List + Menu + Progress bar + Progress circle + Radios + Slide Toggle + Tabs + + +
+ +
diff --git a/src/e2e-app/e2e-app/e2e-app.ts b/src/e2e-app/e2e-app/e2e-app.ts index 95f768e69dff..64fb2e4504a5 100644 --- a/src/e2e-app/e2e-app/e2e-app.ts +++ b/src/e2e-app/e2e-app/e2e-app.ts @@ -12,4 +12,6 @@ export class Home {} selector: 'e2e-app', templateUrl: 'e2e-app.html', }) -export class E2EApp { } +export class E2EApp { + showLinks: boolean = false; +} diff --git a/src/e2e-app/menu/menu-e2e.html b/src/e2e-app/menu/menu-e2e.html index 057517b9c8fe..ad1c2f86c817 100644 --- a/src/e2e-app/menu/menu-e2e.html +++ b/src/e2e-app/menu/menu-e2e.html @@ -5,7 +5,7 @@ - + @@ -15,7 +15,7 @@ - + diff --git a/src/e2e-app/radio/radio-e2e.html b/src/e2e-app/radio/radio-e2e.html index 83d672df16cd..d14f9cead519 100644 --- a/src/e2e-app/radio/radio-e2e.html +++ b/src/e2e-app/radio/radio-e2e.html @@ -1,10 +1,12 @@
+ id="test-group" aria-label="Select a Pokemon"> + Charmander Squirtle Bulbasaur +
diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index 94d3ae9ce365..2fb9208d1623 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -34,6 +34,9 @@ const MD_FIT_MODE = 'fit'; selector: 'md-grid-list, mat-grid-list', templateUrl: 'grid-list.html', styleUrls: ['grid-list.css'], + host: { + 'role': 'list' + }, encapsulation: ViewEncapsulation.None, }) export class MdGridList implements OnInit, AfterContentChecked { diff --git a/test/protractor.conf.js b/test/protractor.conf.js index 5a9c2c631008..c613290a021f 100644 --- a/test/protractor.conf.js +++ b/test/protractor.conf.js @@ -9,7 +9,6 @@ require('ts-node').register({ const E2E_BASE_URL = process.env['E2E_BASE_URL'] || 'http://localhost:4200'; const config = { - // TODO(jelbourn): add back plugin for a11y assersions once it supports specifying AXS options. useAllAngular2AppRoots: true, specs: [ path.join(__dirname, '../e2e/**/*.e2e.ts') ], baseUrl: E2E_BASE_URL, @@ -17,7 +16,20 @@ const config = { getPageTimeout: 120000, jasmineNodeOpts: { defaultTimeoutInterval: 120000, - } + }, + + plugins: [ + { + // Runs the axe-core accessibility checks each time the e2e page changes and + // Angular is ready. + path: '../tools/axe-protractor/axe-protractor.js', + + rules: [ + // Exclude md-menu elements because those are empty if not active. + { id: 'aria-required-children', selector: '*:not(md-menu)' }, + ] + } + ] }; if (process.env['TRAVIS']) { diff --git a/tools/axe-protractor/axe-protractor.js b/tools/axe-protractor/axe-protractor.js new file mode 100644 index 000000000000..ca18cc17c866 --- /dev/null +++ b/tools/axe-protractor/axe-protractor.js @@ -0,0 +1,48 @@ +'use strict'; + +/** + * Protractor Plugin to run axe-core accessibility audits after Angular bootstrapped. + */ + +const AxeBuilder = require('axe-webdriverjs'); +const {buildMessage} = require('./build-message'); + +/* List of pages which were already checked by axe-core and shouldn't run again */ +const checkedPages = []; + +/** + * Protractor plugin hook which always runs when Angular successfully bootstrapped. + */ +function onPageStable() { + AxeBuilder(browser.driver) + .configure(this.config || {}) + .analyze(results => handleResults(this, results)); +} + +/** + * Processes the axe-core results by reporting recognized violations + * to Protractor and printing them out. + * @param {!protractor.ProtractorPlugin} context + * @param {!axe.AxeResults} results + */ +function handleResults(context, results) { + + if (checkedPages.indexOf(results.url) === -1) { + + checkedPages.push(results.url); + + results.violations.forEach(violation => { + + let specName = `${violation.help} (${results.url})`; + let message = '\n' + buildMessage(violation); + + context.addFailure(message, {specName}); + + }); + + } + +} + +exports.name = 'protractor-axe'; +exports.onPageStable = onPageStable; diff --git a/tools/axe-protractor/build-message.js b/tools/axe-protractor/build-message.js new file mode 100644 index 000000000000..be07a9bb52d7 --- /dev/null +++ b/tools/axe-protractor/build-message.js @@ -0,0 +1,16 @@ +/** + * Builds a simple message of the violation results of axe-core by listing + * each violation and the associated element selector in a new line. + * @param {!axe.Violation} violation + */ +exports.buildMessage = violation => { + + let selectors = violation.nodes.map(node => { + return node.target.join(' '); + }); + + return selectors.reduce((content, selector) => { + return content + '- ' + selector + '\n'; + }, ''); + +}; \ No newline at end of file From 8f1c5a98f0942a92a396ec2a1cfbb7a5e8fd64db Mon Sep 17 00:00:00 2001 From: mmalerba Date: Tue, 13 Dec 2016 12:35:50 -0800 Subject: [PATCH 23/91] refactor(sidenav): Rename md-sidenav-layout to md-sidenav-container. (#2183) * refactor(sidenav): Rename md-sidenav-layout to md-sidenav-container. BREAKING CHANGE: md-sidenav-layout must be changed to md-sidenav-container. The API is otherwise unchanged. * leave -layout version around for now --- src/demo-app/demo-app/demo-app.html | 4 +-- src/demo-app/sidenav/sidenav-demo.html | 12 ++++---- src/demo-app/sidenav/sidenav-demo.scss | 2 +- src/lib/sidenav/README.md | 32 ++++++++++----------- src/lib/sidenav/_sidenav-theme.scss | 6 ++-- src/lib/sidenav/sidenav-container.html | 8 ++++++ src/lib/sidenav/sidenav.html | 9 ++---- src/lib/sidenav/sidenav.scss | 4 +-- src/lib/sidenav/sidenav.spec.ts | 40 +++++++++++++------------- src/lib/sidenav/sidenav.ts | 36 +++++++++++------------ 10 files changed, 78 insertions(+), 75 deletions(-) create mode 100644 src/lib/sidenav/sidenav-container.html diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html index 2e4991ea82e4..b48e4a1efab9 100644 --- a/src/demo-app/demo-app/demo-app.html +++ b/src/demo-app/demo-app/demo-app.html @@ -1,4 +1,4 @@ - + Angular Material 2 Demos - + diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html index 6f885ab72e77..aaeba9c88258 100644 --- a/src/demo-app/sidenav/sidenav-demo.html +++ b/src/demo-app/sidenav/sidenav-demo.html @@ -1,6 +1,6 @@

Basic Use Case

- + Start Side Drawer
@@ -34,11 +34,11 @@

My Content

- +

Sidenav Already Opened

- + Drawer @@ -46,15 +46,15 @@

Sidenav Already Opened

- +

Dynamic Alignment Sidenav

- + Drawer
- \ No newline at end of file + diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/demo-app/sidenav/sidenav-demo.scss index 92c7d2455dbc..9805892bd0db 100644 --- a/src/demo-app/sidenav/sidenav-demo.scss +++ b/src/demo-app/sidenav/sidenav-demo.scss @@ -1,4 +1,4 @@ -.demo-sidenav-layout { +.demo-sidenav-container { border: 3px solid black; .md-sidenav-focus-trap > .cdk-focus-trap-content { diff --git a/src/lib/sidenav/README.md b/src/lib/sidenav/README.md index 7194e991f864..3e7982ca70c1 100644 --- a/src/lib/sidenav/README.md +++ b/src/lib/sidenav/README.md @@ -1,13 +1,13 @@ # MdSidenav -MdSidenav is the side navigation component for Material 2. It is composed of two components; `` and ``. +MdSidenav is the side navigation component for Material 2. It is composed of two components: `` and ``. ## Screenshots -## `` +## `` The parent component. Contains the code necessary to coordinate one or two sidenav and the backdrop. @@ -19,8 +19,8 @@ The sidenav panel. | Name | Type | Description | | --- | --- | --- | -| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the layout will be considered invalid and none of the sidenavs will be visible or toggleable until the layout is valid again. | -| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. | +| `align` | `"start"|"end"` | The alignment of this sidenav. In LTR direction, `"start"` will be shown on the left, `"end"` on the right. In RTL, it is reversed. `"start"` is used by default. If there is more than 1 sidenav on either side the container will be considered invalid and none of the sidenavs will be visible or toggleable until the container is valid again. | +| `mode` | `"over"|"push"|"side"` | The mode or styling of the sidenav, default being `"over"`. With `"over"` the sidenav will appear above the content, and a backdrop will be shown. With `"push"` the sidenav will push the content of the `` to the side, and show a backdrop over it. `"side"` will resize the content and keep the sidenav opened. Clicking the backdrop will close sidenavs that do not have `mode="side"`. | | `opened` | `boolean` | Whether or not the sidenav is opened. Use this binding to open/close the sidenav. | ### Events @@ -58,7 +58,7 @@ Here's a simple example of using the sidenav: ```html - + Start Sidenav.
@@ -73,23 +73,23 @@ Here's a simple example of using the sidenav: - + ``` For a fullscreen sidenav, the recommended approach is set up the DOM such that the -`md-sidenav-layout` can naturally take up the full space: +`md-sidenav-container` can naturally take up the full space: ```html - + Drawer content
Main content
- + ``` ```css -html, body, material-app, md-sidenav-layout, .my-content { +html, body, material-app, md-sidenav-container, .my-content { margin: 0; width: 100%; height: 100%; @@ -101,7 +101,7 @@ outside of the scrollable region and absolutely position it. ```html - + - `, + `, }) class BasicTestApp { openStartCount: number = 0; @@ -456,30 +456,30 @@ class BasicTestApp { @Component({ template: ` - + Closed Sidenav. - `, + `, }) class SidenavSetToOpenedFalse { } @Component({ template: ` - + Closed Sidenav. - `, + `, }) class SidenavSetToOpenedTrue { } @Component({ template: ` - + - `, + `, }) class SidenavDynamicAlign { sidenav1Align = 'start'; @@ -488,12 +488,12 @@ class SidenavDynamicAlign { @Component({ template: ` - + link1 link2 - `, + `, }) class SidenavWitFocusableElements { mode: string = 'over'; diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index d433575b487e..a05bcd011fa3 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -47,10 +47,7 @@ export class MdSidenavToggleResult { moduleId: module.id, selector: 'md-sidenav, mat-sidenav', // TODO(mmalerba): move template to separate file. - template: ` - - - `, + templateUrl: 'sidenav.html', host: { '(transitionend)': '_onTransitionEnd($event)', '(keydown)': 'handleKeydown($event)', @@ -76,7 +73,7 @@ export class MdSidenav implements AfterContentInit { /** Alignment of the sidenav (direction neutral); whether 'start' or 'end'. */ private _align: 'start' | 'end' = 'start'; - /** Whether this md-sidenav is part of a valid md-sidenav-layout configuration. */ + /** Whether this md-sidenav is part of a valid md-sidenav-container configuration. */ get valid() { return this._valid; } @@ -299,25 +296,28 @@ export class MdSidenav implements AfterContentInit { } /** - * component. + * component. * * This is the parent component to one or two s that validates the state internally * and coordinates the backdrop and content styling. */ @Component({ moduleId: module.id, - selector: 'md-sidenav-layout, mat-sidenav-layout', + selector: 'md-sidenav-container, mat-sidenav-container, md-sidenav-layout, mat-sidenav-layout', // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav // changes its state. - templateUrl: 'sidenav.html', + templateUrl: 'sidenav-container.html', styleUrls: [ 'sidenav.css', 'sidenav-transitions.css', ], + host: { + 'class': 'md-sidenav-container', + }, encapsulation: ViewEncapsulation.None, }) -export class MdSidenavLayout implements AfterContentInit { +export class MdSidenavContainer implements AfterContentInit { @ContentChildren(MdSidenav) _sidenavs: QueryList; get start() { return this._start; } @@ -359,14 +359,14 @@ export class MdSidenavLayout implements AfterContentInit { } /** - * Subscribes to sidenav events in order to set a class on the main layout element when the - * sidenav is open and the backdrop is visible. This ensures any overflow on the layout element is - * properly hidden. + * Subscribes to sidenav events in order to set a class on the main container element when the + * sidenav is open and the backdrop is visible. This ensures any overflow on the container element + * is properly hidden. */ private _watchSidenavToggle(sidenav: MdSidenav): void { if (!sidenav || sidenav.mode === 'side') { return; } - sidenav.onOpen.subscribe(() => this._setLayoutClass(sidenav, true)); - sidenav.onClose.subscribe(() => this._setLayoutClass(sidenav, false)); + sidenav.onOpen.subscribe(() => this._setContainerClass(sidenav, true)); + sidenav.onClose.subscribe(() => this._setContainerClass(sidenav, false)); } /** @@ -378,8 +378,8 @@ export class MdSidenavLayout implements AfterContentInit { sidenav.onAlignChanged.subscribe(() => this._validateDrawers()); } - /** Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-layout' element. */ - private _setLayoutClass(sidenav: MdSidenav, bool: boolean): void { + /** Toggles the 'md-sidenav-opened' class on the main 'md-sidenav-container' element. */ + private _setContainerClass(sidenav: MdSidenav, bool: boolean): void { this._renderer.setElementClass(this._element.nativeElement, 'md-sidenav-opened', bool); } @@ -504,8 +504,8 @@ export class MdSidenavLayout implements AfterContentInit { @NgModule({ imports: [CommonModule, DefaultStyleCompatibilityModeModule, A11yModule], - exports: [MdSidenavLayout, MdSidenav, DefaultStyleCompatibilityModeModule], - declarations: [MdSidenavLayout, MdSidenav], + exports: [MdSidenavContainer, MdSidenav, DefaultStyleCompatibilityModeModule], + declarations: [MdSidenavContainer, MdSidenav], }) export class MdSidenavModule { static forRoot(): ModuleWithProviders { From 473752b9bf68ad4da1ca488b5aaedc77989c6f64 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Tue, 13 Dec 2016 13:00:23 -0800 Subject: [PATCH 24/91] chore: mark non-public APIs as @internal (#2100) * chore: mark non-public APIs as @internal * change @internal to @docs-private --- src/demo-app/tsconfig.json | 2 +- src/e2e-app/tsconfig.json | 2 +- src/lib/button-toggle/button-toggle.ts | 18 ++------- src/lib/checkbox/checkbox.ts | 19 ++-------- src/lib/core/animation/animation.ts | 12 +++--- src/lib/core/async/promise-completer.ts | 2 +- src/lib/core/errors/error.ts | 1 + src/lib/core/line/line.ts | 5 ++- src/lib/core/overlay/overlay-directives.ts | 1 - .../position/connected-position-strategy.ts | 2 +- .../position/global-position-strategy.ts | 2 +- .../core/overlay/position/viewport-ruler.ts | 2 +- src/lib/core/platform/platform.ts | 1 + src/lib/core/portal/portal-errors.ts | 30 ++++++++++++--- src/lib/core/projection/projection.ts | 4 +- src/lib/core/ripple/ripple-renderer.ts | 6 +-- src/lib/core/ripple/ripple.ts | 3 -- src/lib/dialog/dialog-container.ts | 1 + src/lib/grid-list/grid-list-errors.ts | 3 ++ src/lib/grid-list/grid-list-measure.ts | 4 +- src/lib/grid-list/grid-list.ts | 2 - src/lib/grid-list/tile-coordinator.ts | 7 +++- src/lib/grid-list/tile-styler.ts | 16 +++++--- src/lib/icon/icon-registry.ts | 11 +++++- src/lib/icon/icon.ts | 3 -- src/lib/input/input.ts | 21 ++--------- src/lib/list/list.ts | 1 - src/lib/menu/menu-directive.ts | 3 -- src/lib/menu/menu-errors.ts | 3 ++ src/lib/progress-circle/progress-circle.ts | 4 +- src/lib/radio/radio.ts | 24 ++---------- src/lib/slide-toggle/slide-toggle.ts | 23 ++---------- src/lib/slider/slider.ts | 37 +++++-------------- src/lib/tabs/tab-group.ts | 1 - src/lib/tsconfig-srcs.json | 2 +- src/lib/tsconfig.json | 2 +- tools/gulp/tsconfig.json | 2 +- 37 files changed, 117 insertions(+), 165 deletions(-) diff --git a/src/demo-app/tsconfig.json b/src/demo-app/tsconfig.json index fd28b81478f9..3a220f91e278 100644 --- a/src/demo-app/tsconfig.json +++ b/src/demo-app/tsconfig.json @@ -12,7 +12,7 @@ "outDir": "../../dist/", "sourceMap": true, "target": "es5", - "stripInternal": true, + "stripInternal": false, "baseUrl": "", "typeRoots": [ "../../node_modules/@types" diff --git a/src/e2e-app/tsconfig.json b/src/e2e-app/tsconfig.json index e6c34fe73258..678e1786cccc 100644 --- a/src/e2e-app/tsconfig.json +++ b/src/e2e-app/tsconfig.json @@ -12,7 +12,7 @@ "outDir": "../../dist/", "sourceMap": true, "target": "es5", - "stripInternal": true, + "stripInternal": false, "baseUrl": "", "typeRoots": [ "../../node_modules/@types", diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 73168904fb3f..a88b510f2e44 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -97,7 +97,6 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor @ContentChildren(forwardRef(() => MdButtonToggle)) _buttonToggles: QueryList = null; - /** TODO: internal */ ngAfterViewInit() { this._isInitialized = true; } @@ -199,26 +198,17 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor this._change.emit(event); } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ writeValue(value: any) { this.value = value; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnChange(fn: (value: any) => void) { this._controlValueAccessorChangeFn = fn; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnTouched(fn: any) { this.onTouched = fn; } @@ -423,9 +413,7 @@ export class MdButtonToggle implements OnInit { this._emitChangeEvent(); } - /** TODO: internal */ _onInputClick(event: Event) { - // We have to stop propagation for click events on the visual hidden input element. // By default, when a user clicks on a label element, a generated click event will be // dispatched on the associated input element. Since we are using a label element as our diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 406e61d8c1af..4d440785709f 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -231,33 +231,22 @@ export class MdCheckbox implements ControlValueAccessor { return this.disableRipple || this.disabled; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ writeValue(value: any) { this.checked = !!value; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnChange(fn: (value: any) => void) { this._controlValueAccessorChangeFn = fn; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnTouched(fn: any) { this.onTouched = fn; } - /** - * Implemented as a part of ControlValueAccessor. - */ + /** Implemented as a part of ControlValueAccessor. */ setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; } diff --git a/src/lib/core/animation/animation.ts b/src/lib/core/animation/animation.ts index f54cf037638c..5f98f2692a4b 100644 --- a/src/lib/core/animation/animation.ts +++ b/src/lib/core/animation/animation.ts @@ -1,13 +1,15 @@ +/** @docs-private */ export class AnimationCurves { static STANDARD_CURVE = 'cubic-bezier(0.4,0.0,0.2,1)'; static DECELERATION_CURVE = 'cubic-bezier(0.0,0.0,0.2,1)'; static ACCELERATION_CURVE = 'cubic-bezier(0.4,0.0,1,1)'; static SHARP_CURVE = 'cubic-bezier(0.4,0.0,0.6,1)'; -}; +} +/** @docs-private */ export class AnimationDurations { - static COMPLEX = '375ms'; - static ENTERING = '225ms'; - static EXITING = '195ms'; - }; + static COMPLEX = '375ms'; + static ENTERING = '225ms'; + static EXITING = '195ms'; +} diff --git a/src/lib/core/async/promise-completer.ts b/src/lib/core/async/promise-completer.ts index c205601e8433..093d8cfd0b49 100644 --- a/src/lib/core/async/promise-completer.ts +++ b/src/lib/core/async/promise-completer.ts @@ -1,4 +1,4 @@ - +/** @docs-private */ export class PromiseCompleter { promise: Promise; resolve: (value?: R | PromiseLike) => void; diff --git a/src/lib/core/errors/error.ts b/src/lib/core/errors/error.ts index 148a4745d38c..3d05518b8b95 100644 --- a/src/lib/core/errors/error.ts +++ b/src/lib/core/errors/error.ts @@ -2,6 +2,7 @@ /** * Wrapper around Error that sets the error message. + * @docs-private */ export class MdError extends Error { constructor(value: string) { diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts index 234a0cbda217..3ac6e7fbcbd9 100644 --- a/src/lib/core/line/line.ts +++ b/src/lib/core/line/line.ts @@ -16,7 +16,10 @@ import {DefaultStyleCompatibilityModeModule} from '../compatibility/default-mode @Directive({ selector: '[md-line], [mat-line]' }) export class MdLine {} -/* Helper that takes a query list of lines and sets the correct class on the host */ +/** + * Helper that takes a query list of lines and sets the correct class on the host. + * @docs-private + */ export class MdLineSetter { constructor(private _lines: QueryList, private _renderer: Renderer, private _element: ElementRef) { diff --git a/src/lib/core/overlay/overlay-directives.ts b/src/lib/core/overlay/overlay-directives.ts index 10e18d06652c..10611389e3a6 100644 --- a/src/lib/core/overlay/overlay-directives.ts +++ b/src/lib/core/overlay/overlay-directives.ts @@ -160,7 +160,6 @@ export class ConnectedOverlayDirective implements OnDestroy { return this._dir ? this._dir.value : 'ltr'; } - /** TODO: internal */ ngOnDestroy() { this._destroyOverlay(); } diff --git a/src/lib/core/overlay/position/connected-position-strategy.ts b/src/lib/core/overlay/position/connected-position-strategy.ts index b88098021d17..4f8ff5715870 100644 --- a/src/lib/core/overlay/position/connected-position-strategy.ts +++ b/src/lib/core/overlay/position/connected-position-strategy.ts @@ -66,7 +66,7 @@ export class ConnectedPositionStrategy implements PositionStrategy { /** * Updates the position of the overlay element, using whichever preferred position relative * to the origin fits on-screen. - * TODO: internal + * @docs-private */ apply(element: HTMLElement): Promise { // We need the bounding rects for the origin and the overlay to determine how to position diff --git a/src/lib/core/overlay/position/global-position-strategy.ts b/src/lib/core/overlay/position/global-position-strategy.ts index 461b56941c20..23a9ec40a48a 100644 --- a/src/lib/core/overlay/position/global-position-strategy.ts +++ b/src/lib/core/overlay/position/global-position-strategy.ts @@ -101,7 +101,7 @@ export class GlobalPositionStrategy implements PositionStrategy { /** * Apply the position to the element. - * TODO: internal + * @docs-private */ apply(element: HTMLElement): Promise { if (!this._wrapper) { diff --git a/src/lib/core/overlay/position/viewport-ruler.ts b/src/lib/core/overlay/position/viewport-ruler.ts index c0c83fd3cd72..b4f3c82a5310 100644 --- a/src/lib/core/overlay/position/viewport-ruler.ts +++ b/src/lib/core/overlay/position/viewport-ruler.ts @@ -4,7 +4,7 @@ import {Injectable} from '@angular/core'; /** * Simple utility for getting the bounds of the browser viewport. - * TODO: internal + * @docs-private */ @Injectable() export class ViewportRuler { diff --git a/src/lib/core/platform/platform.ts b/src/lib/core/platform/platform.ts index 3b2e655c7d13..ade29058e1de 100644 --- a/src/lib/core/platform/platform.ts +++ b/src/lib/core/platform/platform.ts @@ -9,6 +9,7 @@ const hasV8BreakIterator = (window.Intl && (window.Intl as any).v8BreakIterator) /** * Service to detect the current platform by comparing the userAgent strings and * checking browser-specific global properties. + * @docs-private */ @Injectable() export class MdPlatform { diff --git a/src/lib/core/portal/portal-errors.ts b/src/lib/core/portal/portal-errors.ts index e5617fc4fc4e..f3f2e17aef6f 100644 --- a/src/lib/core/portal/portal-errors.ts +++ b/src/lib/core/portal/portal-errors.ts @@ -1,27 +1,39 @@ import {MdError} from '../errors/error'; -/** Exception thrown when attempting to attach a null portal to a host. */ +/** + * Exception thrown when attempting to attach a null portal to a host. + * @docs-private + */ export class MdNullPortalError extends MdError { constructor() { super('Must provide a portal to attach'); } } -/** Exception thrown when attempting to attach a portal to a host that is already attached. */ +/** + * Exception thrown when attempting to attach a portal to a host that is already attached. + * @docs-private + */ export class MdPortalAlreadyAttachedError extends MdError { constructor() { super('Host already has a portal attached'); } } -/** Exception thrown when attempting to attach a portal to an already-disposed host. */ +/** + * Exception thrown when attempting to attach a portal to an already-disposed host. + * @docs-private + */ export class MdPortalHostAlreadyDisposedError extends MdError { constructor() { super('This PortalHost has already been disposed'); } } -/** Exception thrown when attempting to attach an unknown portal type. */ +/** + * Exception thrown when attempting to attach an unknown portal type. + * @docs-private + */ export class MdUnknownPortalTypeError extends MdError { constructor() { super( @@ -30,14 +42,20 @@ export class MdUnknownPortalTypeError extends MdError { } } -/** Exception thrown when attempting to attach a portal to a null host. */ +/** + * Exception thrown when attempting to attach a portal to a null host. + * @docs-private + */ export class MdNullPortalHostError extends MdError { constructor() { super('Attempting to attach a portal to a null PortalHost'); } } -/** Exception thrown when attempting to detach a portal that is not attached. */ +/** + * Exception thrown when attempting to detach a portal that is not attached. + * @docs-private + */ export class MdNoPortalAttachedError extends MdError { constructor() { super('Attempting to detach a portal that is not attached to a host'); diff --git a/src/lib/core/projection/projection.ts b/src/lib/core/projection/projection.ts index e6616d88be6c..4d05b22d6836 100644 --- a/src/lib/core/projection/projection.ts +++ b/src/lib/core/projection/projection.ts @@ -7,7 +7,7 @@ function _replaceWith(toReplaceEl: HTMLElement, otherEl: HTMLElement) { toReplaceEl.parentElement.replaceChild(otherEl, toReplaceEl); } - +/** @docs-private */ @Directive({ selector: 'dom-projection-host' }) @@ -16,6 +16,7 @@ export class DomProjectionHost { } +/** @docs-private */ @Injectable() export class DomProjection { /** @@ -73,6 +74,7 @@ export class DomProjection { } +/** @docs-private */ @NgModule({ exports: [DomProjectionHost], declarations: [DomProjectionHost], diff --git a/src/lib/core/ripple/ripple-renderer.ts b/src/lib/core/ripple/ripple-renderer.ts index 9ebd7f582907..f74a89a3868d 100644 --- a/src/lib/core/ripple/ripple-renderer.ts +++ b/src/lib/core/ripple/ripple-renderer.ts @@ -3,7 +3,7 @@ import { NgZone, } from '@angular/core'; -/** TODO: internal */ +/** @docs-private */ export enum ForegroundRippleState { NEW, EXPANDING, @@ -12,7 +12,7 @@ export enum ForegroundRippleState { /** * Wrapper for a foreground ripple DOM element and its animation state. - * TODO: internal + * @docs-private */ export class ForegroundRipple { state = ForegroundRippleState.NEW; @@ -37,7 +37,7 @@ const distanceToFurthestCorner = (x: number, y: number, rect: ClientRect) => { * The constructor takes a reference to the ripple directive's host element and a map of DOM * event handlers to be installed on the element that triggers ripple animations. * This will eventually become a custom renderer once Angular support exists. - * TODO: internal + * @docs-private */ export class RippleRenderer { private _backgroundDiv: HTMLElement; diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 0e340c029028..d542f3522c85 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -75,7 +75,6 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges { this._ruler = _ruler; } - /** TODO: internal */ ngOnInit() { // If no trigger element was explicity set, use the host element if (!this.trigger) { @@ -86,13 +85,11 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges { } } - /** TODO: internal */ ngOnDestroy() { // Remove event listeners on the trigger element. this._rippleRenderer.clearTriggerElement(); } - /** TODO: internal */ ngOnChanges(changes: { [propertyName: string]: SimpleChange }) { // If the trigger element changed (or is being initially set), add event listeners to it. const changedInputs = Object.keys(changes); diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index aaaffb98436f..39a2db89cc50 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -16,6 +16,7 @@ import 'rxjs/add/operator/first'; /** * Internal component that wraps user-provided dialog content. + * @docs-private */ @Component({ moduleId: module.id, diff --git a/src/lib/grid-list/grid-list-errors.ts b/src/lib/grid-list/grid-list-errors.ts index 5a48520c5479..9f8b955da30b 100644 --- a/src/lib/grid-list/grid-list-errors.ts +++ b/src/lib/grid-list/grid-list-errors.ts @@ -2,6 +2,7 @@ import {MdError} from '../core'; /** * Exception thrown when cols property is missing from grid-list + * @docs-private */ export class MdGridListColsError extends MdError { constructor() { @@ -11,6 +12,7 @@ export class MdGridListColsError extends MdError { /** * Exception thrown when a tile's colspan is longer than the number of cols in list + * @docs-private */ export class MdGridTileTooWideError extends MdError { constructor(cols: number, listLength: number) { @@ -20,6 +22,7 @@ export class MdGridTileTooWideError extends MdError { /** * Exception thrown when an invalid ratio is passed in as a rowHeight + * @docs-private */ export class MdGridListBadRatioError extends MdError { constructor(value: string) { diff --git a/src/lib/grid-list/grid-list-measure.ts b/src/lib/grid-list/grid-list-measure.ts index 4244cc8c4556..e6662469ed98 100644 --- a/src/lib/grid-list/grid-list-measure.ts +++ b/src/lib/grid-list/grid-list-measure.ts @@ -1,7 +1,7 @@ /** * Converts values into strings. Falsy values become empty strings. - * TODO: internal + * @docs-private */ export function coerceToString(value: string | number): string { return `${value || ''}`; @@ -9,7 +9,7 @@ export function coerceToString(value: string | number): string { /** * Converts a value that might be a string into a number. - * TODO: internal + * @docs-private */ export function coerceToNumber(value: string | number): number { return typeof value === 'string' ? parseInt(value, 10) : value; diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index 2fb9208d1623..34d6bc9d6f55 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -90,7 +90,6 @@ export class MdGridList implements OnInit, AfterContentChecked { this._setTileStyler(); } - /** TODO: internal */ ngOnInit() { this._checkCols(); this._checkRowHeight(); @@ -99,7 +98,6 @@ export class MdGridList implements OnInit, AfterContentChecked { /** * The layout calculation is fairly cheap if nothing changes, so there's little cost * to run it frequently. - * TODO: internal */ ngAfterContentChecked() { this._layoutTiles(); diff --git a/src/lib/grid-list/tile-coordinator.ts b/src/lib/grid-list/tile-coordinator.ts index d872995b26dc..9e3850c6dc05 100644 --- a/src/lib/grid-list/tile-coordinator.ts +++ b/src/lib/grid-list/tile-coordinator.ts @@ -15,6 +15,8 @@ import {MdGridTileTooWideError} from './grid-list-errors'; * column are already occupied; zero indicates an empty cell. Moving "down" to the next row * decrements each value in the tracking array (indicating that the column is one cell closer to * being free). + * + * @docs-private */ export class TileCoordinator { /** Tracking array (see class description). */ @@ -134,7 +136,10 @@ export class TileCoordinator { } } -/** Simple data structure for tile position (row, col). */ +/** + * Simple data structure for tile position (row, col). + * @docs-private + */ export class TilePosition { constructor(public row: number, public col: number) {} } diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index fea5c1494dd8..57f59a9f3358 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -5,7 +5,7 @@ import {MdGridListBadRatioError} from './grid-list-errors'; /** * Sets the style properties for an individual tile, given the position calculated by the * Tile Coordinator. - * TODO: internal + * @docs-private */ export class TileStyler { _gutterSize: string; @@ -120,7 +120,7 @@ export class TileStyler { /** * This type of styler is instantiated when the user passes in a fixed row height. * Example - * TODO: internal + * @docs-private */ export class FixedTileStyler extends TileStyler { @@ -148,7 +148,7 @@ export class FixedTileStyler extends TileStyler { /** * This type of styler is instantiated when the user passes in a width:height ratio * for the row height. Example - * TODO: internal + * @docs-private */ export class RatioTileStyler extends TileStyler { @@ -190,9 +190,13 @@ export class RatioTileStyler extends TileStyler { } } -/* This type of styler is instantiated when the user selects a "fit" row height mode. - * In other words, the row height will reflect the total height of the container divided - * by the number of rows. Example */ +/** + * This type of styler is instantiated when the user selects a "fit" row height mode. + * In other words, the row height will reflect the total height of the container divided + * by the number of rows. Example + * + * @docs-private + */ export class FitTileStyler extends TileStyler { setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, diff --git a/src/lib/icon/icon-registry.ts b/src/lib/icon/icon-registry.ts index 44e03c31cb2b..dcabdabcd3d7 100644 --- a/src/lib/icon/icon-registry.ts +++ b/src/lib/icon/icon-registry.ts @@ -12,7 +12,10 @@ import 'rxjs/add/operator/finally'; import 'rxjs/add/operator/catch'; -/** Exception thrown when attempting to load an icon with a name that cannot be found. */ +/** + * Exception thrown when attempting to load an icon with a name that cannot be found. + * @docs-private + */ export class MdIconNameNotFoundError extends MdError { constructor(iconName: string) { super(`Unable to find icon with the name "${iconName}"`); @@ -22,6 +25,7 @@ export class MdIconNameNotFoundError extends MdError { /** * Exception thrown when attempting to load SVG content that does not contain the expected * tag. + * @docs-private */ export class MdIconSvgTagNotFoundError extends MdError { constructor() { @@ -29,7 +33,10 @@ export class MdIconSvgTagNotFoundError extends MdError { } } -/** Configuration for an icon, including the URL and possibly the cached SVG element. */ +/** + * Configuration for an icon, including the URL and possibly the cached SVG element. + * @docs-private + */ class SvgIconConfig { svgElement: SVGElement = null; constructor(public url: string) { } diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index 25a486e8bbe8..7a933a1c8284 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -137,7 +137,6 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { } } - /** TODO: internal */ ngOnChanges(changes: { [propertyName: string]: SimpleChange }) { const changedInputs = Object.keys(changes); // Only update the inline SVG icon if the inputs changed, to avoid unnecessary DOM operations. @@ -159,7 +158,6 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { this._updateAriaLabel(); } - /** TODO: internal */ ngOnInit() { // Update font classes because ngOnChanges won't be called if none of the inputs are present, // e.g. arrow. In this case we need to add a CSS class for the default font. @@ -168,7 +166,6 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { } } - /** TODO: internal */ ngAfterViewChecked() { // Update aria label here because it may depend on the projected text content. // (e.g. home should use 'home'). diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index c6c5735d499a..c62efae0393b 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -247,38 +247,26 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange return !!this.placeholder || this._placeholderChild != null; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ writeValue(value: any) { this._value = value; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnChange(fn: any) { this._onChangeCallback = fn; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnTouched(fn: any) { this._onTouchedCallback = fn; } - /** - * Implemented as a part of ControlValueAccessor. - */ + /** Implemented as a part of ControlValueAccessor. */ setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; } - /** TODO: internal */ ngAfterContentInit() { this._validateConstraints(); @@ -288,7 +276,6 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange }); } - /** TODO: internal */ ngOnChanges(changes: {[key: string]: SimpleChange}) { this._validateConstraints(); } diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 997f3e531b94..38abb30f6ec1 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -57,7 +57,6 @@ export class MdListItem implements AfterContentInit { constructor(private _renderer: Renderer, private _element: ElementRef) {} - /** TODO: internal */ ngAfterContentInit() { this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element); } diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index a1c82da373c4..7e32307557a4 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -57,7 +57,6 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { this.setPositionClasses(this.positionX, this.positionY); } - // TODO: internal ngAfterContentInit() { this._keyManager = new ListKeyManager(this.items).withFocusWrap(); this._tabSubscription = this._keyManager.tabOut.subscribe(() => { @@ -65,7 +64,6 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { }); } - // TODO: internal ngOnDestroy() { this._tabSubscription.unsubscribe(); } @@ -91,7 +89,6 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { /** * Focus the first item in the menu. This method is used by the menu trigger * to focus the first item when the menu is opened by the ENTER key. - * TODO: internal */ focusFirstItem() { this._keyManager.focusFirstItem(); diff --git a/src/lib/menu/menu-errors.ts b/src/lib/menu/menu-errors.ts index 5d3bb1d56c0b..ae634699a661 100644 --- a/src/lib/menu/menu-errors.ts +++ b/src/lib/menu/menu-errors.ts @@ -2,6 +2,7 @@ import {MdError} from '../core'; /** * Exception thrown when menu trigger doesn't have a valid md-menu instance + * @docs-private */ export class MdMenuMissingError extends MdError { constructor() { @@ -17,6 +18,7 @@ export class MdMenuMissingError extends MdError { /** * Exception thrown when menu's x-position value isn't valid. * In other words, it doesn't match 'before' or 'after'. + * @docs-private */ export class MdMenuInvalidPositionX extends MdError { constructor() { @@ -29,6 +31,7 @@ export class MdMenuInvalidPositionX extends MdError { /** * Exception thrown when menu's y-position value isn't valid. * In other words, it doesn't match 'above' or 'below'. + * @docs-private */ export class MdMenuInvalidPositionY extends MdError { constructor() { diff --git a/src/lib/progress-circle/progress-circle.ts b/src/lib/progress-circle/progress-circle.ts index 2152cc23e371..2f63d35586b3 100644 --- a/src/lib/progress-circle/progress-circle.ts +++ b/src/lib/progress-circle/progress-circle.ts @@ -72,11 +72,11 @@ export class MdProgressCircle implements OnDestroy { return this.mode == 'determinate' ? 100 : null; } - /** TODO: internal */ + /** @docs-private */ get interdeterminateInterval() { return this._interdeterminateInterval; } - /** TODO: internal */ + /** @docs-private */ set interdeterminateInterval(interval: number) { clearInterval(this._interdeterminateInterval); this._interdeterminateInterval = interval; diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 0b3d901dca5f..5b16ec5cf987 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -155,7 +155,6 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { /** * Initialize properties once content children are available. * This allows us to propagate relevant attributes to associated buttons. - * TODO: internal */ ngAfterContentInit() { // Mark this component as initialized in AfterContentInit because the initial value can @@ -208,33 +207,22 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { } } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ writeValue(value: any) { this.value = value; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnChange(fn: (value: any) => void) { this._controlValueAccessorChangeFn = fn; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnTouched(fn: any) { this.onTouched = fn; } - /** - * Implemented as a part of ControlValueAccessor. - */ + /** Implemented as a part of ControlValueAccessor. */ setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; } @@ -383,7 +371,6 @@ export class MdRadioButton implements OnInit { this._disabled = (value != null && value !== false) ? true : null; } - /** TODO: internal */ ngOnInit() { if (this.radioGroup) { // If the radio is inside a radio group, determine if it should be checked @@ -419,7 +406,6 @@ export class MdRadioButton implements OnInit { this._onInputFocus(); } - /** TODO: internal */ _onInputBlur() { this._isFocused = false; @@ -428,7 +414,6 @@ export class MdRadioButton implements OnInit { } } - /** TODO: internal */ _onInputClick(event: Event) { // We have to stop propagation for click events on the visual hidden input element. // By default, when a user clicks on a label element, a generated click event will be @@ -443,7 +428,6 @@ export class MdRadioButton implements OnInit { /** * Triggered when the radio button received a click or the input recognized any change. * Clicking on a label element, will trigger a change event on the associated input. - * TODO: internal */ _onInputChange(event: Event) { // We always have to stop propagation on the change event. diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index b827e2bd9c82..268330adc730 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -96,7 +96,6 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor { constructor(private _elementRef: ElementRef, private _renderer: Renderer) {} - /** TODO: internal */ ngAfterContentInit() { this._slideRenderer = new SlideToggleRenderer(this._elementRef); } @@ -158,33 +157,22 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor { this.onTouched(); } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ writeValue(value: any): void { this.checked = value; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnChange(fn: any): void { this.onChange = fn; } - /** - * Implemented as part of ControlValueAccessor. - * TODO: internal - */ + /** Implemented as part of ControlValueAccessor. */ registerOnTouched(fn: any): void { this.onTouched = fn; } - /** - * Implemented as a part of ControlValueAccessor. - */ + /** Implemented as a part of ControlValueAccessor. */ setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } @@ -240,21 +228,18 @@ export class MdSlideToggle implements AfterContentInit, ControlValueAccessor { } - /** TODO: internal */ _onDragStart() { if (!this.disabled) { this._slideRenderer.startThumbDrag(this.checked); } } - /** TODO: internal */ _onDrag(event: HammerInput) { if (this._slideRenderer.isDragging()) { this._slideRenderer.updateThumbPosition(event.deltaX); } } - /** TODO: internal */ _onDragEnd() { if (!this._slideRenderer.isDragging()) { return; diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index ef72dbd47c82..5be17ccd817a 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -399,9 +399,7 @@ export class MdSlider implements ControlValueAccessor { this.value = this._clamp(this.value + this.step * numSteps, this.min, this.max); } - /** - * Calculate the new value from the new physical location. The value will always be snapped. - */ + /** Calculate the new value from the new physical location. The value will always be snapped. */ private _updateValueFromPosition(pos: {x: number, y: number}) { if (!this._sliderDimensions) { return; @@ -437,9 +435,7 @@ export class MdSlider implements ControlValueAccessor { } } - /** - * Updates the amount of space between ticks as a percentage of the width of the slider. - */ + /** Updates the amount of space between ticks as a percentage of the width of the slider. */ private _updateTickIntervalPercent() { if (!this.tickInterval) { return; @@ -456,51 +452,37 @@ export class MdSlider implements ControlValueAccessor { } } - /** - * Calculates the percentage of the slider that a value is. - */ + /** Calculates the percentage of the slider that a value is. */ private _calculatePercentage(value: number) { return (value - this.min) / (this.max - this.min); } - /** - * Calculates the value a percentage of the slider corresponds to. - */ + /** Calculates the value a percentage of the slider corresponds to. */ private _calculateValue(percentage: number) { return this.min + percentage * (this.max - this.min); } - /** - * Return a number between two numbers. - */ + /** Return a number between two numbers. */ private _clamp(value: number, min = 0, max = 1) { return Math.max(min, Math.min(value, max)); } - /** - * Implemented as part of ControlValueAccessor. - */ + /** Implemented as part of ControlValueAccessor. */ writeValue(value: any) { this.value = value; } - /** - * Implemented as part of ControlValueAccessor. - */ + /** Implemented as part of ControlValueAccessor. */ registerOnChange(fn: (value: any) => void) { this._controlValueAccessorChangeFn = fn; } - /** - * Implemented as part of ControlValueAccessor. - */ + /** Implemented as part of ControlValueAccessor. */ registerOnTouched(fn: any) { this.onTouched = fn; } - /** - * Implemented as part of ControlValueAccessor. - */ + /** Implemented as part of ControlValueAccessor. */ setDisabledState(isDisabled: boolean) { this.disabled = isDisabled; } @@ -508,6 +490,7 @@ export class MdSlider implements ControlValueAccessor { /** * Renderer class in order to keep all dom manipulation in one place and outside of the main class. + * @docs-private */ export class SliderRenderer { private _sliderElement: HTMLElement; diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 9bcb12f78a2d..0f46849eeb90 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -134,7 +134,6 @@ export class MdTabGroup { /** * Waits one frame for the view to update, then updates the ink bar * Note: This must be run outside of the zone or it will create an infinite change detection loop - * TODO: internal */ ngAfterViewChecked(): void { this._isInitialized = true; diff --git a/src/lib/tsconfig-srcs.json b/src/lib/tsconfig-srcs.json index 126d417299d2..948f8c15377e 100644 --- a/src/lib/tsconfig-srcs.json +++ b/src/lib/tsconfig-srcs.json @@ -14,7 +14,7 @@ "sourceMap": true, "target": "es5", "inlineSources": true, - "stripInternal": true, + "stripInternal": false, "typeRoots": [ "../../node_modules/@types" ], diff --git a/src/lib/tsconfig.json b/src/lib/tsconfig.json index 0d25173aaf70..11887156a4cc 100644 --- a/src/lib/tsconfig.json +++ b/src/lib/tsconfig.json @@ -14,7 +14,7 @@ "sourceMap": true, "target": "es5", "inlineSources": true, - "stripInternal": true, + "stripInternal": false, "baseUrl": "", "paths": { }, diff --git a/tools/gulp/tsconfig.json b/tools/gulp/tsconfig.json index da9bae7df2c4..5a09195713a2 100644 --- a/tools/gulp/tsconfig.json +++ b/tools/gulp/tsconfig.json @@ -13,7 +13,7 @@ "sourceMap": true, "target": "es5", "inlineSources": true, - "stripInternal": true, + "stripInternal": false, "baseUrl": "", "typeRoots": [ "../../node_modules/@types" From a7c88c5285c6445b6060164552631dc84c332eeb Mon Sep 17 00:00:00 2001 From: Kara Date: Wed, 14 Dec 2016 05:02:37 +0800 Subject: [PATCH 25/91] fix(select): make invalid selector more specific (#2166) --- src/lib/select/_select-theme.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss index 3cb9960f4f9e..43a046737cca 100644 --- a/src/lib/select/_select-theme.scss +++ b/src/lib/select/_select-theme.scss @@ -16,7 +16,7 @@ border-bottom: 1px solid md-color($primary); } - .ng-invalid.ng-touched:not(.md-select-disabled) & { + md-select.ng-invalid.ng-touched:not(.md-select-disabled) & { color: md-color($warn); border-bottom: 1px solid md-color($warn); } @@ -29,7 +29,7 @@ color: md-color($primary); } - .ng-invalid.ng-touched:not(.md-select-disabled) & { + md-select.ng-invalid.ng-touched:not(.md-select-disabled) & { color: md-color($warn); } } From 2e676fc3b46bb5d429b5105d21a383f57acae2e3 Mon Sep 17 00:00:00 2001 From: Leo Rudberg Date: Tue, 13 Dec 2016 16:14:18 -0500 Subject: [PATCH 26/91] chore(portal-demo): fixed typo in example (#2202) * Fixed typo in portal-demo.html * Fixed typo in portal-demo.html --- src/demo-app/portal/portal-demo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/demo-app/portal/portal-demo.html b/src/demo-app/portal/portal-demo.html index 9918460f0d2d..bb5e97f16309 100644 --- a/src/demo-app/portal/portal-demo.html +++ b/src/demo-app/portal/portal-demo.html @@ -27,5 +27,5 @@

The portal host is here:

- Did you hear about this year's Fibonacci Conference?

-

- It's going to be as the last two put together.

+

- It's going to be as big as the last two put together.

From e84bcedf49ec318b6b18f47cb7340783e21f5d68 Mon Sep 17 00:00:00 2001 From: Leo Rudberg Date: Tue, 13 Dec 2016 16:14:51 -0500 Subject: [PATCH 27/91] chore(input-demo): change `maxLength` to `maxlength` (#2204) `maxLength` does not seem to be supported anymore. See here: https://github.com/angular/material2/blob/master/src/lib/input/input.ts#L140 --- src/demo-app/input/input-demo.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index dd864a07f61b..cd4b7fe8e0a0 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -15,8 +15,8 @@

- - +
{{postalCode.characterCount}} / 5 @@ -57,7 +57,7 @@

Textarea

Input

- {{characterCountHintExample.characterCount}} / 100 @@ -66,7 +66,7 @@

Input

Textarea

- {{characterCountHintExampleTextarea.characterCount}} / 100 @@ -89,7 +89,7 @@

Textarea

- {{input.characterCount}} / 100 From bb1f00629b4621b4abaedc5f5f1414950f417fdc Mon Sep 17 00:00:00 2001 From: Elad Bezalel Date: Wed, 14 Dec 2016 03:55:37 +0200 Subject: [PATCH 28/91] chore: correct coersion to coercion (#2160) --- src/lib/checkbox/checkbox.ts | 2 +- src/lib/core/a11y/focus-trap.ts | 2 +- src/lib/core/{coersion => coercion}/boolean-property.spec.ts | 0 src/lib/core/{coersion => coercion}/boolean-property.ts | 0 src/lib/core/{coersion => coercion}/number-property.spec.ts | 0 src/lib/core/{coersion => coercion}/number-property.ts | 0 src/lib/core/core.ts | 4 ++-- src/lib/radio/radio.ts | 2 +- src/lib/select/option.ts | 2 +- src/lib/select/select.ts | 2 +- src/lib/tabs/tab-label-wrapper.ts | 2 +- src/lib/tabs/tab.ts | 2 +- 12 files changed, 9 insertions(+), 9 deletions(-) rename src/lib/core/{coersion => coercion}/boolean-property.spec.ts (100%) rename src/lib/core/{coersion => coercion}/boolean-property.ts (100%) rename src/lib/core/{coersion => coercion}/number-property.spec.ts (100%) rename src/lib/core/{coersion => coercion}/number-property.ts (100%) diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 4d440785709f..89d8d01b36ac 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -15,7 +15,7 @@ import { } from '@angular/core'; import {CommonModule} from '@angular/common'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; import {MdRippleModule, DefaultStyleCompatibilityModeModule} from '../core'; import {ViewportRuler} from '../core/overlay/position/viewport-ruler'; diff --git a/src/lib/core/a11y/focus-trap.ts b/src/lib/core/a11y/focus-trap.ts index bda63179dcbe..cc52a1a8fcf8 100644 --- a/src/lib/core/a11y/focus-trap.ts +++ b/src/lib/core/a11y/focus-trap.ts @@ -1,6 +1,6 @@ import {Component, ViewEncapsulation, ViewChild, ElementRef, Input, NgZone} from '@angular/core'; import {InteractivityChecker} from './interactivity-checker'; -import {coerceBooleanProperty} from '../coersion/boolean-property'; +import {coerceBooleanProperty} from '../coercion/boolean-property'; /** diff --git a/src/lib/core/coersion/boolean-property.spec.ts b/src/lib/core/coercion/boolean-property.spec.ts similarity index 100% rename from src/lib/core/coersion/boolean-property.spec.ts rename to src/lib/core/coercion/boolean-property.spec.ts diff --git a/src/lib/core/coersion/boolean-property.ts b/src/lib/core/coercion/boolean-property.ts similarity index 100% rename from src/lib/core/coersion/boolean-property.ts rename to src/lib/core/coercion/boolean-property.ts diff --git a/src/lib/core/coersion/number-property.spec.ts b/src/lib/core/coercion/number-property.spec.ts similarity index 100% rename from src/lib/core/coersion/number-property.spec.ts rename to src/lib/core/coercion/number-property.spec.ts diff --git a/src/lib/core/coersion/number-property.ts b/src/lib/core/coercion/number-property.ts similarity index 100% rename from src/lib/core/coersion/number-property.ts rename to src/lib/core/coercion/number-property.ts diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index 0791f8842195..0cda89a4ccc4 100644 --- a/src/lib/core/core.ts +++ b/src/lib/core/core.ts @@ -90,8 +90,8 @@ export * from './compatibility/default-mode'; export * from './animation/animation'; // Coersion -export {coerceBooleanProperty} from './coersion/boolean-property'; -export {coerceNumberProperty} from './coersion/number-property'; +export {coerceBooleanProperty} from './coercion/boolean-property'; +export {coerceNumberProperty} from './coercion/number-property'; // Compatibility export {DefaultStyleCompatibilityModeModule} from './compatibility/default-mode'; diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 5b16ec5cf987..f455a24f6b3a 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -25,7 +25,7 @@ import { MdUniqueSelectionDispatcher, DefaultStyleCompatibilityModeModule, } from '../core'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; import {ViewportRuler} from '../core/overlay/position/viewport-ruler'; diff --git a/src/lib/select/option.ts b/src/lib/select/option.ts index f45f6da0fc57..7fb475b1f490 100644 --- a/src/lib/select/option.ts +++ b/src/lib/select/option.ts @@ -8,7 +8,7 @@ import { ViewEncapsulation } from '@angular/core'; import {ENTER, SPACE} from '../core/keyboard/keycodes'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; /** * Option IDs need to be unique across components, so this counter exists outside of diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index e4b2eb936a4c..520df0bbf059 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -20,7 +20,7 @@ import {Dir} from '../core/rtl/dir'; import {Subscription} from 'rxjs/Subscription'; import {transformPlaceholder, transformPanel, fadeInContent} from './select-animations'; import {ControlValueAccessor, NgControl} from '@angular/forms'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; import {ConnectedOverlayDirective} from '../core/overlay/overlay-directives'; import {ViewportRuler} from '../core/overlay/position/viewport-ruler'; diff --git a/src/lib/tabs/tab-label-wrapper.ts b/src/lib/tabs/tab-label-wrapper.ts index 3177939a077d..8c1cbdf50b81 100644 --- a/src/lib/tabs/tab-label-wrapper.ts +++ b/src/lib/tabs/tab-label-wrapper.ts @@ -1,5 +1,5 @@ import {Directive, ElementRef, Renderer, Input} from '@angular/core'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; /** Used in the `md-tab-group` view to display tab labels */ diff --git a/src/lib/tabs/tab.ts b/src/lib/tabs/tab.ts index b11bdbc3e547..8e8363c648a0 100644 --- a/src/lib/tabs/tab.ts +++ b/src/lib/tabs/tab.ts @@ -3,7 +3,7 @@ import { ViewContainerRef, Input, TemplateRef, ViewChild, OnInit, ContentChild, Component } from '@angular/core'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; import {MdTabLabel} from './tab-label'; From ba85883e64eeb6cbac496389945460e71f5f3cbf Mon Sep 17 00:00:00 2001 From: Topher Fangio Date: Tue, 13 Dec 2016 20:55:44 -0600 Subject: [PATCH 29/91] feat(chips): add keyboard interaction. (#2046) Add basic focus/keyboard support for chips. - Up/down arrows navigate chips. - Clicking a chip properly focuses it for subsequent keyboard navigation. - More demos. Confirmed AoT compatibility. References #120. --- src/demo-app/chips/chips-demo.html | 64 ++++++++++- src/demo-app/chips/chips-demo.scss | 8 ++ src/demo-app/chips/chips-demo.ts | 31 ++++++ src/lib/chips/_chips-theme.scss | 8 +- src/lib/chips/chip-list.spec.ts | 89 +++++++++++++--- src/lib/chips/chip-list.ts | 118 ++++++++++++++++++++- src/lib/chips/chip.spec.ts | 99 ++++++++++++++--- src/lib/chips/chip.ts | 92 ++++++++++++++-- src/lib/chips/chips.scss | 72 ++++++++++++- src/lib/core/a11y/list-key-manager.spec.ts | 11 +- src/lib/core/a11y/list-key-manager.ts | 11 +- src/lib/core/keyboard/keycodes.ts | 2 + test/karma.config.ts | 2 +- 13 files changed, 553 insertions(+), 54 deletions(-) diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html index 99f8b4ea45a3..5100ef5f31fc 100644 --- a/src/demo-app/chips/chips-demo.html +++ b/src/demo-app/chips/chips-demo.html @@ -2,11 +2,67 @@

Static Chips

+
Simple
+ + + Chip 1 + Chip 2 + Chip 3 + + +
Advanced
+ + + Selected/Colored + + With Events + + + +
Unstyled
+ + + Basic Chip 1 + Basic Chip 2 + Basic Chip 3 + + +

Material Contributors

+ - Basic Chip - Primary - Accent - Warn + + {{person.name}} + + + +
+ + + + +

Stacked Chips

+ +

+ You can also stack the chips if you want them on top of each other. +

+ + + + None + + + + Primary + + + + Accent + + + + Warn +
\ No newline at end of file diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss index 996d6cfd641f..46e1d249941e 100644 --- a/src/demo-app/chips/chips-demo.scss +++ b/src/demo-app/chips/chips-demo.scss @@ -1,2 +1,10 @@ .chips-demo { + .md-chip-list-stacked { + display: block; + max-width: 200px; + } + + md-basic-chip { + margin: auto 10px; + } } \ No newline at end of file diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts index ea2693f24cf2..45ac721ff490 100644 --- a/src/demo-app/chips/chips-demo.ts +++ b/src/demo-app/chips/chips-demo.ts @@ -1,4 +1,9 @@ import {Component} from '@angular/core'; +import {MdInput} from '@angular/material'; + +export interface Person { + name: string; +} @Component({ moduleId: module.id, @@ -7,4 +12,30 @@ import {Component} from '@angular/core'; styleUrls: ['chips-demo.css'] }) export class ChipsDemo { + visible: boolean = true; + color: string = ''; + + people: Person[] = [ + { name: 'Kara' }, + { name: 'Jeremy' }, + { name: 'Topher' }, + { name: 'Elad' }, + { name: 'Kristiyan' }, + { name: 'Paul' } + ]; + + alert(message: string): void { + alert(message); + } + + add(input: MdInput): void { + if (input.value && input.value.trim() != '') { + this.people.push({ name: input.value.trim() }); + input.value = ''; + } + } + + toggleVisible(): void { + this.visible = false; + } } diff --git a/src/lib/chips/_chips-theme.scss b/src/lib/chips/_chips-theme.scss index 5f0826096c76..9fa1b60b2240 100644 --- a/src/lib/chips/_chips-theme.scss +++ b/src/lib/chips/_chips-theme.scss @@ -13,6 +13,12 @@ } .md-chip.selected { + // There is no dark theme in the current spec, so this applies to both + background-color: #808080; + + // Use a contrast color for a grey very close to the background color + color: md-contrast($md-grey, 600); + &.md-primary { background-color: md-color($primary, 500); color: md-contrast($primary, 500); @@ -26,4 +32,4 @@ color: md-contrast($warn, 500); } } -} \ No newline at end of file +} diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 14c1b69fa674..cd77b9c234d3 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -1,10 +1,17 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {Component, DebugElement} from '@angular/core'; +import {Component, DebugElement, QueryList} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdChipList, MdChipsModule} from './index'; +import {MdChip, MdChipList, MdChipsModule} from './index'; +import {ListKeyManager} from '../core/a11y/list-key-manager'; -describe('MdChip', () => { +describe('MdChipList', () => { let fixture: ComponentFixture; + let chipListDebugElement: DebugElement; + let chipListNativeElement: HTMLElement; + let chipListInstance: MdChipList; + let testComponent: StaticChipList; + let items: QueryList; + let manager: ListKeyManager; beforeEach(async(() => { TestBed.configureTestingModule({ @@ -15,39 +22,87 @@ describe('MdChip', () => { }); TestBed.compileComponents(); + + fixture = TestBed.createComponent(StaticChipList); + fixture.detectChanges(); + + chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); + chipListNativeElement = chipListDebugElement.nativeElement; + chipListInstance = chipListDebugElement.componentInstance; + testComponent = fixture.debugElement.componentInstance; })); describe('basic behaviors', () => { - let chipListDebugElement: DebugElement; - let chipListNativeElement: HTMLElement; - let chipListInstance: MdChipList; - let testComponent: StaticChipList; + it('adds the `md-chip-list` class', () => { + expect(chipListNativeElement.classList).toContain('md-chip-list'); + }); + }); + describe('focus behaviors', () => { beforeEach(() => { - fixture = TestBed.createComponent(StaticChipList); + items = chipListInstance.chips; + manager = chipListInstance._keyManager; + }); + + it('watches for chip focus', () => { + let array = items.toArray(); + let lastIndex = array.length - 1; + let lastItem = array[lastIndex]; + + lastItem.focus(); fixture.detectChanges(); - chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); - chipListNativeElement = chipListDebugElement.nativeElement; - chipListInstance = chipListDebugElement.componentInstance; - testComponent = fixture.debugElement.componentInstance; + expect(manager.focusedItemIndex).toBe(lastIndex); }); - it('adds the `md-chip-list` class', () => { - expect(chipListNativeElement.classList).toContain('md-chip-list'); + describe('on chip destroy', () => { + it('focuses the next item', () => { + let array = items.toArray(); + let midItem = array[2]; + + // Focus the middle item + midItem.focus(); + + // Destroy the middle item + testComponent.remove = 2; + fixture.detectChanges(); + + // It focuses the 4th item (now at index 2) + expect(manager.focusedItemIndex).toEqual(2); + }); + + it('focuses the previous item', () => { + let array = items.toArray(); + let lastIndex = array.length - 1; + let lastItem = array[lastIndex]; + + // Focus the last item + lastItem.focus(); + + // Destroy the last item + testComponent.remove = lastIndex; + fixture.detectChanges(); + + // It focuses the next-to-last item + expect(manager.focusedItemIndex).toEqual(lastIndex - 1); + }); }); }); + }); @Component({ template: ` - {{name}} 1 - {{name}} 2 - {{name}} 3 +
{{name}} 1
+
{{name}} 2
+
{{name}} 3
+
{{name}} 4
+
{{name}} 5
 ` }) class StaticChipList { name: 'Test'; + remove: Number; } diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 1d7a2c778e27..aebd396ac829 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -1,32 +1,142 @@ import { + AfterContentInit, ChangeDetectionStrategy, Component, + ContentChildren, ElementRef, ModuleWithProviders, NgModule, + QueryList, ViewEncapsulation } from '@angular/core'; import {MdChip} from './chip'; +import {ListKeyManager} from '../core/a11y/list-key-manager'; +/** + * A material design chips component (named ChipList for it's similarity to the List component). + * + * Example: + * + * + * Chip 1 + * Chip 2 + * + */ @Component({ moduleId: module.id, selector: 'md-chip-list', - template: ``, + template: `
`, host: { // Properties 'tabindex': '0', 'role': 'listbox', - 'class': 'md-chip-list' + 'class': 'md-chip-list', + + // Events + '(focus)': '_keyManager.focusFirstItem()', + '(keydown)': 'keydown($event)' + }, + queries: { + chips: new ContentChildren(MdChip) }, styleUrls: ['chips.css'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MdChipList { +export class MdChipList implements AfterContentInit { + + /** Track which chips we're listening to for focus/destruction. */ + private _subscribed: WeakMap = new WeakMap(); + + /** The ListKeyManager which handles focus. */ + _keyManager: ListKeyManager; + + /** The chip components contained within this chip list. */ + chips: QueryList; + constructor(private _elementRef: ElementRef) {} - ngAfterContentInit(): void {} + ngAfterContentInit(): void { + this._keyManager = new ListKeyManager(this.chips).withFocusWrap(); + + // Go ahead and subscribe all of the initial chips + this.subscribeChips(this.chips); + + // When the list changes, re-subscribe + this.chips.changes.subscribe((chips: QueryList) => { + this.subscribeChips(chips); + }); + } + + /** Pass relevant key presses to our key manager. */ + keydown(event: KeyboardEvent) { + this._keyManager.onKeydown(event); + } + + /** + * Iterate through the list of chips and add them to our list of + * subscribed chips. + * + * @param chips The list of chips to be subscribed. + */ + protected subscribeChips(chips: QueryList): void { + chips.forEach(chip => this.addChip(chip)); + } + + /** + * Add a specific chip to our subscribed list. If the chip has + * already been subscribed, this ensures it is only subscribed + * once. + * + * @param chip The chip to be subscribed (or checked for existing + * subscription). + */ + protected addChip(chip: MdChip) { + // If we've already been subscribed to a parent, do nothing + if (this._subscribed.has(chip)) { + return; + } + + // Watch for focus events outside of the keyboard navigation + chip.onFocus.subscribe(() => { + let chipIndex: number = this.chips.toArray().indexOf(chip); + + if (this.isValidIndex(chipIndex)) { + this._keyManager.updateFocusedItemIndex(chipIndex); + } + }); + + // On destroy, remove the item from our list, and check focus + chip.destroy.subscribe(() => { + let chipIndex: number = this.chips.toArray().indexOf(chip); + + if (this.isValidIndex(chipIndex)) { + // Check whether the chip is the last item + if (chipIndex < this.chips.length - 1) { + this._keyManager.setFocus(chipIndex); + } else if (chipIndex - 1 >= 0) { + this._keyManager.setFocus(chipIndex - 1); + } + } + + this._subscribed.delete(chip); + chip.destroy.unsubscribe(); + }); + + this._subscribed.set(chip, true); + } + + /** + * Utility to ensure all indexes are valid. + * + * @param index The index to be checked. + * @returns {boolean} True if the index is valid for our list of chips. + */ + private isValidIndex(index: number): boolean { + return index >= 0 && index < this.chips.length; + } + } @NgModule({ diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 15b0157012d6..0b623e3bb3ce 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -1,47 +1,118 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdChip, MdChipsModule} from './index'; +import {MdChipList, MdChip, MdChipsModule} from './index'; -describe('MdChip', () => { +describe('Chips', () => { let fixture: ComponentFixture; + let chipDebugElement: DebugElement; + let chipListNativeElement: HTMLElement; + let chipNativeElement: HTMLElement; + let chipInstance: MdChip; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MdChipsModule.forRoot()], declarations: [ - SingleChip + BasicChip, SingleChip ] }); TestBed.compileComponents(); })); - describe('basic behaviors', () => { - let chipDebugElement: DebugElement; - let chipNativeElement: HTMLElement; - let chipInstance: MdChip; - let testComponent: SingleChip; + describe('MdBasicChip', () => { beforeEach(() => { - fixture = TestBed.createComponent(SingleChip); + fixture = TestBed.createComponent(BasicChip); fixture.detectChanges(); chipDebugElement = fixture.debugElement.query(By.directive(MdChip)); chipNativeElement = chipDebugElement.nativeElement; chipInstance = chipDebugElement.componentInstance; - testComponent = fixture.debugElement.componentInstance; + + document.body.appendChild(chipNativeElement); + }); + + afterEach(() => { + document.body.removeChild(chipNativeElement); }); - it('adds the `md-chip` class', () => { - expect(chipNativeElement.classList).toContain('md-chip'); + it('does not add the `md-chip` class', () => { + expect(chipNativeElement.classList).not.toContain('md-chip'); + }); + }); + + describe('MdChip', () => { + let testComponent: SingleChip; + + describe('basic behaviors', () => { + + beforeEach(() => { + fixture = TestBed.createComponent(SingleChip); + fixture.detectChanges(); + + chipDebugElement = fixture.debugElement.query(By.directive(MdChip)); + chipListNativeElement = fixture.debugElement.query(By.directive(MdChipList)).nativeElement; + chipNativeElement = chipDebugElement.nativeElement; + chipInstance = chipDebugElement.componentInstance; + testComponent = fixture.debugElement.componentInstance; + + document.body.appendChild(chipNativeElement); + }); + + afterEach(() => { + document.body.removeChild(chipNativeElement); + }); + + it('adds the `md-chip` class', () => { + expect(chipNativeElement.classList).toContain('md-chip'); + }); + + it('emits focus on click', () => { + spyOn(chipInstance, 'focus').and.callThrough(); + + chipNativeElement.click(); + + expect(chipInstance.focus).toHaveBeenCalledTimes(1); + }); + + it('emits destroy on destruction', () => { + spyOn(testComponent, 'chipDestroy').and.callThrough(); + + // Force a destroy callback + testComponent.shouldShow = false; + fixture.detectChanges(); + + expect(testComponent.chipDestroy).toHaveBeenCalledTimes(1); + }); }); }); }); @Component({ - template: `{{name}}` + template: ` + +
+ + {{name}} + +
+ ` }) class SingleChip { - name: 'Test'; + name: String = 'Test'; + shouldShow: Boolean = true; + + chipFocus() { + } + + chipDestroy() { + } +} + +@Component({ + template: `{{name}}` +}) +class BasicChip { } diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 461834f05266..9b9fadb5a052 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -1,17 +1,95 @@ -import { Component, ElementRef, Renderer } from '@angular/core'; +import { + Component, + ElementRef, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, + Renderer +} from '@angular/core'; +import {MdFocusable} from '../core/a11y/list-key-manager'; +import {coerceBooleanProperty} from '../core/coersion/boolean-property'; + +export interface MdChipEvent { + chip: MdChip; +} + +/** + * A material design styled Chip component. Used inside the ChipList component. + */ @Component({ - selector: 'md-chip, [md-chip]', + selector: 'md-basic-chip, [md-basic-chip], md-chip, [md-chip]', template: ``, host: { - // Properties - 'class': 'md-chip', 'tabindex': '-1', - 'role': 'option' + 'role': 'option', + + '[attr.disabled]': 'disabled', + '[attr.aria-disabled]': '_isAriaDisabled', + + '(click)': '_handleClick($event)' } }) -export class MdChip { +export class MdChip implements MdFocusable, OnInit, OnDestroy { + + /* Whether or not the chip is disabled. */ + protected _disabled: boolean = null; + + /** + * Emitted when the chip is focused. + */ + onFocus = new EventEmitter(); + + /** + * Emitted when the chip is destroyed. + */ + @Output() destroy = new EventEmitter(); + constructor(protected _renderer: Renderer, protected _elementRef: ElementRef) {} - ngAfterContentInit(): void {} + ngOnInit(): void { + let el: HTMLElement = this._elementRef.nativeElement; + + if (el.nodeName.toLowerCase() == 'md-chip' || el.hasAttribute('md-chip')) { + el.classList.add('md-chip'); + } + } + + ngOnDestroy(): void { + this.destroy.emit({ chip: this }); + } + + /** Whether or not the chip is disabled. */ + @Input() get disabled(): boolean { + return this._disabled; + } + + /** Sets the disabled state of the chip. */ + set disabled(value: boolean) { + this._disabled = coerceBooleanProperty(value) ? true : null; + } + + /** A String representation of the current disabled state. */ + get _isAriaDisabled(): string { + return String(coerceBooleanProperty(this.disabled)); + } + + /** Allows for programmatic focusing of the chip. */ + focus(): void { + this._renderer.invokeElementMethod(this._elementRef.nativeElement, 'focus'); + this.onFocus.emit({ chip: this }); + } + + /** Ensures events fire properly upon click. */ + _handleClick(event: Event) { + // Check disabled + if (this.disabled) { + event.preventDefault(); + event.stopPropagation(); + } else { + this.focus(); + } + } } diff --git a/src/lib/chips/chips.scss b/src/lib/chips/chips.scss index 7fa57fd207f8..379277e9daab 100644 --- a/src/lib/chips/chips.scss +++ b/src/lib/chips/chips.scss @@ -1,8 +1,53 @@ $md-chip-vertical-padding: 8px; $md-chip-horizontal-padding: 12px; +$md-chip-font-size: 13px; +$md-chip-line-height: 16px; -.md-chip-list { - padding: $md-chip-horizontal-padding; +$md-chips-chip-margin: $md-chip-horizontal-padding / 4; + +.md-chip-list-wrapper { + + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; + + /* + * Only apply the margins to chips + */ + .md-chip { + margin: 0 $md-chips-chip-margin 0 $md-chips-chip-margin; + + // Remove the margin from the first element (in both LTR and RTL) + &:first-child { + margin: { + left: 0; + right: $md-chips-chip-margin; + } + + [dir='rtl'] & { + margin: { + left: $md-chips-chip-margin; + right: 0; + } + } + } + + // Remove the margin from the last element (in both LTR and RTL) + &:last-child { + margin: { + left: $md-chips-chip-margin; + right: 0; + } + + [dir='rtl'] & { + margin: { + left: 0; + right: $md-chips-chip-margin; + } + } + } + } } .md-chip { @@ -11,6 +56,25 @@ $md-chip-horizontal-padding: 12px; $md-chip-vertical-padding $md-chip-horizontal-padding; border-radius: $md-chip-horizontal-padding * 2; - font-size: 13px; - line-height: 16px; + font-size: $md-chip-font-size; + line-height: $md-chip-line-height; +} + +.md-chip-list-stacked .md-chip-list-wrapper { + display: block; + + .md-chip { + display: block; + margin: 0; + margin-bottom: $md-chip-vertical-padding; + + [dir='rtl'] & { + margin: 0; + margin-bottom: $md-chip-vertical-padding; + } + + &:last-child, [dir='rtl'] &:last-child { + margin-bottom: 0; + } + } } diff --git a/src/lib/core/a11y/list-key-manager.spec.ts b/src/lib/core/a11y/list-key-manager.spec.ts index a8381aa2a72b..2d2e14eefa53 100644 --- a/src/lib/core/a11y/list-key-manager.spec.ts +++ b/src/lib/core/a11y/list-key-manager.spec.ts @@ -23,7 +23,6 @@ class FakeEvent { } } - describe('ListKeyManager', () => { let keyManager: ListKeyManager; let itemList: FakeQueryList; @@ -210,6 +209,16 @@ describe('ListKeyManager', () => { expect(itemList.items[1].focus).toHaveBeenCalledTimes(1); }); + it('should allow setting the focused item without calling focus', () => { + expect(keyManager.focusedItemIndex) + .toBe(0, `Expected focus to be on the first item of the list.`); + + keyManager.updateFocusedItemIndex(1); + expect(keyManager.focusedItemIndex) + .toBe(1, `Expected focusedItemIndex to be updated after calling updateFocusedItemIndex().`); + expect(itemList.items[1].focus).not.toHaveBeenCalledTimes(1); + }); + it('should focus the first item when focusFirstItem() is called', () => { keyManager.onKeydown(DOWN_ARROW_EVENT); keyManager.onKeydown(DOWN_ARROW_EVENT); diff --git a/src/lib/core/a11y/list-key-manager.ts b/src/lib/core/a11y/list-key-manager.ts index 3be6819a31c2..9cca50160fa3 100644 --- a/src/lib/core/a11y/list-key-manager.ts +++ b/src/lib/core/a11y/list-key-manager.ts @@ -32,7 +32,11 @@ export class ListKeyManager { return this; } - /** Sets the focus of the list to the item at the index specified. */ + /** + * Sets the focus of the list to the item at the index specified. + * + * @param index The index of the item to be focused. + */ setFocus(index: number): void { this._focusedItemIndex = index; this._items.toArray()[index].focus(); @@ -89,6 +93,11 @@ export class ListKeyManager { return this._focusedItemIndex; } + /** Allows setting of the focusedItemIndex without focusing the item. */ + updateFocusedItemIndex(index: number) { + this._focusedItemIndex = index; + } + /** * Observable that emits any time the TAB key is pressed, so components can react * when focus is shifted off of the list. diff --git a/src/lib/core/keyboard/keycodes.ts b/src/lib/core/keyboard/keycodes.ts index af4c4b702f9a..bff519c5d38f 100644 --- a/src/lib/core/keyboard/keycodes.ts +++ b/src/lib/core/keyboard/keycodes.ts @@ -20,3 +20,5 @@ export const SPACE = 32; export const TAB = 9; export const ESCAPE = 27; +export const BACKSPACE = 8; +export const DELETE = 46; diff --git a/test/karma.config.ts b/test/karma.config.ts index 144746c27ca3..e5fb72704ed0 100644 --- a/test/karma.config.ts +++ b/test/karma.config.ts @@ -16,7 +16,7 @@ export function config(config) { require('karma-browserstack-launcher'), require('karma-sauce-launcher'), require('karma-chrome-launcher'), - require('karma-firefox-launcher'), + require('karma-firefox-launcher') ], files: [ {pattern: 'dist/vendor/core-js/client/core.js', included: true, watched: false}, From bac0388ca323efcf860b3b28cd40267c15a9a85a Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Tue, 13 Dec 2016 19:23:03 -0800 Subject: [PATCH 30/91] chore: fix bad chips merge and broken tests (#2207) --- src/lib/chips/chip-list.spec.ts | 4 +++- src/lib/chips/chip.ts | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index cd77b9c234d3..01daa7be7bd9 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -22,7 +22,9 @@ describe('MdChipList', () => { }); TestBed.compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(StaticChipList); fixture.detectChanges(); @@ -30,7 +32,7 @@ describe('MdChipList', () => { chipListNativeElement = chipListDebugElement.nativeElement; chipListInstance = chipListDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; - })); + }); describe('basic behaviors', () => { it('adds the `md-chip-list` class', () => { diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 9b9fadb5a052..81cd0f48914d 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -10,7 +10,7 @@ import { } from '@angular/core'; import {MdFocusable} from '../core/a11y/list-key-manager'; -import {coerceBooleanProperty} from '../core/coersion/boolean-property'; +import {coerceBooleanProperty} from '../core/coercion/boolean-property'; export interface MdChipEvent { chip: MdChip; From b3e21b8aee69a3171c7dcec9243815a17a5ba522 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 14 Dec 2016 21:54:32 +0100 Subject: [PATCH 31/91] test(ripple): refactor long-running unit test (#2155) Refactors a unit test that used to take 1.6s, due to it using a native `setTimeout`, by replacing the native timer with a flushable one. Fixes #2097. --- src/lib/core/ripple/ripple.spec.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index bcbda05e9a0c..91b86f436bf9 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -1,4 +1,4 @@ -import {TestBed, ComponentFixture, async} from '@angular/core/testing'; +import {TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing'; import {Component, ViewChild} from '@angular/core'; import {MdRipple, MdRippleModule} from './ripple'; @@ -132,14 +132,13 @@ describe('MdRipple', () => { expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0); }); - it('removes foreground ripples after timeout', async(() => { + it('removes foreground ripples after timeout', fakeAsync(() => { rippleElement.click(); expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(1); - // Use a real timeout because the ripple's timeout runs outside of the angular zone. - setTimeout(() => { - expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0); - }, 1600); + tick(1600); + + expect(rippleElement.querySelectorAll('.md-ripple-foreground').length).toBe(0); })); it('creates ripples when manually triggered', () => { From 9e3c59c78c1f537c99a9966de030300b2a9975d1 Mon Sep 17 00:00:00 2001 From: Martin Belev Date: Wed, 14 Dec 2016 22:55:42 +0200 Subject: [PATCH 32/91] test(interactivity-checker): remove unncessary `setTimeout` (#2159) --- .../core/a11y/interactivity-checker.spec.ts | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/lib/core/a11y/interactivity-checker.spec.ts b/src/lib/core/a11y/interactivity-checker.spec.ts index ab707d665152..a722ec8bdd5e 100644 --- a/src/lib/core/a11y/interactivity-checker.spec.ts +++ b/src/lib/core/a11y/interactivity-checker.spec.ts @@ -1,6 +1,5 @@ import {InteractivityChecker} from './interactivity-checker'; import {MdPlatform} from '../platform/platform'; -import {async} from '@angular/core/testing'; describe('InteractivityChecker', () => { let testContainerElement: HTMLElement; @@ -337,22 +336,15 @@ describe('InteractivityChecker', () => { expect(checker.isTabbable(button)).toBe(true); }); - it('should mark elements which are contentEditable as tabbable', async(() => { + it('should mark elements which are contentEditable as tabbable', () => { let editableEl = createFromTemplate('
', true); - // Wait one tick, because the browser takes some time to update the tabIndex - // according to the contentEditable attribute. - setTimeout(() => { + expect(checker.isTabbable(editableEl)).toBe(true); - expect(checker.isTabbable(editableEl)).toBe(true); + editableEl.tabIndex = -1; - editableEl.tabIndex = -1; - - expect(checker.isTabbable(editableEl)).toBe(false); - - }, 0); - - })); + expect(checker.isTabbable(editableEl)).toBe(false); + }); it('should never mark iframe elements as tabbable', () => { let iframe = createFromTemplate('