diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md index aff6f30f3c25..b9cde2891ae0 100644 --- a/CODING_STANDARDS.md +++ b/CODING_STANDARDS.md @@ -49,16 +49,16 @@ In HTML code, use `` comments, which will be stripped when packaging For example, rather than doing this: ```html -Basic button -FAB -pony +Basic button +FAB +pony ``` do this: ```html -Basic button -FAB -pony +Basic button +FAB +pony ``` #### Prefer small, focused modules @@ -191,7 +191,7 @@ and the return value: * @param config Dialog configuration options. * @returns Reference to the newly-opened dialog. */ - open(component: ComponentType, config?: MdDialogConfig): MdDialogRef { ... } + open(component: ComponentType, config?: MatDialogConfig): MatDialogRef { ... } ``` Boolean properties and return values should use "Whether..." as opposed to "True if...": @@ -229,7 +229,7 @@ class UniqueSelectionDispatcher { } Avoid suffixing a class with "Service", as it communicates nothing about what the class does. Try to think of the class name as a person's job title. -Classes that correspond to a directive with an `md-` prefix should also be prefixed with `Md`. +Classes that correspond to a directive with an `mat-` prefix should also be prefixed with `Mat`. CDK classes should only have a `Cdk` prefix when the class is a directive with a `cdk` selector prefix. diff --git a/e2e/components/button-toggle-e2e.spec.ts b/e2e/components/button-toggle-e2e.spec.ts index 8f8b1b3e60c0..b302ee63b556 100644 --- a/e2e/components/button-toggle-e2e.spec.ts +++ b/e2e/components/button-toggle-e2e.spec.ts @@ -6,7 +6,7 @@ describe('button-toggle', () => { beforeEach(() => browser.get('/button-toggle')); it('should show a button-toggle', async () => { - expect(element(by.tagName('md-button-toggle'))).toBeDefined(); + expect(element(by.tagName('mat-button-toggle'))).toBeDefined(); screenshot(); }); diff --git a/e2e/components/card-e2e.spec.ts b/e2e/components/card-e2e.spec.ts index aac7d38abd39..14f0cd6e3b6b 100644 --- a/e2e/components/card-e2e.spec.ts +++ b/e2e/components/card-e2e.spec.ts @@ -1,12 +1,12 @@ import {browser, by, element} from 'protractor'; import {screenshot} from '../screenshot'; -describe('md-card', () => { +describe('mat-card', () => { beforeEach(() => browser.get('/cards')); it('should show a card', async () => { - const card = element(by.tagName('md-card')); + const card = element(by.tagName('mat-card')); expect(card).toBeDefined(); screenshot('fancy card example'); diff --git a/e2e/components/dialog-e2e.spec.ts b/e2e/components/dialog-e2e.spec.ts index d3887c7e0649..b5a9b3ab0a45 100644 --- a/e2e/components/dialog-e2e.spec.ts +++ b/e2e/components/dialog-e2e.spec.ts @@ -14,7 +14,7 @@ describe('dialog', () => { it('should open a dialog', () => { element(by.id('default')).click(); - expectToExist('md-dialog-container'); + expectToExist('mat-dialog-container'); screenshot('simple dialog opened'); }); @@ -29,7 +29,7 @@ describe('dialog', () => { await waitForDialog(); clickOnBackrop(); - expectToExist('md-dialog-container', false); + expectToExist('mat-dialog-container', false); }); it('should close by pressing escape', async () => { @@ -37,7 +37,7 @@ describe('dialog', () => { await waitForDialog(); pressKeys(Key.ESCAPE); - expectToExist('md-dialog-container', false); + expectToExist('mat-dialog-container', false); }); it('should close by pressing escape when the first tabbable element has lost focus', @@ -45,9 +45,9 @@ describe('dialog', () => { element(by.id('default')).click(); await waitForDialog(); - clickElementAtPoint('md-dialog-container', { x: 0, y: 0 }); + clickElementAtPoint('mat-dialog-container', { x: 0, y: 0 }); pressKeys(Key.ESCAPE); - expectToExist('md-dialog-container', false); + expectToExist('mat-dialog-container', false); }); it('should close by clicking on the "close" button', async () => { @@ -55,14 +55,14 @@ describe('dialog', () => { await waitForDialog(); element(by.id('close')).click(); - expectToExist('md-dialog-container', false); + expectToExist('mat-dialog-container', false); }); it('should focus the first focusable element', async () => { element(by.id('default')).click(); await waitForDialog(); - expectFocusOn('md-dialog-container input'); + expectFocusOn('mat-dialog-container input'); }); it('should restore focus to the element that opened the dialog', async () => { @@ -88,7 +88,7 @@ describe('dialog', () => { await waitForDialog(); clickOnBackrop(); - expectToExist('md-dialog-container'); + expectToExist('mat-dialog-container'); }); it('should be able to prevent closing by pressing escape', async () => { @@ -96,11 +96,11 @@ describe('dialog', () => { await waitForDialog(); pressKeys(Key.ESCAPE); - expectToExist('md-dialog-container'); + expectToExist('mat-dialog-container'); }); function waitForDialog() { - return waitForElement('md-dialog-container'); + return waitForElement('mat-dialog-container'); } function clickOnBackrop() { diff --git a/e2e/components/grid-list-e2e.spec.ts b/e2e/components/grid-list-e2e.spec.ts index a70c8176c8ee..d4f0858099fa 100644 --- a/e2e/components/grid-list-e2e.spec.ts +++ b/e2e/components/grid-list-e2e.spec.ts @@ -6,11 +6,11 @@ describe('grid-list', () => { beforeEach(() => browser.get('/grid-list')); it('should render a grid list container', () => { - expectToExist('md-grid-list'); + expectToExist('mat-grid-list'); screenshot(); }); it('should render list items inside the grid list container', () => { - expectToExist('md-grid-list md-grid-tile'); + expectToExist('mat-grid-list mat-grid-tile'); }); }); diff --git a/e2e/components/list-e2e.spec.ts b/e2e/components/list-e2e.spec.ts index bdb541373d8f..e0016fd6fa4b 100644 --- a/e2e/components/list-e2e.spec.ts +++ b/e2e/components/list-e2e.spec.ts @@ -6,11 +6,11 @@ describe('list', () => { beforeEach(() => browser.get('/list')); it('should render a list container', () => { - expectToExist('md-list'); + expectToExist('mat-list'); screenshot(); }); it('should render list items inside the list container', () => { - expectToExist('md-list md-list-item'); + expectToExist('mat-list mat-list-item'); }); }); diff --git a/e2e/components/menu-e2e.spec.ts b/e2e/components/menu-e2e.spec.ts index f9e442180c1a..f1b3a3dec680 100644 --- a/e2e/components/menu-e2e.spec.ts +++ b/e2e/components/menu-e2e.spec.ts @@ -207,7 +207,7 @@ export class MenuPage { trigger = () => element(by.id('trigger')); triggerTwo = () => element(by.id('trigger-two')); backdrop = () => element(by.css('.cdk-overlay-backdrop')); - items = (index: number) => element.all(by.css('[md-menu-item]')).get(index); + items = (index: number) => element.all(by.css('[mat-menu-item]')).get(index); textArea = () => element(by.id('text')); beforeTrigger = () => element(by.id('before-t')); aboveTrigger = () => element(by.id('above-t')); diff --git a/e2e/components/progress-bar-e2e.spec.ts b/e2e/components/progress-bar-e2e.spec.ts index aa62334f7235..3bf454764820 100644 --- a/e2e/components/progress-bar-e2e.spec.ts +++ b/e2e/components/progress-bar-e2e.spec.ts @@ -5,18 +5,18 @@ describe('progress-bar', () => { beforeEach(() => browser.get('/progress-bar')); it('should render a determinate progress bar', () => { - expectToExist('md-progress-bar[mode="determinate"]'); + expectToExist('mat-progress-bar[mode="determinate"]'); }); it('should render a buffer progress bar', () => { - expectToExist('md-progress-bar[mode="buffer"]'); + expectToExist('mat-progress-bar[mode="buffer"]'); }); it('should render a query progress bar', () => { - expectToExist('md-progress-bar[mode="query"]'); + expectToExist('mat-progress-bar[mode="query"]'); }); it('should render a indeterminate progress bar', () => { - expectToExist('md-progress-bar[mode="indeterminate"]'); + expectToExist('mat-progress-bar[mode="indeterminate"]'); }); }); diff --git a/e2e/components/progress-spinner-e2e.spec.ts b/e2e/components/progress-spinner-e2e.spec.ts index a8e5238cb9ae..c415636ef8db 100644 --- a/e2e/components/progress-spinner-e2e.spec.ts +++ b/e2e/components/progress-spinner-e2e.spec.ts @@ -4,14 +4,14 @@ describe('progress-spinner', () => { beforeEach(() => browser.get('/progress-spinner')); it('should render a determinate progress spinner', () => { - expect(element(by.css('md-progress-spinner')).isPresent()).toBe(true); + expect(element(by.css('mat-progress-spinner')).isPresent()).toBe(true); }); it('should render an indeterminate progress spinner', () => { - expect(element(by.css('md-progress-spinner[mode="indeterminate"]')).isPresent()).toBe(true); + expect(element(by.css('mat-progress-spinner[mode="indeterminate"]')).isPresent()).toBe(true); }); it('should render a spinner', () => { - expect(element(by.css('md-spinner')).isPresent()).toBe(true); + expect(element(by.css('mat-spinner')).isPresent()).toBe(true); }); }); diff --git a/e2e/components/sidenav-e2e.spec.ts b/e2e/components/sidenav-e2e.spec.ts index 445d8bf63b76..9f90e4403652 100644 --- a/e2e/components/sidenav-e2e.spec.ts +++ b/e2e/components/sidenav-e2e.spec.ts @@ -6,7 +6,7 @@ describe('sidenav', () => { beforeEach(() => { browser.get('/sidenav'); - sidenav = element(by.tagName('md-sidenav')); + sidenav = element(by.tagName('mat-sidenav')); }); it('should be closed', () => { diff --git a/e2e/components/slide-toggle-e2e.spec.ts b/e2e/components/slide-toggle-e2e.spec.ts index 2780cb91a008..a8c232d06d54 100644 --- a/e2e/components/slide-toggle-e2e.spec.ts +++ b/e2e/components/slide-toggle-e2e.spec.ts @@ -10,7 +10,7 @@ describe('slide-toggle', () => { beforeEach(() => browser.get('slide-toggle')); it('should render a slide-toggle', () => { - expectToExist('md-slide-toggle'); + expectToExist('mat-slide-toggle'); screenshot(); }); diff --git a/e2e/components/stepper-e2e.spec.ts b/e2e/components/stepper-e2e.spec.ts index cd9b4b3d8211..d4745dcbde0d 100644 --- a/e2e/components/stepper-e2e.spec.ts +++ b/e2e/components/stepper-e2e.spec.ts @@ -10,8 +10,8 @@ describe('stepper', () => { beforeEach(() => browser.get('/stepper')); it('should render a stepper', () => { - expectToExist('md-horizontal-stepper'); - screenshot('md-horizontal-stepper'); + expectToExist('mat-horizontal-stepper'); + screenshot('mat-horizontal-stepper'); }); describe('basic behavior', () => { @@ -19,13 +19,13 @@ describe('stepper', () => { const previousButton = element.all(by.buttonText('Back')); const nextButton = element.all(by.buttonText('Next')); - expect(element(by.css('md-step-header[aria-selected="true"]')).getText()) + expect(element(by.css('mat-step-header[aria-selected="true"]')).getText()) .toBe('1\nFill out your name'); screenshot('start'); nextButton.get(0).click(); - expect(element(by.css('md-step-header[aria-selected="true"]')).getText()) + expect(element(by.css('mat-step-header[aria-selected="true"]')).getText()) .toBe('2\nFill out your address'); await browser.wait(ExpectedConditions.not( @@ -34,7 +34,7 @@ describe('stepper', () => { previousButton.get(0).click(); - expect(element(by.css('md-step-header[aria-selected="true"]')).getText()) + expect(element(by.css('mat-step-header[aria-selected="true"]')).getText()) .toBe('1\nFill out your name'); await browser.wait(ExpectedConditions.not( @@ -43,7 +43,7 @@ describe('stepper', () => { }); it('should change focus with keyboard interaction', () => { - let stepHeaders = element.all(by.css('md-step-header')); + let stepHeaders = element.all(by.css('mat-step-header')); stepHeaders.get(0).click(); expectFocusOn(stepHeaders.get(0)); @@ -77,7 +77,7 @@ describe('stepper', () => { let nextButton = element.all(by.buttonText('Next')); nextButton.get(0).click(); - expect(element(by.css('md-step-header[aria-selected="true"]')).getText()) + expect(element(by.css('mat-step-header[aria-selected="true"]')).getText()) .toBe('1\nFill out your name'); }); }); diff --git a/e2e/components/tabs-e2e.spec.ts b/e2e/components/tabs-e2e.spec.ts index a2df986deed6..8fc2971b85d5 100644 --- a/e2e/components/tabs-e2e.spec.ts +++ b/e2e/components/tabs-e2e.spec.ts @@ -19,9 +19,9 @@ describe('tabs', () => { beforeEach(() => { browser.get('/tabs'); - tabGroup = element(by.css('md-tab-group')); + tabGroup = element(by.css('mat-tab-group')); tabLabels = element.all(by.css('.mat-tab-label')); - tabBodies = element.all(by.css('md-tab-body')); + tabBodies = element.all(by.css('mat-tab-body')); }); it('should change tabs when the label is clicked', async () => { diff --git a/e2e/components/toolbar-e2e.spec.ts b/e2e/components/toolbar-e2e.spec.ts index 6b03e4abcb56..eaabb2c36aaa 100644 --- a/e2e/components/toolbar-e2e.spec.ts +++ b/e2e/components/toolbar-e2e.spec.ts @@ -1,12 +1,12 @@ import {browser, by, element} from 'protractor'; import {screenshot} from '../screenshot'; -describe('md-toolbar', () => { +describe('mat-toolbar', () => { beforeEach(() => browser.get('/toolbar')); it('should show a toolbar', async () => { - expect(element(by.tagName('md-toolbar'))).toBeDefined(); + expect(element(by.tagName('mat-toolbar'))).toBeDefined(); screenshot('multiple toolbar components'); }); diff --git a/guides/cdk-table.md b/guides/cdk-table.md index 08a7027b3bfd..365ac59234c7 100644 --- a/guides/cdk-table.md +++ b/guides/cdk-table.md @@ -7,7 +7,7 @@ built. Because it enforces no opinions on these matters, developers have full co interaction patterns associated with the table. For a Material Design styled table, see the -[documentation for ``](https://material.angular.io/components/table) which builds on +[documentation for ``](https://material.angular.io/components/table) which builds on top of the CDK data-table. diff --git a/guides/customizing-component-styles.md b/guides/customizing-component-styles.md index a5db1a459e51..5a3a641578ac 100644 --- a/guides/customizing-component-styles.md +++ b/guides/customizing-component-styles.md @@ -30,7 +30,7 @@ You can read more about specificity and how it is calculated on the ##### Component location -Some Angular Material components, specifically overlay-based ones like MdDialog, MdSnackbar, etc., +Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended diff --git a/guides/getting-started.md b/guides/getting-started.md index d7d28ba9b550..21d9d8172e97 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -55,11 +55,11 @@ export class PizzaPartyAppModule { } Import the NgModule for each component you want to use: ```ts -import {MdButtonModule, MdCheckboxModule} from '@angular/material'; +import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ ... - imports: [MdButtonModule, MdCheckboxModule], + imports: [MatButtonModule, MatCheckboxModule], ... }) export class PizzaPartyAppModule { } @@ -70,11 +70,11 @@ Angular Material components that you will use in your application. You can then include this module wherever you'd like to use the components. ```ts -import {MdButtonModule, MdCheckboxModule} from '@angular/material'; +import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ - imports: [MdButtonModule, MdCheckboxModule], - exports: [MdButtonModule, MdCheckboxModule], + imports: [MatButtonModule, MatCheckboxModule], + exports: [MatButtonModule, MatCheckboxModule], }) export class MyOwnCustomMaterialModule { } ``` @@ -100,7 +100,7 @@ For more information on theming and instructions on how to create a custom theme ### Step 5: Gesture Support -Some components (`md-slide-toggle`, `md-slider`, `mdTooltip`) rely on +Some components (`mat-slide-toggle`, `mat-slider`, `matTooltip`) rely on [HammerJS](http://hammerjs.github.io/) for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application. @@ -120,7 +120,7 @@ import 'hammerjs'; ### Step 6 (Optional): Add Material Icons -If you want to use the `md-icon` component with the official +If you want to use the `mat-icon` component with the official [Material Design Icons](https://material.io/icons/), load the icon font in your `index.html`. ```html @@ -130,7 +130,7 @@ If you want to use the `md-icon` component with the official For more information on using Material Icons, check out the [Material Icons Guide](https://google.github.io/material-design-icons/). -Note that `md-icon` supports any font or svg icons; using Material Icons is one of many options. +Note that `mat-icon` supports any font or svg icons; using Material Icons is one of many options. ### Appendix: Configuring SystemJS diff --git a/guides/theming.md b/guides/theming.md index 22a103bd0380..aca2e50fc65c 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -46,7 +46,7 @@ The actual path will depend on your server setup. You can also concatenate the file with the rest of your application's css. -Finally, if your app's content **is not** placed inside of a `md-sidenav-container` element, you +Finally, if your app's content **is not** placed inside of a `mat-sidenav-container` element, you need to add the `mat-app-background` class to your wrapper element (for example the `body`). This ensures that the proper theme background is applied to your page. diff --git a/package-lock.json b/package-lock.json index 6cf8c6caee81..064d1fcfb498 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5247,7 +5247,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "dev": true, "requires": { "fs.realpath": "1.0.0", @@ -15735,7 +15735,7 @@ "write-file-atomic": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-2.1.0.tgz", - "integrity": "sha512-0TZ20a+xcIl4u0+Mj5xDH2yOWdmQiXlKf9Hm+TgDXjTMsEYb+gDrmb8e8UNAzMCitX8NBqG4Z/FUQIyzv/R1JQ==", + "integrity": "sha1-F2n0tVHu3OQZ8FBd6uLiZ2NULTc=", "dev": true, "requires": { "graceful-fs": "4.1.11", diff --git a/src/cdk/a11y/interactivity-checker.spec.ts b/src/cdk/a11y/interactivity-checker.spec.ts index 23473eb5ded6..e5fcdc61950d 100644 --- a/src/cdk/a11y/interactivity-checker.spec.ts +++ b/src/cdk/a11y/interactivity-checker.spec.ts @@ -21,7 +21,7 @@ describe('InteractivityChecker', () => { describe('isDisabled', () => { it('should return true for disabled elements', () => { - let elements = createElements('input', 'textarea', 'select', 'button', 'md-checkbox'); + let elements = createElements('input', 'textarea', 'select', 'button', 'mat-checkbox'); elements.forEach(el => el.setAttribute('disabled', '')); appendElements(elements); @@ -32,7 +32,7 @@ describe('InteractivityChecker', () => { }); it('should return false for elements without disabled', () => { - let elements = createElements('input', 'textarea', 'select', 'button', 'md-checkbox'); + let elements = createElements('input', 'textarea', 'select', 'button', 'mat-checkbox'); appendElements(elements); elements.forEach(el => { diff --git a/src/cdk/bidi/directionality.ts b/src/cdk/bidi/directionality.ts index 76c6985aa61c..c04962b3c85d 100644 --- a/src/cdk/bidi/directionality.ts +++ b/src/cdk/bidi/directionality.ts @@ -29,7 +29,7 @@ export type Direction = 'ltr' | 'rtl'; * We also can't re-provide the DOCUMENT token from platform-brower because the unit tests * themselves use things like `querySelector` in test code. */ -export const DIR_DOCUMENT = new InjectionToken('md-dir-doc'); +export const DIR_DOCUMENT = new InjectionToken('mat-dir-doc'); /** * The directionality (LTR / RTL) context for the application (or a subtree of it). diff --git a/src/cdk/collections/selection.ts b/src/cdk/collections/selection.ts index b2c199cfc9ef..c249544d4a33 100644 --- a/src/cdk/collections/selection.ts +++ b/src/cdk/collections/selection.ts @@ -165,7 +165,7 @@ export class SelectionModel { } /** - * Describes an event emitted when the value of a MdSelectionModel has changed. + * Describes an event emitted when the value of a MatSelectionModel has changed. * @docs-private */ export class SelectionChange { diff --git a/src/cdk/observers/observe-content.spec.ts b/src/cdk/observers/observe-content.spec.ts index 4f05369ea9c3..99e655470843 100644 --- a/src/cdk/observers/observe-content.spec.ts +++ b/src/cdk/observers/observe-content.spec.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {async, TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing'; -import {ObserversModule, MdMutationObserverFactory} from './observe-content'; +import {ObserversModule, MatMutationObserverFactory} from './observe-content'; // TODO(elad): `ProxyZone` doesn't seem to capture the events raised by // `MutationObserver` and needs to be investigated @@ -61,7 +61,7 @@ describe('Observe content', () => { imports: [ObserversModule], declarations: [ComponentWithDebouncedListener], providers: [{ - provide: MdMutationObserverFactory, + provide: MatMutationObserverFactory, useValue: { create: function(callback: Function) { callbacks.push(callback); diff --git a/src/cdk/observers/observe-content.ts b/src/cdk/observers/observe-content.ts index 04871646290c..c0b8dff10ecb 100644 --- a/src/cdk/observers/observe-content.ts +++ b/src/cdk/observers/observe-content.ts @@ -26,7 +26,7 @@ import {RxChain, debounceTime} from '@angular/cdk/rxjs'; * @docs-private */ @Injectable() -export class MdMutationObserverFactory { +export class MatMutationObserverFactory { create(callback): MutationObserver | null { return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback); } @@ -52,7 +52,7 @@ export class ObserveContent implements AfterContentInit, OnDestroy { @Input() debounce: number; constructor( - private _mutationObserverFactory: MdMutationObserverFactory, + private _mutationObserverFactory: MatMutationObserverFactory, private _elementRef: ElementRef, private _ngZone: NgZone) { } @@ -95,6 +95,6 @@ export class ObserveContent implements AfterContentInit, OnDestroy { @NgModule({ exports: [ObserveContent], declarations: [ObserveContent], - providers: [MdMutationObserverFactory] + providers: [MatMutationObserverFactory] }) export class ObserversModule {} diff --git a/src/cdk/overlay/overlay-directives.ts b/src/cdk/overlay/overlay-directives.ts index 1e1c3abcd9f1..bda7b7661274 100644 --- a/src/cdk/overlay/overlay-directives.ts +++ b/src/cdk/overlay/overlay-directives.ts @@ -52,20 +52,20 @@ const defaultPositionList = [ ]; /** Injection token that determines the scroll handling while the connected overlay is open. */ -export const MD_CONNECTED_OVERLAY_SCROLL_STRATEGY = - new InjectionToken<() => ScrollStrategy>('md-connected-overlay-scroll-strategy'); +export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY = + new InjectionToken<() => ScrollStrategy>('mat-connected-overlay-scroll-strategy'); /** @docs-private */ -export function MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): +export function MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => RepositionScrollStrategy { return () => overlay.scrollStrategies.reposition(); } /** @docs-private */ -export const MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = { - provide: MD_CONNECTED_OVERLAY_SCROLL_STRATEGY, +export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = { + provide: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY, deps: [Overlay], - useFactory: MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY, + useFactory: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY, }; @@ -236,7 +236,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges { private _renderer: Renderer2, templateRef: TemplateRef, viewContainerRef: ViewContainerRef, - @Inject(MD_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy, + @Inject(MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy, @Optional() private _dir: Directionality) { this._templatePortal = new TemplatePortal(templateRef, viewContainerRef); } diff --git a/src/cdk/overlay/public_api.ts b/src/cdk/overlay/public_api.ts index bc93276afde6..ec4c15d534bf 100644 --- a/src/cdk/overlay/public_api.ts +++ b/src/cdk/overlay/public_api.ts @@ -11,7 +11,7 @@ import {Overlay} from './overlay'; import {ScrollDispatchModule, VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling'; import { ConnectedOverlayDirective, - MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER, + MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER, OverlayOrigin, } from './overlay-directives'; import {OverlayPositionBuilder} from './position/overlay-position-builder'; @@ -24,7 +24,7 @@ export const OVERLAY_PROVIDERS: Provider[] = [ OverlayPositionBuilder, VIEWPORT_RULER_PROVIDER, OVERLAY_CONTAINER_PROVIDER, - MD_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER, + MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER, ]; @NgModule({ diff --git a/src/cdk/overlay/scroll/close-scroll-strategy.ts b/src/cdk/overlay/scroll/close-scroll-strategy.ts index 7f6b6bf10d73..7d445ac49953 100644 --- a/src/cdk/overlay/scroll/close-scroll-strategy.ts +++ b/src/cdk/overlay/scroll/close-scroll-strategy.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -import {ScrollStrategy, getMdScrollStrategyAlreadyAttachedError} from './scroll-strategy'; +import {ScrollStrategy, getMatScrollStrategyAlreadyAttachedError} from './scroll-strategy'; import {OverlayRef} from '../overlay-ref'; import {Subscription} from 'rxjs/Subscription'; import {ScrollDispatcher} from '@angular/cdk/scrolling'; @@ -23,7 +23,7 @@ export class CloseScrollStrategy implements ScrollStrategy { attach(overlayRef: OverlayRef) { if (this._overlayRef) { - throw getMdScrollStrategyAlreadyAttachedError(); + throw getMatScrollStrategyAlreadyAttachedError(); } this._overlayRef = overlayRef; diff --git a/src/cdk/overlay/scroll/reposition-scroll-strategy.ts b/src/cdk/overlay/scroll/reposition-scroll-strategy.ts index 69128998b801..9ef899cf384d 100644 --- a/src/cdk/overlay/scroll/reposition-scroll-strategy.ts +++ b/src/cdk/overlay/scroll/reposition-scroll-strategy.ts @@ -7,7 +7,7 @@ */ import {Subscription} from 'rxjs/Subscription'; -import {ScrollStrategy, getMdScrollStrategyAlreadyAttachedError} from './scroll-strategy'; +import {ScrollStrategy, getMatScrollStrategyAlreadyAttachedError} from './scroll-strategy'; import {OverlayRef} from '../overlay-ref'; import {ScrollDispatcher} from '@angular/cdk/scrolling'; @@ -31,7 +31,7 @@ export class RepositionScrollStrategy implements ScrollStrategy { attach(overlayRef: OverlayRef) { if (this._overlayRef) { - throw getMdScrollStrategyAlreadyAttachedError(); + throw getMatScrollStrategyAlreadyAttachedError(); } this._overlayRef = overlayRef; diff --git a/src/cdk/overlay/scroll/scroll-strategy.ts b/src/cdk/overlay/scroll/scroll-strategy.ts index d9a6bf533247..fe49d67e45f3 100644 --- a/src/cdk/overlay/scroll/scroll-strategy.ts +++ b/src/cdk/overlay/scroll/scroll-strategy.ts @@ -21,6 +21,6 @@ export interface ScrollStrategy { /** * Returns an error to be thrown when attempting to attach an already-attached scroll strategy. */ -export function getMdScrollStrategyAlreadyAttachedError(): Error { +export function getMatScrollStrategyAlreadyAttachedError(): Error { return Error(`Scroll strategy has already been attached.`); } diff --git a/src/cdk/table/row.ts b/src/cdk/table/row.ts index a15f379679c5..989355a209dd 100644 --- a/src/cdk/table/row.ts +++ b/src/cdk/table/row.ts @@ -21,7 +21,7 @@ import { import {CdkCellDef} from './cell'; /** - * The row template that can be used by the md-table. Should not be used outside of the + * The row template that can be used by the mat-table. Should not be used outside of the * material library. */ export const CDK_ROW_TEMPLATE = ``; diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts index e00568d29961..a76b8afed00d 100644 --- a/src/cdk/table/table.ts +++ b/src/cdk/table/table.ts @@ -57,7 +57,7 @@ export class HeaderRowPlaceholder { } /** - * The table template that can be used by the md-table. Should not be used outside of the + * The table template that can be used by the mat-table. Should not be used outside of the * material library. */ export const CDK_TABLE_TEMPLATE = ` diff --git a/src/demo-app/a11y/autocomplete/autocomplete-a11y.html b/src/demo-app/a11y/autocomplete/autocomplete-a11y.html index f2a6ee6c926c..e84762443315 100644 --- a/src/demo-app/a11y/autocomplete/autocomplete-a11y.html +++ b/src/demo-app/a11y/autocomplete/autocomplete-a11y.html @@ -1,15 +1,15 @@

Filtering and selection

Select your favorite state

- - + - - + + {{ state.name }} - - - + + +

Selected value: {{ value }}

diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.html b/src/demo-app/a11y/button-toggle/button-toggle-a11y.html index 8f6677b7284f..4286a815e610 100644 --- a/src/demo-app/a11y/button-toggle/button-toggle-a11y.html +++ b/src/demo-app/a11y/button-toggle/button-toggle-a11y.html @@ -1,62 +1,62 @@

Single button toggle

- Yes + Yes

Button toggles with icons

- - - format_align_left - - - format_align_center - - - format_align_right - - - format_align_justify - - + + + format_align_left + + + format_align_center + + + format_align_right + + + format_align_justify + +

Multi-selection button toggle group

- - Flour - Eggs - Sugar - Milk - + + Flour + Eggs + Sugar + Milk +

Exclusive selection button toggle group

- - + + {{pie}} - - + +

Your favorite type of pie is: {{favoritePie}}

Disabled button toggle group

- - Flour - Eggs - Sugar - Milk - + + Flour + Eggs + Sugar + Milk +

Vertical button toggle group

- - Flour - Eggs - Sugar - Milk - + + Flour + Eggs + Sugar + Milk +
\ No newline at end of file diff --git a/src/demo-app/a11y/button/button-a11y.html b/src/demo-app/a11y/button/button-a11y.html index 999a9c1e7b44..71c5a7d8a086 100644 --- a/src/demo-app/a11y/button/button-a11y.html +++ b/src/demo-app/a11y/button/button-a11y.html @@ -3,50 +3,50 @@

Button elements

Click on the buttons to increase the button counter.

Current number of clicks: {{counter}}

- - - + + - -

Anchor elements

- Google search - YouTube - Google search + YouTube + - search + search - - search + search - - search + search

Buttons in different colors

- - - + + +

Disabled button

The following "cancel" button is disabled

- +
diff --git a/src/demo-app/a11y/button/button-a11y.ts b/src/demo-app/a11y/button/button-a11y.ts index aab2e3858c75..8a9398858a89 100644 --- a/src/demo-app/a11y/button/button-a11y.ts +++ b/src/demo-app/a11y/button/button-a11y.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; @Component({ moduleId: module.id, @@ -10,7 +10,7 @@ import {MdSnackBar} from '@angular/material'; export class ButtonAccessibilityDemo { counter: number = 0; - constructor(public snackBar: MdSnackBar) {} + constructor(public snackBar: MatSnackBar) {} openSnackBar(message: string) { this.snackBar.open(message, '', { diff --git a/src/demo-app/a11y/card/card-a11y.html b/src/demo-app/a11y/card/card-a11y.html index 6a1961f088ce..c896216f530c 100644 --- a/src/demo-app/a11y/card/card-a11y.html +++ b/src/demo-app/a11y/card/card-a11y.html @@ -1,8 +1,8 @@

Dogs group

Showing a card with a group of content

- - + +

Herding Group

Hound Group

Non-Sporting Group

@@ -12,25 +12,25 @@

Dogs group

Working Group

Foundation Stock Service

Miscellaneous Class

- - + +

Husky

Showing a card with title only

- + Siberian Husky - +

Malamute

Showing a Card with title and subtitle.

- - Alaskan Malamute - Dog breed - + + Alaskan Malamute + Dog breed +
@@ -39,55 +39,55 @@

German Shepherd

Showing a card with title, subtitle, and a footer.

- - Dog breed - German Shepherd - + + Dog breed + German Shepherd + The German Shepherd is a breed of medium to large-sized working dog that originated in Germany. The breed's officially recognized name is German Shepherd Dog in the English language. The breed is also known as the Alsatian in Britain and Ireland. - - + + People also search for Rottweiler, Siberian Husky, Labrador Retriever, Doberman Pinscher - - + +

Dachshund

Showing a card with title, subtitle, and avatar as header and a card image.

- - - - Dachshund - Dog breed - - + + + Dachshund + Dog breed + + - + The dachshund is a short-legged, long-bodied, hound-type dog breed. - - + +

Shiba Inu

Showing a card with header, content, image, and two action buttons: "share" and "like".

- - - - Shiba Inu - Dog Breed - - - + + + + Shiba Inu + Dog Breed + + + The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting. - - - - - - + + + + + +
diff --git a/src/demo-app/a11y/card/card-a11y.ts b/src/demo-app/a11y/card/card-a11y.ts index 613d72d3af4f..1794ec63212b 100644 --- a/src/demo-app/a11y/card/card-a11y.ts +++ b/src/demo-app/a11y/card/card-a11y.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; @Component({ moduleId: module.id, @@ -10,7 +10,7 @@ import {MdSnackBar} from '@angular/material'; export class CardAccessibilityDemo { showProgress: boolean = false; - constructor(private snackBar: MdSnackBar) {} + constructor(private snackBar: MatSnackBar) {} openSnackbar(message: string) { this.snackBar.open(message, '', {duration: 2000}); diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.html b/src/demo-app/a11y/checkbox/checkbox-a11y.html index 56eca75a04f6..ecf6a3e8aa2e 100644 --- a/src/demo-app/a11y/checkbox/checkbox-a11y.html +++ b/src/demo-app/a11y/checkbox/checkbox-a11y.html @@ -1,34 +1,34 @@

Checkbox without label

- +

Standalone checkbox

- Yes, I agree to the terms and conditions + Yes, I agree to the terms and conditions
- No, I do not agree to the terms and conditions + No, I do not agree to the terms and conditions
- A partially done task + A partially done task

Nested checklist

- {{task.name}} - +
- + {{subtask.name}} - +
@@ -36,7 +36,7 @@

Nested checklist

Colored checkboxes

- Primary - Accent - Warn + Primary + Accent + Warn
diff --git a/src/demo-app/a11y/chips/chips-a11y.html b/src/demo-app/a11y/chips/chips-a11y.html index 466003f84aec..481039952be2 100644 --- a/src/demo-app/a11y/chips/chips-a11y.html +++ b/src/demo-app/a11y/chips/chips-a11y.html @@ -1,57 +1,57 @@

Basic chips

- - Carnation - Irises - Buttercup - + + Carnation + Irises + Buttercup +

Unstyled chips

- - Husky - Golden Retriever - Border Collie - + + Husky + Golden Retriever + Border Collie +

Removable chips in a form field

- - - + + + {{person.name}} - cancel - - - cancel + + + - + [matChipInputFor]="chipList" + [matChipInputAddOnBlur]="addOnBlur" + (matChipInputTokenEnd)="add($event)" /> +

Colored chips

This example is good for contrast-radio checking.

- - Primary - Accent - Warn - + + Primary + Accent + Warn +

Stacked chips

- - Lemon - Lime - Grapefruit - + + Lemon + Lime + Grapefruit +
diff --git a/src/demo-app/a11y/chips/chips-a11y.ts b/src/demo-app/a11y/chips/chips-a11y.ts index ca356a88de27..19388f77ef77 100644 --- a/src/demo-app/a11y/chips/chips-a11y.ts +++ b/src/demo-app/a11y/chips/chips-a11y.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdChipInputEvent, MdSnackBar} from '@angular/material'; +import {MatChipInputEvent, MatSnackBar} from '@angular/material'; export interface Person { @@ -36,13 +36,13 @@ export class ChipsAccessibilityDemo { { name: 'Warn', color: 'warn' } ]; - constructor(public snackBar: MdSnackBar) {} + constructor(public snackBar: MatSnackBar) {} displayMessage(message: string): void { this.message = message; } - add(event: MdChipInputEvent): void { + add(event: MatChipInputEvent): void { let input = event.input; let value = event.value; diff --git a/src/demo-app/a11y/datepicker/datepicker-a11y.html b/src/demo-app/a11y/datepicker/datepicker-a11y.html index aef7740b4bb8..ad89bde33077 100644 --- a/src/demo-app/a11y/datepicker/datepicker-a11y.html +++ b/src/demo-app/a11y/datepicker/datepicker-a11y.html @@ -1,112 +1,112 @@

Choose a date (e.g. choose your date of birth)

- - + - - - + + + Please choose a date. - - + + Please choose an earlier date. - - + +

Choose a date with touch UI (e.g. choose a payment date on mobile)

When would you like to schedule your payment?

- - + - - - + + + Please choose a date. - - + + Please choose a later date. - - + +

Choose date with startAt, min and max (e.g. schedule a departing and returning flight)

- - + - - - + + + Please choose a date. - - + + Please choose a later date. - - + + Please choose an earlier date. - - - - + + + - - - + + + Please choose a later date. - - + + Please choose a date after your departure. - - + + Please choose an earlier date. - - + +

Choose date with date filter (e.g. schedule a doctor appointment)

- - + - - - + + + Please choose a date. - - + + No appointments available on this date. - - + +
diff --git a/src/demo-app/a11y/dialog/dialog-a11y.html b/src/demo-app/a11y/dialog/dialog-a11y.html index e1593db566ad..150980cc9def 100644 --- a/src/demo-app/a11y/dialog/dialog-a11y.html +++ b/src/demo-app/a11y/dialog/dialog-a11y.html @@ -1,13 +1,13 @@

Welcome message

Activate the button to see a welcome dialog with a simple message and a close button.

- +

Choose a fruit

Active the button to choose apple or peach in a dialog.

- +

You chose: {{fruitSelectedOption}}

@@ -19,7 +19,7 @@

Neptune

Active the button to see a dialog showing information of Neptune. A Wikipedia page can be opened either in a new tab or in a stacked dialog.

- +
@@ -27,5 +27,5 @@

Address form

Active the button to fill out shipping address information in a dialog.

- +
diff --git a/src/demo-app/a11y/dialog/dialog-a11y.ts b/src/demo-app/a11y/dialog/dialog-a11y.ts index 73fb3fe565fc..4798798d45ae 100644 --- a/src/demo-app/a11y/dialog/dialog-a11y.ts +++ b/src/demo-app/a11y/dialog/dialog-a11y.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import {MatDialog} from '@angular/material'; @Component({ @@ -11,7 +11,7 @@ import {MdDialog} from '@angular/material'; export class DialogAccessibilityDemo { fruitSelectedOption: string = ''; - constructor(public dialog: MdDialog) {} + constructor(public dialog: MatDialog) {} openFruitDialog() { let dialogRef = this.dialog.open(DialogFruitExampleDialog); @@ -53,7 +53,7 @@ export class DialogWelcomeExampleDialog {} templateUrl: './dialog-neptune-a11y.html' }) export class DialogNeptuneExampleDialog { - constructor(public dialog: MdDialog) { } + constructor(public dialog: MatDialog) { } showInStackedDialog() { this.dialog.open(DialogNeptuneIFrameDialog); diff --git a/src/demo-app/a11y/dialog/dialog-address-form-a11y.html b/src/demo-app/a11y/dialog/dialog-address-form-a11y.html index fd3a29c9fa53..8a95e7a89be5 100644 --- a/src/demo-app/a11y/dialog/dialog-address-form-a11y.html +++ b/src/demo-app/a11y/dialog/dialog-address-form-a11y.html @@ -1,45 +1,45 @@ -

Company

+

Company

- +
- - - + + + - - + +
- - - - + + + +

- - - - - - + + + + + +

- - - + + +
- - - - - - {{postalCode.value.length}} / 5 - + + + + + + {{postalCode.value.length}} / 5 +
- + - - - - + + + + diff --git a/src/demo-app/a11y/dialog/dialog-fruit-a11y.html b/src/demo-app/a11y/dialog/dialog-fruit-a11y.html index f3086a812c28..cb303d41d829 100644 --- a/src/demo-app/a11y/dialog/dialog-fruit-a11y.html +++ b/src/demo-app/a11y/dialog/dialog-fruit-a11y.html @@ -1,6 +1,6 @@ -

Fruit

-
Which would you like to choose?
-
- - +

Fruit

+
Which would you like to choose?
+
+ +
diff --git a/src/demo-app/a11y/dialog/dialog-neptune-a11y.html b/src/demo-app/a11y/dialog/dialog-neptune-a11y.html index e247e83c7714..fd9e67a2e941 100644 --- a/src/demo-app/a11y/dialog/dialog-neptune-a11y.html +++ b/src/demo-app/a11y/dialog/dialog-neptune-a11y.html @@ -1,6 +1,6 @@ -

Neptune

+

Neptune

- + Neptune @@ -13,15 +13,15 @@

Neptune

astronomical units (4.50×109 km). It is named after the Roman god of the sea and has the astronomical symbol ♆, a stylised version of the god Neptune's trident.

- + - - + + - + Read more on Wikipedia - - + diff --git a/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html b/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html index a51b3ad5a958..da7cf120ad29 100644 --- a/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html +++ b/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html @@ -1,9 +1,9 @@ -

Neptune

+

Neptune

- + - + - - - + + + diff --git a/src/demo-app/a11y/dialog/dialog-welcome-a11y.html b/src/demo-app/a11y/dialog/dialog-welcome-a11y.html index 25c8355f7f5f..f1d0cf3074f6 100644 --- a/src/demo-app/a11y/dialog/dialog-welcome-a11y.html +++ b/src/demo-app/a11y/dialog/dialog-welcome-a11y.html @@ -10,4 +10,4 @@

Welcome to Angular Material dialog demo page!

be accessible, enabling people with disabilities to participate equally on the Web.

- + diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.html b/src/demo-app/a11y/grid-list/grid-list-a11y.html index 0316771a2c52..3627a0948176 100644 --- a/src/demo-app/a11y/grid-list/grid-list-a11y.html +++ b/src/demo-app/a11y/grid-list/grid-list-a11y.html @@ -1,42 +1,42 @@

Types of coffee (fix-height grid-list)

- - + {{tile.text}} - - + +

Types of coffee (ratio-height grid list)

- - + + {{tile.text}} - - + +

Types of coffee (fit-height grid list)

- - + {{tile.text}} - - + +

Angular team dogs (Grid list with header and footer)

- - - {{dog.name}} + + + {{dog.name}} Photo of {{dog.name}} - - Human: {{dog.human}} - - - + + Human: {{dog.human}} + + +
diff --git a/src/demo-app/a11y/icon/icon-a11y.html b/src/demo-app/a11y/icon/icon-a11y.html index 3b8bc223aa41..9c01019db4f8 100644 --- a/src/demo-app/a11y/icon/icon-a11y.html +++ b/src/demo-app/a11y/icon/icon-a11y.html @@ -1,30 +1,30 @@

Fingerprint status

Showing a status message with a purely decorative icon

- fingerprint + fingerprint Your fingerprint was recorded!

Delete icon button

Showing a button with interactive icon which can perform an action

-

Home link

Showing a link with interactive icon

- - home + + home

Done status

Showing a status indicator with an indicator icon

- done + done Done Tasks
diff --git a/src/demo-app/a11y/icon/icon-a11y.ts b/src/demo-app/a11y/icon/icon-a11y.ts index 9a5ae09bd96e..9d5d92acee14 100644 --- a/src/demo-app/a11y/icon/icon-a11y.ts +++ b/src/demo-app/a11y/icon/icon-a11y.ts @@ -1,5 +1,5 @@ import {Component, ViewEncapsulation} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; @Component({ moduleId: module.id, @@ -9,7 +9,7 @@ import {MdSnackBar} from '@angular/material'; preserveWhitespaces: false, }) export class IconAccessibilityDemo { - constructor(private snackBar: MdSnackBar) {} + constructor(private snackBar: MatSnackBar) {} deleteIcon() { this.snackBar.open('Item deleted', '', {duration: 2000}); diff --git a/src/demo-app/a11y/input/input-a11y.html b/src/demo-app/a11y/input/input-a11y.html index dabc8dc3b78a..8129ee38d788 100644 --- a/src/demo-app/a11y/input/input-a11y.html +++ b/src/demo-app/a11y/input/input-a11y.html @@ -1,57 +1,57 @@

Basic input box (e.g. name field)

- - - - - - + + + + + +

Input with hint (e.g. password field)

- - + - - Hint: favorite color - You must enter your password. - + Hint: favorite color + You must enter your password. +

Input with error message (e.g. email field)

- - + - You must enter your email. - Not a valid email address. - + You must enter your email. + Not a valid email address. +

Input with prefix & suffix (e.g. currency converter)

- - - $ - + + + $ + = - - - ‎¥‎ - + + + ‎¥‎ + (as of 7/31/2017)

Textarea input (e.g. comment box)

- - - Leave us a comment! - {{commentCount}}/{{commentMax}} - + Leave us a comment! + {{commentCount}}/{{commentMax}} +
diff --git a/src/demo-app/a11y/menu/menu-a11y.html b/src/demo-app/a11y/menu/menu-a11y.html index 250143c1a87d..0b810c70e2f7 100644 --- a/src/demo-app/a11y/menu/menu-a11y.html +++ b/src/demo-app/a11y/menu/menu-a11y.html @@ -2,52 +2,52 @@

Icon Trigger

- - - - + + + + -

Menu with Icons

- - - - - - +

Menu with links

- - - + + Angular - + Angular Material - +
diff --git a/src/demo-app/a11y/progress-bar/progress-bar-a11y.html b/src/demo-app/a11y/progress-bar/progress-bar-a11y.html index 60c14531c45d..416f7e64e237 100644 --- a/src/demo-app/a11y/progress-bar/progress-bar-a11y.html +++ b/src/demo-app/a11y/progress-bar/progress-bar-a11y.html @@ -1,24 +1,24 @@

Survey progress (Determinate progress bar)

- - +

Video progress (Progress bar with buffer)

- - +

Loading content progress (Indeterminate progress bar)

- - + +

Search progress (Query progress bar)

- +
diff --git a/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html b/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html index ea7809a443eb..acf69bb60136 100644 --- a/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html +++ b/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html @@ -1,16 +1,16 @@

Loading indicator (Indeterminate progress spinner)

- - + +

Portion of pizza eaten (Determinate progress spinner)

- - - + - +
diff --git a/src/demo-app/a11y/radio/radio-a11y.html b/src/demo-app/a11y/radio/radio-a11y.html index 7ae213f85fed..8a349a95f967 100644 --- a/src/demo-app/a11y/radio/radio-a11y.html +++ b/src/demo-app/a11y/radio/radio-a11y.html @@ -1,19 +1,19 @@

Radio buttons in group

- - + + {{season}} - - + +

Radio buttons with align-end label position

- - Toast - Biscuit - Bagel - + + Toast + Biscuit + Bagel +
@@ -22,15 +22,15 @@

Disabled radio buttons

This section contains three radio buttons for "Yes", "No", and "Maybe". The "Maybe" radio button is disabled.

- Yes - No - Maybe + Yes + No + Maybe

Radio buttons with different colors

- Default (accent) - Primary - Accent - Warn + Default (accent) + Primary + Accent + Warn
diff --git a/src/demo-app/a11y/select/select-a11y.html b/src/demo-app/a11y/select/select-a11y.html index 4ca8f71378dd..829809d74987 100644 --- a/src/demo-app/a11y/select/select-a11y.html +++ b/src/demo-app/a11y/select/select-a11y.html @@ -2,89 +2,89 @@

Single selection

Select your favorite color

- - - + + + {{ color.label }} - - - + + +

Multiple selection

Pick toppings for your pizza

- - - + + + {{ topping.label }} - - - + + +

Grouped options

Pick your Pokemon

- - - - + + + + {{ creature.label }} - - - - + + + +

Colors

- - - 2000 - 2100 - - + + + 2000 + 2100 + + - - - Alaska - Alabama - - + + + Alaska + Alabama + + - - - English - Spanish - - + + + English + Spanish + +
- - - Mihiramon - Sandiramon - - + + + Mihiramon + Sandiramon + + - - - Water - Coke - - + + + Water + Coke + + - - - Light - Dark - - + + + Light + Dark + +
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html index 3fe2d1ef16be..80ae889df807 100644 --- a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html +++ b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html @@ -1,28 +1,28 @@

Receive email update

Showing a toggle to manage whether receive email update.

- + Receive email update - +

Music

Showing a disabled toggle to control music on/off status.

- + Music {{musicToggle ? 'on' : 'off'}} (disabled) - +

Terms and conditions

Showing a required toggle to accept terms and conditions in a form.

- + I agree to terms and conditions - +

- +

diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts index 6975bcfcd8ba..58c3ff2c6a3f 100644 --- a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts +++ b/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; @Component({ @@ -12,7 +12,7 @@ export class SlideToggleAccessibilityDemo { termsToggle: boolean = false; musicToggle: boolean = false; - constructor(private snackBar: MdSnackBar) {} + constructor(private snackBar: MatSnackBar) {} onFormSubmit() { this.snackBar.open('Terms and condistions accepted!', '', {duration: 2000}); diff --git a/src/demo-app/a11y/slider/slider-a11y.html b/src/demo-app/a11y/slider/slider-a11y.html index b4d31868b510..baa781c32f0c 100644 --- a/src/demo-app/a11y/slider/slider-a11y.html +++ b/src/demo-app/a11y/slider/slider-a11y.html @@ -5,15 +5,15 @@

Continuous slider (e.g. color component sliders)

- +
- +
- +
@@ -23,7 +23,7 @@

Continuous slider (e.g. color component sliders)

Discrete slider (e.g. rate a product)

Please rate our product on a scale of 1 (not satisfied) to 5 (extremely satisfied).

- +
@@ -31,9 +31,9 @@

Vertical slider (e.g. volume control)

Use the slider to adjust the volume.

- +
diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.html b/src/demo-app/a11y/snack-bar/snack-bar-a11y.html index 0065282adccb..45e955476faf 100644 --- a/src/demo-app/a11y/snack-bar/snack-bar-a11y.html +++ b/src/demo-app/a11y/snack-bar/snack-bar-a11y.html @@ -1,7 +1,7 @@

Notification

Showing a notification by snack bar without showing actions

-
@@ -9,5 +9,5 @@

Notification

Disco party

Showing a notification by snack bar with a dismiss button

- +
diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts b/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts index 8a4953fc8061..b36ad0bc69b1 100644 --- a/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts +++ b/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; @Component({ moduleId: module.id, @@ -7,7 +7,7 @@ import {MdSnackBar} from '@angular/material'; templateUrl: 'snack-bar-a11y.html', }) export class SnackBarAccessibilityDemo { - constructor(private snackBar: MdSnackBar) {} + constructor(private snackBar: MatSnackBar) {} openDiscoPartySnackBar() { this.snackBar.open('Disco party!', 'Dismiss', {duration: 5000}); diff --git a/src/demo-app/a11y/tabs/tabs-a11y.html b/src/demo-app/a11y/tabs/tabs-a11y.html index af66c3b2889e..d391431dc90a 100644 --- a/src/demo-app/a11y/tabs/tabs-a11y.html +++ b/src/demo-app/a11y/tabs/tabs-a11y.html @@ -2,8 +2,8 @@

Weather

Switch tabs to navigate

-
- + Weather

Dog breeds

Dynamic height tabs

- - - {{tab.label}} + + + {{tab.label}}
{{tab.content}}
@@ -57,7 +57,7 @@

Dog breeds


- - + + diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.html b/src/demo-app/a11y/toolbar/toolbar-a11y.html index d50e35d6ccc3..064da06c75d9 100644 --- a/src/demo-app/a11y/toolbar/toolbar-a11y.html +++ b/src/demo-app/a11y/toolbar/toolbar-a11y.html @@ -1,40 +1,40 @@

Basic Toolbar with Text (e.g. Only display app’s name)

- +

My App

- +

Hello World!

Multiple Lines Toolbar

- +

Settings

- - + +

Profile

- +

My profile

Toolbar with favorite icon

- +

My App

- - +

Hello World!

Toolbar colors

- +

My App

- +

Hello World!

diff --git a/src/demo-app/a11y/tooltip/tooltip-a11y.html b/src/demo-app/a11y/tooltip/tooltip-a11y.html index 14c2307cd09b..699f019dfcee 100644 --- a/src/demo-app/a11y/tooltip/tooltip-a11y.html +++ b/src/demo-app/a11y/tooltip/tooltip-a11y.html @@ -1,14 +1,14 @@

Mouse over or tab to trigger a tooltip

Mouse over or focus the button to show and hide the tooltip

- +

Click to trigger a tooltip

- - + +
@@ -16,30 +16,30 @@

Click to trigger a tooltip

Different tooltip positions

+ mat-raised-button + matTooltip="This tooltip appears below the trigger" + matTooltipPosition="below">Below + mat-raised-button + matTooltip="This tooltip appears above the trigger" + matTooltipPosition="above">Above + mat-raised-button + matTooltip="This tooltip appears to the left of the trigger" + matTooltipPosition="left">Left + mat-raised-button + matTooltip="This tooltip appears to the right of the trigger" + matTooltipPosition="right">Right

Delayed tooltip

+ mat-raised-button + matTooltip="This tooltip will show up after a delay" + [matTooltipShowDelay]="2000">What is this?
diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html index 5ca27f2a5d0b..e31478d10b25 100644 --- a/src/demo-app/autocomplete/autocomplete-demo.html +++ b/src/demo-app/autocomplete/autocomplete-demo.html @@ -1,87 +1,87 @@ Space above cards:
- + Reactive length: {{ reactiveStates.length }}
Reactive value: {{ stateCtrl.value | json }}
Reactive dirty: {{ stateCtrl.dirty }}
- - - - + + + + {{ state.name }} ({{state.code}}) - - - + + + - - - - + + - + - + - +
Template-driven value (currentState): {{ currentState }}
Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}
- - + - - + + {{ state.name }} - - - + + + - - - - + + - + - + - +
Option groups (currentGroupedState): {{ currentGroupedState }}
- + - - + +
- - + + {{ state.name }} ({{state.code}}) - - + + - - + + {{ state.name }} - - + + - - + - {{ state.name }} - - + {{ state.name }} + + diff --git a/src/demo-app/baseline/baseline-demo.html b/src/demo-app/baseline/baseline-demo.html index ba4568cb36d5..8a695ce1c7f4 100644 --- a/src/demo-app/baseline/baseline-demo.html +++ b/src/demo-app/baseline/baseline-demo.html @@ -1,61 +1,61 @@ - - Basic Forms - + + Basic Forms + Text Before | - Checkbox Label + Checkbox Label | Text 1 | - Radio 1 + Radio 1 | Text 2 | - Radio 2 + Radio 2 | Text 3 | - Radio 3 + Radio 3 | Text 4 | - - - + + + | Text 5 | - - - Option - This option is really really really long - - + + + Option + This option is really really really long + + | Text 6 | - - - + + + | Text After - - + + - - Headers - + + Headers +

Text Before | - Checkbox Label + Checkbox Label | Text 1 | - Radio 1 + Radio 1 | Text 2 | - Radio 2 + Radio 2 | Text 3 | - Radio 3 + Radio 3 | Text 4 | - - - + + + | Text 5 | - - - Option - This option is really really really long - - + + + Option + This option is really really really long + + | Text 6 | - - - + + + | Text After

- - + + diff --git a/src/demo-app/button-toggle/button-toggle-demo.html b/src/demo-app/button-toggle/button-toggle-demo.html index 0d158c21ecc3..3d81775b284e 100644 --- a/src/demo-app/button-toggle/button-toggle-demo.html +++ b/src/demo-app/button-toggle/button-toggle-demo.html @@ -1,57 +1,57 @@

- Show Button Toggles Vertical + Show Button Toggles Vertical

- Disable Button Toggle Items + Disable Button Toggle Items

Exclusive Selection

- - format_align_left - format_align_center - format_align_right - format_align_justify - + + format_align_left + format_align_center + format_align_right + format_align_justify +

Disabled Group

- - - format_bold - - - format_italic - - - format_underline - - + + + format_bold + + + format_italic + + + format_underline + +

Multiple Selection

- - Flour - Eggs - Sugar - Milk - + + Flour + Eggs + Sugar + Milk +

Single Toggle

-Yes +Yes

Dynamic Exclusive Selection

- - + + {{pie}} - - + +

Your favorite type of pie is: {{favoritePie}}

diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html index 98a31e38b9a1..38ffdfd83e83 100644 --- a/src/demo-app/button/button-demo.html +++ b/src/demo-app/button/button-demo.html @@ -1,113 +1,113 @@
- - - + + - - Link - check - + Link + check + - - Link + + Link
- SEARCH - SEARCH - - check + SEARCH + SEARCH + + check - - check + + check
- - - + + +
- - - + + +
- - -
- - -

isDisabled: {{isDisabled}}, clickCounter: {{clickCounter}}

- - - - + + +
- - - off - - + + off + + -
- SEARCH - + SEARCH +
- SEARCH - + SEARCH +
- - - - + + + +
- - - - + + + +
- - + +
diff --git a/src/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html index 98cc322d20e3..599e37891553 100644 --- a/src/demo-app/card/card-demo.html +++ b/src/demo-app/card/card-demo.html @@ -1,61 +1,61 @@
- + Hello - + - - - Card with title - Subtitle - - - + + + Card with title + Subtitle + + + - - Subtitle - Card with title and footer - + + Subtitle + Card with title and footer +

This is supporting text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

- - - - - - - - - + + + + + + + + + - - - Content Title - + + + Content Title +

Here is some content

- - - - - - + + + + + + - - - - Header title - Header subtitle - - - + + + + Header title + Header subtitle + + +

Here is some content

- - + + - - Easily customizable - - - - - + + Easily customizable + + + + +
diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/demo-app/checkbox/checkbox-demo.html index 28760dac161c..0faf25ebd0fb 100644 --- a/src/demo-app/checkbox/checkbox-demo.html +++ b/src/demo-app/checkbox/checkbox-demo.html @@ -1,6 +1,6 @@ -

md-checkbox: Basic Example

+

mat-checkbox: Basic Example

-md-checkbox: Basic Example [align]="alignment"> Do you want to foobar the bazquux? - - {{printResult()}} + - {{printResult()}}
md-checkbox: Basic Example

Pseudo checkboxes

- - + + - - + + - - + +

Nested Checklist

- + diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/demo-app/checkbox/checkbox-demo.ts index 9e507ea2506e..e7331d047770 100644 --- a/src/demo-app/checkbox/checkbox-demo.ts +++ b/src/demo-app/checkbox/checkbox-demo.ts @@ -9,7 +9,7 @@ export interface Task { @Component({ moduleId: module.id, - selector: 'md-checkbox-demo-nested-checklist', + selector: 'mat-checkbox-demo-nested-checklist', styles: [` li { margin-bottom: 4px; @@ -17,7 +17,7 @@ export interface Task { `], templateUrl: 'nested-checklist.html', }) -export class MdCheckboxDemoNestedChecklist { +export class MatCheckboxDemoNestedChecklist { tasks: Task[] = [ { name: 'Reminders', @@ -63,7 +63,7 @@ export class MdCheckboxDemoNestedChecklist { @Component({ moduleId: module.id, - selector: 'md-checkbox-demo', + selector: 'mat-checkbox-demo', templateUrl: 'checkbox-demo.html', styleUrls: ['checkbox-demo.css'], }) diff --git a/src/demo-app/checkbox/nested-checklist.html b/src/demo-app/checkbox/nested-checklist.html index 71c77d83f2e5..6a4ab3e617ab 100644 --- a/src/demo-app/checkbox/nested-checklist.html +++ b/src/demo-app/checkbox/nested-checklist.html @@ -1,17 +1,17 @@

Tasks

  • -

    {{task.name}}

    -     +
    • - + {{subtask.name}} - +
    • diff --git a/src/demo-app/chips/chips-demo.html b/src/demo-app/chips/chips-demo.html index 4673b48b256a..6df231e28ee0 100644 --- a/src/demo-app/chips/chips-demo.html +++ b/src/demo-app/chips/chips-demo.html @@ -1,104 +1,104 @@
    - - Static Chips + + Static Chips - +

    Simple

    - - Chip 1 - Chip 2 - Chip 3 - + + Chip 1 + Chip 2 + Chip 3 +

    Unstyled

    - - Basic Chip 1 - Basic Chip 2 - Basic Chip 3 - + + Basic Chip 1 + Basic Chip 2 + Basic Chip 3 +

    Advanced

    - - Selected/Colored + + Selected/Colored - With Events - cancel - - + cancel + +
    {{message}}
    -     -     + + - - Dynamic Chips + + Dynamic Chips - +

    Form Field

    - You can easily put the the <md-chip-list> inside of an - <md-form-field>. + You can easily put the the <mat-chip-list> inside of an + <mat-form-field>.

    - - - - + + {{person.name}} - cancel - + cancel + - - + [matChipInputFor]="chipList1" + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" + [matChipInputAddOnBlur]="false" + (matChipInputTokenEnd)="add($event)" /> + +

    - You can also put <md-form-field> outside of an md-chip-list. - With mdChipInput the input work with chip-list + You can also put <mat-form-field> outside of an mat-chip-list. + With matChipInput the input work with chip-list

    - - - + + {{person.name}} - cancel - - + cancel + + - + [matChipInputFor]="chipList2" + [matChipInputSeparatorKeyCodes]="separatorKeysCodes" + [matChipInputAddOnBlur]="addOnBlur" + (matChipInputTokenEnd)="add($event)" /> +

    Chips list without input

    - - - + + {{person.name}} - cancel - - - + cancel + + +

    @@ -108,9 +108,9 @@

    Form Field

    Options

    - Selectable - Removable - Add on Blur + Selectable + Removable + Add on Blur

    Stacked Chips

    @@ -120,34 +120,34 @@

    Stacked Chips

    (focus) event to run custom code.

    - - + {{aColor.name}} - - + +

    NgModel with chip list

    - - + {{aColor.name}} - cancel - - + cancel + + The selected colors are {{color}}.

    NgModel with single selection chip list

    - - + {{aColor.name}} - cancel - - + cancel + + The selected color is {{selectedColor}}. -     -     + +
    diff --git a/src/demo-app/chips/chips-demo.scss b/src/demo-app/chips/chips-demo.scss index 5928eef7375b..648001486a03 100644 --- a/src/demo-app/chips/chips-demo.scss +++ b/src/demo-app/chips/chips-demo.scss @@ -21,7 +21,7 @@ margin: auto 10px; } - md-chip-list input { + mat-chip-list input { width: 150px; } } diff --git a/src/demo-app/chips/chips-demo.ts b/src/demo-app/chips/chips-demo.ts index 4d5995aed4a3..ad3620047c67 100644 --- a/src/demo-app/chips/chips-demo.ts +++ b/src/demo-app/chips/chips-demo.ts @@ -1,6 +1,6 @@ import {ENTER} from '@angular/cdk/keycodes'; import {Component} from '@angular/core'; -import {MdChipInputEvent} from '@angular/material'; +import {MatChipInputEvent} from '@angular/material'; const COMMA = 188; @@ -53,7 +53,7 @@ export class ChipsDemo { this.message = message; } - add(event: MdChipInputEvent): void { + add(event: MatChipInputEvent): void { let input = event.input; let value = event.value; diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html index 9f55b0820c61..127c5ec2bc8d 100644 --- a/src/demo-app/datepicker/datepicker-demo.html +++ b/src/demo-app/datepicker/datepicker-demo.html @@ -1,107 +1,107 @@

    Options

    - Use touch UI - Filter odd months and dates - Start in year view - Disable datepicker - Disable input + Use touch UI + Filter odd months and dates + Start in year view + Disable datepicker + Disable input

    - - + - - - - - + + + + - - - + + +

    - - + - - - + + +

    Result

    - - - + + - - - - "{{resultPickerModel.getError('mdDatepickerParse').text}}" is not a valid date! - - Too early! - Too late! - Date unavailable! - + + + "{{resultPickerModel.getError('matDatepickerParse').text}}" is not a valid date! + + Too early! + Too late! + Date unavailable! +

    Last input: {{lastDateInput}}

    Last change: {{lastDateChange}}


    - - + - +

    Input disabled datepicker

    - - - + + - - + +

    Input disabled, datepicker popup enabled

    - - - + + - - + +

    diff --git a/src/demo-app/datepicker/datepicker-demo.scss b/src/demo-app/datepicker/datepicker-demo.scss index c98cba687f8c..9672ffb589e1 100644 --- a/src/demo-app/datepicker/datepicker-demo.scss +++ b/src/demo-app/datepicker/datepicker-demo.scss @@ -1,3 +1,3 @@ -md-calendar { +mat-calendar { width: 300px; } diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts index 3fc61b0b3144..fe363d322b5e 100644 --- a/src/demo-app/datepicker/datepicker-demo.ts +++ b/src/demo-app/datepicker/datepicker-demo.ts @@ -1,5 +1,5 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; -import {MdDatepickerInputEvent} from '@angular/material'; +import {MatDatepickerInputEvent} from '@angular/material'; @Component({ @@ -24,6 +24,6 @@ export class DatepickerDemo { dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0; - onDateInput = (e: MdDatepickerInputEvent) => this.lastDateInput = e.value; - onDateChange = (e: MdDatepickerInputEvent) => this.lastDateChange = e.value; + onDateInput = (e: MatDatepickerInputEvent) => this.lastDateInput = e.value; + onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value; } diff --git a/src/demo-app/demo-app/demo-app.html b/src/demo-app/demo-app/demo-app.html index 7138842d1a48..496b93d96346 100644 --- a/src/demo-app/demo-app/demo-app.html +++ b/src/demo-app/demo-app/demo-app.html @@ -1,8 +1,8 @@ - - - + + + - Baseline - - - + + +
    - -

    Angular Material Demos

    - - - +
    -     +
    -     + diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts index 80e21dbe5c26..b73d8c9dd38b 100644 --- a/src/demo-app/demo-app/demo-module.ts +++ b/src/demo-app/demo-app/demo-module.ts @@ -8,7 +8,7 @@ import {BaselineDemo} from '../baseline/baseline-demo'; import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo'; import {ButtonDemo} from '../button/button-demo'; import {CardDemo} from '../card/card-demo'; -import {CheckboxDemo, MdCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo'; +import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo'; import {ChipsDemo} from '../chips/chips-demo'; import {DatepickerDemo} from '../datepicker/datepicker-demo'; import {DemoMaterialModule} from '../demo-material-module'; @@ -79,7 +79,7 @@ import {DEMO_APP_ROUTES} from './routes'; JazzDialog, ListDemo, LiveAnnouncerDemo, - MdCheckboxDemoNestedChecklist, + MatCheckboxDemoNestedChecklist, MenuDemo, OverlayDemo, PlatformDemo, diff --git a/src/demo-app/demo-material-module.ts b/src/demo-app/demo-material-module.ts index 1cf016b7a2dc..4da1bc2e0575 100644 --- a/src/demo-app/demo-material-module.ts +++ b/src/demo-app/demo-material-module.ts @@ -1,37 +1,37 @@ import {NgModule} from '@angular/core'; import { - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdSortModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - MdStepperModule, + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatStepperModule, } from '@angular/material'; -import {MdNativeDateModule, MdRippleModule} from '@angular/material'; +import {MatNativeDateModule, MatRippleModule} from '@angular/material'; import {CdkTableModule} from '@angular/cdk/table'; import {A11yModule} from '@angular/cdk/a11y'; import {BidiModule} from '@angular/cdk/bidi'; @@ -45,38 +45,38 @@ import {PortalModule} from '@angular/cdk/portal'; */ @NgModule({ exports: [ - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdTableModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSlideToggleModule, - MdSliderModule, - MdSnackBarModule, - MdSortModule, - MdStepperModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - MdNativeDateModule, + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatTableModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSlideToggleModule, + MatSliderModule, + MatSnackBarModule, + MatSortModule, + MatStepperModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatNativeDateModule, CdkTableModule, A11yModule, BidiModule, diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html index e5d40ad94b34..ffceaaae13bf 100644 --- a/src/demo-app/dialog/dialog-demo.html +++ b/src/demo-app/dialog/dialog-demo.html @@ -1,81 +1,81 @@

    Dialog demo

    - - - - - + +

    Dialog dimensions

    - - - - - - + + + + + +

    Dialog position

    - - - - - - + + + + + +

    - - - - - - + + + + + +

    Dialog backdrop

    - - - + + +

    - Has backdrop + Has backdrop

    Other options

    - - - Start - End - Center - - + + + Start + End + Center + +

    - - - + + +

    - Disable close + Disable close

    -     -     + +

    Last afterClosed result: {{lastAfterClosedResult}}

    Last beforeClose result: {{lastBeforeCloseResult}}

    @@ -85,9 +85,9 @@

    Other options

    It's Jazz!

    - - - + + +

    {{ data.message }}

    diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts index 339fcbffa018..87c67b151e18 100644 --- a/src/demo-app/dialog/dialog-demo.ts +++ b/src/demo-app/dialog/dialog-demo.ts @@ -1,6 +1,6 @@ import {Component, Inject, ViewChild, TemplateRef} from '@angular/core'; import {DOCUMENT} from '@angular/platform-browser'; -import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; @Component({ @@ -10,7 +10,7 @@ import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; styleUrls: ['dialog-demo.css'], }) export class DialogDemo { - dialogRef: MdDialogRef | null; + dialogRef: MatDialogRef | null; lastAfterClosedResult: string; lastBeforeCloseResult: string; actionsAlignment: string; @@ -35,7 +35,7 @@ export class DialogDemo { @ViewChild(TemplateRef) template: TemplateRef; - constructor(public dialog: MdDialog, @Inject(DOCUMENT) doc: any) { + constructor(public dialog: MatDialog, @Inject(DOCUMENT) doc: any) { // Possible useful example for the open and closeAll events. // Adding a class to the body if a dialog opens and // removing it after all open dialogs are closed @@ -78,9 +78,9 @@ export class DialogDemo { template: `

    It's Jazz!

    - - - + + +

    {{ data.message }}

    @@ -90,8 +90,8 @@ export class JazzDialog { private _dimesionToggle = false; constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) public data: any) { } + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any) { } togglePosition(): void { this._dimesionToggle = !this._dimesionToggle; @@ -117,9 +117,9 @@ export class JazzDialog { }` ], template: ` -

    Neptune

    +

    Neptune

    - +

    @@ -131,32 +131,32 @@ export class JazzDialog { astronomical units (4.50×109 km). It is named after the Roman god of the sea and has the astronomical symbol ♆, a stylised version of the god Neptune's trident.

    -     + - + + mat-dialog-close>Close Read more on Wikipedia - + ` }) export class ContentElementDialog { actionsAlignment: string; - constructor(public dialog: MdDialog) { } + constructor(public dialog: MatDialog) { } showInStackedDialog() { this.dialog.open(IFrameDialog); @@ -171,18 +171,18 @@ export class ContentElementDialog { }` ], template: ` -

    Neptune

    +

    Neptune

    - + - + - + - + mat-dialog-close>Close + ` }) export class IFrameDialog { diff --git a/src/demo-app/drawer/drawer-demo.html b/src/demo-app/drawer/drawer-demo.html index 3a2dddc4d1d2..a7f54541bc12 100644 --- a/src/demo-app/drawer/drawer-demo.html +++ b/src/demo-app/drawer/drawer-demo.html @@ -1,58 +1,58 @@

    Basic Use Case

    - - + + Start Side Drawer
    - +
    - +
    -
    Mode: {{start.mode}}

    -     + - + End Side Drawer
    - -     + +

    My Content

    Drawer
    - - + +
    - - - + + +
    -     +

    Drawer Already Opened

    - - + + Drawer - +
    - +
    -     +

    Dynamic Position Drawer

    - - Start - End + + Start + End
    -     +

    Drawer with focus attributes

    - - - - Link - Focus region start - Link - Initially focused - Focus region end - Link - - + + + + Link + Focus region start + Link + Initially focused + Focus region end + Link + +

    My Content

    Drawer
    - +
    -     + diff --git a/src/demo-app/expansion/expansion-demo.html b/src/demo-app/expansion/expansion-demo.html index e22b96339de9..b14c6434c650 100644 --- a/src/demo-app/expansion/expansion-demo.html +++ b/src/demo-app/expansion/expansion-demo.html @@ -1,64 +1,64 @@

    Single Expansion Panel

    - - + + This is a panel description. Panel Title - + This is the content text that makes sense here. - - - - - + + + + +
    - - - + + + - - - + + +

    Accordion

    Accordion Options

    - Allow Multi Expansion - Hide Indicators - Disable Panel 2 - Show Panel 3 + Allow Multi Expansion + Hide Indicators + Disable Panel 2 + Show Panel 3

    Accordion Style

    - - Default - Flat - + + Default + Flat +

    Accordion Panel(s)

    - Panel 1 - Panel 2 + Panel 1 + Panel 2

    - - - Section 1 + + + Section 1

    This is the content text that makes sense here.

    -     - - Section 2 + + + Section 2

    This is the content text that makes sense here.

    -     - - Section 3 - Reveal Buttons Below - - - - - -     + + + Section 3 + Reveal Buttons Below + + + + + + diff --git a/src/demo-app/expansion/expansion-demo.scss b/src/demo-app/expansion/expansion-demo.scss index df5591b49721..b8ef2d203d35 100644 --- a/src/demo-app/expansion/expansion-demo.scss +++ b/src/demo-app/expansion/expansion-demo.scss @@ -1,4 +1,4 @@ -.md-expansion-demo-width { +.mat-expansion-demo-width { width: 600px; display: block; } diff --git a/src/demo-app/grid-list/grid-list-demo.html b/src/demo-app/grid-list/grid-list-demo.html index 6a915d77f7d1..a9e869cfcc69 100644 --- a/src/demo-app/grid-list/grid-list-demo.html +++ b/src/demo-app/grid-list/grid-list-demo.html @@ -1,91 +1,91 @@
    - - Basic grid list - - - One - Two - Three - Four - - - + + Basic grid list + + + One + Two + Three + Four + + + - - Fixed-height grid list - - - + Fixed-height grid list + + + {{tile.text}} - - - - + + + +

    Change list cols:

    Change row height:

    - -     -     + + + - - Ratio-height grid list - - - + + Ratio-height grid list + + + {{tile.text}} - - - - + + + +

    Change ratio:

    -     -     + + - - Fit-height grid list - - + Fit-height grid list + + - + {{tile.text}} - - - - + + + +

    Change list height:

    Change gutter:

    -     -     + + - - Grid list with header - - - - - info_outline + + Grid list with header + + + + + info_outline {{dog.name}} - - - - - + + + + + - - Grid list with footer - - - + + Grid list with footer + + + - -

    {{dog.name}}

    - Human: {{dog.human}} - star_border -     -     -     -     -     + +

    {{dog.name}}

    + Human: {{dog.human}} + star_border +     + + + +
    diff --git a/src/demo-app/icon/icon-demo.html b/src/demo-app/icon/icon-demo.html index 338c4717ff9f..6067745806b6 100644 --- a/src/demo-app/icon/icon-demo.html +++ b/src/demo-app/icon/icon-demo.html @@ -4,32 +4,32 @@

    - By name registered with MdIconProvider: - - + By name registered with MatIconProvider: + +

    From icon set: - - - + + +

    Ligature from Material Icons font: - home + home

    Using a theme: - home - home - home + home + home + home

    Custom icon font and CSS: - +

    diff --git a/src/demo-app/icon/icon-demo.ts b/src/demo-app/icon/icon-demo.ts index e5975d672a2d..1c66bb8b557e 100644 --- a/src/demo-app/icon/icon-demo.ts +++ b/src/demo-app/icon/icon-demo.ts @@ -1,18 +1,18 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; -import {MdIconRegistry} from '@angular/material'; +import {MatIconRegistry} from '@angular/material'; @Component({ moduleId: module.id, - selector: 'md-icon-demo', + selector: 'mat-icon-demo', templateUrl: 'icon-demo.html', styleUrls: ['icon-demo.css'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) export class IconDemo { - constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { - mdIconRegistry + constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { + iconRegistry .addSvgIcon('thumb-up', sanitizer.bypassSecurityTrustResourceUrl('/icon/assets/thumbup-icon.svg')) .addSvgIconSetInNamespace('core', diff --git a/src/demo-app/index.html b/src/demo-app/index.html index 706848123e5d..b8669924fdb5 100644 --- a/src/demo-app/index.html +++ b/src/demo-app/index.html @@ -11,7 +11,7 @@ - + diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index 1a171440ca20..deeb7cdaf4cd 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -1,342 +1,342 @@ - - Basic - + + Basic +
    - - - + + +
    - - - + + + - - - + + +

    - - - - - - + + + + + +

    - - - + + + - - - + + + - - + - - mode_edit + + mode_edit {{postalCode.value.length}} / 5 - - + +
    -     -     + + - - Error messages - + + Error messages +

    Regular

    - - - This field is required - + + + This field is required + - - - + + + This field is required - - + + Please enter a valid email address - - + +

    With hint

    - - - This field is required - Please type something here - + + + This field is required + Please type something here +

    Inside a form

    - - + - This field is required - + This field is required + - +

    With a custom error function

    - - + - This field is required - + This field is required + -     -     + + - - Prefix + Suffix - + + Prefix + Suffix +

    Text

    - - - $  - .00 - + + + $  + .00 +

    Icons

    - - - attach_money - mode_edit - + + + attach_money + mode_edit +

    Icon buttons

    - - - - - -     -     + + + + + + + - - Divider Colors - + + Divider Colors +

    Input

    - - - - - - - - - + + + + + + + + +

    Textarea

    - - - - - - - - - + + + + + + + + +

    With error

    - - - This field is required - - - - This field is required - - - - This field is required - -     -     + + + This field is required + + + + This field is required + + + + This field is required + + + - - Hints - + + Hints +

    Input

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

    Textarea

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

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

    - - - - - - + + + + + +

    - - - + + +

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

    - - - + + +

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

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

    - - - + + + Enter some text to count how many characters are in it. The character count is shown on the right. - - + + Length: {{longHint.value.length}} - - + +

    - Check to change the color: - - - + Check to change the color: + + +

    - Check to make required: - - Check to make required: + + - +

    - Check to hide the required marker: - - Check to hide the required marker: + + - +

    - - Auto Float - Always Float - Never Float - + + Auto Float + Always Float + Never Float +

    - - - + + +

    - - -

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

    - Empty: - + Empty: +

    -     -     + + - - Number Inputs - + + Number Inputs + @@ -350,13 +350,13 @@

    Textarea

    Table
    {{i+1}} - - + - + @@ -364,46 +364,46 @@

    Textarea

    		{{item.value}}
    -     -     + + - - Forms - - - - - - - -
    - - - + + +
    -     -     + + - - Textarea Autosize - + + Textarea Autosize +

    Regular <textarea>

    - + -

    <textarea> with md-form-field

    +

    <textarea> with mat-form-field

    - - - +

    <textarea> with ngModel

    @@ -412,7 +412,7 @@

    <textarea> with ngModel

    -     -     + + diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html index 5109f4cd2647..347d5c24732b 100644 --- a/src/demo-app/list/list-demo.html +++ b/src/demo-app/list/list-demo.html @@ -1,122 +1,122 @@ -

    md-list demo

    +

    mat-list demo

    - +

    Normal lists

    - -

    Items

    - + +

    Items

    + {{item}} -     -     + + - - -

    {{contact.name}}

    -

    extra line

    -

    {{contact.headline}}

    -     -     + + +

    {{contact.name}}

    +

    extra line

    +

    {{contact.headline}}

    +     +     - -

    Today

    - - Image of {{message.from}} -

    {{message.from}}

    -

    + +

    Today

    + + Image of {{message.from}} +

    {{message.from}}

    +

    {{message.subject}} -- {{message.message}}

    -     - - -

    {{message.from}}

    -

    {{message.subject}}

    -

    {{message.message}}

    -     -     + + + +

    {{message.from}}

    +

    {{message.subject}}

    +

    {{message.message}}

    +     +

    Dense lists

    - -

    Items

    - + +

    Items

    + {{item}} -     -     + + - - -

    {{contact.name}}

    -

    {{contact.headline}}

    -     -     + + +

    {{contact.name}}

    +

    {{contact.headline}}

    +     +     - -

    Today

    - - Image of {{message.from}} -

    {{message.from}}

    -

    {{message.subject}}

    -

    {{message.message}}

    -     -     + +

    Today

    + + Image of {{message.from}} +

    {{message.from}}

    +

    {{message.subject}}

    +

    {{message.message}}

    +     +

    Nav lists

    - - + + {{ link.name }} - +
    More info!
    - - - {{ link.name }} - - - - - - folder - {{ link.name }} - Description + + + + + folder + {{ link.name }} + Description - - - - {{ link.name }} - - - + +

    Selection list

    - -

    Groceries

    + +

    Groceries

    - + {{item}} - -     + +

    Selected: {{groceries.selectedOptions.selected.length}}

    - - + +

    diff --git a/src/demo-app/live-announcer/live-announcer-demo.html b/src/demo-app/live-announcer/live-announcer-demo.html index 4aa01f5ef659..ce59732387be 100644 --- a/src/demo-app/live-announcer/live-announcer-demo.html +++ b/src/demo-app/live-announcer/live-announcer-demo.html @@ -1,5 +1,5 @@
    - +
    \ No newline at end of file diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html index 502050bf9ddf..86c9baf2849d 100644 --- a/src/demo-app/menu/menu-demo.html +++ b/src/demo-app/menu/menu-demo.html @@ -2,118 +2,118 @@

    You clicked on: {{ selected }}

    - - - + - - - +

    Nested menu

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    Clicking these will navigate:

    - - - + - - + + {{ item.text }} - +

    Position x: before

    - - - + - - - +

    Position y: above

    - - - + - - - +
    @@ -121,49 +121,49 @@

    overlapTrigger: false

    - - - + - - - +

    Position x: before, overlapTrigger: false

    - - - + - - - +

    Position y: above, overlapTrigger: false

    - - - + - - - +
    diff --git a/src/demo-app/progress-bar/progress-bar-demo.html b/src/demo-app/progress-bar/progress-bar-demo.html index 7c1e558e8c37..62acae8389ec 100644 --- a/src/demo-app/progress-bar/progress-bar-demo.html +++ b/src/demo-app/progress-bar/progress-bar-demo.html @@ -1,45 +1,45 @@ - - Primary Color - Accent Color - Warn Color - + + Primary Color + Accent Color + Warn Color +

    Determinate

    Value: {{determinateProgressValue}} - - + +
    - - + +

    Buffer

    Value: {{bufferProgressValue}} - - + + Buffer Value: {{bufferBufferValue}} - - + +
    - +

    Indeterminate

    - +

    Query

    - +
    diff --git a/src/demo-app/progress-bar/progress-bar-demo.scss b/src/demo-app/progress-bar/progress-bar-demo.scss index f78bb2d8a226..b83828a6417e 100644 --- a/src/demo-app/progress-bar/progress-bar-demo.scss +++ b/src/demo-app/progress-bar/progress-bar-demo.scss @@ -1,7 +1,7 @@ .demo-progress-bar-container { width: 100%; - md-progress-bar { + mat-progress-bar { margin: 20px 0; } } diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.html b/src/demo-app/progress-spinner/progress-spinner-demo.html index 07a04390dc8c..27a9dfcec7c3 100644 --- a/src/demo-app/progress-spinner/progress-spinner-demo.html +++ b/src/demo-app/progress-spinner/progress-spinner-demo.html @@ -2,29 +2,29 @@

    Determinate

    Value: {{progressValue}}

    - - - Is determinate + + + Is determinate
    - - + +

    Indeterminate

    - - Primary Color - Accent Color - Warn Color - + + Primary Color + Accent Color + Warn Color +
    - - - + + +
    diff --git a/src/demo-app/radio/radio-demo.html b/src/demo-app/radio/radio-demo.html index 043690f4b7e5..09ecd1a2782a 100644 --- a/src/demo-app/radio/radio-demo.html +++ b/src/demo-app/radio/radio-demo.html @@ -1,52 +1,52 @@

    Basic Example

    - Option 1 - Option 2 - Option 3 (disabled) + Option 1 + Option 2 + Option 3 (disabled)

    Color Example

    - Default (accent) - Primary - Accent - Warn + Default (accent) + Primary + Accent + Warn

    Dynamic Example

    isDisabled: {{isDisabled}} -
    isRequired: {{isRequired}} -
    - Align end + Align end
    - - Option 1 - Option 2 - Option 3 - + Option 1 + Option 2 + Option 3 +

    Favorite Season Example

    Dynamic Example with two-way data-binding

    - - + + {{season}} - - + +

    Your favorite season is: {{favoriteSeason}}

    diff --git a/src/demo-app/ripple/ripple-demo.html b/src/demo-app/ripple/ripple-demo.html index 8517723177b3..98feef4e9d23 100644 --- a/src/demo-app/ripple/ripple-demo.html +++ b/src/demo-app/ripple/ripple-demo.html @@ -1,55 +1,55 @@ - +
    - Disable button ripples - - - + + -
    -
    Centered
    -
    Unbounded
    -
    Disabled
    -
    Rounded container (flaky in Firefox)
    +
    Centered
    +
    Unbounded
    +
    Disabled
    +
    Rounded container (flaky in Firefox)
    Speed - - Slow - Normal - Fast - + + Slow + Normal + Fast +
    - - - - - - + + + + + +
    - - - + + +
    + mat-ripple + [matRippleCentered]="centered" + [matRippleDisabled]="disabled" + [matRippleUnbounded]="unbounded" + [matRippleRadius]="radius" + [matRippleColor]="rippleColor" + [matRippleSpeedFactor]="rippleSpeed"> Click me
    diff --git a/src/demo-app/ripple/ripple-demo.ts b/src/demo-app/ripple/ripple-demo.ts index f75ce343f591..ec9a69b828e1 100644 --- a/src/demo-app/ripple/ripple-demo.ts +++ b/src/demo-app/ripple/ripple-demo.ts @@ -1,5 +1,5 @@ import {Component, ViewChild} from '@angular/core'; -import {MdRipple} from '@angular/material'; +import {MatRipple} from '@angular/material'; @Component({ @@ -9,7 +9,7 @@ import {MdRipple} from '@angular/material'; styleUrls: ['ripple-demo.css'], }) export class RippleDemo { - @ViewChild(MdRipple) ripple: MdRipple; + @ViewChild(MatRipple) ripple: MatRipple; centered = false; disabled = false; diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html index c673924d5933..1ce8ef756f15 100644 --- a/src/demo-app/select/select-demo.html +++ b/src/demo-app/select/select-demo.html @@ -1,23 +1,23 @@ Space above cards: - +
    - - ngModel + + ngModel - - + - None - + None + {{ drink.viewValue }} - - - local_drink - Pick a drink! - You must make a selection - + + + local_drink + Pick a drink! + You must make a selection +

    Value: {{ currentDrink }}

    Touched: {{ drinkControl.touched }}

    Dirty: {{ drinkControl.dirty }}

    @@ -39,24 +39,24 @@

    - - - - -     + + + + + - - Multiple selection + + Multiple selection - - - + + - + {{ creature.viewValue }} - - - + + +

    Value: {{ currentPokemon }}

    Touched: {{ pokemonControl.touched }}

    Dirty: {{ pokemonControl.dirty }}

    @@ -67,114 +67,114 @@

    - - - - -     -     - - - Without Angular forms - - - - None - + + + + + + + + + Without Angular forms + + + + None + {{ creature.viewValue }} - - - + + +

    Value: {{ currentDigimon }}

    - - -     + + + - - Option groups + + Option groups - - - - + + + - + {{ creature.viewValue }} - - - - - - - - - - compareWith - - - + + + + + + + + + compareWith + + + - + {{ drink.viewValue }} - - - + + +

    Value: {{ currentDrinkObject | json }}

    Touched: {{ drinkObjectControl.touched }}

    Dirty: {{ drinkObjectControl.dirty }}

    Status: {{ drinkObjectControl.control?.status }}

    Comparison Mode: {{ compareByValue ? 'VALUE' : 'REFERENCE' }}

    - - - - -     -     + + + + +
    - - formControl - - - - - {{ food.viewValue }} - - + + formControl + + + + + {{ food.viewValue }} + +

    Value: {{ foodControl.value }}

    Touched: {{ foodControl.touched }}

    Dirty: {{ foodControl.dirty }}

    Status: {{ foodControl.status }}

    - - - -     -     + + + + +
    - - Change event + + Change event - - - - {{ creature.viewValue }} - - + + + + {{ creature.viewValue }} + +

    Change event value: {{ latestChangeEvent?.value }}

    -     -     + +
    diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts index 48490643dbdf..1967e60f7c43 100644 --- a/src/demo-app/select/select-demo.ts +++ b/src/demo-app/select/select-demo.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; -import {MdSelectChange} from '@angular/material'; +import {MatSelectChange} from '@angular/material'; @Component({ moduleId: module.id, @@ -20,7 +20,7 @@ export class SelectDemo { currentPokemon: string[]; currentPokemonFromGroup: string; currentDigimon: string; - latestChangeEvent: MdSelectChange; + latestChangeEvent: MatSelectChange; floatPlaceholder: string = 'auto'; foodControl = new FormControl('pizza-1'); topHeightCtrl = new FormControl(0); diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html index fdc13d483172..3603f87421aa 100644 --- a/src/demo-app/sidenav/sidenav-demo.html +++ b/src/demo-app/sidenav/sidenav-demo.html @@ -1,60 +1,60 @@ -
    - Header - - Header + + Start Side Sidenav
    - +
    - +
    - +
    Mode: {{start.mode}}

    Filler Content
    -     + - End Side Sidenav
    - +
    Filler Content
    -     + - - Header + + Header
    -

    Sidenav

    - - - Fixed mode - Sidenav covers header/footer + + + Fixed mode + Sidenav covers header/footer

    Header / Footer

    - Show header - Show footer + Show header + Show footer
    Filler Content
    - Footer -     -     - Footer + Footer + + + Footer
    diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.html b/src/demo-app/slide-toggle/slide-toggle-demo.html index 7338520a84b8..9239217593a9 100644 --- a/src/demo-app/slide-toggle/slide-toggle-demo.html +++ b/src/demo-app/slide-toggle/slide-toggle-demo.html @@ -1,27 +1,27 @@
    - + Default Slide Toggle - + - + Disabled Slide Toggle - + - + Disable Bound - +

    Example where the slide toggle is required inside of a form.

    - + Slide Toggle - +

    - +

    diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.scss b/src/demo-app/slide-toggle/slide-toggle-demo.scss index a7429af3ff56..a178e139b106 100644 --- a/src/demo-app/slide-toggle/slide-toggle-demo.scss +++ b/src/demo-app/slide-toggle/slide-toggle-demo.scss @@ -3,7 +3,7 @@ flex-direction: column; align-items: flex-start; - md-slide-toggle { + mat-slide-toggle { margin: 6px 0; } } diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html index 2641eae973a1..624cbd78b3f2 100644 --- a/src/demo-app/slider/slider-demo.html +++ b/src/demo-app/slider/slider-demo.html @@ -1,60 +1,60 @@

    Default Slider

    -Label +Label {{slidey.value}}

    Colors

    - - - + + +

    Slider with Min and Max

    - - + + {{slider2.value}}

    Disabled Slider

    - - + +

    Slider with set value

    - +

    Slider with step defined

    - + {{slider5.value}}

    Slider with set tick interval

    - - + +

    Slider with Thumb Label

    - +

    Slider with one-way binding

    - +

    Slider with two-way binding

    - +

    Inverted slider

    - +

    Vertical slider

    - - + +

    Inverted vertical slider

    - - + - - - - - + + + + + diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/demo-app/snack-bar/snack-bar-demo.html index c2f8171c1cc4..1bdb4819e7aa 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.html +++ b/src/demo-app/snack-bar/snack-bar-demo.html @@ -1,53 +1,53 @@

    SnackBar demo

    - Message: + Message:
    Position in page:
    - - - Start - End - Left - Right - Center - - - - - Top - Bottom - - + + + Start + End + Left + Right + Center + + + + + Top + Bottom + +
    - +

    Show button on snack bar

    - - + - -     + +
    - +

    Auto hide after duration

    - - + - -     + +

    - Add extra class to container + Add extra class to container

    - + diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/demo-app/snack-bar/snack-bar-demo.ts index 334959021f81..94bffbcc0acf 100644 --- a/src/demo-app/snack-bar/snack-bar-demo.ts +++ b/src/demo-app/snack-bar/snack-bar-demo.ts @@ -1,10 +1,10 @@ import {Dir} from '@angular/cdk/bidi'; import {Component, ViewEncapsulation} from '@angular/core'; import { - MdSnackBar, - MdSnackBarConfig, - MdSnackBarHorizontalPosition, - MdSnackBarVerticalPosition, + MatSnackBar, + MatSnackBarConfig, + MatSnackBarHorizontalPosition, + MatSnackBarVerticalPosition, } from '@angular/material'; @@ -23,14 +23,14 @@ export class SnackBarDemo { setAutoHide: boolean = true; autoHide: number = 10000; addExtraClass: boolean = false; - horizontalPosition: MdSnackBarHorizontalPosition = 'center'; - verticalPosition: MdSnackBarVerticalPosition = 'bottom'; + horizontalPosition: MatSnackBarHorizontalPosition = 'center'; + verticalPosition: MatSnackBarVerticalPosition = 'bottom'; - constructor(public snackBar: MdSnackBar, private dir: Dir) { + constructor(public snackBar: MatSnackBar, private dir: Dir) { } open() { - let config = new MdSnackBarConfig(); + let config = new MatSnackBarConfig(); config.verticalPosition = this.verticalPosition; config.horizontalPosition = this.horizontalPosition; config.duration = this.autoHide; diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html index 11cda6eaea19..61d8cd9cde99 100644 --- a/src/demo-app/stepper/stepper-demo.html +++ b/src/demo-app/stepper/stepper-demo.html @@ -1,197 +1,197 @@ -Disable linear mode +Disable linear mode

    Linear Vertical Stepper Demo using a single form

    - - - Fill out your name - - - This field is required - - - - - This field is required - + + + Fill out your name + + + This field is required + + + + + This field is required +
    - +
    -     + - - + +
    Fill out your email address
     - - - The input is invalid. - + + + The input is invalid. +
    - - + +
    -     + - - Confirm your information + + Confirm your information Everything seems correct.
    - +
    -     -     + +

    Linear Horizontal Stepper Demo using a different form for each step

    - - + +
    - Fill out your name - - - This field is required - - - - This field is required - + Fill out your name + + + This field is required + + + + This field is required +
    - +
    -     + - +
    - Fill out your email address - - - The input is invalid - + Fill out your email address + + + The input is invalid +
    - - + +
    -     + - +
    - Confirm your information + Confirm your information Everything seems correct.
    - +
    -     -     + +

    Vertical Stepper Demo

    -Make steps non-editable - - - Fill out your name - - - - - - - +Make steps non-editable + + + Fill out your name + + + + + + +
    - +
    -     + - - + +
    Fill out your phone number
     - - - + + +
    - - + +
    -     + - - + +
    Fill out your address
     - - - + + +
    - - + +
    -     + - - Confirm your information + + Confirm your information Everything seems correct.
    - +
    -     -     + +

    Horizontal Stepper Demo with Text Label

    - - - - - - - - - + + + + + + + + +
    - +
    -     + - - - - + + + +
    - - + +
    -     + - - - - + + + +
    - - + +
    -     + - + Everything seems correct.
    - +
    -     -     + +

    Horizontal Stepper Demo with Templated Label

    - - - {{step.label}} - - - + + + {{step.label}} + + +
    - - + +
    -     -     + + diff --git a/src/demo-app/table/person-data-source.ts b/src/demo-app/table/person-data-source.ts index 6bf96511be1d..cc74bb243afe 100644 --- a/src/demo-app/table/person-data-source.ts +++ b/src/demo-app/table/person-data-source.ts @@ -1,4 +1,4 @@ -import {MdPaginator, MdSort} from '@angular/material'; +import {MatPaginator, MatSort} from '@angular/material'; import {DataSource} from '@angular/cdk/collections'; import {Observable} from 'rxjs/Observable'; import {PeopleDatabase, UserData} from './people-database'; @@ -7,8 +7,8 @@ import 'rxjs/add/operator/map'; export class PersonDataSource extends DataSource { constructor(private _peopleDatabase: PeopleDatabase, - private _paginator: MdPaginator, - private _sort: MdSort) { + private _paginator: MatPaginator, + private _sort: MatSort) { super(); } diff --git a/src/demo-app/table/table-demo.html b/src/demo-app/table/table-demo.html index 563a70f3ea0b..1741dc26d2be 100644 --- a/src/demo-app/table/table-demo.html +++ b/src/demo-app/table/table-demo.html @@ -1,34 +1,34 @@
    - - + +
    - - Change references + + Change references
    Track By
    - - Reference - ID - Index - + + Reference + ID + Index +
    - +

    CdkTable With Dynamic Column Def
    - -

    [style.opacity]="getOpacity(row.progress)" [style.width.%]="row.progress">
    - + - - Name - {{row.name}} + + Name + {{row.name}} - - Color - {{row.color}} + + Color + {{row.color}} - - + + - + - - + diff --git a/src/demo-app/table/table-demo.scss b/src/demo-app/table/table-demo.scss index 2f6ce9cb5478..e968dc3b8e98 100644 --- a/src/demo-app/table/table-demo.scss +++ b/src/demo-app/table/table-demo.scss @@ -67,7 +67,7 @@ display: flex; flex-direction: column; - md-table { + mat-table { overflow: auto; } } diff --git a/src/demo-app/table/table-demo.ts b/src/demo-app/table/table-demo.ts index 887f33960aa7..79067958ae25 100644 --- a/src/demo-app/table/table-demo.ts +++ b/src/demo-app/table/table-demo.ts @@ -1,7 +1,7 @@ import {Component, ViewChild} from '@angular/core'; import {PeopleDatabase, UserData} from './people-database'; import {PersonDataSource} from './person-data-source'; -import {MdPaginator, MdSort} from '@angular/material'; +import {MatPaginator, MatSort} from '@angular/material'; export type UserProperties = 'userId' | 'userName' | 'progress' | 'color' | undefined; @@ -25,9 +25,9 @@ export class TableDemo { dynamicColumnDefs: any[] = []; dynamicColumnIds: string[] = []; - @ViewChild(MdPaginator) _paginator: MdPaginator; + @ViewChild(MatPaginator) _paginator: MatPaginator; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatSort) sort: MatSort; constructor(public _peopleDatabase: PeopleDatabase) { } diff --git a/src/demo-app/table/table-header-demo.html b/src/demo-app/table/table-header-demo.html index e03ccb1e682f..9ab9197006e6 100644 --- a/src/demo-app/table/table-header-demo.html +++ b/src/demo-app/table/table-header-demo.html @@ -3,17 +3,17 @@
    - - - - - +
    diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html index e600753a33e8..759a92e70a9c 100644 --- a/src/demo-app/tabs/tabs-demo.html +++ b/src/demo-app/tabs/tabs-demo.html @@ -1,20 +1,20 @@

    Tab Nav Bar

    - - - - + + + +
    -
    - + {{tabLink.label}} - Disabled Link + Disabled Link
    @@ -24,37 +24,37 @@

    Tab Group Demo - Dynamic Tabs

    Selected tab index: - - - + + +
    - - Add New Tab - - + + Add New Tab + + Include extra content - - + + Select after adding - +
    Position: - - - + + +
    - -     -     + + - - - {{tab.label}} + + + {{tab.label}}
    {{tab.content}}
    @@ -88,25 +88,25 @@

    Tab Group Demo - Dynamic Tabs



    - - - + + +

    -
    - - + +

    Tab Group Demo - Dynamic Height

    - - - {{tab.label}} + + + {{tab.label}}
    {{tab.content}}
    @@ -140,19 +140,19 @@

    Tab Group Demo - Dynamic Height



    - - - + + + -     -     + +

    Tab Group Demo - Fixed Height

    - - - {{tab.label}} + + + {{tab.label}}
    {{tab.content}}
    @@ -186,94 +186,94 @@

    Tab Group Demo - Fixed Height



    - - - + + + -     -     + +

    Stretched Tabs

    - - - {{tab.label}} + + + {{tab.label}}
    {{tab.content}}
    -     -     + +

    Async Tabs

    - - - {{tab.label}} + + + {{tab.label}}
    {{tab.content}}


    - - - + + +
    -     -     + +

    Tabs with simplified api

    - - + +
    This tab is about the Earth!
    -     - + + This tab is about combustion! - -     + +

    Inverted tabs

    - - + +
    This tab is about the Earth!
    -     - + +
    This tab is about combustion!
    -     -     + +

    Accent tabs

    - - + +
    This tab is about the Earth!
    -     - + +
    This tab is about combustion!
    -     -     + +

    Tabs with background color

    - - + +
    This tab is about the Earth!
    -     - + +
    This tab is about combustion!
    -     -     + + diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/demo-app/toolbar/toolbar-demo.html index e6d3f30c5172..a7a434c97ded 100644 --- a/src/demo-app/toolbar/toolbar-demo.html +++ b/src/demo-app/toolbar/toolbar-demo.html @@ -1,68 +1,68 @@

    - - menu + + menu Default Toolbar - code - + code +

    - - menu + + menu Primary Toolbar - code - + code +

    - - menu + + menu Accent Toolbar - code - + code +

    - + Custom Toolbar - + Second Line - - + +

    - + Custom Toolbar - + Second Line - verified_user - + verified_user + - + Third Line - favorite - delete - - + favorite + delete + +

    \ 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 32845a31bf0f..2d8094231b48 100644 --- a/src/demo-app/tooltip/tooltip-demo.html +++ b/src/demo-app/tooltip/tooltip-demo.html @@ -1,4 +1,4 @@ - + @@ -6,15 +6,15 @@

    Tooltip Demo

    -
    Scroll down while tooltip is open to see it hide automatically
    @@ -22,50 +22,50 @@

    Tooltip Demo

    - - Below - Above - Left - Right - Before - After - + + Below + Above + Left + Right + Before + After +

    Message: - +

    Disabled: - +

    Show Delay (ms): - - - + + +

    Hide Delay (ms): - - - + + +

    Mouse over to - - - - diff --git a/src/e2e-app/button/button-e2e.html b/src/e2e-app/button/button-e2e.html index 96170713001b..74510d8c9015 100644 --- a/src/e2e-app/button/button-e2e.html +++ b/src/e2e-app/button/button-e2e.html @@ -5,32 +5,32 @@ isDisabled: {{isDisabled}}, clickCounter: {{clickCounter}}

    - - - - + off - - - diff --git a/src/e2e-app/checkbox/checkbox-e2e.html b/src/e2e-app/checkbox/checkbox-e2e.html index 5d78249c6d97..5ad9f8a36d70 100644 --- a/src/e2e-app/checkbox/checkbox-e2e.html +++ b/src/e2e-app/checkbox/checkbox-e2e.html @@ -1 +1 @@ -Check this button +Check this button diff --git a/src/e2e-app/dialog/dialog-e2e.ts b/src/e2e-app/dialog/dialog-e2e.ts index 717297e2aef3..b7bac051ef5f 100644 --- a/src/e2e-app/dialog/dialog-e2e.ts +++ b/src/e2e-app/dialog/dialog-e2e.ts @@ -1,5 +1,5 @@ import {Component, ViewChild, TemplateRef} from '@angular/core'; -import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material'; +import {MatDialog, MatDialogRef, MatDialogConfig} from '@angular/material'; @Component({ selector: 'dialog-e2e', @@ -7,13 +7,13 @@ import {MdDialog, MdDialogRef, MdDialogConfig} from '@angular/material'; templateUrl: 'dialog-e2e.html' }) export class DialogE2E { - dialogRef: MdDialogRef | null; + dialogRef: MatDialogRef | null; @ViewChild(TemplateRef) templateRef: TemplateRef; - constructor (private _dialog: MdDialog) { } + constructor (private _dialog: MatDialog) { } - private _openDialog(config?: MdDialogConfig) { + private _openDialog(config?: MatDialogConfig) { this.dialogRef = this._dialog.open(TestDialog, config); this.dialogRef.afterClosed().subscribe(() => this.dialogRef = null); } @@ -41,5 +41,5 @@ export class DialogE2E { ` }) export class TestDialog { - constructor(public dialogRef: MdDialogRef) { } + constructor(public dialogRef: MatDialogRef) { } } diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts index e80b8c0a7817..a9fd3f395e7c 100644 --- a/src/e2e-app/e2e-app-module.ts +++ b/src/e2e-app/e2e-app-module.ts @@ -20,23 +20,23 @@ import {InputE2E} from './input/input-e2e'; import {SidenavE2E} from './sidenav/sidenav-e2e'; import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e'; import { - MdButtonModule, - MdCheckboxModule, - MdDialogModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdSidenavModule, - MdSlideToggleModule, - MdStepperModule, - MdTabsModule, + MatButtonModule, + MatCheckboxModule, + MatDialogModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatSidenavModule, + MatSlideToggleModule, + MatStepperModule, + MatTabsModule, } from '@angular/material'; import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay'; import {ExampleModule} from '@angular/material-examples'; @@ -47,23 +47,23 @@ import {ReactiveFormsModule} from '@angular/forms'; */ @NgModule({ exports: [ - MdButtonModule, - MdCheckboxModule, - MdDialogModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdSidenavModule, - MdSlideToggleModule, - MdStepperModule, - MdTabsModule, - MdNativeDateModule, + MatButtonModule, + MatCheckboxModule, + MatDialogModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatSidenavModule, + MatSlideToggleModule, + MatStepperModule, + MatTabsModule, + MatNativeDateModule, ] }) export class E2eMaterialModule {} diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app.html index e3631595618d..1a142abe75ab 100644 --- a/src/e2e-app/e2e-app/e2e-app.html +++ b/src/e2e-app/e2e-app/e2e-app.html @@ -1,28 +1,28 @@ - - Block scroll strategy - Button - Button Toggle - Checkbox - Dialog - Expansion - Fullscreen - Grid list - Icon - Input - List - Menu - Progress bar - Progress Spinner - Radios - Sidenav - Slide Toggle - Stepper - Tabs - Cards - Toolbar - + + Block scroll strategy + Button + Button Toggle + Checkbox + Dialog + Expansion + Fullscreen + Grid list + Icon + Input + List + Menu + Progress bar + Progress Spinner + Radios + Sidenav + Slide Toggle + Stepper + Tabs + Cards + Toolbar +
    diff --git a/src/e2e-app/fullscreen/fullscreen-e2e.ts b/src/e2e-app/fullscreen/fullscreen-e2e.ts index 0db67b5d6974..3bf543d9c965 100644 --- a/src/e2e-app/fullscreen/fullscreen-e2e.ts +++ b/src/e2e-app/fullscreen/fullscreen-e2e.ts @@ -1,5 +1,5 @@ import {Component, ElementRef, Output, EventEmitter} from '@angular/core'; -import {MdDialog, MdDialogRef} from '@angular/material'; +import {MatDialog, MatDialogRef} from '@angular/material'; @Component({ moduleId: module.id, @@ -8,9 +8,9 @@ import {MdDialog, MdDialogRef} from '@angular/material'; }) export class FullscreenE2E { - dialogRef: MdDialogRef | null; + dialogRef: MatDialogRef | null; - constructor (private _element: ElementRef, private _dialog: MdDialog) { } + constructor (private _element: ElementRef, private _dialog: MatDialog) { } openDialog() { this.dialogRef = this._dialog.open(TestDialog); @@ -58,5 +58,5 @@ export class TestDialog { @Output() openFullscreen = new EventEmitter(); @Output() exitFullscreen = new EventEmitter(); - constructor(public dialogRef: MdDialogRef) {} + constructor(public dialogRef: MatDialogRef) {} } diff --git a/src/e2e-app/grid-list/grid-list-e2e.html b/src/e2e-app/grid-list/grid-list-e2e.html index d0e7037eb867..7ba581a491c8 100644 --- a/src/e2e-app/grid-list/grid-list-e2e.html +++ b/src/e2e-app/grid-list/grid-list-e2e.html @@ -1,6 +1,6 @@ - - One - Two - Three - Four - + + One + Two + Three + Four + diff --git a/src/e2e-app/icon/icon-e2e.html b/src/e2e-app/icon/icon-e2e.html index cf538e71481d..65a0e62c71e9 100644 --- a/src/e2e-app/icon/icon-e2e.html +++ b/src/e2e-app/icon/icon-e2e.html @@ -1,3 +1,3 @@
    - favorite + favorite
    \ No newline at end of file diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html index 0fa9e0cf5568..855ef3b086a7 100644 --- a/src/e2e-app/index.html +++ b/src/e2e-app/index.html @@ -11,7 +11,7 @@ - + diff --git a/src/e2e-app/input/input-e2e.html b/src/e2e-app/input/input-e2e.html index b47fa322a9ba..ee908d25449e 100644 --- a/src/e2e-app/input/input-e2e.html +++ b/src/e2e-app/input/input-e2e.html @@ -1,23 +1,23 @@

    - - - + + +

    - - - + + +

    - - - + + +

    - - - +

    diff --git a/src/e2e-app/menu/menu-e2e.html b/src/e2e-app/menu/menu-e2e.html index bd80754a8dc6..6c07798831a5 100644 --- a/src/e2e-app/menu/menu-e2e.html +++ b/src/e2e-app/menu/menu-e2e.html @@ -2,35 +2,35 @@
    {{ selected }}
    - - + + - - - - - - + + + + + + - - - - + + +
    - - - - + + + + - - - - + + +
    diff --git a/src/e2e-app/progress-bar/progress-bar-e2e.html b/src/e2e-app/progress-bar/progress-bar-e2e.html index 79d6660603b0..b1218f154b26 100644 --- a/src/e2e-app/progress-bar/progress-bar-e2e.html +++ b/src/e2e-app/progress-bar/progress-bar-e2e.html @@ -1,4 +1,4 @@ - - - - + + + + diff --git a/src/e2e-app/progress-bar/progress-bar-e2e.ts b/src/e2e-app/progress-bar/progress-bar-e2e.ts index 7371b2afadb7..a8bdeb2bc100 100644 --- a/src/e2e-app/progress-bar/progress-bar-e2e.ts +++ b/src/e2e-app/progress-bar/progress-bar-e2e.ts @@ -6,7 +6,7 @@ import {Component} from '@angular/core'; selector: 'progress-bar-e2e', templateUrl: 'progress-bar-e2e.html', styles: [` - md-progress-bar { + mat-progress-bar { margin-bottom: 10px; } `] diff --git a/src/e2e-app/progress-spinner/progress-spinner-e2e.html b/src/e2e-app/progress-spinner/progress-spinner-e2e.html index 9a7709ebf8b3..7971277ec758 100644 --- a/src/e2e-app/progress-spinner/progress-spinner-e2e.html +++ b/src/e2e-app/progress-spinner/progress-spinner-e2e.html @@ -1,3 +1,3 @@ - - - + + + diff --git a/src/e2e-app/radio/radio-e2e.html b/src/e2e-app/radio/radio-e2e.html index d14f9cead519..28ba53e3541b 100644 --- a/src/e2e-app/radio/radio-e2e.html +++ b/src/e2e-app/radio/radio-e2e.html @@ -1,12 +1,12 @@
    - - Charmander - Squirtle - Bulbasaur + Charmander + Squirtle + Bulbasaur - +
    diff --git a/src/e2e-app/sidenav/sidenav-e2e.html b/src/e2e-app/sidenav/sidenav-e2e.html index 254ae42cfc0c..67deac6a0e7c 100644 --- a/src/e2e-app/sidenav/sidenav-e2e.html +++ b/src/e2e-app/sidenav/sidenav-e2e.html @@ -1,8 +1,8 @@
    - - Drawer content + + Drawer content - +
    diff --git a/src/e2e-app/slide-toggle/slide-toggle-e2e.html b/src/e2e-app/slide-toggle/slide-toggle-e2e.html index 13ce7328669d..c8bc16b7c38d 100644 --- a/src/e2e-app/slide-toggle/slide-toggle-e2e.html +++ b/src/e2e-app/slide-toggle/slide-toggle-e2e.html @@ -1,2 +1,2 @@ -Slide Toggle -Disabled Slide Toggle \ No newline at end of file +Slide Toggle +Disabled Slide Toggle \ No newline at end of file diff --git a/src/e2e-app/tabs/tabs-e2e.html b/src/e2e-app/tabs/tabs-e2e.html index 9e9431af0cc0..1b21b9f58ca7 100644 --- a/src/e2e-app/tabs/tabs-e2e.html +++ b/src/e2e-app/tabs/tabs-e2e.html @@ -1,16 +1,16 @@
    - - - One + + + One First tab's content - - - Two + + + Two Second tab's content - - - Three + + + Three Third tab's content - - + +
    diff --git a/src/lib/autocomplete/autocomplete-module.ts b/src/lib/autocomplete/autocomplete-module.ts index 4fbc35f2f31b..96029b6c2bd5 100644 --- a/src/lib/autocomplete/autocomplete-module.ts +++ b/src/lib/autocomplete/autocomplete-module.ts @@ -9,17 +9,17 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {OverlayModule} from '@angular/cdk/overlay'; -import {MdOptionModule, MdCommonModule} from '@angular/material/core'; -import {MdAutocomplete} from './autocomplete'; +import {MatOptionModule, MatCommonModule} from '@angular/material/core'; +import {MatAutocomplete} from './autocomplete'; import { - MdAutocompleteTrigger, - MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER, + MatAutocompleteTrigger, + MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER, } from './autocomplete-trigger'; @NgModule({ - imports: [MdOptionModule, OverlayModule, MdCommonModule, CommonModule], - exports: [MdAutocomplete, MdOptionModule, MdAutocompleteTrigger, MdCommonModule], - declarations: [MdAutocomplete, MdAutocompleteTrigger], - providers: [MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER], + imports: [MatOptionModule, OverlayModule, MatCommonModule, CommonModule], + exports: [MatAutocomplete, MatOptionModule, MatAutocompleteTrigger, MatCommonModule], + declarations: [MatAutocomplete, MatAutocompleteTrigger], + providers: [MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER], }) -export class MdAutocompleteModule {} +export class MatAutocompleteModule {} diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 89e8d3487b90..33d5510dcc61 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -34,15 +34,15 @@ import { ViewContainerRef, } from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; -import {MdOption, MdOptionSelectionChange} from '@angular/material/core'; -import {MdFormField} from '@angular/material/form-field'; +import {MatOption, MatOptionSelectionChange} from '@angular/material/core'; +import {MatFormField} from '@angular/material/form-field'; import {DOCUMENT} from '@angular/platform-browser'; import {Observable} from 'rxjs/Observable'; import {fromEvent} from 'rxjs/observable/fromEvent'; import {merge} from 'rxjs/observable/merge'; import {of as observableOf} from 'rxjs/observable/of'; import {Subscription} from 'rxjs/Subscription'; -import {MdAutocomplete} from './autocomplete'; +import {MatAutocomplete} from './autocomplete'; /** @@ -58,44 +58,43 @@ export const AUTOCOMPLETE_OPTION_HEIGHT = 48; export const AUTOCOMPLETE_PANEL_HEIGHT = 256; /** Injection token that determines the scroll handling while the autocomplete panel is open. */ -export const MD_AUTOCOMPLETE_SCROLL_STRATEGY = - new InjectionToken<() => ScrollStrategy>('md-autocomplete-scroll-strategy'); +export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY = + new InjectionToken<() => ScrollStrategy>('mat-autocomplete-scroll-strategy'); /** @docs-private */ -export function MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): +export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => RepositionScrollStrategy { return () => overlay.scrollStrategies.reposition(); } /** @docs-private */ -export const MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER = { - provide: MD_AUTOCOMPLETE_SCROLL_STRATEGY, +export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER = { + provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, deps: [Overlay], - useFactory: MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY, + useFactory: MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY, }; /** * Provider that allows the autocomplete to register as a ControlValueAccessor. * @docs-private */ -export const MD_AUTOCOMPLETE_VALUE_ACCESSOR: any = { +export const MAT_AUTOCOMPLETE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdAutocompleteTrigger), + useExisting: forwardRef(() => MatAutocompleteTrigger), multi: true }; /** * Creates an error to be thrown when attempting to use an autocomplete trigger without a panel. */ -export function getMdAutocompleteMissingPanelError(): Error { - return Error('Attempting to open an undefined instance of `md-autocomplete`. ' + - 'Make sure that the id passed to the `mdAutocomplete` is correct and that ' + +export function getMatAutocompleteMissingPanelError(): Error { + return Error('Attempting to open an undefined instance of `mat-autocomplete`. ' + + 'Make sure that the id passed to the `matAutocomplete` is correct and that ' + 'you\'re attempting to open it after the ngAfterContentInit hook.'); } @Directive({ - selector: `input[mdAutocomplete], input[matAutocomplete], - textarea[mdAutocomplete], textarea[matAutocomplete]`, + selector: `input[matAutocomplete], textarea[matAutocomplete]`, host: { 'role': 'combobox', 'autocomplete': 'off', @@ -111,9 +110,9 @@ export function getMdAutocompleteMissingPanelError(): Error { '(input)': '_handleInput($event)', '(keydown)': '_handleKeydown($event)', }, - providers: [MD_AUTOCOMPLETE_VALUE_ACCESSOR] + providers: [MAT_AUTOCOMPLETE_VALUE_ACCESSOR] }) -export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { +export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { private _overlayRef: OverlayRef | null; private _portal: TemplatePortal; private _panelOpen: boolean = false; @@ -134,25 +133,15 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { _onTouched = () => {}; /* The autocomplete panel to be attached to this trigger. */ - @Input('mdAutocomplete') autocomplete: MdAutocomplete; - - /** Property with mat- prefix for no-conflict mode. */ - @Input('matAutocomplete') - get _matAutocomplete(): MdAutocomplete { - return this.autocomplete; - } - - set _matAutocomplete(autocomplete: MdAutocomplete) { - this.autocomplete = autocomplete; - } + @Input('matAutocomplete') autocomplete: MatAutocomplete; constructor(private _element: ElementRef, private _overlay: Overlay, private _viewContainerRef: ViewContainerRef, private _zone: NgZone, private _changeDetectorRef: ChangeDetectorRef, - @Inject(MD_AUTOCOMPLETE_SCROLL_STRATEGY) private _scrollStrategy, + @Inject(MAT_AUTOCOMPLETE_SCROLL_STRATEGY) private _scrollStrategy, @Optional() private _dir: Directionality, - @Optional() @Host() private _formField: MdFormField, + @Optional() @Host() private _formField: MatFormField, @Optional() @Inject(DOCUMENT) private _document: any) {} ngOnDestroy() { @@ -194,7 +183,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { * A stream of actions that should close the autocomplete panel, including * when an option is selected, on blur, and when TAB is pressed. */ - get panelClosingActions(): Observable { + get panelClosingActions(): Observable { return merge( this.optionSelections, this.autocomplete._keyManager.tabOut, @@ -203,12 +192,12 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { } /** Stream of autocomplete option selections. */ - get optionSelections(): Observable { + get optionSelections(): Observable { return merge(...this.autocomplete.options.map(option => option.onSelectionChange)); } - /** The currently active option, coerced to MdOption type. */ - get activeOption(): MdOption | null { + /** The currently active option, coerced to MatOption type. */ + get activeOption(): MatOption | null { if (this.autocomplete && this.autocomplete._keyManager) { return this.autocomplete._keyManager.activeItem; } @@ -348,7 +337,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { */ private _scrollToOption(): void { const activeOptionIndex = this.autocomplete._keyManager.activeItemIndex || 0; - const labelCount = MdOption.countGroupLabelsBeforeOption(activeOptionIndex, + const labelCount = MatOption.countGroupLabelsBeforeOption(activeOptionIndex, this.autocomplete.options, this.autocomplete.optionGroups); const optionOffset = (activeOptionIndex + labelCount) * AUTOCOMPLETE_OPTION_HEIGHT; const panelTop = this.autocomplete._getScrollTop(); @@ -404,7 +393,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { // The display value can also be the number zero and shouldn't fall back to an empty string. const inputValue = toDisplay != null ? toDisplay : ''; - // If it's used within a `MdFormField`, we should set it through the property so it can go + // If it's used within a `MatFormField`, we should set it through the property so it can go // through change detection. if (this._formField) { this._formField._control.value = inputValue; @@ -418,7 +407,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { * control to that value. It will also mark the control as dirty if this interaction * stemmed from the user. */ - private _setValueAndClose(event: MdOptionSelectionChange | null): void { + private _setValueAndClose(event: MatOptionSelectionChange | null): void { if (event && event.source) { this._clearPreviousSelectedOption(event.source); this._setTriggerValue(event.source.value); @@ -433,7 +422,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { /** * Clear any previous selected option and emit a selection change event for this option */ - private _clearPreviousSelectedOption(skip: MdOption) { + private _clearPreviousSelectedOption(skip: MatOption) { this.autocomplete.options.forEach(option => { if (option != skip && option.selected) { option.deselect(); @@ -443,7 +432,7 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { private _attachOverlay(): void { if (!this.autocomplete) { - throw getMdAutocompleteMissingPanelError(); + throw getMatAutocompleteMissingPanelError(); } if (!this._overlayRef) { diff --git a/src/lib/autocomplete/autocomplete.md b/src/lib/autocomplete/autocomplete.md index cee71e488c8d..4989442172c7 100644 --- a/src/lib/autocomplete/autocomplete.md +++ b/src/lib/autocomplete/autocomplete.md @@ -3,44 +3,44 @@ You can read more about autocompletes in the [Material Design spec](https://mate ### Simple autocomplete -Start by adding a regular `mdInput` to the page. Let's assume you're using the `formControl` +Start by adding a regular `matInput` to the page. Let's assume you're using the `formControl` directive from the `@angular/forms` module to track the value of the input. *my-comp.html* ```html - - - + + + ``` Next, create the autocomplete panel and the options displayed inside it. Each option should be -defined by an `md-option` tag. Set each option's value property to whatever you'd like the value +defined by an `mat-option` tag. Set each option's value property to whatever you'd like the value of the text input to be upon that option's selection. *my-comp.html* ```html - - + + {{ option }} - - + + ``` Now we'll need to link the text input to its panel. We can do this by exporting the autocomplete panel instance into a local template variable (here we called it "auto"), and binding that variable -to the input's `mdAutocomplete` property. +to the input's `matAutocomplete` property. *my-comp.html* ```html - - - + + + - - + + {{ option }} - - + + ``` @@ -84,16 +84,16 @@ desired display value. Then bind it to the autocomplete's `displayWith` property - ENTER: Select currently active item. #### Option groups -`md-option` can be collected into groups using the `md-optgroup` element: +`mat-option` can be collected into groups using the `mat-optgroup` element: ```html - - - + + + {{ option.name }} - - - + + + ``` ### Accessibility diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss index 03d7e62f7b53..afcfabb00ded 100644 --- a/src/lib/autocomplete/autocomplete.scss +++ b/src/lib/autocomplete/autocomplete.scss @@ -1,7 +1,7 @@ @import '../core/style/menu-common'; /** - * The max-height of the panel, currently matching md-select value. + * The max-height of the panel, currently matching mat-select value. * TODO: Check value with MD team. */ $mat-autocomplete-panel-max-height: 256px !default; diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index e4886f42dd1d..eb3e117a2d15 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -15,24 +15,24 @@ import { } from '@angular/core'; import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MdOption} from '@angular/material/core'; -import {MdFormField, MdFormFieldModule} from '@angular/material/form-field'; +import {MatOption} from '@angular/material/core'; +import {MatFormField, MatFormFieldModule} from '@angular/material/form-field'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; import {Subscription} from 'rxjs/Subscription'; -import {MdInputModule} from '../input/index'; +import {MatInputModule} from '../input/index'; import { - getMdAutocompleteMissingPanelError, - MdAutocomplete, - MdAutocompleteModule, - MdAutocompleteSelectedEvent, - MdAutocompleteTrigger, + getMatAutocompleteMissingPanelError, + MatAutocomplete, + MatAutocompleteModule, + MatAutocompleteSelectedEvent, + MatAutocompleteTrigger, } from './index'; -describe('MdAutocomplete', () => { +describe('MatAutocomplete', () => { let overlayContainerElement: HTMLElement; let dir: Direction; let scrolledSubject = new Subject(); @@ -41,9 +41,9 @@ describe('MdAutocomplete', () => { dir = 'ltr'; TestBed.configureTestingModule({ imports: [ - MdAutocompleteModule, - MdFormFieldModule, - MdInputModule, + MatAutocompleteModule, + MatFormFieldModule, + MatInputModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule @@ -183,7 +183,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - const option = overlayContainerElement.querySelector('md-option') as HTMLElement; + const option = overlayContainerElement.querySelector('mat-option') as HTMLElement; option.click(); fixture.detectChanges(); @@ -204,7 +204,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); let options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[0].click(); // Changing value from 'Alabama' to 'al' to re-populate the option list, @@ -214,7 +214,7 @@ describe('MdAutocomplete', () => { fixture.whenStable().then(() => { options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -286,7 +286,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -319,7 +319,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -340,7 +340,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -440,7 +440,7 @@ describe('MdAutocomplete', () => { fixture.whenStable().then(() => { const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -456,7 +456,7 @@ describe('MdAutocomplete', () => { fixture.whenStable().then(() => { const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -474,7 +474,7 @@ describe('MdAutocomplete', () => { fixture.whenStable().then(() => { const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -493,7 +493,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -568,7 +568,7 @@ describe('MdAutocomplete', () => { fixture.whenStable().then(() => { const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -648,7 +648,7 @@ describe('MdAutocomplete', () => { it('should set the active item to the first option when DOWN key is pressed', fakeAsync(() => { tick(); const optionEls = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; fixture.componentInstance.trigger._handleKeydown(DOWN_ARROW_EVENT); tick(); @@ -680,7 +680,7 @@ describe('MdAutocomplete', () => { it('should set the active item to the last option when UP key is pressed', fakeAsync(() => { tick(); const optionEls = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT); tick(); @@ -721,7 +721,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); const optionEls = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; expect(fixture.componentInstance.trigger.activeOption) .toBe(fixture.componentInstance.options.first, @@ -1196,7 +1196,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - const option = overlayContainerElement.querySelector('md-option') as HTMLElement; + const option = overlayContainerElement.querySelector('mat-option') as HTMLElement; // Focus the option manually since the synthetic click may not do it. option.focus(); @@ -1309,7 +1309,7 @@ describe('MdAutocomplete', () => { it('should deselect any other selected option', async(() => { let options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[0].click(); fixture.detectChanges(); @@ -1321,7 +1321,7 @@ describe('MdAutocomplete', () => { .toBe(true, `Clicked option should be selected.`); options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -1335,7 +1335,7 @@ describe('MdAutocomplete', () => { it('should call deselect only on the previous selected option', async(() => { let options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[0].click(); fixture.detectChanges(); @@ -1349,7 +1349,7 @@ describe('MdAutocomplete', () => { .toBe(true, `Clicked option should be selected.`); options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; options[1].click(); fixture.detectChanges(); @@ -1359,7 +1359,7 @@ describe('MdAutocomplete', () => { })); }); - describe('without mdInput', () => { + describe('without matInput', () => { let fixture: ComponentFixture; beforeEach(() => { @@ -1389,7 +1389,7 @@ describe('MdAutocomplete', () => { fixture.detectChanges(); const options = - overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; expect(options.length).toBe(1); }).not.toThrowError(); }); @@ -1455,7 +1455,7 @@ describe('MdAutocomplete', () => { typeInElement('o', input); fixture.detectChanges(); - expect(fixture.componentInstance.mdOptions.length).toBe(2); + expect(fixture.componentInstance.matOptions.length).toBe(2); })); it('should throw if the user attempts to open the panel too early', async(() => { @@ -1464,7 +1464,7 @@ describe('MdAutocomplete', () => { expect(() => { fixture.componentInstance.trigger.openPanel(); - }).toThrow(getMdAutocompleteMissingPanelError()); + }).toThrow(getMatAutocompleteMissingPanelError()); })); it('should hide the placeholder with a preselected form control value ' + @@ -1559,7 +1559,7 @@ describe('MdAutocomplete', () => { tick(); fixture.detectChanges(); - let options = overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; let spy = fixture.componentInstance.optionSelected; options[1].click(); @@ -1568,7 +1568,7 @@ describe('MdAutocomplete', () => { expect(spy).toHaveBeenCalledTimes(1); - let event = spy.calls.mostRecent().args[0] as MdAutocompleteSelectedEvent; + let event = spy.calls.mostRecent().args[0] as MatAutocompleteSelectedEvent; expect(event.source).toBe(fixture.componentInstance.autocomplete); expect(event.option.value).toBe('Washington'); @@ -1585,7 +1585,7 @@ describe('MdAutocomplete', () => { fixture.componentInstance.states.push('Puerto Rico'); fixture.detectChanges(); - let options = overlayContainerElement.querySelectorAll('md-option') as NodeListOf; + let options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; let spy = fixture.componentInstance.optionSelected; options[3].click(); @@ -1594,7 +1594,7 @@ describe('MdAutocomplete', () => { expect(spy).toHaveBeenCalledTimes(1); - let event = spy.calls.mostRecent().args[0] as MdAutocompleteSelectedEvent; + let event = spy.calls.mostRecent().args[0] as MatAutocompleteSelectedEvent; expect(event.source).toBe(fixture.componentInstance.autocomplete); expect(event.option.value).toBe('Puerto Rico'); @@ -1603,15 +1603,15 @@ describe('MdAutocomplete', () => { @Component({ template: ` - - - + + + - - + + {{ state.code }}: {{ state.name }} - - + + ` }) class SimpleAutocomplete implements OnDestroy { @@ -1621,10 +1621,10 @@ class SimpleAutocomplete implements OnDestroy { placeholder = 'auto'; width: number; - @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; - @ViewChild(MdAutocomplete) panel: MdAutocomplete; - @ViewChild(MdFormField) formField: MdFormField; - @ViewChildren(MdOption) options: QueryList; + @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocomplete) panel: MatAutocomplete; + @ViewChild(MatFormField) formField: MatFormField; + @ViewChildren(MatOption) options: QueryList; states = [ {code: 'AL', name: 'Alabama'}, @@ -1661,15 +1661,15 @@ class SimpleAutocomplete implements OnDestroy { @Component({ template: ` - - - + + + - - + + {{option}} - - + + ` }) class NgIfAutocomplete { @@ -1678,8 +1678,8 @@ class NgIfAutocomplete { isVisible = true; options = ['One', 'Two', 'Three']; - @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; - @ViewChildren(MdOption) mdOptions: QueryList; + @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChildren(MatOption) matOptions: QueryList; constructor() { this.filteredOptions = RxChain.from(this.optionCtrl.valueChanges) @@ -1695,16 +1695,16 @@ class NgIfAutocomplete { @Component({ template: ` - - + - + - - + + {{ state }} - - + + ` }) class AutocompleteWithoutForms { @@ -1723,16 +1723,16 @@ class AutocompleteWithoutForms { @Component({ template: ` - - + - + - - + + {{ state }} - - + + ` }) class AutocompleteWithNgModel { @@ -1751,15 +1751,15 @@ class AutocompleteWithNgModel { @Component({ template: ` - - - + + + - - + + {{ number }} - - + + ` }) class AutocompleteWithNumbers { @@ -1770,13 +1770,13 @@ class AutocompleteWithNumbers { @Component({ changeDetection: ChangeDetectionStrategy.OnPush, template: ` - - - + + + - - {{ option }} - + + {{ option }} + ` }) class AutocompleteWithOnPushDelay implements OnInit { @@ -1791,13 +1791,13 @@ class AutocompleteWithOnPushDelay implements OnInit { @Component({ template: ` - + - - + + {{option}} - - + + ` }) class AutocompleteWithNativeInput { @@ -1805,8 +1805,8 @@ class AutocompleteWithNativeInput { filteredOptions: Observable; options = ['En', 'To', 'Tre', 'Fire', 'Fem']; - @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; - @ViewChildren(MdOption) mdOptions: QueryList; + @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChildren(MatOption) matOptions: QueryList; constructor() { this.filteredOptions = RxChain.from(this.optionCtrl.valueChanges) @@ -1821,22 +1821,22 @@ class AutocompleteWithNativeInput { @Component({ - template: `` + template: `` }) class AutocompleteWithoutPanel { - @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; } @Component({ template: ` - - - + + + - - California - + + California + ` }) class AutocompleteWithFormsAndNonfloatingPlaceholder { @@ -1846,21 +1846,21 @@ class AutocompleteWithFormsAndNonfloatingPlaceholder { @Component({ template: ` - - - + + + - - - + + + {{ state }} - - - + + + ` }) class AutocompleteWithGroups { - @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; + @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; selectedState: string; stateGroups = [ { @@ -1880,15 +1880,15 @@ class AutocompleteWithGroups { @Component({ template: ` - - - + + + - - + + {{ state }} - - + + ` }) class AutocompleteWithSelectEvent { @@ -1896,6 +1896,6 @@ class AutocompleteWithSelectEvent { states = ['New York', 'Washington', 'Oregon']; optionSelected = jasmine.createSpy('optionSelected callback'); - @ViewChild(MdAutocompleteTrigger) trigger: MdAutocompleteTrigger; - @ViewChild(MdAutocomplete) autocomplete: MdAutocomplete; + @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; + @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete; } diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts index 24c29d411fd7..86b415352932 100644 --- a/src/lib/autocomplete/autocomplete.ts +++ b/src/lib/autocomplete/autocomplete.ts @@ -21,7 +21,7 @@ import { EventEmitter, Output, } from '@angular/core'; -import {MdOption, MdOptgroup} from '@angular/material/core'; +import {MatOption, MatOptgroup} from '@angular/material/core'; import {ActiveDescendantKeyManager} from '@angular/cdk/a11y'; @@ -32,28 +32,28 @@ import {ActiveDescendantKeyManager} from '@angular/cdk/a11y'; let _uniqueAutocompleteIdCounter = 0; /** Event object that is emitted when an autocomplete option is selected */ -export class MdAutocompleteSelectedEvent { - constructor(public source: MdAutocomplete, public option: MdOption) { } +export class MatAutocompleteSelectedEvent { + constructor(public source: MatAutocomplete, public option: MatOption) { } } @Component({ moduleId: module.id, - selector: 'md-autocomplete, mat-autocomplete', + selector: 'mat-autocomplete', templateUrl: 'autocomplete.html', styleUrls: ['autocomplete.css'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - exportAs: 'mdAutocomplete, matAutocomplete', + exportAs: 'matAutocomplete', host: { 'class': 'mat-autocomplete' } }) -export class MdAutocomplete implements AfterContentInit { +export class MatAutocomplete implements AfterContentInit { /** Manages active item in option list based on key events. */ - _keyManager: ActiveDescendantKeyManager; + _keyManager: ActiveDescendantKeyManager; /** Whether the autocomplete panel should be visible, depending on option length. */ showPanel = false; @@ -65,25 +65,25 @@ export class MdAutocomplete implements AfterContentInit { @ViewChild('panel') panel: ElementRef; /** @docs-private */ - @ContentChildren(MdOption, { descendants: true }) options: QueryList; + @ContentChildren(MatOption, { descendants: true }) options: QueryList; /** @docs-private */ - @ContentChildren(MdOptgroup) optionGroups: QueryList; + @ContentChildren(MatOptgroup) optionGroups: QueryList; /** Function that maps an option's control value to its display value in the trigger. */ @Input() displayWith: ((value: any) => string) | null = null; /** Event that is emitted whenever an option from the list is selected. */ - @Output() optionSelected: EventEmitter = - new EventEmitter(); + @Output() optionSelected: EventEmitter = + new EventEmitter(); /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */ - id: string = `md-autocomplete-${_uniqueAutocompleteIdCounter++}`; + id: string = `mat-autocomplete-${_uniqueAutocompleteIdCounter++}`; constructor(private _changeDetectorRef: ChangeDetectorRef) { } ngAfterContentInit() { - this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap(); + this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap(); } /** @@ -110,8 +110,8 @@ export class MdAutocomplete implements AfterContentInit { } /** Emits the `select` event. */ - _emitSelectEvent(option: MdOption): void { - const event = new MdAutocompleteSelectedEvent(this, option); + _emitSelectEvent(option: MatOption): void { + const event = new MatAutocompleteSelectedEvent(this, option); this.optionSelected.emit(event); } diff --git a/src/lib/autocomplete/mat-exports.ts b/src/lib/autocomplete/mat-exports.ts deleted file mode 100644 index adf1f587a717..000000000000 --- a/src/lib/autocomplete/mat-exports.ts +++ /dev/null @@ -1,27 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdAutocomplete} from './autocomplete'; -import {MdAutocompleteModule} from './autocomplete-module'; -import { - MD_AUTOCOMPLETE_SCROLL_STRATEGY, - MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER, - MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY, - MD_AUTOCOMPLETE_VALUE_ACCESSOR, - MdAutocompleteTrigger, -} from './autocomplete-trigger'; - - -/* tslint:disable:max-line-length */ -export {MD_AUTOCOMPLETE_SCROLL_STRATEGY as MAT_AUTOCOMPLETE_SCROLL_STRATEGY}; -export {MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER as MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER}; -export {MD_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY}; -export {MD_AUTOCOMPLETE_VALUE_ACCESSOR as MAT_AUTOCOMPLETE_VALUE_ACCESSOR}; -export {MdAutocomplete as MatAutocomplete}; -export {MdAutocompleteModule as MatAutocompleteModule}; -export {MdAutocompleteTrigger as MatAutocompleteTrigger}; diff --git a/src/lib/autocomplete/public_api.ts b/src/lib/autocomplete/public_api.ts index ce1e1dfacde8..dab3c54fc9d8 100644 --- a/src/lib/autocomplete/public_api.ts +++ b/src/lib/autocomplete/public_api.ts @@ -9,4 +9,4 @@ export * from './autocomplete'; export * from './autocomplete-module'; export * from './autocomplete-trigger'; -export * from './mat-exports'; + diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss index 83715baa6f7c..f381958472f9 100644 --- a/src/lib/button-toggle/_button-toggle-theme.scss +++ b/src/lib/button-toggle/_button-toggle-theme.scss @@ -2,7 +2,7 @@ @import '../core/theming/theming'; @import '../core/typography/typography-utils'; -// Applies a focus style to an md-button-toggle element for each of the supported palettes. +// Applies a focus style to an mat-button-toggle element for each of the supported palettes. @mixin _mat-button-toggle-focus-color($theme) { $background: map-get($theme, background); diff --git a/src/lib/button-toggle/button-toggle-module.ts b/src/lib/button-toggle/button-toggle-module.ts index e14857e5b6a2..f3e6271430ce 100644 --- a/src/lib/button-toggle/button-toggle-module.ts +++ b/src/lib/button-toggle/button-toggle-module.ts @@ -7,20 +7,20 @@ */ import {NgModule} from '@angular/core'; -import {MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle} from './button-toggle'; -import {UNIQUE_SELECTION_DISPATCHER_PROVIDER, MdCommonModule} from '@angular/material/core'; +import {MatButtonToggleGroup, MatButtonToggleGroupMultiple, MatButtonToggle} from './button-toggle'; +import {UNIQUE_SELECTION_DISPATCHER_PROVIDER, MatCommonModule} from '@angular/material/core'; import {A11yModule} from '@angular/cdk/a11y'; @NgModule({ - imports: [MdCommonModule, A11yModule], + imports: [MatCommonModule, A11yModule], exports: [ - MdButtonToggleGroup, - MdButtonToggleGroupMultiple, - MdButtonToggle, - MdCommonModule, + MatButtonToggleGroup, + MatButtonToggleGroupMultiple, + MatButtonToggle, + MatCommonModule, ], - declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle], + declarations: [MatButtonToggleGroup, MatButtonToggleGroupMultiple, MatButtonToggle], providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER] }) -export class MdButtonToggleModule {} +export class MatButtonToggleModule {} diff --git a/src/lib/button-toggle/button-toggle.md b/src/lib/button-toggle/button-toggle.md index 2d63576f1f83..da133c4d223c 100644 --- a/src/lib/button-toggle/button-toggle.md +++ b/src/lib/button-toggle/button-toggle.md @@ -1,17 +1,17 @@ -`` are on/off toggles with the appearance of a button. These toggles can be +`` are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are -typically part of a `md-button-toggle-group`. +typically part of a `mat-button-toggle-group`. ### Exclusive selection vs. multiple selection -By default, `md-button-toggle-group` acts like a radio-button group- only one item can be selected. -In this mode, the `value` of the `md-button-toggle-group` will reflect the value of the selected +By default, `mat-button-toggle-group` acts like a radio-button group- only one item can be selected. +In this mode, the `value` of the `mat-button-toggle-group` will reflect the value of the selected button and `ngModel` is supported. Adding the `multiple` attribute allows multiple items to be selected (checkbox behavior). In this -mode the values of the the toggles are not used, the `md-button-toggle-group` does not have a value, +mode the values of the the toggles are not used, the `mat-button-toggle-group` does not have a value, and `ngModel` is not supported. ### Accessibility diff --git a/src/lib/button-toggle/button-toggle.spec.ts b/src/lib/button-toggle/button-toggle.spec.ts index 48fd73fe1b28..fa793edd8a39 100644 --- a/src/lib/button-toggle/button-toggle.spec.ts +++ b/src/lib/button-toggle/button-toggle.spec.ts @@ -9,19 +9,19 @@ import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/f import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import { - MdButtonToggleGroup, - MdButtonToggle, - MdButtonToggleGroupMultiple, - MdButtonToggleChange, - MdButtonToggleModule, + MatButtonToggleGroup, + MatButtonToggle, + MatButtonToggleGroupMultiple, + MatButtonToggleChange, + MatButtonToggleModule, } from './index'; -describe('MdButtonToggle with forms', () => { +describe('MatButtonToggle with forms', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdButtonToggleModule, FormsModule, ReactiveFormsModule], + imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule], declarations: [ ButtonToggleGroupWithNgModel, ButtonToggleGroupWithFormControl, @@ -34,7 +34,7 @@ describe('MdButtonToggle with forms', () => { describe('using FormControl', () => { let fixture: ComponentFixture; let groupDebugElement: DebugElement; - let groupInstance: MdButtonToggleGroup; + let groupInstance: MatButtonToggleGroup; let testComponent: ButtonToggleGroupWithFormControl; beforeEach(async(() => { @@ -43,8 +43,8 @@ describe('MdButtonToggle with forms', () => { testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup)); - groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup); + groupDebugElement = fixture.debugElement.query(By.directive(MatButtonToggleGroup)); + groupInstance = groupDebugElement.injector.get(MatButtonToggleGroup); })); it('should toggle the disabled state', () => { @@ -83,8 +83,8 @@ describe('MdButtonToggle with forms', () => { let groupNativeElement: HTMLElement; let buttonToggleDebugElements: DebugElement[]; let buttonToggleNativeElements: HTMLElement[]; - let groupInstance: MdButtonToggleGroup; - let buttonToggleInstances: MdButtonToggle[]; + let groupInstance: MatButtonToggleGroup; + let buttonToggleInstances: MatButtonToggle[]; let testComponent: ButtonToggleGroupWithNgModel; let groupNgModel: NgModel; let buttonToggleLabels: HTMLElement[]; @@ -94,12 +94,12 @@ describe('MdButtonToggle with forms', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup)); + groupDebugElement = fixture.debugElement.query(By.directive(MatButtonToggleGroup)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup); + groupInstance = groupDebugElement.injector.get(MatButtonToggleGroup); groupNgModel = groupDebugElement.injector.get(NgModel); - buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle)); + buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle)); buttonToggleNativeElements = buttonToggleDebugElements.map(debugEl => debugEl.nativeElement); buttonToggleInstances = buttonToggleDebugElements.map(debugEl => debugEl.componentInstance); @@ -181,11 +181,11 @@ describe('MdButtonToggle with forms', () => { }); -describe('MdButtonToggle without forms', () => { +describe('MatButtonToggle without forms', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdButtonToggleModule], + imports: [MatButtonToggleModule], declarations: [ ButtonTogglesInsideButtonToggleGroup, ButtonTogglesInsideButtonToggleGroupMultiple, @@ -207,8 +207,8 @@ describe('MdButtonToggle without forms', () => { let buttonToggleDebugElements: DebugElement[]; let buttonToggleNativeElements: HTMLElement[]; let buttonToggleLabelElements: HTMLLabelElement[]; - let groupInstance: MdButtonToggleGroup; - let buttonToggleInstances: MdButtonToggle[]; + let groupInstance: MatButtonToggleGroup; + let buttonToggleInstances: MatButtonToggle[]; let testComponent: ButtonTogglesInsideButtonToggleGroup; beforeEach(() => { @@ -217,11 +217,11 @@ describe('MdButtonToggle without forms', () => { testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup)); + groupDebugElement = fixture.debugElement.query(By.directive(MatButtonToggleGroup)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get(MdButtonToggleGroup); + groupInstance = groupDebugElement.injector.get(MatButtonToggleGroup); - buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle)); + buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle)); buttonToggleNativeElements = buttonToggleDebugElements .map(debugEl => debugEl.nativeElement); @@ -366,9 +366,9 @@ describe('MdButtonToggle without forms', () => { it('should not fire an initial change event', () => { let fixture = TestBed.createComponent(ButtonToggleGroupWithInitialValue); let testComponent = fixture.debugElement.componentInstance; - let groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroup)); - let groupInstance: MdButtonToggleGroup = groupDebugElement.injector - .get(MdButtonToggleGroup); + let groupDebugElement = fixture.debugElement.query(By.directive(MatButtonToggleGroup)); + let groupInstance: MatButtonToggleGroup = groupDebugElement.injector + .get(MatButtonToggleGroup); fixture.detectChanges(); @@ -391,8 +391,8 @@ describe('MdButtonToggle without forms', () => { let buttonToggleDebugElements: DebugElement[]; let buttonToggleNativeElements: HTMLElement[]; let buttonToggleLabelElements: HTMLLabelElement[]; - let groupInstance: MdButtonToggleGroupMultiple; - let buttonToggleInstances: MdButtonToggle[]; + let groupInstance: MatButtonToggleGroupMultiple; + let buttonToggleInstances: MatButtonToggle[]; let testComponent: ButtonTogglesInsideButtonToggleGroupMultiple; beforeEach(async(() => { @@ -401,12 +401,12 @@ describe('MdButtonToggle without forms', () => { testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdButtonToggleGroupMultiple)); + groupDebugElement = fixture.debugElement.query(By.directive(MatButtonToggleGroupMultiple)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get( - MdButtonToggleGroupMultiple); + groupInstance = groupDebugElement.injector.get( + MatButtonToggleGroupMultiple); - buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MdButtonToggle)); + buttonToggleDebugElements = fixture.debugElement.queryAll(By.directive(MatButtonToggle)); buttonToggleNativeElements = buttonToggleDebugElements .map(debugEl => debugEl.nativeElement); buttonToggleLabelElements = fixture.debugElement.queryAll(By.css('label')) @@ -499,7 +499,7 @@ describe('MdButtonToggle without forms', () => { let buttonToggleDebugElement: DebugElement; let buttonToggleNativeElement: HTMLElement; let buttonToggleLabelElement: HTMLLabelElement; - let buttonToggleInstance: MdButtonToggle; + let buttonToggleInstance: MatButtonToggle; let testComponent: StandaloneButtonToggle; beforeEach(async(() => { @@ -508,7 +508,7 @@ describe('MdButtonToggle without forms', () => { testComponent = fixture.debugElement.componentInstance; - buttonToggleDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle)); + buttonToggleDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle)); buttonToggleNativeElement = buttonToggleDebugElement.nativeElement; buttonToggleLabelElement = fixture.debugElement.query(By.css('label')).nativeElement; buttonToggleInstance = buttonToggleDebugElement.componentInstance; @@ -567,7 +567,7 @@ describe('MdButtonToggle without forms', () => { it('should use the provided aria-label', () => { let fixture = TestBed.createComponent(ButtonToggleWithAriaLabel); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement; @@ -583,7 +583,7 @@ describe('MdButtonToggle without forms', () => { it('should use the provided aria-labelledby', () => { let fixture = TestBed.createComponent(ButtonToggleWithAriaLabelledby); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement; @@ -593,7 +593,7 @@ describe('MdButtonToggle without forms', () => { it('should not assign aria-labelledby if none is provided', () => { let fixture = TestBed.createComponent(StandaloneButtonToggle); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdButtonToggle)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatButtonToggle)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement; @@ -605,11 +605,13 @@ describe('MdButtonToggle without forms', () => { @Component({ template: ` - - Test1 - Test2 - Test3 - + + Test1 + Test2 + Test3 + ` }) class ButtonTogglesInsideButtonToggleGroup { @@ -620,11 +622,11 @@ class ButtonTogglesInsideButtonToggleGroup { @Component({ template: ` - - + + {{option.label}} - - + + ` }) class ButtonToggleGroupWithNgModel { @@ -634,16 +636,16 @@ class ButtonToggleGroupWithNgModel { {label: 'Green', value: 'green'}, {label: 'Blue', value: 'blue'}, ]; - lastEvent: MdButtonToggleChange; + lastEvent: MatButtonToggleChange; } @Component({ template: ` - - Eggs - Flour - Sugar - + + Eggs + Flour + Sugar + ` }) class ButtonTogglesInsideButtonToggleGroupMultiple { @@ -653,30 +655,30 @@ class ButtonTogglesInsideButtonToggleGroupMultiple { @Component({ template: ` - Yes + Yes ` }) class StandaloneButtonToggle { } @Component({ template: ` - - Value Red - Value Green - + + Value Red + Value Green + ` }) class ButtonToggleGroupWithInitialValue { - lastEvent: MdButtonToggleChange; + lastEvent: MatButtonToggleChange; } @Component({ template: ` - - Value Red - Value Green - Value Blue - + + Value Red + Value Green + Value Blue + ` }) class ButtonToggleGroupWithFormControl { @@ -685,12 +687,12 @@ class ButtonToggleGroupWithFormControl { /** Simple test component with an aria-label set. */ @Component({ - template: `` + template: `` }) class ButtonToggleWithAriaLabel { } /** Simple test component with an aria-label set. */ @Component({ - template: `` + template: `` }) class ButtonToggleWithAriaLabelledby {} diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index cb45c07dec00..7bc8fa72da90 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -34,58 +34,58 @@ import {FocusMonitor} from '@angular/cdk/a11y'; /** Acceptable types for a button toggle. */ export type ToggleType = 'checkbox' | 'radio'; -// Boilerplate for applying mixins to MdButtonToggleGroup and MdButtonToggleGroupMultiple +// Boilerplate for applying mixins to MatButtonToggleGroup and MatButtonToggleGroupMultiple /** @docs-private */ -export class MdButtonToggleGroupBase {} -export const _MdButtonToggleGroupMixinBase = mixinDisabled(MdButtonToggleGroupBase); +export class MatButtonToggleGroupBase {} +export const _MatButtonToggleGroupMixinBase = mixinDisabled(MatButtonToggleGroupBase); /** - * Provider Expression that allows md-button-toggle-group to register as a ControlValueAccessor. + * Provider Expression that allows mat-button-toggle-group to register as a ControlValueAccessor. * This allows it to support [(ngModel)]. * @docs-private */ -export const MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any = { +export const MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdButtonToggleGroup), + useExisting: forwardRef(() => MatButtonToggleGroup), multi: true }; let _uniqueIdCounter = 0; -/** Change event object emitted by MdButtonToggle. */ -export class MdButtonToggleChange { - /** The MdButtonToggle that emits the event. */ - source: MdButtonToggle | null; - /** The value assigned to the MdButtonToggle. */ +/** Change event object emitted by MatButtonToggle. */ +export class MatButtonToggleChange { + /** The MatButtonToggle that emits the event. */ + source: MatButtonToggle | null; + /** The value assigned to the MatButtonToggle. */ value: any; } /** Exclusive selection button toggle group that behaves like a radio-button group. */ @Directive({ - selector: 'md-button-toggle-group:not([multiple]), mat-button-toggle-group:not([multiple])', - providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR], + selector: 'mat-button-toggle-group:not([multiple])', + providers: [MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR], inputs: ['disabled'], host: { 'role': 'radiogroup', 'class': 'mat-button-toggle-group', '[class.mat-button-toggle-vertical]': 'vertical' }, - exportAs: 'mdButtonToggleGroup, matButtonToggleGroup', + exportAs: 'matButtonToggleGroup', }) -export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase +export class MatButtonToggleGroup extends _MatButtonToggleGroupMixinBase implements ControlValueAccessor, CanDisable { /** The value for the button toggle group. Should match currently selected button toggle. */ private _value: any = null; /** The HTML name attribute applied to toggles in this group. */ - private _name: string = `md-button-toggle-group-${_uniqueIdCounter++}`; + private _name: string = `mat-button-toggle-group-${_uniqueIdCounter++}`; /** Whether the button toggle group should be vertical. */ private _vertical: boolean = false; /** The currently selected button toggle, should match the value. */ - private _selected: MdButtonToggle | null = null; + private _selected: MatButtonToggle | null = null; /** * The method to be called in order to update ngModel. @@ -97,7 +97,7 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase onTouched: () => any = () => {}; /** Child button toggle buttons. */ - @ContentChildren(forwardRef(() => MdButtonToggle)) _buttonToggles: QueryList; + @ContentChildren(forwardRef(() => MatButtonToggle)) _buttonToggles: QueryList; /** `name` attribute for the underlying `input` element. */ @Input() @@ -139,7 +139,7 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase return this._selected; } - set selected(selected: MdButtonToggle | null) { + set selected(selected: MatButtonToggle | null) { this._selected = selected; this.value = selected ? selected.value : null; @@ -149,7 +149,7 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase } /** Event emitted when the group's value changes. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); constructor(private _changeDetector: ChangeDetectorRef) { super(); @@ -184,7 +184,7 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase /** Dispatch change event with current selection and group value. */ _emitChangeEvent(): void { - let event = new MdButtonToggleChange(); + let event = new MatButtonToggleChange(); event.source = this._selected; event.value = this._value; this._controlValueAccessorChangeFn(event.value); @@ -229,8 +229,8 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase /** Multiple selection button-toggle group. `ngModel` is not supported in this mode. */ @Directive({ - selector: 'md-button-toggle-group[multiple], mat-button-toggle-group[multiple]', - exportAs: 'mdButtonToggleGroup, matButtonToggleGroup', + selector: 'mat-button-toggle-group[multiple]', + exportAs: 'matButtonToggleGroup', inputs: ['disabled'], host: { 'class': 'mat-button-toggle-group', @@ -238,7 +238,7 @@ export class MdButtonToggleGroup extends _MdButtonToggleGroupMixinBase 'role': 'group' } }) -export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase +export class MatButtonToggleGroupMultiple extends _MatButtonToggleGroupMixinBase implements CanDisable { /** Whether the button toggle group should be vertical. */ @@ -258,7 +258,7 @@ export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase /** Single button inside of a toggle group. */ @Component({ moduleId: module.id, - selector: 'md-button-toggle, mat-button-toggle', + selector: 'mat-button-toggle', templateUrl: 'button-toggle.html', styleUrls: ['button-toggle.css'], encapsulation: ViewEncapsulation.None, @@ -272,7 +272,7 @@ export class MdButtonToggleGroupMultiple extends _MdButtonToggleGroupMixinBase '[attr.id]': 'id', } }) -export class MdButtonToggle implements OnInit, OnDestroy { +export class MatButtonToggle implements OnInit, OnDestroy { /** * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will * take precedence so this may be omitted. @@ -305,10 +305,10 @@ export class MdButtonToggle implements OnInit, OnDestroy { @ViewChild('input') _inputElement: ElementRef; /** The parent button toggle group (exclusive selection). Optional. */ - buttonToggleGroup: MdButtonToggleGroup; + buttonToggleGroup: MatButtonToggleGroup; /** The parent button toggle group (multiple selection). Optional. */ - buttonToggleGroupMultiple: MdButtonToggleGroupMultiple; + buttonToggleGroupMultiple: MatButtonToggleGroupMultiple; /** Unique ID for the underlying `input` element. */ get inputId(): string { @@ -338,7 +338,7 @@ export class MdButtonToggle implements OnInit, OnDestroy { } } - /** MdButtonToggleGroup reads this to assign its own value. */ + /** MatButtonToggleGroup reads this to assign its own value. */ @Input() get value(): any { return this._value; @@ -365,10 +365,10 @@ export class MdButtonToggle implements OnInit, OnDestroy { } /** Event emitted when the group value changes. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); - constructor(@Optional() toggleGroup: MdButtonToggleGroup, - @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple, + constructor(@Optional() toggleGroup: MatButtonToggleGroup, + @Optional() toggleGroupMultiple: MatButtonToggleGroupMultiple, private _changeDetectorRef: ChangeDetectorRef, private _buttonToggleDispatcher: UniqueSelectionDispatcher, private _renderer: Renderer2, @@ -400,7 +400,7 @@ export class MdButtonToggle implements OnInit, OnDestroy { ngOnInit() { if (this.id == null) { - this.id = `md-button-toggle-${_uniqueIdCounter++}`; + this.id = `mat-button-toggle-${_uniqueIdCounter++}`; } if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) { @@ -454,7 +454,7 @@ export class MdButtonToggle implements OnInit, OnDestroy { /** Dispatch change event with current value. */ private _emitChangeEvent(): void { - let event = new MdButtonToggleChange(); + let event = new MatButtonToggleChange(); event.source = this; event.value = this._value; this.change.emit(event); diff --git a/src/lib/button-toggle/mat-exports.ts b/src/lib/button-toggle/mat-exports.ts deleted file mode 100644 index cc90bd8db34c..000000000000 --- a/src/lib/button-toggle/mat-exports.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, - MdButtonToggle, - MdButtonToggleChange, - MdButtonToggleGroup, - MdButtonToggleGroupBase, - MdButtonToggleGroupMultiple, -} from './button-toggle'; -import {MdButtonToggleModule} from './button-toggle-module'; - - -export {MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR as MAT_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR}; -export {MdButtonToggle as MatButtonToggle}; -export {MdButtonToggleChange as MatButtonToggleChange}; -export {MdButtonToggleGroup as MatButtonToggleGroup}; -export {MdButtonToggleGroupBase as MatButtonToggleGroupBase}; -export {MdButtonToggleGroupMultiple as MatButtonToggleGroupMultiple}; -export {MdButtonToggleModule as MatButtonToggleModule}; diff --git a/src/lib/button-toggle/public_api.ts b/src/lib/button-toggle/public_api.ts index 22b48b8b9e18..1912abb6d7e3 100644 --- a/src/lib/button-toggle/public_api.ts +++ b/src/lib/button-toggle/public_api.ts @@ -8,4 +8,4 @@ export * from './button-toggle'; export * from './button-toggle-module'; -export * from './mat-exports'; + diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss index 53e182b2b245..661cb8015bec 100644 --- a/src/lib/button/_button-theme.scss +++ b/src/lib/button/_button-theme.scss @@ -1,7 +1,7 @@ @import '../core/theming/theming'; @import '../core/typography/typography-utils'; -// Applies a focus style to an md-button element for each of the supported palettes. +// Applies a focus style to an mat-button element for each of the supported palettes. @mixin _mat-button-focus-color($theme) { $primary: map-get($theme, primary); $accent: map-get($theme, accent); @@ -42,7 +42,7 @@ } } -// Applies a property to an md-button element for each of the supported palettes. +// Applies a property to an mat-button element for each of the supported palettes. @mixin _mat-button-theme-color($theme, $property, $color: 'default') { $primary: map-get($theme, primary); $accent: map-get($theme, accent); diff --git a/src/lib/button/button-module.ts b/src/lib/button/button-module.ts index c32e3fa71ace..b72265dc739d 100644 --- a/src/lib/button/button-module.ts +++ b/src/lib/button/button-module.ts @@ -8,44 +8,44 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdCommonModule, MdRippleModule} from '@angular/material/core'; +import {MatCommonModule, MatRippleModule} from '@angular/material/core'; import {A11yModule} from '@angular/cdk/a11y'; import { - MdAnchor, - MdButton, - MdMiniFab, - MdButtonCssMatStyler, - MdFab, - MdIconButtonCssMatStyler, - MdRaisedButtonCssMatStyler + MatAnchor, + MatButton, + MatMiniFab, + MatButtonCssMatStyler, + MatFab, + MatIconButtonCssMatStyler, + MatRaisedButtonCssMatStyler } from './button'; @NgModule({ imports: [ CommonModule, - MdRippleModule, - MdCommonModule, + MatRippleModule, + MatCommonModule, A11yModule, ], exports: [ - MdButton, - MdAnchor, - MdMiniFab, - MdFab, - MdCommonModule, - MdButtonCssMatStyler, - MdRaisedButtonCssMatStyler, - MdIconButtonCssMatStyler, + MatButton, + MatAnchor, + MatMiniFab, + MatFab, + MatCommonModule, + MatButtonCssMatStyler, + MatRaisedButtonCssMatStyler, + MatIconButtonCssMatStyler, ], declarations: [ - MdButton, - MdAnchor, - MdMiniFab, - MdFab, - MdButtonCssMatStyler, - MdRaisedButtonCssMatStyler, - MdIconButtonCssMatStyler, + MatButton, + MatAnchor, + MatMiniFab, + MatFab, + MatButtonCssMatStyler, + MatRaisedButtonCssMatStyler, + MatIconButtonCssMatStyler, ], }) -export class MdButtonModule {} +export class MatButtonModule {} diff --git a/src/lib/button/button.html b/src/lib/button/button.html index e7caa601203c..a9af6ab8b4c7 100644 --- a/src/lib/button/button.html +++ b/src/lib/button/button.html @@ -1,5 +1,5 @@ -
    ` element should be used for any interaction that _perform current page_. The `` element should be used for any interaction that _navigates to another view_. -Buttons or links containing only icons (such as `md-fab`, `md-mini-fab`, and `md-icon-button`) should +Buttons or links containing only icons (such as `mat-fab`, `mat-mini-fab`, and `mat-icon-button`) should be given a meaningful label via `aria-label` or `aria-labelledby`. diff --git a/src/lib/button/button.spec.ts b/src/lib/button/button.spec.ts index a7707a08d207..3aed8f7fafac 100644 --- a/src/lib/button/button.spec.ts +++ b/src/lib/button/button.spec.ts @@ -3,15 +3,15 @@ import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {ViewportRuler} from '@angular/cdk/scrolling'; import {FakeViewportRuler} from '@angular/cdk/testing'; -import {MdButtonModule} from './index'; -import {MdRipple} from '@angular/material/core'; +import {MatButtonModule} from './index'; +import {MatRipple} from '@angular/material/core'; -describe('MdButton', () => { +describe('MatButton', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdButtonModule], + imports: [MatButtonModule], declarations: [TestApp], providers: [ {provide: ViewportRuler, useClass: FakeViewportRuler}, @@ -67,10 +67,10 @@ describe('MdButton', () => { expect(buttonDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); }); - describe('button[md-fab]', () => { + describe('button[mat-fab]', () => { it('should have accent palette by default', () => { const fixture = TestBed.createComponent(TestApp); - const fabButtonDebugEl = fixture.debugElement.query(By.css('button[md-fab]')); + const fabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-fab]')); fixture.detectChanges(); @@ -79,10 +79,10 @@ describe('MdButton', () => { }); }); - describe('button[md-mini-fab]', () => { + describe('button[mat-mini-fab]', () => { it('should have accent palette by default', () => { const fixture = TestBed.createComponent(TestApp); - const miniFabButtonDebugEl = fixture.debugElement.query(By.css('button[md-mini-fab]')); + const miniFabButtonDebugEl = fixture.debugElement.query(By.css('button[mat-mini-fab]')); fixture.detectChanges(); @@ -92,7 +92,7 @@ describe('MdButton', () => { }); // Regular button tests - describe('button[md-button]', () => { + describe('button[mat-button]', () => { it('should handle a click on the button', () => { let fixture = TestBed.createComponent(TestApp); let testComponent = fixture.debugElement.componentInstance; @@ -128,7 +128,7 @@ describe('MdButton', () => { }); // Anchor button tests - describe('a[md-button]', () => { + describe('a[mat-button]', () => { it('should not redirect if disabled', () => { let fixture = TestBed.createComponent(TestApp); let testComponent = fixture.debugElement.componentInstance; @@ -188,10 +188,10 @@ describe('MdButton', () => { let testComponent: TestApp; let buttonDebugElement: DebugElement; let buttonRippleDebugElement: DebugElement; - let buttonRippleInstance: MdRipple; + let buttonRippleInstance: MatRipple; let anchorDebugElement: DebugElement; let anchorRippleDebugElement: DebugElement; - let anchorRippleInstance: MdRipple; + let anchorRippleInstance: MatRipple; beforeEach(() => { fixture = TestBed.createComponent(TestApp); @@ -199,16 +199,16 @@ describe('MdButton', () => { testComponent = fixture.componentInstance; - buttonDebugElement = fixture.debugElement.query(By.css('button[md-button]')); - buttonRippleDebugElement = buttonDebugElement.query(By.directive(MdRipple)); - buttonRippleInstance = buttonRippleDebugElement.injector.get(MdRipple); + buttonDebugElement = fixture.debugElement.query(By.css('button[mat-button]')); + buttonRippleDebugElement = buttonDebugElement.query(By.directive(MatRipple)); + buttonRippleInstance = buttonRippleDebugElement.injector.get(MatRipple); - anchorDebugElement = fixture.debugElement.query(By.css('a[md-button]')); - anchorRippleDebugElement = anchorDebugElement.query(By.directive(MdRipple)); - anchorRippleInstance = anchorRippleDebugElement.injector.get(MdRipple); + anchorDebugElement = fixture.debugElement.query(By.css('a[mat-button]')); + anchorRippleDebugElement = anchorDebugElement.query(By.directive(MatRipple)); + anchorRippleInstance = anchorRippleDebugElement.injector.get(MatRipple); }); - it('should disable the ripple if mdRippleDisabled input is set', () => { + it('should disable the ripple if matRippleDisabled input is set', () => { expect(buttonRippleInstance.disabled).toBeFalsy(); testComponent.rippleDisabled = true; @@ -219,36 +219,38 @@ describe('MdButton', () => { it('should disable the ripple when the button is disabled', () => { expect(buttonRippleInstance.disabled).toBeFalsy( - 'Expected an enabled button[md-button] to have an enabled ripple' + 'Expected an enabled button[mat-button] to have an enabled ripple' ); expect(anchorRippleInstance.disabled).toBeFalsy( - 'Expected an enabled a[md-button] to have an enabled ripple' + 'Expected an enabled a[mat-button] to have an enabled ripple' ); testComponent.isDisabled = true; fixture.detectChanges(); expect(buttonRippleInstance.disabled).toBeTruthy( - 'Expected a disabled button[md-button] not to have an enabled ripple' + 'Expected a disabled button[mat-button] not to have an enabled ripple' ); expect(anchorRippleInstance.disabled).toBeTruthy( - 'Expected a disabled a[md-button] not to have an enabled ripple' + 'Expected a disabled a[mat-button] not to have an enabled ripple' ); }); }); }); -/** Test component that contains an MdButton. */ +/** Test component that contains an MatButton. */ @Component({ selector: 'test-app', template: ` - - Link - - + + Link + + + ` }) class TestApp { diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index d11c1776b299..3d498f4189c1 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -24,7 +24,6 @@ import { CanColor, CanDisable, CanDisableRipple, - MATERIAL_COMPATIBILITY_MODE, mixinColor, mixinDisabled, mixinDisableRipple @@ -34,7 +33,7 @@ import {FocusMonitor} from '@angular/cdk/a11y'; // TODO(kara): Convert attribute selectors to classes when attr maps become available -/** Default color palette for round buttons (md-fab and md-mini-fab) */ +/** Default color palette for round buttons (mat-fab and mat-mini-fab) */ const DEFAULT_ROUND_BUTTON_COLOR = 'accent'; @@ -43,46 +42,43 @@ const DEFAULT_ROUND_BUTTON_COLOR = 'accent'; * @docs-private */ @Directive({ - selector: 'button[md-button], button[mat-button], a[md-button], a[mat-button]', + selector: 'button[mat-button], a[mat-button]', host: {'class': 'mat-button'} }) -export class MdButtonCssMatStyler {} +export class MatButtonCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: - 'button[md-raised-button], button[mat-raised-button], ' + - 'a[md-raised-button], a[mat-raised-button]', + selector: 'button[mat-raised-button], a[mat-raised-button]', host: {'class': 'mat-raised-button'} }) -export class MdRaisedButtonCssMatStyler {} +export class MatRaisedButtonCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: - 'button[md-icon-button], button[mat-icon-button], a[md-icon-button], a[mat-icon-button]', + selector: 'button[mat-icon-button], a[mat-icon-button]', host: {'class': 'mat-icon-button'} }) -export class MdIconButtonCssMatStyler {} +export class MatIconButtonCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: 'button[md-fab], button[mat-fab], a[md-fab], a[mat-fab]', + selector: 'button[mat-fab], a[mat-fab]', host: {'class': 'mat-fab'} }) -export class MdFab { - constructor(@Self() @Optional() @Inject(forwardRef(() => MdButton)) button: MdButton, - @Self() @Optional() @Inject(forwardRef(() => MdAnchor)) anchor: MdAnchor) { - // Set the default color palette for the md-fab components. +export class MatFab { + constructor(@Self() @Optional() @Inject(forwardRef(() => MatButton)) button: MatButton, + @Self() @Optional() @Inject(forwardRef(() => MatAnchor)) anchor: MatAnchor) { + // Set the default color palette for the mat-fab components. (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR; } } @@ -93,24 +89,24 @@ export class MdFab { * @docs-private */ @Directive({ - selector: 'button[md-mini-fab], button[mat-mini-fab], a[md-mini-fab], a[mat-mini-fab]', + selector: 'button[mat-mini-fab], a[mat-mini-fab]', host: {'class': 'mat-mini-fab'} }) -export class MdMiniFab { - constructor(@Self() @Optional() @Inject(forwardRef(() => MdButton)) button: MdButton, - @Self() @Optional() @Inject(forwardRef(() => MdAnchor)) anchor: MdAnchor) { - // Set the default color palette for the md-mini-fab components. +export class MatMiniFab { + constructor(@Self() @Optional() @Inject(forwardRef(() => MatButton)) button: MatButton, + @Self() @Optional() @Inject(forwardRef(() => MatAnchor)) anchor: MatAnchor) { + // Set the default color palette for the mat-mini-fab components. (button || anchor).color = DEFAULT_ROUND_BUTTON_COLOR; } } -// Boilerplate for applying mixins to MdButton. +// Boilerplate for applying mixins to MatButton. /** @docs-private */ -export class MdButtonBase { +export class MatButtonBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MdButtonBase))); +export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(MatButtonBase))); /** @@ -118,9 +114,7 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(Md */ @Component({ moduleId: module.id, - selector: `button[md-button], button[md-raised-button], button[md-icon-button], - button[md-fab], button[md-mini-fab], - button[mat-button], button[mat-raised-button], button[mat-icon-button], + selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab]`, host: { '[disabled]': 'disabled || null', @@ -131,9 +125,8 @@ export const _MdButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(Md encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdButton extends _MdButtonMixinBase +export class MatButton extends _MatButtonMixinBase implements OnDestroy, CanDisable, CanColor, CanDisableRipple { /** Whether the button is round. */ @@ -167,10 +160,7 @@ export class MdButton extends _MdButtonMixinBase return this.disableRipple || this.disabled; } - /** - * Gets whether the button has one of the given attributes - * with either an 'md-' or 'mat-' prefix. - */ + /** Gets whether the button has one of the given attributes with a 'mat-' prefix. */ _hasAttributeWithPrefix(...unprefixedAttributeNames: string[]) { // If not on the browser, say that there are none of the attributes present. // Since these only affect how the ripple displays (and ripples only happen on the client), @@ -180,9 +170,7 @@ export class MdButton extends _MdButtonMixinBase } return unprefixedAttributeNames.some(suffix => { - const el = this._getHostElement(); - - return el.hasAttribute('md-' + suffix) || el.hasAttribute('mat-' + suffix); + return this._getHostElement().hasAttribute('mat-' + suffix); }); } } @@ -192,8 +180,7 @@ export class MdButton extends _MdButtonMixinBase */ @Component({ moduleId: module.id, - selector: `a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab], - a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`, + selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`, host: { '[attr.tabindex]': 'disabled ? -1 : 0', '[attr.disabled]': 'disabled || null', @@ -207,7 +194,7 @@ export class MdButton extends _MdButtonMixinBase preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdAnchor extends MdButton { +export class MatAnchor extends MatButton { constructor( platform: Platform, focusMonitor: FocusMonitor, diff --git a/src/lib/button/mat-exports.ts b/src/lib/button/mat-exports.ts deleted file mode 100644 index 61e08fd808dd..000000000000 --- a/src/lib/button/mat-exports.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MdAnchor, - MdButton, - MdButtonBase, - MdButtonCssMatStyler, - MdFab, - MdIconButtonCssMatStyler, - MdMiniFab, - MdRaisedButtonCssMatStyler, -} from './button'; -import {MdButtonModule} from './button-module'; - -export {MdButton as MatButton}; -export {MdButtonBase as MatButtonBase}; -export {MdButtonCssMatStyler as MatButtonCssMatStyler}; -export {MdButtonModule as MatButtonModule}; -export {MdAnchor as MatAnchor}; -export {MdIconButtonCssMatStyler as MatIconButtonCssMatStyler}; -export {MdFab as MatFab}; -export {MdMiniFab as MatMiniFab}; -export {MdRaisedButtonCssMatStyler as MatRaisedButtonCssMatStyler}; diff --git a/src/lib/button/public_api.ts b/src/lib/button/public_api.ts index 7867a26b0db3..b8b9355bf302 100644 --- a/src/lib/button/public_api.ts +++ b/src/lib/button/public_api.ts @@ -8,4 +8,4 @@ export * from './button-module'; export * from './button'; -export * from './mat-exports'; + diff --git a/src/lib/card/card-header.html b/src/lib/card/card-header.html index 42cbd1b14252..74371726e671 100644 --- a/src/lib/card/card-header.html +++ b/src/lib/card/card-header.html @@ -1,7 +1,6 @@ - +
    - + +
    diff --git a/src/lib/card/card-module.ts b/src/lib/card/card-module.ts index 3843333c7fd5..e30a338ff45e 100644 --- a/src/lib/card/card-module.ts +++ b/src/lib/card/card-module.ts @@ -7,48 +7,48 @@ */ import {NgModule} from '@angular/core'; -import {MdCommonModule} from '@angular/material/core'; +import {MatCommonModule} from '@angular/material/core'; import { - MdCard, - MdCardHeader, - MdCardTitleGroup, - MdCardContent, - MdCardTitle, - MdCardSubtitle, - MdCardActions, - MdCardFooter, - MdCardSmImage, - MdCardMdImage, - MdCardLgImage, - MdCardImage, - MdCardXlImage, - MdCardAvatar, + MatCard, + MatCardHeader, + MatCardTitleGroup, + MatCardContent, + MatCardTitle, + MatCardSubtitle, + MatCardActions, + MatCardFooter, + MatCardSmImage, + MatCardMdImage, + MatCardLgImage, + MatCardImage, + MatCardXlImage, + MatCardAvatar, } from './card'; @NgModule({ - imports: [MdCommonModule], + imports: [MatCommonModule], exports: [ - MdCard, - MdCardHeader, - MdCardTitleGroup, - MdCardContent, - MdCardTitle, - MdCardSubtitle, - MdCardActions, - MdCardFooter, - MdCardSmImage, - MdCardMdImage, - MdCardLgImage, - MdCardImage, - MdCardXlImage, - MdCardAvatar, - MdCommonModule, + MatCard, + MatCardHeader, + MatCardTitleGroup, + MatCardContent, + MatCardTitle, + MatCardSubtitle, + MatCardActions, + MatCardFooter, + MatCardSmImage, + MatCardMdImage, + MatCardLgImage, + MatCardImage, + MatCardXlImage, + MatCardAvatar, + MatCommonModule, ], declarations: [ - MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle, - MdCardActions, MdCardFooter, MdCardSmImage, MdCardMdImage, MdCardLgImage, MdCardImage, - MdCardXlImage, MdCardAvatar, + MatCard, MatCardHeader, MatCardTitleGroup, MatCardContent, MatCardTitle, MatCardSubtitle, + MatCardActions, MatCardFooter, MatCardSmImage, MatCardMdImage, MatCardLgImage, MatCardImage, + MatCardXlImage, MatCardAvatar, ], }) -export class MdCardModule {} +export class MatCardModule {} diff --git a/src/lib/card/card-title-group.html b/src/lib/card/card-title-group.html index 4e1d758f7f69..af6035693bdc 100644 --- a/src/lib/card/card-title-group.html +++ b/src/lib/card/card-title-group.html @@ -1,7 +1,6 @@
    - + +
    diff --git a/src/lib/card/card.html b/src/lib/card/card.html index d26c09f7bd43..3a56f6c2fe37 100644 --- a/src/lib/card/card.html +++ b/src/lib/card/card.html @@ -1,2 +1,2 @@ - + diff --git a/src/lib/card/card.md b/src/lib/card/card.md index 37ae6fe3e9b2..fe3a6b33b328 100644 --- a/src/lib/card/card.md +++ b/src/lib/card/card.md @@ -1,58 +1,58 @@ -`` is a content container for text, photos, and actions in the context of a single subject. +`` is a content container for text, photos, and actions in the context of a single subject. ### Basic card sections -The most basic card needs only an `` element with some content. However, Angular Material -provides a number of preset sections that you can use inside of an ``: +The most basic card needs only an `` element with some content. However, Angular Material +provides a number of preset sections that you can use inside of an ``: | Element | Description | |-----------------------|--------------------------------------------------------------------------| -| `` | Card title | -| `` | Card subtitle | -| `` | Primary card content. Intended for blocks of text | -| `` | Card image. Stretches the image to the container width | -| `` | Container for buttons at the bottom of the card | -| `` | Section anchored to the bottom of the card | +| `` | Card title | +| `` | Card subtitle | +| `` | Primary card content. Intended for blocks of text | +| `` | Card image. Stretches the image to the container width | +| `` | Container for buttons at the bottom of the card | +| `` | Section anchored to the bottom of the card | These elements primary serve as pre-styled content containers without any additional APIs. -However, the `align` property on `` can be used to position the actions at the +However, the `align` property on `` can be used to position the actions at the `'start'` or `'end` of the container. ### Card headers -In addition to the aforementioned sections, `` gives the ability to add a rich +In addition to the aforementioned sections, `` gives the ability to add a rich header to a card. This header can contain: | Element | Description | |------------------------|-------------------------------------------------------------------------| -| `` | A title within the header | -| `` | A subtitle within the header | -| `` | An image used as an avatar within the header | +| `` | A title within the header | +| `` | A subtitle within the header | +| `` | An image used as an avatar within the header | ### Title groups -`` can be used to combine a title, subtitle, and image into a single section. +`` can be used to combine a title, subtitle, and image into a single section. This element can contain: -* `` -* `` +* `` +* `` * One of: - * `` - * `` - * `` + * `` + * `` + * `` ### Accessibility Cards can be used in a wide variety of scenarios and can contain many different types of content. -Due to this dynamic nature, the appropriate accessibility treatment depends on how `` is +Due to this dynamic nature, the appropriate accessibility treatment depends on how `` is used. #### Group, region, and landmarks There are several ARIA roles that communicate that a portion of the UI represents some semantically meaningful whole. Depending on what the content of the card means to your application, [`role="group"`][0], [`role="region"`][1], or [one of the landmark roles][3] should typically be -applied to the `` element. +applied to the `` element. A role is not necessary when the card is used as a purely decorative container that does not convey a meaningful grouping of related content for a single subject. In these cases, the content @@ -60,7 +60,7 @@ of the card should follow standard practices for document content. #### Focus -Depending on how cards are used, it may be appropriate to apply a `tabindex` to the `` +Depending on how cards are used, it may be appropriate to apply a `tabindex` to the `` element. If cards are a primary mechanism through which user interact with the application, `tabindex="0"` is appropriate. If attention can be sent to the card, but it's not part of the document flow, `tabindex="-1"` is appropriate. diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts index 2ec494d2b118..fc1e7a34ace3 100644 --- a/src/lib/card/card.ts +++ b/src/lib/card/card.ts @@ -20,49 +20,47 @@ import { * @docs-private */ @Directive({ - selector: 'md-card-content, mat-card-content', + selector: 'mat-card-content', host: {'class': 'mat-card-content'} }) -export class MdCardContent {} +export class MatCardContent {} /** * Title of a card, needed as it's used as a selector in the API. * @docs-private */ @Directive({ - selector: `md-card-title, mat-card-title, [md-card-title], [mat-card-title], - [mdCardTitle], [matCardTitle]`, + selector: `mat-card-title, [mat-card-title], [matCardTitle]`, host: { 'class': 'mat-card-title' } }) -export class MdCardTitle {} +export class MatCardTitle {} /** * Sub-title of a card, needed as it's used as a selector in the API. * @docs-private */ @Directive({ - selector: `md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle], - [mdCardSubtitle], [matCardSubtitle]`, + selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`, host: { 'class': 'mat-card-subtitle' } }) -export class MdCardSubtitle {} +export class MatCardSubtitle {} /** * Action section of a card, needed as it's used as a selector in the API. * @docs-private */ @Directive({ - selector: 'md-card-actions, mat-card-actions', + selector: 'mat-card-actions', host: { 'class': 'mat-card-actions', '[class.mat-card-actions-align-end]': 'align === "end"', } }) -export class MdCardActions { +export class MatCardActions { /** Position of the actions inside the card. */ @Input() align: 'start' | 'end' = 'start'; } @@ -72,70 +70,70 @@ export class MdCardActions { * @docs-private */ @Directive({ - selector: 'md-card-footer, mat-card-footer', + selector: 'mat-card-footer', host: {'class': 'mat-card-footer'} }) -export class MdCardFooter {} +export class MatCardFooter {} /** * Image used in a card, needed to add the mat- CSS styling. * @docs-private */ @Directive({ - selector: '[md-card-image], [mat-card-image], [mdCardImage], [matCardImage]', + selector: '[mat-card-image], [matCardImage]', host: {'class': 'mat-card-image'} }) -export class MdCardImage {} +export class MatCardImage {} /** * Image used in a card, needed to add the mat- CSS styling. * @docs-private */ @Directive({ - selector: '[md-card-sm-image], [mat-card-sm-image], [mdCardImageSmall], [matCardImageSmall]', + selector: '[mat-card-sm-image], [matCardImageSmall]', host: {'class': 'mat-card-sm-image'} }) -export class MdCardSmImage {} +export class MatCardSmImage {} /** * Image used in a card, needed to add the mat- CSS styling. * @docs-private */ @Directive({ - selector: '[md-card-md-image], [mat-card-md-image], [mdCardImageMedium], [matCardImageMedium]', + selector: '[mat-card-md-image], [matCardImageMedium]', host: {'class': 'mat-card-md-image'} }) -export class MdCardMdImage {} +export class MatCardMdImage {} /** * Image used in a card, needed to add the mat- CSS styling. * @docs-private */ @Directive({ - selector: '[md-card-lg-image], [mat-card-lg-image], [mdCardImageLarge], [matCardImageLarge]', + selector: '[mat-card-lg-image], [matCardImageLarge]', host: {'class': 'mat-card-lg-image'} }) -export class MdCardLgImage {} +export class MatCardLgImage {} /** * Large image used in a card, needed to add the mat- CSS styling. * @docs-private */ @Directive({ - selector: '[md-card-xl-image], [mat-card-xl-image], [mdCardImageXLarge], [matCardImageXLarge]', + selector: '[mat-card-xl-image], [matCardImageXLarge]', host: {'class': 'mat-card-xl-image'} }) -export class MdCardXlImage {} +export class MatCardXlImage {} /** * Avatar image used in a card, needed to add the mat- CSS styling. * @docs-private */ @Directive({ - selector: '[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]', + selector: '[mat-card-avatar], [matCardAvatar]', host: {'class': 'mat-card-avatar'} }) -export class MdCardAvatar {} +export class MatCardAvatar {} /** @@ -143,15 +141,15 @@ export class MdCardAvatar {} * * While this component can be used alone, it also provides a number * of preset styles for common card sections, including: - * - md-card-title - * - md-card-subtitle - * - md-card-content - * - md-card-actions - * - md-card-footer + * - mat-card-title + * - mat-card-subtitle + * - mat-card-content + * - mat-card-actions + * - mat-card-footer */ @Component({ moduleId: module.id, - selector: 'md-card, mat-card', + selector: 'mat-card', templateUrl: 'card.html', styleUrls: ['card.css'], encapsulation: ViewEncapsulation.None, @@ -159,38 +157,38 @@ export class MdCardAvatar {} changeDetection: ChangeDetectionStrategy.OnPush, host: {'class': 'mat-card'} }) -export class MdCard {} +export class MatCard {} /** - * Component intended to be used within the `` component. It adds styles for a + * Component intended to be used within the `` component. It adds styles for a * preset header section (i.e. a title, subtitle, and avatar layout). * @docs-private */ @Component({ moduleId: module.id, - selector: 'md-card-header, mat-card-header', + selector: 'mat-card-header', templateUrl: 'card-header.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {'class': 'mat-card-header'} }) -export class MdCardHeader {} +export class MatCardHeader {} /** - * Component intended to be used within the component. It adds styles for a preset + * Component intended to be used within the component. It adds styles for a preset * layout that groups an image with a title section. * @docs-private */ @Component({ moduleId: module.id, - selector: 'md-card-title-group, mat-card-title-group', + selector: 'mat-card-title-group', templateUrl: 'card-title-group.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, host: {'class': 'mat-card-title-group'} }) -export class MdCardTitleGroup {} +export class MatCardTitleGroup {} diff --git a/src/lib/card/mat-exports.ts b/src/lib/card/mat-exports.ts deleted file mode 100644 index d4b22e577da0..000000000000 --- a/src/lib/card/mat-exports.ts +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MdCard, - MdCardActions, - MdCardAvatar, - MdCardContent, - MdCardFooter, - MdCardHeader, - MdCardImage, - MdCardLgImage, - MdCardMdImage, - MdCardSmImage, - MdCardSubtitle, - MdCardTitle, - MdCardTitleGroup, - MdCardXlImage, -} from './card'; -import {MdCardModule} from './card-module'; - - -export {MdCard as MatCard}; -export {MdCardActions as MatCardActions}; -export {MdCardAvatar as MatCardAvatar}; -export {MdCardContent as MatCardContent}; -export {MdCardFooter as MatCardFooter}; -export {MdCardHeader as MatCardHeader}; -export {MdCardImage as MatCardImage}; -export {MdCardLgImage as MatCardLgImage}; -export {MdCardMdImage as MatCardMatImage}; -export {MdCardModule as MatCardModule}; -export {MdCardSmImage as MatCardSmImage}; -export {MdCardSubtitle as MatCardSubtitle}; -export {MdCardTitle as MatCardTitle}; -export {MdCardTitleGroup as MatCardTitleGroup}; -export {MdCardXlImage as MatCardXlImage}; diff --git a/src/lib/card/public_api.ts b/src/lib/card/public_api.ts index 863f34d9a5c7..8917e375f934 100644 --- a/src/lib/card/public_api.ts +++ b/src/lib/card/public_api.ts @@ -8,4 +8,4 @@ export * from './card'; export * from './card-module'; -export * from './mat-exports'; + diff --git a/src/lib/checkbox/checkbox-module.ts b/src/lib/checkbox/checkbox-module.ts index 49ff7562c8e0..90bf880804c8 100644 --- a/src/lib/checkbox/checkbox-module.ts +++ b/src/lib/checkbox/checkbox-module.ts @@ -9,14 +9,14 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {ObserversModule} from '@angular/cdk/observers'; -import {MdRippleModule, MdCommonModule} from '@angular/material/core'; -import {MdCheckbox} from './checkbox'; -import {MdCheckboxRequiredValidator} from './checkbox-required-validator'; +import {MatRippleModule, MatCommonModule} from '@angular/material/core'; +import {MatCheckbox} from './checkbox'; +import {MatCheckboxRequiredValidator} from './checkbox-required-validator'; import {A11yModule} from '@angular/cdk/a11y'; @NgModule({ - imports: [CommonModule, MdRippleModule, MdCommonModule, ObserversModule, A11yModule], - exports: [MdCheckbox, MdCheckboxRequiredValidator, MdCommonModule], - declarations: [MdCheckbox, MdCheckboxRequiredValidator], + imports: [CommonModule, MatRippleModule, MatCommonModule, ObserversModule, A11yModule], + exports: [MatCheckbox, MatCheckboxRequiredValidator, MatCommonModule], + declarations: [MatCheckbox, MatCheckboxRequiredValidator], }) -export class MdCheckboxModule {} +export class MatCheckboxModule {} diff --git a/src/lib/checkbox/checkbox-required-validator.ts b/src/lib/checkbox/checkbox-required-validator.ts index bd9172d0d781..41ab27739504 100644 --- a/src/lib/checkbox/checkbox-required-validator.ts +++ b/src/lib/checkbox/checkbox-required-validator.ts @@ -16,25 +16,23 @@ import { NG_VALIDATORS, } from '@angular/forms'; -export const _MdCheckboxRequiredValidator = CheckboxRequiredValidator; +export const _MatCheckboxRequiredValidator = CheckboxRequiredValidator; -export const MD_CHECKBOX_REQUIRED_VALIDATOR: Provider = { +export const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider = { provide: NG_VALIDATORS, - useExisting: forwardRef(() => MdCheckboxRequiredValidator), + useExisting: forwardRef(() => MatCheckboxRequiredValidator), multi: true }; /** * Validator for Material checkbox's required attribute in template-driven checkbox. * Current CheckboxRequiredValidator only work with `input type=checkbox` and does not - * work with `md-checkbox`. + * work with `mat-checkbox`. */ @Directive({ - selector: `md-checkbox[required][formControlName], - mat-checkbox[required][formControlName], - md-checkbox[required][formControl], md-checkbox[required][ngModel], + selector: `mat-checkbox[required][formControlName], mat-checkbox[required][formControl], mat-checkbox[required][ngModel]`, - providers: [MD_CHECKBOX_REQUIRED_VALIDATOR], + providers: [MAT_CHECKBOX_REQUIRED_VALIDATOR], host: {'[attr.required]': 'required ? "" : null'} }) -export class MdCheckboxRequiredValidator extends _MdCheckboxRequiredValidator {} +export class MatCheckboxRequiredValidator extends _MatCheckboxRequiredValidator {} diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html index f1185ea34a3f..1361d9362485 100644 --- a/src/lib/checkbox/checkbox.html +++ b/src/lib/checkbox/checkbox.html @@ -15,7 +15,7 @@ [attr.aria-labelledby]="ariaLabelledby" (change)="_onInteractionEvent($event)" (click)="_onInputClick($event)"> -
    diff --git a/src/lib/checkbox/checkbox.md b/src/lib/checkbox/checkbox.md index 7fae30d246e5..0ae96cf7939e 100644 --- a/src/lib/checkbox/checkbox.md +++ b/src/lib/checkbox/checkbox.md @@ -1,10 +1,10 @@ -`` provides the same functionality as a native `` +`` provides the same functionality as a native `` enhanced with Material Design styling and animations. ### Checkbox label -The checkbox label is provided as the content to the `` element. The label can be +The checkbox label is provided as the content to the `` element. The label can be positioned before or after the checkbox by setting the `labelPosition` property to `'before'` or `'after'`. @@ -14,23 +14,23 @@ If you don't want the label to appear next to the checkbox, you can use specify an appropriate label. ### Use with `@angular/forms` -`` is compatible with `@angular/forms` and supports both `FormsModule` +`` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`. ### Indeterminate state -`` supports an `indeterminate` state, similar to the native ``. +`` supports an `indeterminate` state, similar to the native ``. While the `indeterminate` property of the checkbox is true, it will render as indeterminate regardless of the `checked` value. Any interaction with the checkbox by a user (i.e., clicking) will remove the indeterminate state. ### Theming -The color of a `` can be changed by using the `color` property. By default, checkboxes +The color of a `` can be changed by using the `color` property. By default, checkboxes use the theme's accent color. This can be changed to `'primary'` or `'warn'`. ### Accessibility -The `` uses an internal `` to provide an accessible experience. +The `` uses an internal `` to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content of the -`` element. +`` element. Checkboxes without text or labels should be given a meaningful label via `aria-label` or `aria-labelledby`. diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index d6d829f37c0f..73b6f50177f6 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -11,16 +11,16 @@ import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {ViewportRuler} from '@angular/cdk/scrolling'; import {dispatchFakeEvent, FakeViewportRuler} from '@angular/cdk/testing'; -import {MdCheckbox, MdCheckboxChange, MdCheckboxModule} from './index'; +import {MatCheckbox, MatCheckboxChange, MatCheckboxModule} from './index'; import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core'; -describe('MdCheckbox', () => { +describe('MatCheckbox', () => { let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdCheckboxModule, FormsModule, ReactiveFormsModule], + imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], declarations: [ SingleCheckbox, CheckboxWithFormDirectives, @@ -45,7 +45,7 @@ describe('MdCheckbox', () => { describe('basic behaviors', () => { let checkboxDebugElement: DebugElement; let checkboxNativeElement: HTMLElement; - let checkboxInstance: MdCheckbox; + let checkboxInstance: MatCheckbox; let testComponent: SingleCheckbox; let inputElement: HTMLInputElement; let labelElement: HTMLLabelElement; @@ -54,7 +54,7 @@ describe('MdCheckbox', () => { fixture = TestBed.createComponent(SingleCheckbox); fixture.detectChanges(); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxInstance = checkboxDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -273,7 +273,7 @@ describe('MdCheckbox', () => { testComponent.checkboxId = null; fixture.detectChanges(); - expect(checkboxInstance.inputId).toMatch(/md-checkbox-\d+/); + expect(checkboxInstance.inputId).toMatch(/mat-checkbox-\d+/); expect(inputElement.id).toBe(checkboxInstance.inputId); }); @@ -436,7 +436,7 @@ describe('MdCheckbox', () => { expect(checkboxNativeElement.querySelectorAll('.mat-ripple-element').length).toBe(1); }); - it('should remove ripple if mdRippleDisabled input is set', () => { + it('should remove ripple if matRippleDisabled input is set', () => { testComponent.disableRipple = true; fixture.detectChanges(); @@ -531,14 +531,14 @@ describe('MdCheckbox', () => { it('should not apply transition classes when there is no state change', () => { testComponent.isChecked = checkboxInstance.checked; fixture.detectChanges(); - expect(checkboxNativeElement).not.toMatch(/^md\-checkbox\-anim/g); + expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g); testComponent.isIndeterminate = checkboxInstance.indeterminate; - expect(checkboxNativeElement).not.toMatch(/^md\-checkbox\-anim/g); + expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g); }); it('should not initially have any transition classes', () => { - expect(checkboxNativeElement).not.toMatch(/^md\-checkbox\-anim/g); + expect(checkboxNativeElement).not.toMatch(/^mat\-checkbox\-anim/g); }); }); }); @@ -546,7 +546,7 @@ describe('MdCheckbox', () => { describe('with change event and no initial value', () => { let checkboxDebugElement: DebugElement; let checkboxNativeElement: HTMLElement; - let checkboxInstance: MdCheckbox; + let checkboxInstance: MatCheckbox; let testComponent: CheckboxWithChangeEvent; let inputElement: HTMLInputElement; let labelElement: HTMLLabelElement; @@ -555,7 +555,7 @@ describe('MdCheckbox', () => { fixture = TestBed.createComponent(CheckboxWithChangeEvent); fixture.detectChanges(); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxInstance = checkboxDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -605,7 +605,7 @@ describe('MdCheckbox', () => { it('should use the provided aria-label', () => { fixture = TestBed.createComponent(CheckboxWithAriaLabel); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -621,7 +621,7 @@ describe('MdCheckbox', () => { it('should use the provided aria-labelledby', () => { fixture = TestBed.createComponent(CheckboxWithAriaLabelledby); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -631,7 +631,7 @@ describe('MdCheckbox', () => { it('should not assign aria-labelledby if none is provided', () => { fixture = TestBed.createComponent(SingleCheckbox); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); @@ -652,7 +652,7 @@ describe('MdCheckbox', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; inputElement = checkboxNativeElement.querySelector('input'); labelElement = checkboxNativeElement.querySelector('label'); @@ -685,11 +685,11 @@ describe('MdCheckbox', () => { it('should assign a unique id to each checkbox', () => { let [firstId, secondId] = - fixture.debugElement.queryAll(By.directive(MdCheckbox)) + fixture.debugElement.queryAll(By.directive(MatCheckbox)) .map(debugElement => debugElement.nativeElement.querySelector('input').id); - expect(firstId).toMatch(/md-checkbox-\d+-input/); - expect(secondId).toMatch(/md-checkbox-\d+-input/); + expect(firstId).toMatch(/mat-checkbox-\d+-input/); + expect(secondId).toMatch(/mat-checkbox-\d+-input/); expect(firstId).not.toEqual(secondId); }); }); @@ -697,14 +697,14 @@ describe('MdCheckbox', () => { describe('with ngModel', () => { let checkboxDebugElement: DebugElement; let checkboxNativeElement: HTMLElement; - let checkboxInstance: MdCheckbox; + let checkboxInstance: MatCheckbox; let inputElement: HTMLInputElement; beforeEach(() => { fixture = TestBed.createComponent(CheckboxWithFormDirectives); fixture.detectChanges(); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxNativeElement = checkboxDebugElement.nativeElement; checkboxInstance = checkboxDebugElement.componentInstance; inputElement = checkboxNativeElement.querySelector('input'); @@ -713,7 +713,7 @@ describe('MdCheckbox', () => { it('should be in pristine, untouched, and valid states initially', fakeAsync(() => { flushMicrotasks(); - let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox)); + let checkboxElement = fixture.debugElement.query(By.directive(MatCheckbox)); let ngModel = checkboxElement.injector.get(NgModel); expect(ngModel.valid).toBe(true); @@ -740,7 +740,7 @@ describe('MdCheckbox', () => { }); describe('with required ngModel', () => { - let checkboxInstance: MdCheckbox; + let checkboxInstance: MatCheckbox; let inputElement: HTMLInputElement; let testComponent: CheckboxWithNgModel; @@ -748,7 +748,7 @@ describe('MdCheckbox', () => { fixture = TestBed.createComponent(CheckboxWithNgModel); fixture.detectChanges(); - let checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + let checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); let checkboxNativeElement = checkboxDebugElement.nativeElement; testComponent = fixture.debugElement.componentInstance; checkboxInstance = checkboxDebugElement.componentInstance; @@ -756,7 +756,7 @@ describe('MdCheckbox', () => { }); it('should validate with RequiredTrue validator', () => { - let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox)); + let checkboxElement = fixture.debugElement.query(By.directive(MatCheckbox)); let ngModel = checkboxElement.injector.get(NgModel); testComponent.isRequired = true; @@ -781,7 +781,7 @@ describe('MdCheckbox', () => { }); it('should forward name value to input element', () => { - let checkboxElement = fixture.debugElement.query(By.directive(MdCheckbox)); + let checkboxElement = fixture.debugElement.query(By.directive(MatCheckbox)); let inputElement = checkboxElement.nativeElement.querySelector('input'); expect(inputElement.getAttribute('name')).toBe('test-name'); @@ -790,7 +790,7 @@ describe('MdCheckbox', () => { describe('with form control', () => { let checkboxDebugElement: DebugElement; - let checkboxInstance: MdCheckbox; + let checkboxInstance: MatCheckbox; let testComponent: CheckboxWithFormControl; let inputElement: HTMLInputElement; @@ -798,7 +798,7 @@ describe('MdCheckbox', () => { fixture = TestBed.createComponent(CheckboxWithFormControl); fixture.detectChanges(); - checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox)); checkboxInstance = checkboxDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; inputElement = checkboxDebugElement.nativeElement.querySelector('input'); @@ -829,7 +829,7 @@ describe('MdCheckbox', () => { beforeEach(() => { fixture = TestBed.createComponent(CheckboxWithoutLabel); - const checkboxDebugEl = fixture.debugElement.query(By.directive(MdCheckbox)); + const checkboxDebugEl = fixture.debugElement.query(By.directive(MatCheckbox)); testComponent = fixture.componentInstance; checkboxElement = checkboxDebugEl.nativeElement; @@ -880,7 +880,7 @@ describe('MdCheckbox', () => { @Component({ template: `
    - { (click)="onCheckboxClick($event)" (change)="onCheckboxChange($event)"> Simple checkbox - +
    ` }) class SingleCheckbox { @@ -910,14 +910,14 @@ class SingleCheckbox { checkboxValue: string = 'single_checkbox'; onCheckboxClick: (event?: Event) => void = () => {}; - onCheckboxChange: (event?: MdCheckboxChange) => void = () => {}; + onCheckboxChange: (event?: MatCheckboxChange) => void = () => {}; } -/** Simple component for testing an MdCheckbox with ngModel in a form. */ +/** Simple component for testing an MatCheckbox with ngModel in a form. */ @Component({ template: `
    - Be good + Be good
    `, }) @@ -925,9 +925,9 @@ class CheckboxWithFormDirectives { isGood: boolean = false; } -/** Simple component for testing an MdCheckbox with required ngModel. */ +/** Simple component for testing an MatCheckbox with required ngModel. */ @Component({ - template: `Be good`, + template: `Be good`, }) class CheckboxWithNgModel { isGood: boolean = false; @@ -937,8 +937,8 @@ class CheckboxWithNgModel { /** Simple test component with multiple checkboxes. */ @Component(({ template: ` - Option 1 - Option 2 + Option 1 + Option 2 ` })) class MultipleCheckboxes { } @@ -947,10 +947,10 @@ class MultipleCheckboxes { } /** Simple test component with tabIndex */ @Component({ template: ` - - `, +     `, }) class CheckboxWithTabIndex { customTabIndex: number = 7; @@ -959,33 +959,33 @@ class CheckboxWithTabIndex { /** Simple test component with an aria-label set. */ @Component({ - template: `` + template: `` }) class CheckboxWithAriaLabel { } /** Simple test component with an aria-label set. */ @Component({ - template: `` + template: `` }) class CheckboxWithAriaLabelledby {} /** Simple test component with name attribute */ @Component({ - template: `` + template: `` }) class CheckboxWithNameAttribute {} /** Simple test component with change event */ @Component({ - template: `` + template: `` }) class CheckboxWithChangeEvent { - lastEvent: MdCheckboxChange; + lastEvent: MatCheckboxChange; } /** Test component with reactive forms */ @Component({ - template: `` + template: `` }) class CheckboxWithFormControl { formControl = new FormControl(); @@ -993,7 +993,7 @@ class CheckboxWithFormControl { /** Test component without label */ @Component({ - template: `{{ label }}` + template: `{{ label }}` }) class CheckboxWithoutLabel { label: string; diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 86096cd2861d..97ffec3de20d 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -26,8 +26,8 @@ import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { CanColor, CanDisable, - CanDisableRipple, MATERIAL_COMPATIBILITY_MODE, - MdRipple, + CanDisableRipple, + MatRipple, mixinColor, mixinDisabled, mixinDisableRipple, @@ -40,13 +40,13 @@ import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; let nextUniqueId = 0; /** - * Provider Expression that allows md-checkbox to register as a ControlValueAccessor. + * Provider Expression that allows mat-checkbox to register as a ControlValueAccessor. * This allows it to support [(ngModel)]. * @docs-private */ -export const MD_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = { +export const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdCheckbox), + useExisting: forwardRef(() => MatCheckbox), multi: true }; @@ -65,26 +65,26 @@ export enum TransitionCheckState { Indeterminate } -/** Change event object emitted by MdCheckbox. */ -export class MdCheckboxChange { - /** The source MdCheckbox of the event. */ - source: MdCheckbox; +/** Change event object emitted by MatCheckbox. */ +export class MatCheckboxChange { + /** The source MatCheckbox of the event. */ + source: MatCheckbox; /** The new `checked` value of the checkbox. */ checked: boolean; } -// Boilerplate for applying mixins to MdCheckbox. +// Boilerplate for applying mixins to MatCheckbox. /** @docs-private */ -export class MdCheckboxBase { +export class MatCheckboxBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdCheckboxMixinBase = - mixinColor(mixinDisableRipple(mixinDisabled(MdCheckboxBase)), 'accent'); +export const _MatCheckboxMixinBase = + mixinColor(mixinDisableRipple(mixinDisabled(MatCheckboxBase)), 'accent'); /** * A material design checkbox component. Supports all of the functionality of an HTML5 checkbox, - * and exposes a similar API. A MdCheckbox can be either checked, unchecked, indeterminate, or + * and exposes a similar API. A MatCheckbox can be either checked, unchecked, indeterminate, or * disabled. Note that all additional accessibility attributes are taken care of by the component, * so there is no need to provide them yourself. However, if you want to omit a label and still * have the checkbox be accessible, you may supply an [aria-label] input. @@ -92,7 +92,7 @@ export const _MdCheckboxMixinBase = */ @Component({ moduleId: module.id, - selector: 'md-checkbox, mat-checkbox', + selector: 'mat-checkbox', templateUrl: 'checkbox.html', styleUrls: ['checkbox.css'], host: { @@ -103,15 +103,14 @@ export const _MdCheckboxMixinBase = '[class.mat-checkbox-disabled]': 'disabled', '[class.mat-checkbox-label-before]': 'labelPosition == "before"', }, - providers: [MD_CHECKBOX_CONTROL_VALUE_ACCESSOR], - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], + providers: [MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR], inputs: ['disabled', 'disableRipple', 'color'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAccessor, AfterViewInit, - OnDestroy, CanColor, CanDisable, CanDisableRipple { +export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAccessor, + AfterViewInit, OnDestroy, CanColor, CanDisable, CanDisableRipple { /** * Attached to the aria-label attribute of the host element. In most cases, arial-labelledby will @@ -124,7 +123,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce */ @Input('aria-labelledby') ariaLabelledby: string | null = null; - private _uniqueId: string = `md-checkbox-${++nextUniqueId}`; + private _uniqueId: string = `mat-checkbox-${++nextUniqueId}`; /** A unique id for the checkbox input. If none is supplied, it will be auto-generated. */ @Input() id: string = this._uniqueId; @@ -164,7 +163,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce @Input() name: string | null = null; /** Event emitted when the checkbox's `checked` value changes. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); /** Event emitted when the checkbox's `indeterminate` value changes. */ @Output() indeterminateChange: EventEmitter = new EventEmitter(); @@ -176,7 +175,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce @ViewChild('input') _inputElement: ElementRef; /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */ - @ViewChild(MdRipple) _ripple: MdRipple; + @ViewChild(MatRipple) _ripple: MatRipple; /** * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. @@ -322,7 +321,7 @@ export class MdCheckbox extends _MdCheckboxMixinBase implements ControlValueAcce } private _emitChangeEvent() { - let event = new MdCheckboxChange(); + let event = new MatCheckboxChange(); event.source = this; event.checked = this.checked; diff --git a/src/lib/checkbox/mat-exports.ts b/src/lib/checkbox/mat-exports.ts deleted file mode 100644 index 6b3089901f56..000000000000 --- a/src/lib/checkbox/mat-exports.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_CHECKBOX_CONTROL_VALUE_ACCESSOR, - MdCheckbox, - MdCheckboxBase, - MdCheckboxChange, -} from './checkbox'; -import {MdCheckboxModule} from './checkbox-module'; -import { - MD_CHECKBOX_REQUIRED_VALIDATOR, - MdCheckboxRequiredValidator, -} from './checkbox-required-validator'; - - -export {MD_CHECKBOX_CONTROL_VALUE_ACCESSOR as MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR}; -export {MD_CHECKBOX_REQUIRED_VALIDATOR as MAT_CHECKBOX_REQUIRED_VALIDATOR}; -export {MdCheckbox as MatCheckbox}; -export {MdCheckboxBase as MatCheckboxBase}; -export {MdCheckboxChange as MatCheckboxChange}; -export {MdCheckboxModule as MatCheckboxModule}; -export {MdCheckboxRequiredValidator as MatCheckboxRequiredValidator}; diff --git a/src/lib/checkbox/public_api.ts b/src/lib/checkbox/public_api.ts index 7a6132ac2ed2..89bc5a134764 100644 --- a/src/lib/checkbox/public_api.ts +++ b/src/lib/checkbox/public_api.ts @@ -9,4 +9,4 @@ export * from './checkbox'; export * from './checkbox-module'; export * from './checkbox-required-validator'; -export * from './mat-exports'; + diff --git a/src/lib/chips/chip-input.spec.ts b/src/lib/chips/chip-input.spec.ts index 62e9fd498a2b..da845439823f 100644 --- a/src/lib/chips/chip-input.spec.ts +++ b/src/lib/chips/chip-input.spec.ts @@ -5,24 +5,24 @@ import {createKeyboardEvent} from '@angular/cdk/testing'; import {Component, DebugElement} from '@angular/core'; import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {MdChipInput, MdChipInputEvent} from './chip-input'; -import {MdChipsModule} from './index'; +import {MatChipInput, MatChipInputEvent} from './chip-input'; +import {MatChipsModule} from './index'; const COMMA = 188; -describe('MdChipInput', () => { +describe('MatChipInput', () => { let fixture: ComponentFixture; let testChipInput: TestChipInput; let inputDebugElement: DebugElement; let inputNativeElement: HTMLElement; - let chipInputDirective: MdChipInput; + let chipInputDirective: MatChipInput; let dir = 'ltr'; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdChipsModule, PlatformModule], + imports: [MatChipsModule, PlatformModule], declarations: [TestChipInput], providers: [{ provide: Directionality, useFactory: () => { @@ -39,8 +39,8 @@ describe('MdChipInput', () => { testChipInput = fixture.debugElement.componentInstance; fixture.detectChanges(); - inputDebugElement = fixture.debugElement.query(By.directive(MdChipInput)); - chipInputDirective = inputDebugElement.injector.get(MdChipInput) as MdChipInput; + inputDebugElement = fixture.debugElement.query(By.directive(MatChipInput)); + chipInputDirective = inputDebugElement.injector.get(MatChipInput) as MatChipInput; inputNativeElement = inputDebugElement.nativeElement; })); @@ -104,18 +104,18 @@ describe('MdChipInput', () => { @Component({ template: ` - - - + + + ` }) class TestChipInput { addOnBlur: boolean = false; separatorKeys: number[] = [ENTER]; - add(_: MdChipInputEvent) { + add(_: MatChipInputEvent) { } } diff --git a/src/lib/chips/chip-input.ts b/src/lib/chips/chip-input.ts index c4c61ae2856f..b014dd52b756 100644 --- a/src/lib/chips/chip-input.ts +++ b/src/lib/chips/chip-input.ts @@ -9,20 +9,20 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {ENTER} from '@angular/cdk/keycodes'; import {Directive, ElementRef, EventEmitter, Input, Output} from '@angular/core'; -import {MdChipList} from './chip-list'; +import {MatChipList} from './chip-list'; -export interface MdChipInputEvent { +export interface MatChipInputEvent { input: HTMLInputElement; value: string; } /** - * Directive that adds chip-specific behaviors to an input element inside . - * May be placed inside or outside of an . + * Directive that adds chip-specific behaviors to an input element inside . + * May be placed inside or outside of an . */ @Directive({ - selector: 'input[mdChipInputFor], input[matChipInputFor]', + selector: 'input[matChipInputFor]', host: { 'class': 'mat-chip-input mat-input-element', '(keydown)': '_keydown($event)', @@ -30,13 +30,13 @@ export interface MdChipInputEvent { '(focus)': '_focus()', } }) -export class MdChipInput { +export class MatChipInput { focused: boolean = false; - _chipList: MdChipList; + _chipList: MatChipList; /** Register input for chip list */ - @Input('mdChipInputFor') - set chipList(value: MdChipList) { + @Input('matChipInputFor') + set chipList(value: MatChipList) { if (value) { this._chipList = value; this._chipList.registerInput(this); @@ -46,7 +46,7 @@ export class MdChipInput { /** * Whether or not the chipEnd event will be emitted when the input is blurred. */ - @Input('mdChipInputAddOnBlur') + @Input('matChipInputAddOnBlur') get addOnBlur() { return this._addOnBlur; } set addOnBlur(value) { this._addOnBlur = coerceBooleanProperty(value); } _addOnBlur: boolean = false; @@ -57,16 +57,14 @@ export class MdChipInput { * Defaults to `[ENTER]`. */ // TODO(tinayuangao): Support Set here - @Input('mdChipInputSeparatorKeyCodes') separatorKeyCodes: number[] = [ENTER]; + @Input('matChipInputSeparatorKeyCodes') separatorKeyCodes: number[] = [ENTER]; /** Emitted when a chip is to be added. */ - @Output('mdChipInputTokenEnd') - chipEnd = new EventEmitter(); - - @Output('matChipInputTokenEnd') _matChipInputTokenEnd = this.chipEnd; + @Output('matChipInputTokenEnd') + chipEnd = new EventEmitter(); @Input('matChipInputFor') - set matChipList(value: MdChipList) { this.chipList = value; } + set matChipList(value: MatChipList) { this.chipList = value; } @Input('matChipInputAddOnBlur') get matAddOnBlur() { return this._addOnBlur; } diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index e4ef2f7d2de0..bb9a5b33eb71 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -5,23 +5,23 @@ import {createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent} from '@an import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core'; import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MdFormFieldModule} from '@angular/material/form-field'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MdInputModule} from '../input/index'; -import {MdChip} from './chip'; -import {MdChipInputEvent} from './chip-input'; -import {MdChipList, MdChipsModule} from './index'; +import {MatInputModule} from '../input/index'; +import {MatChip} from './chip'; +import {MatChipInputEvent} from './chip-input'; +import {MatChipList, MatChipsModule} from './index'; -describe('MdChipList', () => { +describe('MatChipList', () => { let fixture: ComponentFixture; let chipListDebugElement: DebugElement; let chipListNativeElement: HTMLElement; - let chipListInstance: MdChipList; + let chipListInstance: MatChipList; let testComponent: StandardChipList; let chips: QueryList; - let manager: FocusKeyManager; + let manager: FocusKeyManager; let dir = 'ltr'; beforeEach(async(() => { @@ -29,9 +29,9 @@ describe('MdChipList', () => { imports: [ FormsModule, ReactiveFormsModule, - MdChipsModule, - MdFormFieldModule, - MdInputModule, + MatChipsModule, + MatFormFieldModule, + MatInputModule, NoopAnimationsModule ], declarations: [ @@ -141,7 +141,7 @@ describe('MdChipList', () => { })); it('should focus previous item when press LEFT ARROW', () => { - let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); + let nativeChips = chipListNativeElement.querySelectorAll('mat-chip'); let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement; let LEFT_EVENT = createKeyboardEvent('keydown', LEFT_ARROW, lastNativeChip); @@ -162,7 +162,7 @@ describe('MdChipList', () => { }); it('should focus next item when press RIGHT ARROW', () => { - let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); + let nativeChips = chipListNativeElement.querySelectorAll('mat-chip'); let firstNativeChip = nativeChips[0] as HTMLElement; let RIGHT_EVENT: KeyboardEvent = @@ -192,7 +192,7 @@ describe('MdChipList', () => { })); it('should focus previous item when press RIGHT ARROW', () => { - let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); + let nativeChips = chipListNativeElement.querySelectorAll('mat-chip'); let lastNativeChip = nativeChips[nativeChips.length - 1] as HTMLElement; let RIGHT_EVENT: KeyboardEvent = @@ -214,7 +214,7 @@ describe('MdChipList', () => { }); it('should focus next item when press LEFT ARROW', () => { - let nativeChips = chipListNativeElement.querySelectorAll('md-chip'); + let nativeChips = chipListNativeElement.querySelectorAll('mat-chip'); let firstNativeChip = nativeChips[0] as HTMLElement; let LEFT_EVENT: KeyboardEvent = @@ -327,11 +327,11 @@ describe('MdChipList', () => { fixture.detectChanges(); formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; - nativeChips = fixture.debugElement.queryAll(By.css('md-chip')) + nativeChips = fixture.debugElement.queryAll(By.css('mat-chip')) .map((chip) => chip.nativeElement); - chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); + chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList)); chipListInstance = chipListDebugElement.componentInstance; chips = chipListInstance.chips; @@ -366,7 +366,7 @@ describe('MdChipList', () => { fixture.componentInstance.foods.push({viewValue: 'Potatoes', value: 'potatoes-8'}); fixture.detectChanges(); - nativeChips = fixture.debugElement.queryAll(By.css('md-chip')) + nativeChips = fixture.debugElement.queryAll(By.css('mat-chip')) .map((chip) => chip.nativeElement); const lastChip = nativeChips[8]; dispatchKeyboardEvent(lastChip, 'keydown', SPACE); @@ -403,7 +403,7 @@ describe('MdChipList', () => { fixture.detectChanges(); formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; - nativeChips = fixture.debugElement.queryAll(By.css('md-chip')) + nativeChips = fixture.debugElement.queryAll(By.css('mat-chip')) .map((chip) => chip.nativeElement); chips = fixture.componentInstance.chips; }); @@ -556,7 +556,7 @@ describe('MdChipList', () => { fixture.detectChanges(); formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; - nativeChips = fixture.debugElement.queryAll(By.css('md-chip')) + nativeChips = fixture.debugElement.queryAll(By.css('mat-chip')) .map((chip) => chip.nativeElement); chips = fixture.componentInstance.chips; }); @@ -641,7 +641,7 @@ describe('MdChipList', () => { fixture.detectChanges(); formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement; - nativeChips = fixture.debugElement.queryAll(By.css('md-chip')) + nativeChips = fixture.debugElement.queryAll(By.css('mat-chip')) .map((chip) => chip.nativeElement); }); @@ -778,7 +778,7 @@ describe('MdChipList', () => { beforeEach(() => { fixture = TestBed.createComponent(InputChipList); fixture.detectChanges(); - chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); + chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList)); chipListInstance = chipListDebugElement.componentInstance; chips = chipListInstance.chips; manager = fixture.componentInstance.chipList._keyManager; @@ -828,7 +828,7 @@ describe('MdChipList', () => { fixture = TestBed.createComponent(StandardChipList); fixture.detectChanges(); - chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); + chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList)); chipListNativeElement = chipListDebugElement.nativeElement; chipListInstance = chipListDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -839,7 +839,7 @@ describe('MdChipList', () => { fixture = TestBed.createComponent(FormFieldChipList); fixture.detectChanges(); - chipListDebugElement = fixture.debugElement.query(By.directive(MdChipList)); + chipListDebugElement = fixture.debugElement.query(By.directive(MatChipList)); chipListNativeElement = chipListDebugElement.nativeElement; chipListInstance = chipListDebugElement.componentInstance; testComponent = fixture.debugElement.componentInstance; @@ -850,15 +850,15 @@ describe('MdChipList', () => { @Component({ template: ` - +
    - + {{name}} {{i + 1}} - +
    -     ` +     ` }) class StandardChipList { name: string = 'Test'; @@ -871,14 +871,14 @@ class StandardChipList { @Component({ template: ` - - - Chip 1 - Chip 1 - Chip 1 - - - + + + Chip 1 + Chip 1 + Chip 1 + + + ` }) class FormFieldChipList { @@ -888,14 +888,14 @@ class FormFieldChipList { @Component({ selector: 'basic-chip-list', template: ` - - + - + {{ food.viewValue }} - - - + + +     ` }) class BasicChipList { @@ -914,23 +914,23 @@ class BasicChipList { tabIndexOverride: number; selectable: boolean; - @ViewChild(MdChipList) chipList: MdChipList; - @ViewChildren(MdChip) chips: QueryList; + @ViewChild(MatChipList) chipList: MatChipList; + @ViewChildren(MatChip) chips: QueryList; } @Component({ selector: 'multi-selection-chip-list', template: ` - - + - + {{ food.viewValue }} - - - + + + ` }) class MultiSelectionChipList { @@ -949,26 +949,26 @@ class MultiSelectionChipList { tabIndexOverride: number; selectable: boolean; - @ViewChild(MdChipList) chipList: MdChipList; - @ViewChildren(MdChip) chips: QueryList; + @ViewChild(MatChipList) chipList: MatChipList; + @ViewChildren(MatChip) chips: QueryList; } @Component({ selector: 'input-chip-list', template: ` - - + - + {{ food.viewValue }} - - + + /> - + [matChipInputFor]="chipList1" + [matChipInputSeparatorKeyCodes]="separatorKeyCodes" + [matChipInputAddOnBlur]="addOnBlur" + (matChipInputTokenEnd)="add($event)" />/> + ` }) class InputChipList { @@ -988,7 +988,7 @@ class InputChipList { addOnBlur: boolean = true; isRequired: boolean; - add(event: MdChipInputEvent): void { + add(event: MatChipInputEvent): void { let input = event.input; let value = event.value; @@ -1006,17 +1006,17 @@ class InputChipList { } } - @ViewChild(MdChipList) chipList: MdChipList; - @ViewChildren(MdChip) chips: QueryList; + @ViewChild(MatChipList) chipList: MatChipList; + @ViewChildren(MatChip) chips: QueryList; } @Component({ template: ` - - - {{ food.viewValue }} - - + + + {{ food.viewValue }} + + ` }) class FalsyValueChipList { @@ -1025,5 +1025,5 @@ class FalsyValueChipList { { value: 1, viewValue: 'Pizza' }, ]; control = new FormControl(); - @ViewChildren(MdChip) chips: QueryList; + @ViewChildren(MatChip) chips: QueryList; } diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 5555824873d6..ae7bdfe0b177 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -31,20 +31,20 @@ import { ViewEncapsulation, } from '@angular/core'; import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms'; -import {MdFormFieldControl} from '@angular/material/form-field'; +import {MatFormFieldControl} from '@angular/material/form-field'; import {Observable} from 'rxjs/Observable'; import {merge} from 'rxjs/observable/merge'; import {Subject} from 'rxjs/Subject'; import {Subscription} from 'rxjs/Subscription'; -import {MdChip, MdChipEvent, MdChipSelectionChange} from './chip'; -import {MdChipInput} from './chip-input'; +import {MatChip, MatChipEvent, MatChipSelectionChange} from './chip'; +import {MatChipInput} from './chip-input'; // Increasing integer for generating unique ids for chip-list components. let nextUniqueId = 0; /** Change event object that is emitted when the chip list value has changed. */ -export class MdChipListChange { - constructor(public source: MdChipList, public value: any) { } +export class MatChipListChange { + constructor(public source: MatChipList, public value: any) { } } @@ -53,9 +53,9 @@ export class MdChipListChange { */ @Component({ moduleId: module.id, - selector: 'md-chip-list, mat-chip-list', + selector: 'mat-chip-list', template: `
    `, - exportAs: 'mdChipList, matChipList', + exportAs: 'matChipList', host: { '[attr.tabindex]': '_tabIndex', '[attr.aria-describedby]': '_ariaDescribedby || null', @@ -73,18 +73,18 @@ export class MdChipListChange { '(blur)': '_blur()', '(keydown)': '_keydown($event)' }, - providers: [{provide: MdFormFieldControl, useExisting: MdChipList}], + providers: [{provide: MatFormFieldControl, useExisting: MatChipList}], styleUrls: ['chips.css'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MdChipList implements MdFormFieldControl, ControlValueAccessor, +export class MatChipList implements MatFormFieldControl, ControlValueAccessor, AfterContentInit, OnInit, OnDestroy { readonly controlType = 'mat-chip-list'; /** - * Stream that emits whenever the state of the input changes such that the wrapping `MdFormField` + * Stream that emits whenever the state of the input changes such that the wrapping `MatFormField` * needs to run change detection. */ stateChanges = new Subject(); @@ -93,7 +93,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor protected _lastDestroyedIndex: number|null = null; /** Track which chips we're listening to for focus/destruction. */ - protected _chipSet: WeakMap = new WeakMap(); + protected _chipSet: WeakMap = new WeakMap(); /** Subscription to tabbing out from the chip list. */ private _tabOutSubscription = Subscription.EMPTY; @@ -120,7 +120,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor private _multiple: boolean = false; /** The chip input to add more chips */ - protected _chipInput: MdChipInput; + protected _chipInput: MatChipInput; /** The aria-describedby attribute on the chip list for improved a11y. */ protected _ariaDescribedby: string; @@ -129,7 +129,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor protected _id: string; /** Uid of the chip list */ - protected _uid: string = `md-chip-list-${nextUniqueId++}`; + protected _uid: string = `mat-chip-list-${nextUniqueId++}`; /** Whether this is required */ protected _required: boolean = false; @@ -139,7 +139,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor protected _value: any; - /** Placeholder for the chip list. Alternatively, placeholder can be set on MdChipInput */ + /** Placeholder for the chip list. Alternatively, placeholder can be set on MatChipInput */ protected _placeholder: string; /** Tab index for the chip list. */ @@ -152,7 +152,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor _userTabIndex: number | null = null; /** The FocusKeyManager which handles focus. */ - _keyManager: FocusKeyManager; + _keyManager: FocusKeyManager; /** Function when touched */ _onTouched = () => {}; @@ -160,13 +160,13 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor /** Function when changed */ _onChange: (value: any) => void = () => {}; - _selectionModel: SelectionModel; + _selectionModel: SelectionModel; /** Comparison function to specify which option is displayed. Defaults to object equality. */ private _compareWith = (o1: any, o2: any) => o1 === o2; /** The array of selected chips inside chip list. */ - get selected(): MdChip[] | MdChip { + get selected(): MatChip[] | MatChip { return this.multiple ? this._selectionModel.selected : this._selectionModel.selected[0]; } @@ -228,13 +228,13 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor return this._chipInput ? this._chipInput.placeholder : this._placeholder; } - /** Whether any chips or the mdChipInput inside of this chip-list has focus. */ + /** Whether any chips or the matChipInput inside of this chip-list has focus. */ get focused() { return this.chips.some(chip => chip._hasFocus) || (this._chipInput && this._chipInput.focused); } - /** Whether this chip-list contains no chips and no mdChipInput. */ + /** Whether this chip-list contains no chips and no matChipInput. */ get empty(): boolean { return (!this._chipInput || this._chipInput.empty) && this.chips.length === 0; } @@ -275,27 +275,27 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor } /** Combined stream of all of the child chips' selection change events. */ - get chipSelectionChanges(): Observable { + get chipSelectionChanges(): Observable { return merge(...this.chips.map(chip => chip.selectionChange)); } /** Combined stream of all of the child chips' focus change events. */ - get chipFocusChanges(): Observable { + get chipFocusChanges(): Observable { return merge(...this.chips.map(chip => chip._onFocus)); } /** Combined stream of all of the child chips' blur change events. */ - get chipBlurChanges(): Observable { + get chipBlurChanges(): Observable { return merge(...this.chips.map(chip => chip._onBlur)); } /** Combined stream of all of the child chips' remove change events. */ - get chipRemoveChanges(): Observable { + get chipRemoveChanges(): Observable { return merge(...this.chips.map(chip => chip.destroy)); } /** Event emitted when the selected chip list value has been changed by the user. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); /** * Event that emits whenever the raw value of the chip-list changes. This is here primarily @@ -305,7 +305,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor @Output() valueChange = new EventEmitter(); /** The chip components contained within this chip list. */ - @ContentChildren(MdChip) chips: QueryList; + @ContentChildren(MatChip) chips: QueryList; constructor(protected _renderer: Renderer2, protected _elementRef: ElementRef, @@ -321,7 +321,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor ngAfterContentInit(): void { - this._keyManager = new FocusKeyManager(this.chips).withWrap(); + this._keyManager = new FocusKeyManager(this.chips).withWrap(); // Prevents the chip list from capturing focus and redirecting // it back to the first chip when the user tabs out. @@ -346,7 +346,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor } ngOnInit() { - this._selectionModel = new SelectionModel(this.multiple, undefined, false); + this._selectionModel = new SelectionModel(this.multiple, undefined, false); this.stateChanges.next(); } @@ -361,11 +361,11 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor /** Associates an HTML input element with this chip list. */ - registerInput(inputElement: MdChipInput) { + registerInput(inputElement: MatChipInput) { this._chipInput = inputElement; } - // Implemented as part of MdFormFieldControl. + // Implemented as part of MatFormFieldControl. setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); } // Implemented as part of ControlValueAccessor @@ -471,7 +471,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor * Otherwise focus the next chip in the list. * Save `_lastDestroyedIndex` so we can set the correct focus. */ - protected _updateKeyManager(chip: MdChip) { + protected _updateKeyManager(chip: MatChip) { let chipIndex: number = this.chips.toArray().indexOf(chip); if (this._isValidIndex(chipIndex)) { if (chip._hasFocus) { @@ -554,7 +554,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor * Finds and selects the chip based on its value. * @returns Chip that has the corresponding value. */ - private _selectValue(value: any, isUserInput: boolean = true): MdChip | undefined { + private _selectValue(value: any, isUserInput: boolean = true): MatChip | undefined { const correspondingChip = this.chips.find(chip => { return chip.value != null && this._compareWith(chip.value, value); @@ -581,7 +581,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor * Deselects every chip in the list. * @param skip Chip that should not be deselected. */ - private _clearSelection(skip?: MdChip): void { + private _clearSelection(skip?: MatChip): void { this._selectionModel.clear(); this.chips.forEach(chip => { if (chip !== skip) { @@ -618,7 +618,7 @@ export class MdChipList implements MdFormFieldControl, ControlValueAccessor valueToEmit = this.selected ? this.selected.value : fallbackValue; } this._value = valueToEmit; - this.change.emit(new MdChipListChange(this, valueToEmit)); + this.change.emit(new MatChipListChange(this, valueToEmit)); this.valueChange.emit(valueToEmit); this._onChange(valueToEmit); this._changeDetectorRef.markForCheck(); diff --git a/src/lib/chips/chip-remove.spec.ts b/src/lib/chips/chip-remove.spec.ts index 39450a639438..b8fabef214dc 100644 --- a/src/lib/chips/chip-remove.spec.ts +++ b/src/lib/chips/chip-remove.spec.ts @@ -1,7 +1,7 @@ import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {MdChip, MdChipsModule} from './index'; +import {MatChip, MatChipsModule} from './index'; describe('Chip Remove', () => { let fixture: ComponentFixture; @@ -11,7 +11,7 @@ describe('Chip Remove', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdChipsModule], + imports: [MatChipsModule], declarations: [ TestChip ] @@ -25,7 +25,7 @@ describe('Chip Remove', () => { testChip = fixture.debugElement.componentInstance; fixture.detectChanges(); - chipDebugElement = fixture.debugElement.query(By.directive(MdChip)); + chipDebugElement = fixture.debugElement.query(By.directive(MatChip)); chipNativeElement = chipDebugElement.nativeElement; })); @@ -53,7 +53,7 @@ describe('Chip Remove', () => { @Component({ template: ` - + ` }) class TestChip { diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts index 51ade187196a..e5bdd5023bab 100644 --- a/src/lib/chips/chip.spec.ts +++ b/src/lib/chips/chip.spec.ts @@ -4,7 +4,7 @@ import {createKeyboardEvent} from '@angular/cdk/testing'; import {Component, DebugElement} from '@angular/core'; import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {MdChip, MdChipEvent, MdChipList, MdChipSelectionChange, MdChipsModule} from './index'; +import {MatChip, MatChipEvent, MatChipList, MatChipSelectionChange, MatChipsModule} from './index'; describe('Chips', () => { @@ -12,13 +12,13 @@ describe('Chips', () => { let chipDebugElement: DebugElement; let chipListNativeElement: HTMLElement; let chipNativeElement: HTMLElement; - let chipInstance: MdChip; + let chipInstance: MatChip; let dir = 'ltr'; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdChipsModule], + imports: [MatChipsModule], declarations: [ BasicChip, SingleChip ], @@ -32,15 +32,15 @@ describe('Chips', () => { TestBed.compileComponents(); })); - describe('MdBasicChip', () => { + describe('MatBasicChip', () => { beforeEach(() => { fixture = TestBed.createComponent(BasicChip); fixture.detectChanges(); - chipDebugElement = fixture.debugElement.query(By.directive(MdChip)); + chipDebugElement = fixture.debugElement.query(By.directive(MatChip)); chipNativeElement = chipDebugElement.nativeElement; - chipInstance = chipDebugElement.injector.get(MdChip); + chipInstance = chipDebugElement.injector.get(MatChip); document.body.appendChild(chipNativeElement); }); @@ -55,17 +55,17 @@ describe('Chips', () => { }); }); - describe('MdChip', () => { + describe('MatChip', () => { let testComponent: SingleChip; beforeEach(() => { fixture = TestBed.createComponent(SingleChip); fixture.detectChanges(); - chipDebugElement = fixture.debugElement.query(By.directive(MdChip)); - chipListNativeElement = fixture.debugElement.query(By.directive(MdChipList)).nativeElement; + chipDebugElement = fixture.debugElement.query(By.directive(MatChip)); + chipListNativeElement = fixture.debugElement.query(By.directive(MatChipList)).nativeElement; chipNativeElement = chipDebugElement.nativeElement; - chipInstance = chipDebugElement.injector.get(MdChip); + chipInstance = chipDebugElement.injector.get(MatChip); testComponent = fixture.debugElement.componentInstance; document.body.appendChild(chipNativeElement); @@ -77,7 +77,7 @@ describe('Chips', () => { describe('basic behaviors', () => { - it('adds the `md-chip` class', () => { + it('adds the `mat-chip` class', () => { expect(chipNativeElement.classList).toContain('mat-chip'); }); @@ -122,7 +122,7 @@ describe('Chips', () => { expect(chipNativeElement.classList).toContain('mat-chip-selected'); expect(testComponent.chipSelectionChange) - .toHaveBeenCalledWith({source: chipInstance, isUserInput: false, selected: true}); + .toHaveBeenCalledWith({source: chipInstance, isUserInput: false, selected: true}); }); it('allows removal', () => { @@ -145,13 +145,13 @@ describe('Chips', () => { it('should selects/deselects the currently focused chip on SPACE', () => { const SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE) as KeyboardEvent; - const CHIP_SELECTED_EVENT: MdChipSelectionChange = { + const CHIP_SELECTED_EVENT: MatChipSelectionChange = { source: chipInstance, isUserInput: true, selected: true }; - const CHIP_DESELECTED_EVENT: MdChipSelectionChange = { + const CHIP_DESELECTED_EVENT: MatChipSelectionChange = { source: chipInstance, isUserInput: true, selected: false @@ -287,17 +287,17 @@ describe('Chips', () => { @Component({ template: ` - +
    - {{name}} - +
    -     ` + ` }) class SingleChip { disabled: boolean = false; @@ -308,14 +308,14 @@ class SingleChip { removable: boolean = true; shouldShow: boolean = true; - chipFocus: (event?: MdChipEvent) => void = () => {}; - chipDestroy: (event?: MdChipEvent) => void = () => {}; - chipSelectionChange: (event?: MdChipSelectionChange) => void = () => {}; - chipRemove: (event?: MdChipEvent) => void = () => {}; + chipFocus: (event?: MatChipEvent) => void = () => {}; + chipDestroy: (event?: MatChipEvent) => void = () => {}; + chipSelectionChange: (event?: MatChipSelectionChange) => void = () => {}; + chipRemove: (event?: MatChipEvent) => void = () => {}; } @Component({ - template: `{{name}}` + template: `{{name}}` }) class BasicChip { } diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts index 5b2690816e30..8d8c3c6c7ace 100644 --- a/src/lib/chips/chip.ts +++ b/src/lib/chips/chip.ts @@ -22,24 +22,24 @@ import {CanColor, CanDisable, mixinColor, mixinDisabled} from '@angular/material import {Subject} from 'rxjs/Subject'; -export interface MdChipEvent { - chip: MdChip; +export interface MatChipEvent { + chip: MatChip; } -/** Event object emitted by MdChip when selected or deselected. */ -export class MdChipSelectionChange { - constructor(public source: MdChip, public selected: boolean, public isUserInput = false) { } +/** Event object emitted by MatChip when selected or deselected. */ +export class MatChipSelectionChange { + constructor(public source: MatChip, public selected: boolean, public isUserInput = false) { } } -// Boilerplate for applying mixins to MdChip. +// Boilerplate for applying mixins to MatChip. /** @docs-private */ -export class MdChipBase { +export class MatChipBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) { } } -export const _MdChipMixinBase = mixinColor(mixinDisabled(MdChipBase), 'primary'); +export const _MatChipMixinBase = mixinColor(mixinDisabled(MatChipBase), 'primary'); /** @@ -47,20 +47,19 @@ export const _MdChipMixinBase = mixinColor(mixinDisabled(MdChipBase), 'primary') * @docs-private */ @Directive({ - selector: `md-basic-chip, [md-basic-chip], mat-basic-chip, [mat-basic-chip]`, + selector: `mat-basic-chip, [mat-basic-chip]`, host: {'class': 'mat-basic-chip'}, }) -export class MdBasicChip { +export class MatBasicChip { } /** - * Material design styled Chip component. Used inside the MdChipList component. + * Material design styled Chip component. Used inside the MatChipList component. */ @Directive({ - selector: `md-basic-chip, [md-basic-chip], md-chip, [md-chip], - mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`, + selector: `mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`, inputs: ['color', 'disabled'], - exportAs: 'mdChip, matChip', + exportAs: 'matChip', host: { 'class': 'mat-chip', 'tabindex': '-1', @@ -76,7 +75,7 @@ export class MdBasicChip { }, }) -export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestroy, CanColor, +export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDestroy, CanColor, CanDisable { protected _value: any; @@ -103,7 +102,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr selected: value }); } - /** The value of the chip. Defaults to the content inside tags. */ + /** The value of the chip. Defaults to the content inside tags. */ @Input() get value(): any { return this._value != undefined @@ -140,16 +139,16 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr } /** Emits when the chip is focused. */ - _onFocus = new Subject(); + _onFocus = new Subject(); /** Emits when the chip is blured. */ - _onBlur = new Subject(); + _onBlur = new Subject(); /** Emitted when the chip is selected or deselected. */ - @Output() selectionChange = new EventEmitter(); + @Output() selectionChange = new EventEmitter(); /** Emitted when the chip is destroyed. */ - @Output() destroyed = new EventEmitter(); + @Output() destroyed = new EventEmitter(); /** * Emitted when the chip is destroyed. @@ -158,7 +157,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr @Output() destroy = this.destroyed; /** Emitted when a chip is to be removed. */ - @Output() removed = new EventEmitter(); + @Output() removed = new EventEmitter(); /** * Emitted when a chip is to be removed. @@ -229,7 +228,7 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr } /** - * Allows for programmatic removal of the chip. Called by the MdChipList when the DELETE or + * Allows for programmatic removal of the chip. Called by the MatChipList when the DELETE or * BACKSPACE keys are pressed. * * Informs any listeners of the removal request. Does not remove the chip from the DOM. @@ -292,22 +291,22 @@ export class MdChip extends _MdChipMixinBase implements FocusableOption, OnDestr * * Example: * - * - * cancel - * + * + * cancel + * * - * You *may* use a custom icon, but you may need to override the `md-chip-remove` positioning styles - * to properly center the icon within the chip. + * You *may* use a custom icon, but you may need to override the `mat-chip-remove` positioning + * styles to properly center the icon within the chip. */ @Directive({ - selector: '[mdChipRemove], [matChipRemove]', + selector: '[matChipRemove]', host: { 'class': 'mat-chip-remove', '(click)': '_handleClick($event)', }, }) -export class MdChipRemove { - constructor(protected _parentChip: MdChip) { +export class MatChipRemove { + constructor(protected _parentChip: MatChip) { } /** Calls the parent chip's public `remove()` method if applicable. */ diff --git a/src/lib/chips/chips-module.ts b/src/lib/chips/chips-module.ts index b87aac229dc8..e74b17793131 100644 --- a/src/lib/chips/chips-module.ts +++ b/src/lib/chips/chips-module.ts @@ -7,14 +7,14 @@ */ import {NgModule} from '@angular/core'; -import {MdChipList} from './chip-list'; -import {MdBasicChip, MdChip, MdChipRemove} from './chip'; -import {MdChipInput} from './chip-input'; +import {MatChipList} from './chip-list'; +import {MatBasicChip, MatChip, MatChipRemove} from './chip'; +import {MatChipInput} from './chip-input'; @NgModule({ imports: [], - exports: [MdChipList, MdChip, MdChipInput, MdChipRemove, MdChipRemove, MdBasicChip], - declarations: [MdChipList, MdChip, MdChipInput, MdChipRemove, MdChipRemove, MdBasicChip] + exports: [MatChipList, MatChip, MatChipInput, MatChipRemove, MatChipRemove, MatBasicChip], + declarations: [MatChipList, MatChip, MatChipInput, MatChipRemove, MatChipRemove, MatBasicChip] }) -export class MdChipsModule {} +export class MatChipsModule {} diff --git a/src/lib/chips/chips.md b/src/lib/chips/chips.md index db4dfdeef6be..180e4a326bcd 100644 --- a/src/lib/chips/chips.md +++ b/src/lib/chips/chips.md @@ -1,26 +1,26 @@ -`` displays a list of values as individual, keyboard accessible, chips. +`` displays a list of values as individual, keyboard accessible, chips. _Note: chips are still early in their development and more features are being actively worked on._ ```html - - Papadum - Naan - Dal - + + Papadum + Naan + Dal + ``` ### Unstyled chips -By default, `` has Material Design styles applied. For a chip with no styles applied, -use ``. You can then customize the chip appearance by adding your own CSS. +By default, `` has Material Design styles applied. For a chip with no styles applied, +use ``. You can then customize the chip appearance by adding your own CSS. -_Hint: `` receives the `mat-basic-chip` CSS class in addition to the `mat-chip` class._ +_Hint: `` receives the `mat-basic-chip` CSS class in addition to the `mat-chip` class._ ### Selection Chips can be selected via the `selected` property. Selection can be disabled by setting -`selectable` to `false` on the ``. +`selectable` to `false` on the ``. Whenever the selection state changes, a `ChipSelectionChange` event will be emitted via `(selectionChange)`. @@ -30,9 +30,9 @@ Individual chips may be disabled by applying the `disabled` attribute to the chi chips are neither selectable nor focusable. Currently, disabled chips receive no special styling. ### Chip input -The `MdChipInput` directive can be used together with a chip-list to streamline the interaction +The `MatChipInput` directive can be used together with a chip-list to streamline the interaction between the two components. This directive adds chip-specific behaviors to the input element -within `` for adding and removing chips. The `` with `MdChipInput` can +within `` for adding and removing chips. The `` with `MatChipInput` can be placed inside or outside the chip-list element. An exmaple of chip input placed inside the chip-list element. @@ -41,13 +41,13 @@ An exmaple of chip input placed inside the chip-list element. An example of chip input placed outside the chip-list element. ```html - - - Chip 1 - Chip 2 - - - + + + Chip 1 + Chip 2 + + + ``` ### Keyboard interaction @@ -59,15 +59,15 @@ If you want the chips in the list to be stacked vertically, instead of horizonta the `mat-chip-list-stacked` class, as well as the `aria-orientation="vertical"` attribute: ```html - - Papadum - Naan - Dal - + + Papadum + Naan + Dal + ``` ### Theming -The selected color of an `` can be changed by using the `color` property. By default, chips +The selected color of an `` can be changed by using the `color` property. By default, chips use a neutral background color based on the current theme (light or dark). This can be changed to `'primary'`, `'accent'`, or `'warn'`. diff --git a/src/lib/chips/mat-exports.ts b/src/lib/chips/mat-exports.ts deleted file mode 100644 index 73ccd86cd58f..000000000000 --- a/src/lib/chips/mat-exports.ts +++ /dev/null @@ -1,24 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdBasicChip, MdChip, MdChipBase, MdChipEvent, MdChipRemove} from './chip'; -import {MdChipInput, MdChipInputEvent} from './chip-input'; -import {MdChipList, MdChipListChange} from './chip-list'; -import {MdChipsModule} from './chips-module'; - - -export {MdBasicChip as MatBasicChip}; -export {MdChip as MatChip}; -export {MdChipBase as MatChipBase}; -export {MdChipEvent as MatChipEvent}; -export {MdChipInput as MatChipInput}; -export {MdChipInputEvent as MatChipInputEvent}; -export {MdChipListChange as MatChipListChange}; -export {MdChipList as MatChipList}; -export {MdChipRemove as MatChipRemove}; -export {MdChipsModule as MatChipsModule}; diff --git a/src/lib/chips/public_api.ts b/src/lib/chips/public_api.ts index d7a19a1e5240..dfff919ca34f 100644 --- a/src/lib/chips/public_api.ts +++ b/src/lib/chips/public_api.ts @@ -10,4 +10,4 @@ export * from './chips-module'; export * from './chip-list'; export * from './chip'; export * from './chip-input'; -export * from './mat-exports'; + diff --git a/src/lib/core/_core.scss b/src/lib/core/_core.scss index 7ae874518a80..7a4372719261 100644 --- a/src/lib/core/_core.scss +++ b/src/lib/core/_core.scss @@ -40,7 +40,7 @@ @include mat-pseudo-checkbox-theme($theme); // Wrapper element that provides the theme background when the - // user's content isn't inside of a `md-sidenav-container`. + // user's content isn't inside of a `mat-sidenav-container`. .mat-app-background { $background: map-get($theme, background); background-color: mat-color($background, background); diff --git a/src/lib/core/common-behaviors/common-module.ts b/src/lib/core/common-behaviors/common-module.ts index dcc15f4b33c6..5262c8e6b6a9 100644 --- a/src/lib/core/common-behaviors/common-module.ts +++ b/src/lib/core/common-behaviors/common-module.ts @@ -13,14 +13,14 @@ import {CompatibilityModule} from '../compatibility/compatibility'; /** Injection token that configures whether the Material sanity checks are enabled. */ -export const MATERIAL_SANITY_CHECKS = new InjectionToken('md-sanity-checks'); +export const MATERIAL_SANITY_CHECKS = new InjectionToken('mat-sanity-checks'); /** * Module that captures anything that should be loaded and/or run for *all* Angular Material * components. This includes Bidi, compatibility mode, etc. * - * This module should be imported to each top-level component module (e.g., MdTabsModule). + * This module should be imported to each top-level component module (e.g., MatTabsModule). */ @NgModule({ imports: [CompatibilityModule, BidiModule], @@ -29,7 +29,7 @@ export const MATERIAL_SANITY_CHECKS = new InjectionToken('md-sanity-che provide: MATERIAL_SANITY_CHECKS, useValue: true, }], }) -export class MdCommonModule { +export class MatCommonModule { /** Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype). */ private _hasDoneGlobalChecks = false; diff --git a/src/lib/core/common-behaviors/index.ts b/src/lib/core/common-behaviors/index.ts index 80e6e0c694d1..8ec520969ad7 100644 --- a/src/lib/core/common-behaviors/index.ts +++ b/src/lib/core/common-behaviors/index.ts @@ -6,7 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ -export {MdCommonModule, MATERIAL_SANITY_CHECKS} from './common-module'; +export {MatCommonModule, MATERIAL_SANITY_CHECKS} from './common-module'; export {CanDisable, mixinDisabled} from './disabled'; export {CanColor, mixinColor, ThemePalette} from './color'; export {CanDisableRipple, mixinDisableRipple} from './disable-ripple'; diff --git a/src/lib/core/compatibility/compatibility.spec.ts b/src/lib/core/compatibility/compatibility.spec.ts index b22fe0a9055a..e69de29bb2d1 100644 --- a/src/lib/core/compatibility/compatibility.spec.ts +++ b/src/lib/core/compatibility/compatibility.spec.ts @@ -1,104 +0,0 @@ -import {Component, NgModule} from '@angular/core'; -import {async, TestBed} from '@angular/core/testing'; -import {MdCheckboxModule} from '../../checkbox/index'; -import { - NoConflictStyleCompatibilityMode, - MAT_ELEMENTS_SELECTOR, - MD_ELEMENTS_SELECTOR, - getMdCompatibilityInvalidPrefixError, -} from './compatibility'; -import {wrappedErrorMessage} from '@angular/cdk/testing'; - - -describe('Style compatibility', () => { - - describe('selectors', () => { - it('should have the same selectors in the same order for compatibility mode', () => { - expect(MAT_ELEMENTS_SELECTOR.replace(/(\s|\[)mat/g, '$1md').trim()) - .toBe(MD_ELEMENTS_SELECTOR.trim()); - expect(MD_ELEMENTS_SELECTOR.replace(/(\s|\[)md/g, '$1mat').trim()) - .toBe(MAT_ELEMENTS_SELECTOR.trim()); - }); - }); - - describe('in default mode', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - // Specifically do *not* directly import the DefaultStyleCompatibilityModeModule - // to ensure that it is the default behavior. - imports: [MdCheckboxModule], - declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox], - }); - - TestBed.compileComponents(); - })); - - it('should throw an error when trying to use the "mat-" prefix', () => { - const expectedError = getMdCompatibilityInvalidPrefixError('mat', 'mat-checkbox'); - - expect(() => { - TestBed.createComponent(ComponentWithMatCheckbox); - }).toThrowError(wrappedErrorMessage(expectedError)); - }); - }); - - describe('in no-conflict mode', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [MdCheckboxModule, NoConflictStyleCompatibilityMode], - declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox], - }); - - TestBed.compileComponents(); - })); - - it('should not throw an error when trying to use the "mat-" prefix', () => { - TestBed.createComponent(ComponentWithMatCheckbox); - }); - - it('should throw an error when trying to use the "md-" prefix', () => { - const expectedError = getMdCompatibilityInvalidPrefixError('md', 'md-checkbox'); - - expect(() => { - TestBed.createComponent(ComponentWithMdCheckbox); - }).toThrowError(wrappedErrorMessage(expectedError)); - }); - }); - - describe('with no-conflict mode at root and component module imported in app sub-module', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [TestAppSubModule, NoConflictStyleCompatibilityMode], - }); - - TestBed.compileComponents(); - })); - - it('should throw an error when using the "md-" prefix', () => { - const expectedError = getMdCompatibilityInvalidPrefixError('md', 'md-checkbox'); - - expect(() => { - TestBed.createComponent(ComponentWithMdCheckbox); - }).toThrowError(wrappedErrorMessage(expectedError)); - }); - - it('should not throw an error when using the "mat-" prefix', () => { - TestBed.createComponent(ComponentWithMatCheckbox); - }); - }); -}); - - -@Component({ template: `Hungry` }) -export class ComponentWithMdCheckbox { } - -@Component({ template: `Hungry` }) -export class ComponentWithMatCheckbox { } - - -@NgModule({ - imports: [MdCheckboxModule], - exports: [ComponentWithMdCheckbox, ComponentWithMatCheckbox], - declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox], -}) -export class TestAppSubModule {} diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index 769e23fcb549..eaaaacf16241 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -6,20 +6,10 @@ * found in the LICENSE file at https://angular.io/license */ -import {NgModule, Directive, Inject, Optional, ElementRef, InjectionToken} from '@angular/core'; +import {Directive, InjectionToken, NgModule} from '@angular/core'; export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken('md-compatibility-mode'); -/** - * Returns an exception to be thrown if the consumer has used - * an invalid Material prefix on a component. - * @docs-private - */ -export function getMdCompatibilityInvalidPrefixError(prefix: string, nodeName: string) { - return Error(`The "${prefix}-" prefix cannot be used in ng-material v1 compatibility mode. ` + - `It was used on an "${nodeName.toLowerCase()}" element.`); -} - /** Selector that matches all elements that may have style collisions with AngularJS Material. */ export const MAT_ELEMENTS_SELECTOR = ` [mat-button], @@ -188,29 +178,11 @@ export const MD_ELEMENTS_SELECTOR = ` /** Directive that enforces that the `mat-` prefix cannot be used. */ @Directive({selector: MAT_ELEMENTS_SELECTOR}) -export class MatPrefixRejector { - constructor( - @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) isCompatibilityMode: boolean, - elementRef: ElementRef) { - - if (!isCompatibilityMode) { - throw getMdCompatibilityInvalidPrefixError('mat', elementRef.nativeElement.nodeName); - } - } -} +export class MatPrefixRejector {} /** Directive that enforces that the `md-` prefix cannot be used. */ @Directive({selector: MD_ELEMENTS_SELECTOR}) -export class MdPrefixRejector { - constructor( - @Optional() @Inject(MATERIAL_COMPATIBILITY_MODE) isCompatibilityMode: boolean, - elementRef: ElementRef) { - - if (isCompatibilityMode) { - throw getMdCompatibilityInvalidPrefixError('md', elementRef.nativeElement.nodeName); - } - } -} +export class MdPrefixRejector {} /** @@ -229,9 +201,5 @@ export class CompatibilityModule {} * Module that enforces "no-conflict" compatibility mode settings. When this module is loaded, * it will throw an error if there are any uses of the `md-` prefix. */ -@NgModule({ - providers: [{ - provide: MATERIAL_COMPATIBILITY_MODE, useValue: true, - }], -}) +@NgModule() export class NoConflictStyleCompatibilityMode {} diff --git a/src/lib/core/datetime/date-formats.ts b/src/lib/core/datetime/date-formats.ts index 9ea86e42bbae..2a0a15361916 100644 --- a/src/lib/core/datetime/date-formats.ts +++ b/src/lib/core/datetime/date-formats.ts @@ -9,7 +9,7 @@ import {InjectionToken} from '@angular/core'; -export type MdDateFormats = { +export type MatDateFormats = { parse: { dateInput: any }, @@ -22,4 +22,4 @@ export type MdDateFormats = { }; -export const MD_DATE_FORMATS = new InjectionToken('md-date-formats'); +export const MAT_DATE_FORMATS = new InjectionToken('mat-date-formats'); diff --git a/src/lib/core/datetime/index.ts b/src/lib/core/datetime/index.ts index e16c8b39b197..a7035f4b62b6 100644 --- a/src/lib/core/datetime/index.ts +++ b/src/lib/core/datetime/index.ts @@ -9,8 +9,8 @@ import {NgModule} from '@angular/core'; import {DateAdapter, MAT_DATE_LOCALE_PROVIDER} from './date-adapter'; import {NativeDateAdapter} from './native-date-adapter'; -import {MD_DATE_FORMATS} from './date-formats'; -import {MD_NATIVE_DATE_FORMATS} from './native-date-formats'; +import {MAT_DATE_FORMATS} from './date-formats'; +import {MAT_NATIVE_DATE_FORMATS} from './native-date-formats'; export * from './date-adapter'; export * from './date-formats'; @@ -29,6 +29,6 @@ export class NativeDateModule {} @NgModule({ imports: [NativeDateModule], - providers: [{provide: MD_DATE_FORMATS, useValue: MD_NATIVE_DATE_FORMATS}], + providers: [{provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS}], }) -export class MdNativeDateModule {} +export class MatNativeDateModule {} diff --git a/src/lib/core/datetime/native-date-formats.ts b/src/lib/core/datetime/native-date-formats.ts index 631cfcb010b5..2c8bd3e494ba 100644 --- a/src/lib/core/datetime/native-date-formats.ts +++ b/src/lib/core/datetime/native-date-formats.ts @@ -6,10 +6,10 @@ * found in the LICENSE file at https://angular.io/license */ -import {MdDateFormats} from './date-formats'; +import {MatDateFormats} from './date-formats'; -export const MD_NATIVE_DATE_FORMATS: MdDateFormats = { +export const MAT_NATIVE_DATE_FORMATS: MatDateFormats = { parse: { dateInput: null, }, diff --git a/src/lib/core/error/error-options.ts b/src/lib/core/error/error-options.ts index e4d1bb4d16f2..fc0945955f0d 100644 --- a/src/lib/core/error/error-options.ts +++ b/src/lib/core/error/error-options.ts @@ -10,7 +10,8 @@ import {InjectionToken} from '@angular/core'; import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; /** Injection token that can be used to specify the global error options. */ -export const MD_ERROR_GLOBAL_OPTIONS = new InjectionToken('md-error-global-options'); +export const MAT_ERROR_GLOBAL_OPTIONS = + new InjectionToken('mat-error-global-options'); export type ErrorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => boolean; diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts index 747adc0ccdeb..fa76897daa17 100644 --- a/src/lib/core/line/line.ts +++ b/src/lib/core/line/line.ts @@ -13,26 +13,26 @@ import { ElementRef, QueryList, } from '@angular/core'; -import {MdCommonModule} from '../common-behaviors/common-module'; +import {MatCommonModule} from '../common-behaviors/common-module'; /** * Shared directive to count lines inside a text area, such as a list item. - * Line elements can be extracted with a @ContentChildren(MdLine) query, then + * Line elements can be extracted with a @ContentChildren(MatLine) query, then * counted by checking the query list's length. */ @Directive({ - selector: '[md-line], [mat-line], [mdLine], [matLine]', + selector: '[mat-line], [matLine]', host: {'class': 'mat-line'} }) -export class MdLine {} +export class MatLine {} /** * 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: Renderer2, +export class MatLineSetter { + constructor(private _lines: QueryList, private _renderer: Renderer2, private _element: ElementRef) { this._setLineClass(this._lines.length); @@ -67,8 +67,8 @@ export class MdLineSetter { } @NgModule({ - imports: [MdCommonModule], - exports: [MdLine, MdCommonModule], - declarations: [MdLine], + imports: [MatCommonModule], + exports: [MatLine, MatCommonModule], + declarations: [MatLine], }) -export class MdLineModule { } +export class MatLineModule { } diff --git a/src/lib/core/mat-exports.ts b/src/lib/core/mat-exports.ts deleted file mode 100644 index b38a9c583c59..000000000000 --- a/src/lib/core/mat-exports.ts +++ /dev/null @@ -1,49 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdCommonModule} from './common-behaviors/common-module'; -import { - MD_DATE_FORMATS, - MD_NATIVE_DATE_FORMATS, - MdDateFormats, - MdNativeDateModule, -} from './datetime/index'; -import {MD_ERROR_GLOBAL_OPTIONS} from './error/error-options'; -import {MdLine, MdLineModule, MdLineSetter} from './line/line'; -import { - MdOptgroup, - MdOptgroupBase, - MdOption, - MdOptionModule, - MdOptionSelectionChange, -} from './option/index'; -import {MD_PLACEHOLDER_GLOBAL_OPTIONS} from './placeholder/placeholder-options'; -import {MD_RIPPLE_GLOBAL_OPTIONS, MdRipple, MdRippleModule} from './ripple/index'; -import {MdPseudoCheckbox, MdPseudoCheckboxModule, MdPseudoCheckboxState} from './selection/index'; - -export {MD_DATE_FORMATS as MAT_DATE_FORMATS}; -export {MD_RIPPLE_GLOBAL_OPTIONS as MAT_RIPPLE_GLOBAL_OPTIONS}; -export {MD_NATIVE_DATE_FORMATS as MAT_NATIVE_DATE_FORMATS}; -export {MD_PLACEHOLDER_GLOBAL_OPTIONS as MAT_PLACEHOLDER_GLOBAL_OPTIONS}; -export {MD_ERROR_GLOBAL_OPTIONS as MAT_ERROR_GLOBAL_OPTIONS}; -export {MdCommonModule as MatCommonModule}; -export {MdDateFormats as MatDateFormats}; -export {MdLine as MatLine}; -export {MdLineModule as MatLineModule}; -export {MdLineSetter as MatLineSetter}; -export {MdOptgroup as MatOptgroup}; -export {MdOptgroupBase as MatOptgroupBase}; -export {MdOption as MatOption}; -export {MdOptionModule as MatOptionModule}; -export {MdOptionSelectionChange as MatOptionSelectionChange}; -export {MdNativeDateModule as MatNativeDateModule}; -export {MdPseudoCheckbox as MatPseudoCheckbox}; -export {MdPseudoCheckboxModule as MatPseudoCheckboxModule}; -export {MdPseudoCheckboxState as MatPseudoCheckboxState}; -export {MdRipple as MatRipple}; -export {MdRippleModule as MatRippleModule}; diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss index 109f1ecc3d99..6cbae7e330ed 100644 --- a/src/lib/core/option/_option.scss +++ b/src/lib/core/option/_option.scss @@ -30,9 +30,9 @@ } // Collapses unwanted whitespace created by newlines in code like the following: - // + // // {{value}} - // + // .mat-option-text { display: inline-block; } diff --git a/src/lib/core/option/index.ts b/src/lib/core/option/index.ts index 2150e97f094b..cb72fc3876ff 100644 --- a/src/lib/core/option/index.ts +++ b/src/lib/core/option/index.ts @@ -8,18 +8,18 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdRippleModule} from '../ripple/index'; -import {MdPseudoCheckboxModule} from '../selection/index'; -import {MdOption} from './option'; -import {MdOptgroup} from './optgroup'; +import {MatRippleModule} from '../ripple/index'; +import {MatPseudoCheckboxModule} from '../selection/index'; +import {MatOption} from './option'; +import {MatOptgroup} from './optgroup'; @NgModule({ - imports: [MdRippleModule, CommonModule, MdPseudoCheckboxModule], - exports: [MdOption, MdOptgroup], - declarations: [MdOption, MdOptgroup] + imports: [MatRippleModule, CommonModule, MatPseudoCheckboxModule], + exports: [MatOption, MatOptgroup], + declarations: [MatOption, MatOptgroup] }) -export class MdOptionModule {} +export class MatOptionModule {} export * from './option'; diff --git a/src/lib/core/option/optgroup.html b/src/lib/core/option/optgroup.html index 62e7c987b446..5e1054f77639 100644 --- a/src/lib/core/option/optgroup.html +++ b/src/lib/core/option/optgroup.html @@ -1,2 +1,2 @@ - + diff --git a/src/lib/core/option/optgroup.ts b/src/lib/core/option/optgroup.ts index f904895ac8d2..7315448e8421 100644 --- a/src/lib/core/option/optgroup.ts +++ b/src/lib/core/option/optgroup.ts @@ -9,20 +9,20 @@ import {Component, ViewEncapsulation, Input, ChangeDetectionStrategy} from '@angular/core'; import {mixinDisabled, CanDisable} from '../common-behaviors/disabled'; -// Boilerplate for applying mixins to MdOptgroup. +// Boilerplate for applying mixins to MatOptgroup. /** @docs-private */ -export class MdOptgroupBase { } -export const _MdOptgroupMixinBase = mixinDisabled(MdOptgroupBase); +export class MatOptgroupBase { } +export const _MatOptgroupMixinBase = mixinDisabled(MatOptgroupBase); // Counter for unique group ids. let _uniqueOptgroupIdCounter = 0; /** - * Component that is used to group instances of `md-option`. + * Component that is used to group instances of `mat-option`. */ @Component({ moduleId: module.id, - selector: 'md-optgroup, mat-optgroup', + selector: 'mat-optgroup', templateUrl: 'optgroup.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, @@ -36,7 +36,7 @@ let _uniqueOptgroupIdCounter = 0; '[attr.aria-labelledby]': '_labelId', } }) -export class MdOptgroup extends _MdOptgroupMixinBase implements CanDisable { +export class MatOptgroup extends _MatOptgroupMixinBase implements CanDisable { /** Label for the option group. */ @Input() label: string; diff --git a/src/lib/core/option/option.spec.ts b/src/lib/core/option/option.spec.ts index d0a9c79470d3..f03c47f8e30c 100644 --- a/src/lib/core/option/option.spec.ts +++ b/src/lib/core/option/option.spec.ts @@ -2,13 +2,13 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; import {dispatchFakeEvent} from '@angular/cdk/testing'; -import {MdOption, MdOptionModule} from './index'; +import {MatOption, MatOptionModule} from './index'; -describe('MdOption component', () => { +describe('MatOption component', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdOptionModule], + imports: [MatOptionModule], declarations: [OptionWithDisable] }).compileComponents(); })); @@ -17,13 +17,13 @@ describe('MdOption component', () => { let fixture: ComponentFixture; let optionDebugElement: DebugElement; let optionNativeElement: HTMLElement; - let optionInstance: MdOption; + let optionInstance: MatOption; beforeEach(() => { fixture = TestBed.createComponent(OptionWithDisable); fixture.detectChanges(); - optionDebugElement = fixture.debugElement.query(By.directive(MdOption)); + optionDebugElement = fixture.debugElement.query(By.directive(MatOption)); optionNativeElement = optionDebugElement.nativeElement; optionInstance = optionDebugElement.componentInstance; }); @@ -73,7 +73,7 @@ describe('MdOption component', () => { }); @Component({ - template: `` + template: `` }) export class OptionWithDisable { disabled: boolean; diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts index 8174c0b5f9fc..b7061303225c 100644 --- a/src/lib/core/option/option.ts +++ b/src/lib/core/option/option.ts @@ -20,8 +20,7 @@ import { QueryList, ViewEncapsulation, } from '@angular/core'; -import {MATERIAL_COMPATIBILITY_MODE} from '../compatibility/compatibility'; -import {MdOptgroup} from './optgroup'; +import {MatOptgroup} from './optgroup'; /** * Option IDs need to be unique across components, so this counter exists outside of @@ -29,17 +28,17 @@ import {MdOptgroup} from './optgroup'; */ let _uniqueIdCounter = 0; -/** Event object emitted by MdOption when selected or deselected. */ -export class MdOptionSelectionChange { - constructor(public source: MdOption, public isUserInput = false) { } +/** Event object emitted by MatOption when selected or deselected. */ +export class MatOptionSelectionChange { + constructor(public source: MatOption, public isUserInput = false) { } } /** - * Single option inside of a `` element. + * Single option inside of a `` element. */ @Component({ moduleId: module.id, - selector: 'md-option, mat-option', + selector: 'mat-option', host: { 'role': 'option', '[attr.tabindex]': '_getTabIndex()', @@ -58,9 +57,8 @@ export class MdOptionSelectionChange { encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdOption { +export class MatOption { private _selected: boolean = false; private _active: boolean = false; private _multiple: boolean = false; @@ -69,7 +67,7 @@ export class MdOption { /** Whether the option is disabled. */ private _disabled: boolean = false; - private _id: string = `md-option-${_uniqueIdCounter++}`; + private _id: string = `mat-option-${_uniqueIdCounter++}`; /** Whether the wrapping component is in multiple selection mode. */ get multiple() { return this._multiple; } @@ -102,12 +100,12 @@ export class MdOption { } /** Event emitted when the option is selected or deselected. */ - @Output() onSelectionChange = new EventEmitter(); + @Output() onSelectionChange = new EventEmitter(); constructor( private _element: ElementRef, private _changeDetectorRef: ChangeDetectorRef, - @Optional() public readonly group: MdOptgroup) {} + @Optional() public readonly group: MatOptgroup) {} /** * Whether or not the option is currently active and ready to be selected. @@ -214,7 +212,7 @@ export class MdOption { /** Emits the selection change event. */ private _emitSelectionChangeEvent(isUserInput = false): void { - this.onSelectionChange.emit(new MdOptionSelectionChange(this, isUserInput)); + this.onSelectionChange.emit(new MatOptionSelectionChange(this, isUserInput)); } /** @@ -223,8 +221,8 @@ export class MdOption { * @param options Flat list of all of the options. * @param optionGroups Flat list of all of the option groups. */ - static countGroupLabelsBeforeOption(optionIndex: number, options: QueryList, - optionGroups: QueryList): number { + static countGroupLabelsBeforeOption(optionIndex: number, options: QueryList, + optionGroups: QueryList): number { if (optionGroups.length) { let optionsArray = options.toArray(); diff --git a/src/lib/core/placeholder/placeholder-options.ts b/src/lib/core/placeholder/placeholder-options.ts index ee79b824fa86..ba024ad3cfd2 100644 --- a/src/lib/core/placeholder/placeholder-options.ts +++ b/src/lib/core/placeholder/placeholder-options.ts @@ -9,8 +9,8 @@ import { InjectionToken } from '@angular/core'; /** InjectionToken that can be used to specify the global placeholder options. */ -export const MD_PLACEHOLDER_GLOBAL_OPTIONS = - new InjectionToken('md-placeholder-global-options'); +export const MAT_PLACEHOLDER_GLOBAL_OPTIONS = + new InjectionToken('mat-placeholder-global-options'); /** Type for the available floatPlaceholder values. */ export type FloatPlaceholderType = 'always' | 'never' | 'auto'; diff --git a/src/lib/core/public_api.ts b/src/lib/core/public_api.ts index 4a540f7e1cf6..c059cace3f96 100644 --- a/src/lib/core/public_api.ts +++ b/src/lib/core/public_api.ts @@ -21,7 +21,7 @@ export * from './ripple/index'; export * from './selection/index'; export * from './style/index'; export * from './util/object-extend'; -export * from './mat-exports'; + // TODO: don't have this export * from './testing/month-constants'; diff --git a/src/lib/core/ripple/README.md b/src/lib/core/ripple/README.md index 3ec6f266617f..2cbcbe44a147 100644 --- a/src/lib/core/ripple/README.md +++ b/src/lib/core/ripple/README.md @@ -1,10 +1,10 @@ -# md-ripple +# mat-ripple -`md-ripple` defines an area in which a ripple animates, usually in response to user action. It is used as an attribute directive, for example `
    ...
    `. +`mat-ripple` defines an area in which a ripple animates, usually in response to user action. It is used as an attribute directive, for example `
    ...
    `. -By default, a ripple is activated when the host element of the `md-ripple` directive receives mouse or touch events. On a mousedown or touch start, the ripple background fades in. When the click event completes, a circular foreground ripple fades in and expands from the event location to cover the host element bounds. +By default, a ripple is activated when the host element of the `mat-ripple` directive receives mouse or touch events. On a mousedown or touch start, the ripple background fades in. When the click event completes, a circular foreground ripple fades in and expands from the event location to cover the host element bounds. -Ripples can also be triggered programmatically by getting a reference to the MdRipple directive and calling its `start` and `end` methods. +Ripples can also be triggered programmatically by getting a reference to the MatRipple directive and calling its `start` and `end` methods. ### Global options @@ -12,7 +12,7 @@ Developers are able to specify options for all ripples inside of their applicati The speed of the ripples can be adjusted and the ripples can be disabled globally as well. -Global ripple options can be specified by setting the `MD_RIPPLE_GLOBAL_OPTIONS` provider. +Global ripple options can be specified by setting the `MAT_RIPPLE_GLOBAL_OPTIONS` provider. ```ts const globalRippleConfig: RippleGlobalOptions = { @@ -22,7 +22,7 @@ const globalRippleConfig: RippleGlobalOptions = { @NgModule({ providers: [ - {provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig} + {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig} ] }) ``` @@ -40,9 +40,9 @@ Properties: | Name | Type | Description | | --- | --- | --- | -| `mdRippleTrigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `md-ripple`. -| `mdRippleColor` | string | Custom color for foreground ripples -| `mdRippleCentered` | boolean | If true, the ripple animation originates from the center of the `md-ripple` bounds rather than from the location of the click event. -| `mdRippleRadius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle. -| `mdRippleUnbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds. -| `mdRippleDisabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples. +| `matRippleTrigger` | Element | The DOM element that triggers the ripple when clicked. Defaults to the parent of the `mat-ripple`. +| `matRippleColor` | string | Custom color for foreground ripples +| `matRippleCentered` | boolean | If true, the ripple animation originates from the center of the `mat-ripple` bounds rather than from the location of the click event. +| `matRippleRadius` | number | Optional fixed radius of foreground ripples when fully expanded. Mainly used in conjunction with `unbounded` attribute. If not set, ripples will expand from their origin to the most distant corner of the component's bounding rectangle. +| `matRippleUnbounded` | boolean | If true, foreground ripples will be visible outside the component's bounds. +| `matRippleDisabled` | boolean | If true, click events on the trigger element will not activate ripples. The `start` and `end` methods can still be called to programmatically create ripples. diff --git a/src/lib/core/ripple/_ripple.scss b/src/lib/core/ripple/_ripple.scss index 257df0e8ba69..6c03b9ae0980 100644 --- a/src/lib/core/ripple/_ripple.scss +++ b/src/lib/core/ripple/_ripple.scss @@ -4,7 +4,7 @@ $mat-ripple-color-opacity: 0.1; @mixin mat-ripple() { - // The host element of an md-ripple directive should always have a position of "absolute" or + // The host element of an mat-ripple directive should always have a position of "absolute" or // "relative" so that the ripple divs it creates inside itself are correctly positioned. .mat-ripple { overflow: hidden; diff --git a/src/lib/core/ripple/index.ts b/src/lib/core/ripple/index.ts index 4a16b4b3b288..046815308345 100644 --- a/src/lib/core/ripple/index.ts +++ b/src/lib/core/ripple/index.ts @@ -9,17 +9,17 @@ import {NgModule} from '@angular/core'; import {ScrollDispatchModule, VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling'; import {PlatformModule} from '@angular/cdk/platform'; -import {MdCommonModule} from '../common-behaviors/common-module'; -import {MdRipple} from './ripple'; +import {MatCommonModule} from '../common-behaviors/common-module'; +import {MatRipple} from './ripple'; -export {MdRipple, RippleGlobalOptions, MD_RIPPLE_GLOBAL_OPTIONS} from './ripple'; +export {MatRipple, RippleGlobalOptions, MAT_RIPPLE_GLOBAL_OPTIONS} from './ripple'; export {RippleRef, RippleState} from './ripple-ref'; export {RippleConfig, RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from './ripple-renderer'; @NgModule({ - imports: [MdCommonModule, PlatformModule, ScrollDispatchModule], - exports: [MdRipple, MdCommonModule], - declarations: [MdRipple], + imports: [MatCommonModule, PlatformModule, ScrollDispatchModule], + exports: [MatRipple, MatCommonModule], + declarations: [MatRipple], providers: [VIEWPORT_RULER_PROVIDER], }) -export class MdRippleModule {} +export class MatRippleModule {} diff --git a/src/lib/core/ripple/ripple.spec.ts b/src/lib/core/ripple/ripple.spec.ts index 5fb8608a8fe9..765637567fe8 100644 --- a/src/lib/core/ripple/ripple.spec.ts +++ b/src/lib/core/ripple/ripple.spec.ts @@ -5,11 +5,11 @@ import {ViewportRuler} from '@angular/cdk/scrolling'; import {dispatchMouseEvent} from '@angular/cdk/testing'; import {RIPPLE_FADE_OUT_DURATION, RIPPLE_FADE_IN_DURATION} from './ripple-renderer'; import { - MdRipple, MdRippleModule, MD_RIPPLE_GLOBAL_OPTIONS, RippleState, RippleGlobalOptions + MatRipple, MatRippleModule, MAT_RIPPLE_GLOBAL_OPTIONS, RippleState, RippleGlobalOptions } from './index'; -describe('MdRipple', () => { +describe('MatRipple', () => { let fixture: ComponentFixture; let rippleTarget: HTMLElement; let originalBodyMargin: string | null; @@ -23,7 +23,7 @@ describe('MdRipple', () => { beforeEach(() => { TestBed.configureTestingModule({ - imports: [MdRippleModule], + imports: [MatRippleModule], declarations: [ BasicRippleContainer, RippleContainerWithInputBindings, @@ -47,7 +47,7 @@ describe('MdRipple', () => { }); describe('basic ripple', () => { - let rippleDirective: MdRipple; + let rippleDirective: MatRipple; const TARGET_HEIGHT = 200; const TARGET_WIDTH = 300; @@ -285,7 +285,7 @@ describe('MdRipple', () => { }); describe('manual ripples', () => { - let rippleDirective: MdRipple; + let rippleDirective: MatRipple; beforeEach(() => { fixture = TestBed.createComponent(BasicRippleContainer); @@ -359,7 +359,7 @@ describe('MdRipple', () => { }); describe('global ripple options', () => { - let rippleDirective: MdRipple; + let rippleDirective: MatRipple; function createTestComponent(rippleConfig: RippleGlobalOptions, testComponent: any = BasicRippleContainer) { @@ -367,9 +367,9 @@ describe('MdRipple', () => { // The testing module has been initialized in the root describe group for the ripples. TestBed.resetTestingModule(); TestBed.configureTestingModule({ - imports: [MdRippleModule], + imports: [MatRippleModule], declarations: [testComponent], - providers: [{ provide: MD_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig }] + providers: [{ provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: rippleConfig }] }); fixture = TestBed.createComponent(testComponent); @@ -456,7 +456,7 @@ describe('MdRipple', () => { describe('configuring behavior', () => { let controller: RippleContainerWithInputBindings; - let rippleComponent: MdRipple; + let rippleComponent: MatRipple; beforeEach(() => { fixture = TestBed.createComponent(RippleContainerWithInputBindings); @@ -570,25 +570,25 @@ describe('MdRipple', () => { @Component({ template: ` -
    `, }) class BasicRippleContainer { - @ViewChild('ripple') ripple: MdRipple; + @ViewChild('ripple') ripple: MatRipple; } @Component({ template: `
    + [matRippleSpeedFactor]="0" + [matRippleTrigger]="trigger" + [matRippleCentered]="centered" + [matRippleRadius]="radius" + [matRippleDisabled]="disabled" + [matRippleColor]="color">
    `, @@ -599,17 +599,17 @@ class RippleContainerWithInputBindings { disabled = false; radius = 0; color = ''; - @ViewChild(MdRipple) ripple: MdRipple; + @ViewChild(MatRipple) ripple: MatRipple; } @Component({ - template: `
    `, + template: `
    `, }) class RippleContainerWithoutBindings {} -@Component({ template: `
    ` }) class RippleContainerWithNgIf { - @ViewChild(MdRipple) ripple: MdRipple; + @ViewChild(MatRipple) ripple: MatRipple; isDestroyed = false; } diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 5b25c0a829f1..76e3bcec6b2e 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -29,18 +29,18 @@ export interface RippleGlobalOptions { } /** Injection token that can be used to specify the global ripple options. */ -export const MD_RIPPLE_GLOBAL_OPTIONS = - new InjectionToken('md-ripple-global-options'); +export const MAT_RIPPLE_GLOBAL_OPTIONS = + new InjectionToken('mat-ripple-global-options'); @Directive({ - selector: '[md-ripple], [mat-ripple], [mdRipple], [matRipple]', - exportAs: 'mdRipple, matRipple', + selector: '[mat-ripple], [matRipple]', + exportAs: 'matRipple', host: { 'class': 'mat-ripple', '[class.mat-ripple-unbounded]': 'unbounded' } }) -export class MdRipple implements OnChanges, OnDestroy { +export class MatRipple implements OnChanges, OnDestroy { /** * The element that triggers the ripple when click events are received. Defaults to the @@ -48,74 +48,39 @@ export class MdRipple implements OnChanges, OnDestroy { */ // Prevent TS metadata emit from referencing HTMLElement in ripple.js // Otherwise running this code in a Node environment (e.g Universal) will not work. - @Input('mdRippleTrigger') trigger: HTMLElement|HTMLElement; + @Input('matRippleTrigger') trigger: HTMLElement|HTMLElement; /** * Whether the ripple always originates from the center of the host element's bounds, rather * than originating from the location of the click event. */ - @Input('mdRippleCentered') centered: boolean; + @Input('matRippleCentered') centered: boolean; /** * Whether click events will not trigger the ripple. Ripples can be still launched manually * by using the `launch()` method. */ - @Input('mdRippleDisabled') disabled: boolean; + @Input('matRippleDisabled') disabled: boolean; /** * If set, the radius in pixels of foreground ripples when fully expanded. If unset, the radius * will be the distance from the center of the ripple to the furthest corner of the host element's * bounding rectangle. */ - @Input('mdRippleRadius') radius: number = 0; + @Input('matRippleRadius') radius: number = 0; /** * If set, the normal duration of ripple animations is divided by this value. For example, * setting it to 0.5 will cause the animations to take twice as long. * A changed speedFactor will not modify the fade-out duration of the ripples. */ - @Input('mdRippleSpeedFactor') speedFactor: number = 1; + @Input('matRippleSpeedFactor') speedFactor: number = 1; /** Custom color for ripples. */ - @Input('mdRippleColor') color: string; + @Input('matRippleColor') color: string; /** Whether foreground ripples should be visible outside the component's bounds. */ - @Input('mdRippleUnbounded') unbounded: boolean; - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleTrigger') - get _matRippleTrigger() { return this.trigger; } - set _matRippleTrigger(v) { this.trigger = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleCentered') - get _matRippleCentered() { return this.centered; } - set _matRippleCentered(v) { this.centered = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleDisabled') - get _matRippleDisabled() { return this.disabled; } - set _matRippleDisabled(v) { this.disabled = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleRadius') - get _matRippleRadius() { return this.radius; } - set _matRippleRadius(v) { this.radius = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleSpeedFactor') - get _matRippleSpeedFactor() { return this.speedFactor; } - set _matRippleSpeedFactor(v) { this.speedFactor = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleColor') - get _matRippleColor() { return this.color; } - set _matRippleColor(v) { this.color = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matRippleUnbounded') - get _matRippleUnbounded() { return this.unbounded; } - set _matRippleUnbounded(v) { this.unbounded = v; } + @Input('matRippleUnbounded') unbounded: boolean; /** Renderer for the ripple DOM manipulations. */ private _rippleRenderer: RippleRenderer; @@ -128,7 +93,7 @@ export class MdRipple implements OnChanges, OnDestroy { ngZone: NgZone, ruler: ViewportRuler, platform: Platform, - @Optional() @Inject(MD_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions + @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions ) { this._rippleRenderer = new RippleRenderer(elementRef, ngZone, ruler, platform); this._globalOptions = globalOptions ? globalOptions : {}; diff --git a/src/lib/core/selection/index.ts b/src/lib/core/selection/index.ts index cb3ef436abcb..48df48afef60 100644 --- a/src/lib/core/selection/index.ts +++ b/src/lib/core/selection/index.ts @@ -7,14 +7,14 @@ */ import {NgModule} from '@angular/core'; -import {MdPseudoCheckbox} from './pseudo-checkbox/pseudo-checkbox'; +import {MatPseudoCheckbox} from './pseudo-checkbox/pseudo-checkbox'; @NgModule({ - exports: [MdPseudoCheckbox], - declarations: [MdPseudoCheckbox] + exports: [MatPseudoCheckbox], + declarations: [MatPseudoCheckbox] }) -export class MdPseudoCheckboxModule { } +export class MatPseudoCheckboxModule { } export * from './pseudo-checkbox/pseudo-checkbox'; diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts index db3e5331b153..b7188b2c3927 100644 --- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts +++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts @@ -8,7 +8,7 @@ import {Component, ViewEncapsulation, Input, ChangeDetectionStrategy} from '@angular/core'; -export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; +export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; /** * Component that shows a simplified checkbox without including any kind of "real" checkbox. @@ -18,7 +18,7 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; * `mat-primary .mat-pseudo-checkbox`. * * Note that this component will be completely invisible to screen-reader users. This is *not* - * interchangeable with and should *not* be used if the user would directly interact + * interchangeable with and should *not* be used if the user would directly interact * with the checkbox. The pseudo-checkbox should only be used as an implementation detail of * more complex components that appropriately handle selected / checked state. * @docs-private @@ -28,7 +28,7 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - selector: 'md-pseudo-checkbox, mat-pseudo-checkbox', + selector: 'mat-pseudo-checkbox', styleUrls: ['pseudo-checkbox.css'], template: '', host: { @@ -38,9 +38,9 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; '[class.mat-pseudo-checkbox-disabled]': 'disabled', }, }) -export class MdPseudoCheckbox { +export class MatPseudoCheckbox { /** Display state of the checkbox. */ - @Input() state: MdPseudoCheckboxState = 'unchecked'; + @Input() state: MatPseudoCheckboxState = 'unchecked'; /** Whether the checkbox is disabled. */ @Input() disabled: boolean = false; diff --git a/src/lib/core/style/_menu-common.scss b/src/lib/core/style/_menu-common.scss index 9dc35940cfb9..ba363b1bcaa9 100644 --- a/src/lib/core/style/_menu-common.scss +++ b/src/lib/core/style/_menu-common.scss @@ -2,7 +2,7 @@ @import './elevation'; @import './list-common'; -/** The mixins below are shared between md-menu and md-select */ +/** The mixins below are shared between mat-menu and mat-select */ // menu width must be a multiple of 56px $mat-menu-overlay-min-width: 112px !default; // 56 * 2 diff --git a/src/lib/datepicker/calendar-body.spec.ts b/src/lib/datepicker/calendar-body.spec.ts index 08c34dec4c84..ea5052d7b66c 100644 --- a/src/lib/datepicker/calendar-body.spec.ts +++ b/src/lib/datepicker/calendar-body.spec.ts @@ -1,14 +1,14 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; -import {MdCalendarBody, MdCalendarCell} from './calendar-body'; +import {MatCalendarBody, MatCalendarCell} from './calendar-body'; import {By} from '@angular/platform-browser'; -describe('MdCalendarBody', () => { +describe('MatCalendarBody', () => { beforeEach(async(() => { TestBed.configureTestingModule({ declarations: [ - MdCalendarBody, + MatCalendarBody, // Test components. StandardCalendarBody, @@ -37,7 +37,7 @@ describe('MdCalendarBody', () => { fixture = TestBed.createComponent(StandardCalendarBody); fixture.detectChanges(); - let calendarBodyDebugElement = fixture.debugElement.query(By.directive(MdCalendarBody)); + let calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody)); calendarBodyNativeElement = calendarBodyDebugElement.nativeElement; testComponent = fixture.componentInstance; @@ -102,7 +102,7 @@ describe('MdCalendarBody', () => { fixture = TestBed.createComponent(CalendarBodyWithDisabledCells); fixture.detectChanges(); - let calendarBodyDebugElement = fixture.debugElement.query(By.directive(MdCalendarBody)); + let calendarBodyDebugElement = fixture.debugElement.query(By.directive(MatCalendarBody)); calendarBodyNativeElement = calendarBodyDebugElement.nativeElement; testComponent = fixture.componentInstance; cellEls = calendarBodyNativeElement.querySelectorAll('.mat-calendar-body-cell'); @@ -127,7 +127,7 @@ describe('MdCalendarBody', () => { @Component({ - template: ` @@ -171,5 +171,5 @@ class CalendarBodyWithDisabledCells { function createCell(value: number) { - return new MdCalendarCell(value, `${value}`, `${value}-label`, true); + return new MatCalendarCell(value, `${value}`, `${value}-label`, true); } diff --git a/src/lib/datepicker/calendar-body.ts b/src/lib/datepicker/calendar-body.ts index c6a2d70d2bd0..6272f5d8799c 100644 --- a/src/lib/datepicker/calendar-body.ts +++ b/src/lib/datepicker/calendar-body.ts @@ -20,7 +20,7 @@ import { * An internal class that represents the data corresponding to a single calendar cell. * @docs-private */ -export class MdCalendarCell { +export class MatCalendarCell { constructor(public value: number, public displayValue: string, public ariaLabel: string, @@ -34,7 +34,7 @@ export class MdCalendarCell { */ @Component({ moduleId: module.id, - selector: '[md-calendar-body], [mat-calendar-body]', + selector: '[mat-calendar-body]', templateUrl: 'calendar-body.html', styleUrls: ['calendar-body.css'], host: { @@ -44,12 +44,12 @@ export class MdCalendarCell { preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdCalendarBody { +export class MatCalendarBody { /** The label for the table. (e.g. "Jan 2017"). */ @Input() label: string; /** The cells to display in the table. */ - @Input() rows: MdCalendarCell[][]; + @Input() rows: MatCalendarCell[][]; /** The value in the table that corresponds to today. */ @Input() todayValue: number; @@ -78,7 +78,7 @@ export class MdCalendarBody { /** Emits when a new value is selected. */ @Output() selectedValueChange = new EventEmitter(); - _cellClicked(cell: MdCalendarCell): void { + _cellClicked(cell: MatCalendarCell): void { if (!this.allowDisabledSelection && !cell.enabled) { return; } diff --git a/src/lib/datepicker/calendar.html b/src/lib/datepicker/calendar.html index 71d227291bd1..0af5479a9709 100644 --- a/src/lib/datepicker/calendar.html +++ b/src/lib/datepicker/calendar.html @@ -22,14 +22,14 @@
    - - + { +describe('MatCalendar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdButtonModule, - MdNativeDateModule, + MatButtonModule, + MatNativeDateModule, ], declarations: [ - MdCalendar, - MdCalendarBody, - MdMonthView, - MdYearView, + MatCalendar, + MatCalendarBody, + MatMonthView, + MatYearView, // Test components. StandardCalendar, @@ -54,7 +53,7 @@ describe('MdCalendar', () => { CalendarWithDateFilter, ], providers: [ - MdDatepickerIntl, + MatDatepickerIntl, ], }); @@ -68,13 +67,13 @@ describe('MdCalendar', () => { let periodButton: HTMLElement; let prevButton: HTMLElement; let nextButton: HTMLElement; - let calendarInstance: MdCalendar; + let calendarInstance: MatCalendar; beforeEach(() => { fixture = TestBed.createComponent(StandardCalendar); fixture.detectChanges(); - let calendarDebugElement = fixture.debugElement.query(By.directive(MdCalendar)); + let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar)); calendarElement = calendarDebugElement.nativeElement; periodButton = calendarElement.querySelector('.mat-calendar-period-button') as HTMLElement; prevButton = calendarElement.querySelector('.mat-calendar-previous-button') as HTMLElement; @@ -161,7 +160,7 @@ describe('MdCalendar', () => { }); it('should re-render when the i18n labels have changed', - inject([MdDatepickerIntl], (intl: MdDatepickerIntl) => { + inject([MatDatepickerIntl], (intl: MatDatepickerIntl) => { const button = fixture.debugElement.nativeElement .querySelector('.mat-calendar-period-button'); @@ -461,12 +460,12 @@ describe('MdCalendar', () => { let fixture: ComponentFixture; let testComponent: CalendarWithMinMax; let calendarElement: HTMLElement; - let calendarInstance: MdCalendar; + let calendarInstance: MatCalendar; beforeEach(() => { fixture = TestBed.createComponent(CalendarWithMinMax); - let calendarDebugElement = fixture.debugElement.query(By.directive(MdCalendar)); + let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar)); calendarElement = calendarDebugElement.nativeElement; calendarInstance = calendarDebugElement.componentInstance; testComponent = fixture.componentInstance; @@ -535,13 +534,13 @@ describe('MdCalendar', () => { let fixture: ComponentFixture; let testComponent: CalendarWithDateFilter; let calendarElement: HTMLElement; - let calendarInstance: MdCalendar; + let calendarInstance: MatCalendar; beforeEach(() => { fixture = TestBed.createComponent(CalendarWithDateFilter); fixture.detectChanges(); - let calendarDebugElement = fixture.debugElement.query(By.directive(MdCalendar)); + let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar)); calendarElement = calendarDebugElement.nativeElement; calendarInstance = calendarDebugElement.componentInstance; testComponent = fixture.componentInstance; @@ -602,40 +601,9 @@ describe('MdCalendar', () => { }); }); -describe('MdCalendar in compatibility mode', () => { - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [ - MdButtonModule, - MdNativeDateModule, - NoConflictStyleCompatibilityMode, - ], - declarations: [ - MdCalendar, - MdCalendarBody, - MdMonthView, - MdYearView, - - // Test components. - StandardCalendar, - ], - providers: [ - MdDatepickerIntl, - ], - }); - - TestBed.compileComponents(); - })); - - it('should not throw on creation', () => { - let fixture = TestBed.createComponent(StandardCalendar); - expect(() => fixture.detectChanges()).not.toThrow(); - }); -}); - @Component({ - template: `` + template: `` }) class StandardCalendar { selected: Date; @@ -645,7 +613,7 @@ class StandardCalendar { @Component({ template: ` - + ` }) class CalendarWithMinMax { @@ -657,8 +625,8 @@ class CalendarWithMinMax { @Component({ template: ` - - + + ` }) class CalendarWithDateFilter { diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts index b66adc2ff4f3..a046757fdbce 100644 --- a/src/lib/datepicker/calendar.ts +++ b/src/lib/datepicker/calendar.ts @@ -32,17 +32,12 @@ import { Output, ViewEncapsulation, } from '@angular/core'; -import { - DateAdapter, - MATERIAL_COMPATIBILITY_MODE, - MD_DATE_FORMATS, - MdDateFormats, -} from '@angular/material/core'; +import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; import {first} from 'rxjs/operator/first'; import {Subscription} from 'rxjs/Subscription'; import {coerceDateProperty} from './coerce-date-property'; import {createMissingDateImplError} from './datepicker-errors'; -import {MdDatepickerIntl} from './datepicker-intl'; +import {MatDatepickerIntl} from './datepicker-intl'; /** @@ -51,7 +46,7 @@ import {MdDatepickerIntl} from './datepicker-intl'; */ @Component({ moduleId: module.id, - selector: 'md-calendar, mat-calendar', + selector: 'mat-calendar', templateUrl: 'calendar.html', styleUrls: ['calendar.css'], host: { @@ -60,9 +55,8 @@ import {MdDatepickerIntl} from './datepicker-intl'; encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdCalendar implements AfterContentInit, OnDestroy { +export class MatCalendar implements AfterContentInit, OnDestroy { private _intlChanges: Subscription; /** A date representing the period (month or year) to start the calendar in. */ @@ -145,10 +139,10 @@ export class MdCalendar implements AfterContentInit, OnDestroy { } constructor(private _elementRef: ElementRef, - private _intl: MdDatepickerIntl, + private _intl: MatDatepickerIntl, private _ngZone: NgZone, @Optional() private _dateAdapter: DateAdapter, - @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats, + @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, changeDetectorRef: ChangeDetectorRef) { if (!this._dateAdapter) { @@ -156,7 +150,7 @@ export class MdCalendar implements AfterContentInit, OnDestroy { } if (!this._dateFormats) { - throw createMissingDateImplError('MD_DATE_FORMATS'); + throw createMissingDateImplError('MAT_DATE_FORMATS'); } this._intlChanges = _intl.changes.subscribe(() => changeDetectorRef.markForCheck()); diff --git a/src/lib/datepicker/coerce-date-property.spec.ts b/src/lib/datepicker/coerce-date-property.spec.ts index 52c15b36655e..cad4486f843c 100644 --- a/src/lib/datepicker/coerce-date-property.spec.ts +++ b/src/lib/datepicker/coerce-date-property.spec.ts @@ -1,5 +1,5 @@ import {async, inject, TestBed} from '@angular/core/testing'; -import {DateAdapter, JAN, MdNativeDateModule} from '@angular/material/core'; +import {DateAdapter, JAN, MatNativeDateModule} from '@angular/material/core'; import {coerceDateProperty} from './index'; @@ -8,7 +8,7 @@ describe('coerceDateProperty', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdNativeDateModule], + imports: [MatNativeDateModule], }); TestBed.compileComponents(); diff --git a/src/lib/datepicker/datepicker-content.scss b/src/lib/datepicker/datepicker-content.scss index 44fcbd387196..386ec6dac95e 100644 --- a/src/lib/datepicker/datepicker-content.scss +++ b/src/lib/datepicker/datepicker-content.scss @@ -1,27 +1,27 @@ @import '../core/style/elevation'; -$md-datepicker-calendar-padding: 8px; -$md-datepicker-non-touch-calendar-cell-size: 40px; -$md-datepicker-non-touch-calendar-width: - $md-datepicker-non-touch-calendar-cell-size * 7 + $md-datepicker-calendar-padding * 2; +$mat-datepicker-calendar-padding: 8px; +$mat-datepicker-non-touch-calendar-cell-size: 40px; +$mat-datepicker-non-touch-calendar-width: + $mat-datepicker-non-touch-calendar-cell-size * 7 + $mat-datepicker-calendar-padding * 2; // Based on the natural height of the calendar in a month with 6 rows of dates // (largest the calendar will get). -$md-datepicker-non-touch-calendar-height: 354px; +$mat-datepicker-non-touch-calendar-height: 354px; // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base // these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as // the calendar grows, since some of the elements have pixel-based sizes. These numbers have been // chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need // scrollbars at smaller sizes. -$md-datepicker-touch-landscape-width: 64vh; -$md-datepicker-touch-landscape-height: 80vh; -$md-datepicker-touch-portrait-width: 80vw; -$md-datepicker-touch-portrait-height: 100vw; -$md-datepicker-touch-min-width: 250px; -$md-datepicker-touch-min-height: 312px; -$md-datepicker-touch-max-width: 750px; -$md-datepicker-touch-max-height: 788px; +$mat-datepicker-touch-landscape-width: 64vh; +$mat-datepicker-touch-landscape-height: 80vh; +$mat-datepicker-touch-portrait-width: 80vw; +$mat-datepicker-touch-portrait-height: 100vw; +$mat-datepicker-touch-min-width: 250px; +$mat-datepicker-touch-min-height: 312px; +$mat-datepicker-touch-max-width: 750px; +$mat-datepicker-touch-max-height: 788px; .mat-datepicker-content { @@ -31,8 +31,8 @@ $md-datepicker-touch-max-height: 788px; } .mat-calendar { - width: $md-datepicker-non-touch-calendar-width; - height: $md-datepicker-non-touch-calendar-height; + width: $mat-datepicker-non-touch-calendar-width; + height: $mat-datepicker-non-touch-calendar-height; } .mat-datepicker-content-touch { @@ -48,23 +48,23 @@ $md-datepicker-touch-max-height: 788px; margin: -24px; .mat-calendar { - min-width: $md-datepicker-touch-min-width; - min-height: $md-datepicker-touch-min-height; - max-width: $md-datepicker-touch-max-width; - max-height: $md-datepicker-touch-max-height; + min-width: $mat-datepicker-touch-min-width; + min-height: $mat-datepicker-touch-min-height; + max-width: $mat-datepicker-touch-max-width; + max-height: $mat-datepicker-touch-max-height; } } @media all and (orientation: landscape) { .mat-datepicker-content-touch .mat-calendar { - width: $md-datepicker-touch-landscape-width; - height: $md-datepicker-touch-landscape-height; + width: $mat-datepicker-touch-landscape-width; + height: $mat-datepicker-touch-landscape-height; } } @media all and (orientation: portrait) { .mat-datepicker-content-touch .mat-calendar { - width: $md-datepicker-touch-portrait-width; - height: $md-datepicker-touch-portrait-height; + width: $mat-datepicker-touch-portrait-width; + height: $mat-datepicker-touch-portrait-height; } } diff --git a/src/lib/datepicker/datepicker-errors.ts b/src/lib/datepicker/datepicker-errors.ts index c9ac18a8263e..18eb6f2f912f 100644 --- a/src/lib/datepicker/datepicker-errors.ts +++ b/src/lib/datepicker/datepicker-errors.ts @@ -9,6 +9,6 @@ /** @docs-private */ export function createMissingDateImplError(provider: string) { return Error( - `MdDatepicker: No provider found for ${provider}. You must import one of the following ` + - `modules at your application root: MdNativeDateModule, or provide a custom implementation.`); + `MatDatepicker: No provider found for ${provider}. You must import one of the following ` + + `modules at your application root: MatNativeDateModule, or provide a custom implementation.`); } diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts index 6116ad87c219..fc3fee065f54 100644 --- a/src/lib/datepicker/datepicker-input.ts +++ b/src/lib/datepicker/datepicker-input.ts @@ -31,24 +31,24 @@ import { ValidatorFn, Validators, } from '@angular/forms'; -import {DateAdapter, MD_DATE_FORMATS, MdDateFormats} from '@angular/material/core'; -import {MdFormField} from '@angular/material/form-field'; +import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; +import {MatFormField} from '@angular/material/form-field'; import {Subscription} from 'rxjs/Subscription'; import {coerceDateProperty} from './coerce-date-property'; -import {MdDatepicker} from './datepicker'; +import {MatDatepicker} from './datepicker'; import {createMissingDateImplError} from './datepicker-errors'; -export const MD_DATEPICKER_VALUE_ACCESSOR: any = { +export const MAT_DATEPICKER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdDatepickerInput), + useExisting: forwardRef(() => MatDatepickerInput), multi: true }; -export const MD_DATEPICKER_VALIDATORS: any = { +export const MAT_DATEPICKER_VALIDATORS: any = { provide: NG_VALIDATORS, - useExisting: forwardRef(() => MdDatepickerInput), + useExisting: forwardRef(() => MatDatepickerInput), multi: true }; @@ -56,22 +56,22 @@ export const MD_DATEPICKER_VALIDATORS: any = { /** * An event used for datepicker input and change events. We don't always have access to a native * input or change event because the event may have been triggered by the user clicking on the - * calendar popup. For consistency, we always use MdDatepickerInputEvent instead. + * calendar popup. For consistency, we always use MatDatepickerInputEvent instead. */ -export class MdDatepickerInputEvent { +export class MatDatepickerInputEvent { /** The new value for the target datepicker input. */ value: D | null; - constructor(public target: MdDatepickerInput, public targetElement: HTMLElement) { + constructor(public target: MatDatepickerInput, public targetElement: HTMLElement) { this.value = this.target.value; } } -/** Directive used to connect an input to a MdDatepicker. */ +/** Directive used to connect an input to a MatDatepicker. */ @Directive({ - selector: 'input[mdDatepicker], input[matDatepicker]', - providers: [MD_DATEPICKER_VALUE_ACCESSOR, MD_DATEPICKER_VALIDATORS], + selector: 'input[matDatepicker]', + providers: [MAT_DATEPICKER_VALUE_ACCESSOR, MAT_DATEPICKER_VALIDATORS], host: { '[attr.aria-haspopup]': 'true', '[attr.aria-owns]': '(_datepicker?.opened && _datepicker.id) || null', @@ -83,40 +83,30 @@ export class MdDatepickerInputEvent { '(blur)': '_onTouched()', '(keydown)': '_onKeydown($event)', }, - exportAs: 'mdDatepickerInput, matDatepickerInput', + exportAs: 'matDatepickerInput', }) -export class MdDatepickerInput implements AfterContentInit, ControlValueAccessor, OnDestroy, +export class MatDatepickerInput implements AfterContentInit, ControlValueAccessor, OnDestroy, Validator { /** The datepicker that this input is associated with. */ @Input() - set mdDatepicker(value: MdDatepicker) { + set matDatepicker(value: MatDatepicker) { this.registerDatepicker(value); } - _datepicker: MdDatepicker; + _datepicker: MatDatepicker; - private registerDatepicker(value: MdDatepicker) { + private registerDatepicker(value: MatDatepicker) { if (value) { this._datepicker = value; this._datepicker._registerInput(this); } } - @Input() set matDatepicker(value: MdDatepicker) { - // Note that we don't set `this.mdDatepicker = value` here, - // because that line gets stripped by the JS compiler. - this.registerDatepicker(value); - } - - @Input() set mdDatepickerFilter(filter: (date: D | null) => boolean) { + @Input() set matDatepickerFilter(filter: (date: D | null) => boolean) { this._dateFilter = filter; this._validatorOnChange(); } _dateFilter: (date: D | null) => boolean; - @Input() set matDatepickerFilter(filter: (date: D | null) => boolean) { - this.mdDatepickerFilter = filter; - } - /** The value of the input. */ @Input() get value(): D | null { @@ -169,10 +159,10 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces private _disabled: boolean; /** Emits when a `change` event is fired on this ``. */ - @Output() dateChange = new EventEmitter>(); + @Output() dateChange = new EventEmitter>(); /** Emits when an `input` event is fired on this ``. */ - @Output() dateInput = new EventEmitter>(); + @Output() dateInput = new EventEmitter>(); /** Emits when the value changes (either due to user input or programmatic change). */ _valueChange = new EventEmitter(); @@ -193,7 +183,7 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces /** The form control validator for whether the input parses. */ private _parseValidator: ValidatorFn = (): ValidationErrors | null => { return this._lastValueValid ? - null : {'mdDatepickerParse': {'text': this._elementRef.nativeElement.value}}; + null : {'matDatepickerParse': {'text': this._elementRef.nativeElement.value}}; } /** The form control validator for the min date. */ @@ -201,7 +191,7 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces const controlValue = coerceDateProperty(this._dateAdapter, control.value); return (!this.min || !controlValue || this._dateAdapter.compareDate(this.min, controlValue) <= 0) ? - null : {'mdDatepickerMin': {'min': this.min, 'actual': controlValue}}; + null : {'matDatepickerMin': {'min': this.min, 'actual': controlValue}}; } /** The form control validator for the max date. */ @@ -209,14 +199,14 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces const controlValue = coerceDateProperty(this._dateAdapter, control.value); return (!this.max || !controlValue || this._dateAdapter.compareDate(this.max, controlValue) >= 0) ? - null : {'mdDatepickerMax': {'max': this.max, 'actual': controlValue}}; + null : {'matDatepickerMax': {'max': this.max, 'actual': controlValue}}; } /** The form control validator for the date filter. */ private _filterValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => { const controlValue = coerceDateProperty(this._dateAdapter, control.value); return !this._dateFilter || !controlValue || this._dateFilter(controlValue) ? - null : {'mdDatepickerFilter': true}; + null : {'matDatepickerFilter': true}; } /** The combined form control validator for this input. */ @@ -231,13 +221,13 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces private _elementRef: ElementRef, private _renderer: Renderer2, @Optional() private _dateAdapter: DateAdapter, - @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats, - @Optional() private _mdFormField: MdFormField) { + @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, + @Optional() private _formField: MatFormField) { if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } if (!this._dateFormats) { - throw createMissingDateImplError('MD_DATE_FORMATS'); + throw createMissingDateImplError('MAT_DATE_FORMATS'); } // Update the displayed date when the locale changes. @@ -253,8 +243,8 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces this.value = selected; this._cvaOnChange(selected); this._onTouched(); - this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); - this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); + this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement)); + this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement)); }); } } @@ -279,7 +269,7 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces * @return The element to connect the popup to. */ getPopupConnectionElementRef(): ElementRef { - return this._mdFormField ? this._mdFormField.underlineRef : this._elementRef; + return this._formField ? this._formField.underlineRef : this._elementRef; } // Implemented as part of ControlValueAccessor @@ -316,11 +306,11 @@ export class MdDatepickerInput implements AfterContentInit, ControlValueAcces this._value = date; this._cvaOnChange(date); this._valueChange.emit(date); - this.dateInput.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); + this.dateInput.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement)); } _onChange() { - this.dateChange.emit(new MdDatepickerInputEvent(this, this._elementRef.nativeElement)); + this.dateChange.emit(new MatDatepickerInputEvent(this, this._elementRef.nativeElement)); } /** diff --git a/src/lib/datepicker/datepicker-intl.ts b/src/lib/datepicker/datepicker-intl.ts index c52f0fb0ce8e..377db19cbf95 100644 --- a/src/lib/datepicker/datepicker-intl.ts +++ b/src/lib/datepicker/datepicker-intl.ts @@ -12,7 +12,7 @@ import {Subject} from 'rxjs/Subject'; /** Datepicker data that requires internationalization. */ @Injectable() -export class MdDatepickerIntl { +export class MatDatepickerIntl { /** * Stream that emits whenever the labels here are changed. Use this to notify * components if the labels have changed after initialization. diff --git a/src/lib/datepicker/datepicker-module.ts b/src/lib/datepicker/datepicker-module.ts index 36272d381b14..4b34d46bcdd5 100644 --- a/src/lib/datepicker/datepicker-module.ts +++ b/src/lib/datepicker/datepicker-module.ts @@ -10,58 +10,58 @@ import {A11yModule} from '@angular/cdk/a11y'; import {OverlayModule} from '@angular/cdk/overlay'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MdButtonModule} from '@angular/material/button'; -import {MdDialogModule} from '@angular/material/dialog'; -import {MdIconModule} from '@angular/material/icon'; -import {MdCalendar} from './calendar'; -import {MdCalendarBody} from './calendar-body'; +import {MatButtonModule} from '@angular/material/button'; +import {MatDialogModule} from '@angular/material/dialog'; +import {MatIconModule} from '@angular/material/icon'; +import {MatCalendar} from './calendar'; +import {MatCalendarBody} from './calendar-body'; import { - MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER, - MdDatepicker, - MdDatepickerContent, + MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER, + MatDatepicker, + MatDatepickerContent, } from './datepicker'; -import {MdDatepickerInput} from './datepicker-input'; -import {MdDatepickerIntl} from './datepicker-intl'; -import {MdDatepickerToggle} from './datepicker-toggle'; -import {MdMonthView} from './month-view'; -import {MdYearView} from './year-view'; +import {MatDatepickerInput} from './datepicker-input'; +import {MatDatepickerIntl} from './datepicker-intl'; +import {MatDatepickerToggle} from './datepicker-toggle'; +import {MatMonthView} from './month-view'; +import {MatYearView} from './year-view'; @NgModule({ imports: [ CommonModule, - MdButtonModule, - MdDialogModule, - MdIconModule, + MatButtonModule, + MatDialogModule, + MatIconModule, OverlayModule, A11yModule, ], exports: [ - MdCalendar, - MdCalendarBody, - MdDatepicker, - MdDatepickerContent, - MdDatepickerInput, - MdDatepickerToggle, - MdMonthView, - MdYearView, + MatCalendar, + MatCalendarBody, + MatDatepicker, + MatDatepickerContent, + MatDatepickerInput, + MatDatepickerToggle, + MatMonthView, + MatYearView, ], declarations: [ - MdCalendar, - MdCalendarBody, - MdDatepicker, - MdDatepickerContent, - MdDatepickerInput, - MdDatepickerToggle, - MdMonthView, - MdYearView, + MatCalendar, + MatCalendarBody, + MatDatepicker, + MatDatepickerContent, + MatDatepickerInput, + MatDatepickerToggle, + MatMonthView, + MatYearView, ], providers: [ - MdDatepickerIntl, - MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER, + MatDatepickerIntl, + MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER, ], entryComponents: [ - MdDatepickerContent, + MatDatepickerContent, ] }) -export class MdDatepickerModule {} +export class MatDatepickerModule {} diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts index 5968934ff4fc..c9988235b132 100644 --- a/src/lib/datepicker/datepicker-toggle.ts +++ b/src/lib/datepicker/datepicker-toggle.ts @@ -8,26 +8,25 @@ import { ChangeDetectionStrategy, + ChangeDetectorRef, Component, Input, - ViewEncapsulation, - OnDestroy, OnChanges, + OnDestroy, SimpleChanges, - ChangeDetectorRef, + ViewEncapsulation, } from '@angular/core'; -import {MdDatepicker} from './datepicker'; -import {MdDatepickerIntl} from './datepicker-intl'; +import {MatDatepicker} from './datepicker'; +import {MatDatepickerIntl} from './datepicker-intl'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {Subscription} from 'rxjs/Subscription'; import {merge} from 'rxjs/observable/merge'; import {of as observableOf} from 'rxjs/observable/of'; -import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core'; @Component({ moduleId: module.id, - selector: 'md-datepicker-toggle, mat-datepicker-toggle', + selector: 'mat-datepicker-toggle', templateUrl: 'datepicker-toggle.html', host: { 'class': 'mat-datepicker-toggle', @@ -35,13 +34,12 @@ import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core'; encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdDatepickerToggle implements OnChanges, OnDestroy { +export class MatDatepickerToggle implements OnChanges, OnDestroy { private _stateChanges = Subscription.EMPTY; /** Datepicker instance that the button will toggle. */ - @Input('for') datepicker: MdDatepicker; + @Input('for') datepicker: MatDatepicker; /** Whether the toggle button is disabled. */ @Input() @@ -54,12 +52,12 @@ export class MdDatepickerToggle implements OnChanges, OnDestroy { private _disabled: boolean; constructor( - public _intl: MdDatepickerIntl, + public _intl: MatDatepickerIntl, private _changeDetectorRef: ChangeDetectorRef) {} ngOnChanges(changes: SimpleChanges) { if (changes.datepicker) { - const datepicker: MdDatepicker = changes.datepicker.currentValue; + const datepicker: MatDatepicker = changes.datepicker.currentValue; const datepickerDisabled = datepicker ? datepicker._disabledChange : observableOf(); const inputDisabled = datepicker && datepicker._datepickerInput ? datepicker._datepickerInput._disabledChange : diff --git a/src/lib/datepicker/datepicker.md b/src/lib/datepicker/datepicker.md index 47f5a0f22b3b..6a3ee7a32861 100644 --- a/src/lib/datepicker/datepicker.md +++ b/src/lib/datepicker/datepicker.md @@ -13,42 +13,42 @@ There are many more features that will be added in future iterations, including: * Built in support for [Moment.js](https://momentjs.com/) dates ### Connecting a datepicker to an input -A datepicker is composed of a text input and a calendar pop-up, connected via the `mdDatepicker` +A datepicker is composed of a text input and a calendar pop-up, connected via the `matDatepicker` property on the text input. ```html - - + + ``` An optional datepicker toggle button is available. A toggle can be added to the example above: ```html - - - + + + ``` -This works exactly the same with an input that is part of an `` and the toggle +This works exactly the same with an input that is part of an `` and the toggle can easily be used as a prefix or suffix on the material input: ```html - - - - - + + + + + ``` ### Setting the calendar starting view By default the calendar will open in month view, this can be changed by setting the `startView` -property of `md-datepicker` to `"year"`. In year view the user will see all months of the year and +property of `mat-datepicker` to `"year"`. In year view the user will see all months of the year and then proceed to month view after choosing a month. The month or year that the calendar opens to is determined by first checking if any date is currently selected, if so it will open to the month or year containing that date. Otherwise it will open to the month or year containing today's date. This behavior can be overridden by using the -`startAt` property of `md-datepicker`. In this case the calendar will open to the month or year +`startAt` property of `mat-datepicker`. In this case the calendar will open to the month or year containing the `startAt` date. @@ -62,13 +62,13 @@ from advancing the calendar past the `month` or `year` (depending on current vie -The second way to add date validation is using the `mdDatepickerFilter` property of the datepicker +The second way to add date validation is using the `matDatepickerFilter` property of the datepicker input. This property accepts a function of ` => boolean` (where `` is the date type used by the datepicker, see section on [choosing a date implementation](#choosing-a-date-implementation-and-date-format-settings)). A result of `true` indicates that the date is valid and a result of `false` indicates that it is not. Again this will also disable the dates on the calendar that are invalid. However, one important -difference between using `mdDatepickerFilter` vs using `min` or `max` is that filtering out all +difference between using `matDatepickerFilter` vs using `min` or `max` is that filtering out all dates before or after a certain point, will not prevent the user from advancing the calendar past that point. @@ -79,9 +79,9 @@ They will not be able to go further back in the calendar than 2000. If they manu that is before the min, after the max, or filtered out, the input will have validation errors. Each validation property has a different error that can be checked: - * A value that violates the `min` property will have a `mdDatepickerMin` error. - * A value that violates the `max` property will have a `mdDatepickerMax` error. - * A value that violates the `mdDatepickerFilter` property will have a `mdDatepickerFilter` error. + * A value that violates the `min` property will have a `matDatepickerMin` error. + * A value that violates the `max` property will have a `matDatepickerMax` error. + * A value that violates the `matDatepickerFilter` property will have a `matDatepickerFilter` error. ### Input and change events The input's native `input` and `change` events will only trigger due to user interaction with the @@ -90,21 +90,21 @@ this limitation, the datepicker input also has support for `dateInput` and `date These trigger when the user interacts with either the input or the popup. ```html - - + + ``` ### Touch UI mode The datepicker normally opens as a popup under the input. However this is not ideal for touch devices that don't have as much screen real estate and need bigger click targets. For this reason -`md-datepicker` has a `touchUi` property that can be set to `true` in order to enable a more touch +`mat-datepicker` has a `touchUi` property that can be set to `true` in order to enable a more touch friendly UI where the calendar opens in a large dialog. ### Manually opening and closing the calendar The calendar popup can be programmatically controlled using the `open` and `close` methods on the -`md-datepicker`. It also has an `opened` property that reflects the status of the popup. +`mat-datepicker`. It also has an `opened` property that reflects the status of the popup. @@ -150,20 +150,20 @@ The datepicker was built to be date implementation agnostic. This means that it with a variety of different date implementations. However it also means that developers need to make sure to provide the appropriate pieces for the datepicker to work with their chosen implementation. The easiest way to ensure this is just to import one of the pre-made modules (currently -`MdNativeDateModule` is the only implementation that ships with material, but there are plans to add +`MatNativeDateModule` is the only implementation that ships with material, but there are plans to add a module for Moment.js support): - * `MdNativeDateModule` - support for native JavaScript Date object + * `MatNativeDateModule` - support for native JavaScript Date object -These modules include providers for `DateAdapter` and `MD_DATE_FORMATS` +These modules include providers for `DateAdapter` and `MAT_DATE_FORMATS` ```ts @NgModule({ - imports: [MdDatepickerModule, MdNativeDateModule], + imports: [MatDatepickerModule, MatNativeDateModule], }) export class MyApp {} ``` -Because `DateAdapter` is a generic class, `MdDatepicker` and `MdDatepickerInput` also need to be +Because `DateAdapter` is a generic class, `MatDatepicker` and `MatDatepickerInput` also need to be made generic. When working with these classes (for example as a `ViewChild`) you should include the appropriate generic type that corresponds to the `DateAdapter` implementation you are using. For example: @@ -171,11 +171,11 @@ example: ```ts @Component({...}) export class MyComponent { - @ViewChild(MdDatepicker) datepicker: MdDatepicker; + @ViewChild(MatDatepicker) datepicker: MatDatepicker; } ``` -*Please note: `MdNativeDateModule` is based off of the functionality available in JavaScript's +*Please note: `MatNativeDateModule` is based off of the functionality available in JavaScript's native `Date` object, and is thus not suitable for many locales. One of the biggest shortcomings of the native `Date` object is the inability to set the parse format. We highly recommend using a custom `DateAdapter` that works with the formatting/parsing library of your choice.* @@ -183,22 +183,22 @@ custom `DateAdapter` that works with the formatting/parsing library of your choi #### Customizing the date implementation The datepicker does all of its interaction with date objects via the `DateAdapter`. Making the datepicker work with a different date implementation is as easy as extending `DateAdapter`, and -using your subclass as the provider. You will also want to make sure that the `MD_DATE_FORMATS` +using your subclass as the provider. You will also want to make sure that the `MAT_DATE_FORMATS` provided in your app are formats that can be understood by your date implementation. ```ts @NgModule({ - imports: [MdDatepickerModule], + imports: [MatDatepickerModule], providers: [ {provide: DateAdapter, useClass: MyDateAdapter}, - {provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}, + {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}, ], }) export class MyApp {} ``` #### Customizing the parse and display formats -The `MD_DATE_FORMATS` object is just a collection of formats that the datepicker uses when parsing +The `MAT_DATE_FORMATS` object is just a collection of formats that the datepicker uses when parsing and displaying dates. These formats are passed through to the `DateAdapter` so you will want to make sure that the format objects you're using are compatible with the `DateAdapter` used in your app. This example shows how to use the native `Date` implementation from material, but with custom @@ -206,36 +206,36 @@ formats. ```ts @NgModule({ - imports: [MdDatepickerModule], + imports: [MatDatepickerModule], providers: [ {provide: DateAdapter, useClass: NativeDateAdapter}, - {provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}, + {provide: MAT_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}, ], }) export class MyApp {} ``` #### Localizing labels and messages -The various text strings used by the datepicker are provided through `MdDatepickerIntl`. +The various text strings used by the datepicker are provided through `MatDatepickerIntl`. Localization of these messages can be done by providing a subclass with translated values in your application root module. ```ts @NgModule({ - imports: [MdDatepickerModule, MdNativeDateModule], + imports: [MatDatepickerModule, MatNativeDateModule], providers: [ - {provide: MdDatepickerIntl, useClass: MyIntl}, + {provide: MatDatepickerIntl, useClass: MyIntl}, ], }) export class MyApp {} ``` ### Accessibility -The `MdDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it +The `MatDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it triggers a calendar dialog with `role="dialog"`. -`MdDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input +`MatDatepickerIntl` includes strings that are used for `aria-label`s. The datepicker input should have a placeholder or be given a meaningful label via `aria-label`, `aria-labelledby` or -`MdDatepickerIntl`. +`MatDatepickerIntl`. #### Keyboard shortcuts The keyboard shortcuts to handle datepicker are: diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts index cd0834f951d5..3f87fc50749d 100644 --- a/src/lib/datepicker/datepicker.spec.ts +++ b/src/lib/datepicker/datepicker.spec.ts @@ -15,33 +15,33 @@ import { JUL, JUN, MAT_DATE_LOCALE, - MdNativeDateModule, + MatNativeDateModule, NativeDateModule, SEP, } from '@angular/material/core'; -import {MdFormFieldModule} from '@angular/material/form-field'; +import {MatFormFieldModule} from '@angular/material/form-field'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MdInputModule} from '../input/index'; -import {MdDatepicker} from './datepicker'; -import {MdDatepickerInput} from './datepicker-input'; -import {MdDatepickerIntl, MdDatepickerModule} from './index'; +import {MatInputModule} from '../input/index'; +import {MatDatepicker} from './datepicker'; +import {MatDatepickerInput} from './datepicker-input'; +import {MatDatepickerIntl, MatDatepickerModule} from './index'; -describe('MdDatepicker', () => { +describe('MatDatepicker', () => { afterEach(inject([OverlayContainer], (container: OverlayContainer) => { container.getContainerElement().parentNode!.removeChild(container.getContainerElement()); })); - describe('with MdNativeDateModule', () => { + describe('with MatNativeDateModule', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule, - MdDatepickerModule, - MdFormFieldModule, - MdInputModule, - MdNativeDateModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, + MatNativeDateModule, NoopAnimationsModule, ReactiveFormsModule, ], @@ -94,12 +94,12 @@ describe('MdDatepicker', () => { testComponent.touch = true; fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); }); it('open in disabled mode should not open the calendar', () => { @@ -107,13 +107,13 @@ describe('MdDatepicker', () => { fixture.detectChanges(); expect(document.querySelector('.cdk-overlay-pane')).toBeNull(); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); testComponent.datepicker.open(); fixture.detectChanges(); expect(document.querySelector('.cdk-overlay-pane')).toBeNull(); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); }); it('disabled datepicker input should open the calendar if datepicker is enabled', () => { @@ -149,7 +149,7 @@ describe('MdDatepicker', () => { testComponent.datepicker.open(); fixture.detectChanges(); - let content = document.querySelector('.cdk-overlay-pane md-datepicker-content')!; + let content = document.querySelector('.cdk-overlay-pane mat-datepicker-content')!; expect(content).toBeTruthy('Expected datepicker to be open.'); const keyboardEvent = createKeyboardEvent('keydown', ESCAPE); @@ -158,7 +158,7 @@ describe('MdDatepicker', () => { dispatchEvent(content, keyboardEvent); fixture.detectChanges(); - content = document.querySelector('.cdk-overlay-pane md-datepicker-content')!; + content = document.querySelector('.cdk-overlay-pane mat-datepicker-content')!; expect(content).toBeFalsy('Expected datepicker to be closed.'); expect(stopPropagationSpy).toHaveBeenCalled(); @@ -173,13 +173,13 @@ describe('MdDatepicker', () => { testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); testComponent.datepicker.close(); fixture.detectChanges(); fixture.whenStable().then(() => { - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); }); }); @@ -190,7 +190,7 @@ describe('MdDatepicker', () => { testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 1)); let cells = document.querySelectorAll('.mat-calendar-body-cell'); @@ -198,7 +198,7 @@ describe('MdDatepicker', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2)); }); }); @@ -212,7 +212,7 @@ describe('MdDatepicker', () => { testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('md-datepicker-content')).not.toBeNull(); + expect(document.querySelector('mat-datepicker-content')).not.toBeNull(); expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, currentDay)); let cells = document.querySelectorAll('.mat-calendar-body-cell'); @@ -222,7 +222,7 @@ describe('MdDatepicker', () => { fixture.whenStable().then(() => { expect(selectedChangedSpy.calls.count()).toEqual(1); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); expect(testComponent.datepickerInput.value).toEqual(new Date(2020, JAN, 2)); }); }); @@ -536,7 +536,7 @@ describe('MdDatepicker', () => { }); }); - describe('datepicker with md-datepicker-toggle', () => { + describe('datepicker with mat-datepicker-toggle', () => { let fixture: ComponentFixture; let testComponent: DatepickerWithToggle; @@ -553,13 +553,13 @@ describe('MdDatepicker', () => { })); it('should open calendar when toggle clicked', () => { - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); let toggle = fixture.debugElement.query(By.css('button')); dispatchMouseEvent(toggle.nativeElement, 'click'); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); }); it('should not open calendar when toggle clicked if datepicker is disabled', () => { @@ -568,12 +568,12 @@ describe('MdDatepicker', () => { const toggle = fixture.debugElement.query(By.css('button')).nativeElement; expect(toggle.hasAttribute('disabled')).toBe(true); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); dispatchMouseEvent(toggle, 'click'); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); }); it('should not open calendar when toggle clicked if input is disabled', () => { @@ -584,12 +584,12 @@ describe('MdDatepicker', () => { const toggle = fixture.debugElement.query(By.css('button')).nativeElement; expect(toggle.hasAttribute('disabled')).toBe(true); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); dispatchMouseEvent(toggle, 'click'); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).toBeNull(); + expect(document.querySelector('mat-dialog-container')).toBeNull(); }); it('should set the `button` type on the trigger to prevent form submissions', () => { @@ -627,7 +627,7 @@ describe('MdDatepicker', () => { }); it('should re-render when the i18n labels change', - inject([MdDatepickerIntl], (intl: MdDatepickerIntl) => { + inject([MatDatepickerIntl], (intl: MatDatepickerIntl) => { const toggle = fixture.debugElement.query(By.css('button')).nativeElement; intl.openCalendarLabel = 'Open the calendar, perhaps?'; @@ -638,7 +638,7 @@ describe('MdDatepicker', () => { })); }); - describe('datepicker inside md-form-field', () => { + describe('datepicker inside mat-form-field', () => { let fixture: ComponentFixture; let testComponent: FormFieldDatepicker; @@ -654,10 +654,10 @@ describe('MdDatepicker', () => { fixture.detectChanges(); })); - it('should attach popup to md-form-field underline', () => { + it('should attach popup to mat-form-field underline', () => { let attachToRef = testComponent.datepickerInput.getPopupConnectionElementRef(); expect(attachToRef.nativeElement.classList.contains('mat-form-field-underline')) - .toBe(true, 'popup should be attached to md-form-field underline'); + .toBe(true, 'popup should be attached to mat-form-field underline'); }); }); @@ -787,7 +787,7 @@ describe('MdDatepicker', () => { testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); let cells = document.querySelectorAll('.mat-calendar-body-cell'); expect(cells[0].classList).toContain('mat-calendar-body-disabled'); @@ -857,7 +857,7 @@ describe('MdDatepicker', () => { testComponent.datepicker.open(); fixture.detectChanges(); - expect(document.querySelector('md-dialog-container')).not.toBeNull(); + expect(document.querySelector('mat-dialog-container')).not.toBeNull(); let cells = document.querySelectorAll('.mat-calendar-body-cell'); dispatchMouseEvent(cells[0], 'click'); @@ -897,14 +897,14 @@ describe('MdDatepicker', () => { }); }); - describe('with missing DateAdapter and MD_DATE_FORMATS', () => { + describe('with missing DateAdapter and MAT_DATE_FORMATS', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ FormsModule, - MdDatepickerModule, - MdFormFieldModule, - MdInputModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, NoopAnimationsModule, ReactiveFormsModule, ], @@ -916,7 +916,7 @@ describe('MdDatepicker', () => { it('should throw when created', () => { expect(() => TestBed.createComponent(StandardDatepicker)) - .toThrowError(/MdDatepicker: No provider found for .*/); + .toThrowError(/MatDatepicker: No provider found for .*/); }); }); @@ -928,10 +928,10 @@ describe('MdDatepicker', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdDatepickerModule, - MdFormFieldModule, - MdInputModule, - MdNativeDateModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, + MatNativeDateModule, NoopAnimationsModule ], declarations: [StandardDatepicker], @@ -1010,10 +1010,10 @@ describe('MdDatepicker', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdDatepickerModule, - MdFormFieldModule, - MdInputModule, - MdNativeDateModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, + MatNativeDateModule, NoopAnimationsModule, NativeDateModule, FormsModule @@ -1045,120 +1045,123 @@ describe('MdDatepicker', () => { @Component({ template: ` - - + + `, }) class StandardDatepicker { touch = false; disabled = false; date: Date | null = new Date(2020, JAN, 1); - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } @Component({ template: ` - + `, }) class MultiInputDatepicker {} @Component({ - template: ``, + template: ``, }) class NoInputDatepicker { - @ViewChild('d') datepicker: MdDatepicker; + @ViewChild('d') datepicker: MatDatepicker; } @Component({ template: ` - - + + `, }) class DatepickerWithStartAt { date = new Date(2020, JAN, 1); startDate = new Date(2010, JAN, 1); - @ViewChild('d') datepicker: MdDatepicker; + @ViewChild('d') datepicker: MatDatepicker; } @Component({ template: ` - - + + `, }) class DatepickerWithStartView { date = new Date(2020, JAN, 1); - @ViewChild('d') datepicker: MdDatepicker; + @ViewChild('d') datepicker: MatDatepicker; } @Component({ - template: ``, + template: ` + + + `, }) class DatepickerWithNgModel { selected: Date | null = null; - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } @Component({ template: ` - - + + `, }) class DatepickerWithFormControl { formControl = new FormControl(); - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } @Component({ template: ` - - - + + + `, }) class DatepickerWithToggle { - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) input: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) input: MatDatepickerInput; touchUI = true; } @Component({ template: ` - - - - + + + + `, }) class FormFieldDatepicker { - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } @Component({ template: ` - - - + + + `, }) class DatepickerWithMinAndMaxValidation { - @ViewChild('d') datepicker: MdDatepicker; + @ViewChild('d') datepicker: MatDatepicker; date: Date | null; minDate = new Date(2010, JAN, 1); maxDate = new Date(2020, JAN, 1); @@ -1167,13 +1170,13 @@ class DatepickerWithMinAndMaxValidation { @Component({ template: ` - - - + + + `, }) class DatepickerWithFilterAndValidation { - @ViewChild('d') datepicker: MdDatepicker; + @ViewChild('d') datepicker: MatDatepicker; date: Date; filter = (date: Date) => date.getDate() != 1; } @@ -1181,13 +1184,13 @@ class DatepickerWithFilterAndValidation { @Component({ template: ` - - + ` }) class DatepickerWithChangeAndInputEvents { - @ViewChild('d') datepicker: MdDatepicker; + @ViewChild('d') datepicker: MatDatepicker; onChange() {} @@ -1200,20 +1203,20 @@ class DatepickerWithChangeAndInputEvents { @Component({ template: ` - - + + ` }) class DatepickerWithi18n { date: Date | null = new Date(2010, JAN, 1); - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } @Component({ template: ` - - + + ` }) class DatepickerWithISOStrings { @@ -1221,6 +1224,6 @@ class DatepickerWithISOStrings { min = new Date(2017, JAN, 1).toISOString(); max = new Date (2017, DEC, 31).toISOString(); startAt = new Date(2017, JUL, 1).toISOString(); - @ViewChild('d') datepicker: MdDatepicker; - @ViewChild(MdDatepickerInput) datepickerInput: MdDatepickerInput; + @ViewChild('d') datepicker: MatDatepicker; + @ViewChild(MatDatepickerInput) datepickerInput: MatDatepickerInput; } diff --git a/src/lib/datepicker/datepicker.ts b/src/lib/datepicker/datepicker.ts index d0873f7f1980..8c9d10adafb3 100644 --- a/src/lib/datepicker/datepicker.ts +++ b/src/lib/datepicker/datepicker.ts @@ -11,8 +11,8 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {ESCAPE} from '@angular/cdk/keycodes'; import { Overlay, - OverlayRef, OverlayConfig, + OverlayRef, PositionStrategy, RepositionScrollStrategy, ScrollStrategy, @@ -36,48 +36,48 @@ import { ViewContainerRef, ViewEncapsulation, } from '@angular/core'; -import {DateAdapter, MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core'; -import {MdDialog, MdDialogRef} from '@angular/material/dialog'; +import {DateAdapter} from '@angular/material/core'; +import {MatDialog, MatDialogRef} from '@angular/material/dialog'; import {DOCUMENT} from '@angular/platform-browser'; import {Subject} from 'rxjs/Subject'; import {Subscription} from 'rxjs/Subscription'; -import {MdCalendar} from './calendar'; +import {MatCalendar} from './calendar'; import {coerceDateProperty} from './coerce-date-property'; import {createMissingDateImplError} from './datepicker-errors'; -import {MdDatepickerInput} from './datepicker-input'; +import {MatDatepickerInput} from './datepicker-input'; /** Used to generate a unique ID for each datepicker instance. */ let datepickerUid = 0; /** Injection token that determines the scroll handling while the calendar is open. */ -export const MD_DATEPICKER_SCROLL_STRATEGY = - new InjectionToken<() => ScrollStrategy>('md-datepicker-scroll-strategy'); +export const MAT_DATEPICKER_SCROLL_STRATEGY = + new InjectionToken<() => ScrollStrategy>('mat-datepicker-scroll-strategy'); /** @docs-private */ -export function MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): +export function MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => RepositionScrollStrategy { return () => overlay.scrollStrategies.reposition(); } /** @docs-private */ -export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = { - provide: MD_DATEPICKER_SCROLL_STRATEGY, +export const MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER = { + provide: MAT_DATEPICKER_SCROLL_STRATEGY, deps: [Overlay], - useFactory: MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY, + useFactory: MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY, }; /** * Component used as the content for the datepicker dialog and popup. We use this instead of using - * MdCalendar directly as the content so we can control the initial focus. This also gives us a + * MatCalendar directly as the content so we can control the initial focus. This also gives us a * place to put additional features of the popup that are not part of the calendar itself in the * future. (e.g. confirmation buttons). * @docs-private */ @Component({ moduleId: module.id, - selector: 'md-datepicker-content, mat-datepicker-content', + selector: 'mat-datepicker-content', templateUrl: 'datepicker-content.html', styleUrls: ['datepicker-content.css'], host: { @@ -88,12 +88,11 @@ export const MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER = { encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdDatepickerContent implements AfterContentInit { - datepicker: MdDatepicker; +export class MatDatepickerContent implements AfterContentInit { + datepicker: MatDatepicker; - @ViewChild(MdCalendar) _calendar: MdCalendar; + @ViewChild(MatCalendar) _calendar: MatCalendar; ngAfterContentInit() { this._calendar._focusActiveCell(); @@ -114,18 +113,18 @@ export class MdDatepickerContent implements AfterContentInit { // TODO(mmalerba): We use a component instead of a directive here so the user can use implicit -// template reference variables (e.g. #d vs #d="mdDatepicker"). We can change this to a directive if -// angular adds support for `exportAs: '$implicit'` on directives. +// template reference variables (e.g. #d vs #d="matDatepicker"). We can change this to a directive +// if angular adds support for `exportAs: '$implicit'` on directives. /** Component responsible for managing the datepicker popup/dialog. */ @Component({ moduleId: module.id, - selector: 'md-datepicker, mat-datepicker', + selector: 'mat-datepicker', template: '', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdDatepicker implements OnDestroy { +export class MatDatepicker implements OnDestroy { /** The date to open the calendar to initially. */ @Input() get startAt(): D | null { @@ -170,7 +169,7 @@ export class MdDatepicker implements OnDestroy { opened = false; /** The id for the datepicker calendar. */ - id = `md-datepicker-${datepickerUid++}`; + id = `mat-datepicker-${datepickerUid++}`; /** The currently selected date. */ get _selected(): D | null { return this._validSelected; } @@ -195,10 +194,10 @@ export class MdDatepicker implements OnDestroy { private _popupRef: OverlayRef; /** A reference to the dialog when the calendar is opened as a dialog. */ - private _dialogRef: MdDialogRef | null; + private _dialogRef: MatDialogRef | null; /** A portal containing the calendar for this datepicker. */ - private _calendarPortal: ComponentPortal>; + private _calendarPortal: ComponentPortal>; /** The element that was focused before the datepicker was opened. */ private _focusedElementBeforeOpen: HTMLElement | null = null; @@ -206,16 +205,16 @@ export class MdDatepicker implements OnDestroy { private _inputSubscription = Subscription.EMPTY; /** The input element this datepicker is associated with. */ - _datepickerInput: MdDatepickerInput; + _datepickerInput: MatDatepickerInput; /** Emits when the datepicker is disabled. */ _disabledChange = new Subject(); - constructor(private _dialog: MdDialog, + constructor(private _dialog: MatDialog, private _overlay: Overlay, private _ngZone: NgZone, private _viewContainerRef: ViewContainerRef, - @Inject(MD_DATEPICKER_SCROLL_STRATEGY) private _scrollStrategy, + @Inject(MAT_DATEPICKER_SCROLL_STRATEGY) private _scrollStrategy, @Optional() private _dateAdapter: DateAdapter, @Optional() private _dir: Directionality, @Optional() @Inject(DOCUMENT) private _document: any) { @@ -247,9 +246,9 @@ export class MdDatepicker implements OnDestroy { * Register an input with this datepicker. * @param input The datepicker input to register with this datepicker. */ - _registerInput(input: MdDatepickerInput): void { + _registerInput(input: MatDatepickerInput): void { if (this._datepickerInput) { - throw Error('An MdDatepicker can only be associated with a single input.'); + throw Error('An MatDatepicker can only be associated with a single input.'); } this._datepickerInput = input; this._inputSubscription = @@ -262,7 +261,7 @@ export class MdDatepicker implements OnDestroy { return; } if (!this._datepickerInput) { - throw Error('Attempted to open an MdDatepicker with no associated input.'); + throw Error('Attempted to open an MatDatepicker with no associated input.'); } if (this._document) { this._focusedElementBeforeOpen = this._document.activeElement; @@ -299,7 +298,7 @@ export class MdDatepicker implements OnDestroy { /** Open the calendar as a dialog. */ private _openAsDialog(): void { - this._dialogRef = this._dialog.open(MdDatepickerContent, { + this._dialogRef = this._dialog.open(MatDatepickerContent, { direction: this._dir ? this._dir.value : 'ltr', viewContainerRef: this._viewContainerRef, }); @@ -310,7 +309,7 @@ export class MdDatepicker implements OnDestroy { /** Open the calendar as a popup. */ private _openAsPopup(): void { if (!this._calendarPortal) { - this._calendarPortal = new ComponentPortal(MdDatepickerContent, this._viewContainerRef); + this._calendarPortal = new ComponentPortal(MatDatepickerContent, this._viewContainerRef); } if (!this._popupRef) { @@ -318,7 +317,7 @@ export class MdDatepicker implements OnDestroy { } if (!this._popupRef.hasAttached()) { - let componentRef: ComponentRef> = + let componentRef: ComponentRef> = this._popupRef.attach(this._calendarPortal); componentRef.instance.datepicker = this; diff --git a/src/lib/datepicker/mat-exports.ts b/src/lib/datepicker/mat-exports.ts deleted file mode 100644 index 71e214bcd1f0..000000000000 --- a/src/lib/datepicker/mat-exports.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdCalendar} from './calendar'; -import {MdCalendarBody, MdCalendarCell} from './calendar-body'; -import { - MD_DATEPICKER_SCROLL_STRATEGY, - MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER, - MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY, - MdDatepicker, - MdDatepickerContent, -} from './datepicker'; -import { - MD_DATEPICKER_VALIDATORS, - MD_DATEPICKER_VALUE_ACCESSOR, - MdDatepickerInput, - MdDatepickerInputEvent, -} from './datepicker-input'; -import {MdDatepickerIntl} from './datepicker-intl'; -import {MdDatepickerModule} from './datepicker-module'; -import {MdDatepickerToggle} from './datepicker-toggle'; -import {MdMonthView} from './month-view'; -import {MdYearView} from './year-view'; - - -/* tslint:disable:max-line-length */ -export {MD_DATEPICKER_SCROLL_STRATEGY as MAT_DATEPICKER_SCROLL_STRATEGY}; -export {MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER as MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER}; -export {MD_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER_FACTORY}; -export {MD_DATEPICKER_VALIDATORS as MAT_DATEPICKER_VALIDATORS}; -export {MD_DATEPICKER_VALUE_ACCESSOR as MAT_DATEPICKER_VALUE_ACCESSOR}; -export {MdCalendar as MatCalendar}; -export {MdCalendarBody as MatCalendarBody}; -export {MdCalendarCell as MatCalendarCell}; -export {MdDatepicker as MatDatepicker}; -export {MdDatepickerContent as MatDatepickerContent}; -export {MdDatepickerInput as MatDatepickerInput}; -export {MdDatepickerInputEvent as MatDatepickerInputEvent}; -export {MdDatepickerIntl as MatDatepickerIntl}; -export {MdDatepickerModule as MatDatepickerModule}; -export {MdDatepickerToggle as MatDatepickerToggle}; -export {MdMonthView as MatMonthView}; -export {MdYearView as MatYearView}; diff --git a/src/lib/datepicker/month-view.spec.ts b/src/lib/datepicker/month-view.spec.ts index 8b97849a85e8..b54cb400d5a5 100644 --- a/src/lib/datepicker/month-view.spec.ts +++ b/src/lib/datepicker/month-view.spec.ts @@ -1,20 +1,20 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdMonthView} from './month-view'; -import {MdCalendarBody} from './calendar-body'; -import {MdNativeDateModule} from '@angular/material/core'; +import {MatMonthView} from './month-view'; +import {MatCalendarBody} from './calendar-body'; +import {MatNativeDateModule} from '@angular/material/core'; import {JAN, MAR} from '@angular/material/core'; -describe('MdMonthView', () => { +describe('MatMonthView', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdNativeDateModule, + MatNativeDateModule, ], declarations: [ - MdCalendarBody, - MdMonthView, + MatCalendarBody, + MatMonthView, // Test components. StandardMonthView, @@ -34,7 +34,7 @@ describe('MdMonthView', () => { fixture = TestBed.createComponent(StandardMonthView); fixture.detectChanges(); - let monthViewDebugElement = fixture.debugElement.query(By.directive(MdMonthView)); + let monthViewDebugElement = fixture.debugElement.query(By.directive(MatMonthView)); monthViewNativeElement = monthViewDebugElement.nativeElement; testComponent = fixture.componentInstance; }); @@ -87,7 +87,7 @@ describe('MdMonthView', () => { fixture = TestBed.createComponent(MonthViewWithDateFilter); fixture.detectChanges(); - let monthViewDebugElement = fixture.debugElement.query(By.directive(MdMonthView)); + let monthViewDebugElement = fixture.debugElement.query(By.directive(MatMonthView)); monthViewNativeElement = monthViewDebugElement.nativeElement; testComponent = fixture.componentInstance; }); @@ -102,7 +102,7 @@ describe('MdMonthView', () => { @Component({ - template: ``, + template: ``, }) class StandardMonthView { date = new Date(2017, JAN, 5); @@ -111,7 +111,7 @@ class StandardMonthView { @Component({ - template: `` + template: `` }) class MonthViewWithDateFilter { activeDate = new Date(2017, JAN, 1); diff --git a/src/lib/datepicker/month-view.ts b/src/lib/datepicker/month-view.ts index 6030f1a45de4..4ac52fe8b251 100644 --- a/src/lib/datepicker/month-view.ts +++ b/src/lib/datepicker/month-view.ts @@ -17,11 +17,8 @@ import { Output, ViewEncapsulation, } from '@angular/core'; -import { - DateAdapter, MATERIAL_COMPATIBILITY_MODE, MD_DATE_FORMATS, - MdDateFormats -} from '@angular/material/core'; -import {MdCalendarCell} from './calendar-body'; +import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; +import {MatCalendarCell} from './calendar-body'; import {coerceDateProperty} from './coerce-date-property'; import {createMissingDateImplError} from './datepicker-errors'; @@ -35,14 +32,13 @@ const DAYS_PER_WEEK = 7; */ @Component({ moduleId: module.id, - selector: 'md-month-view', + selector: 'mat-month-view', templateUrl: 'month-view.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdMonthView implements AfterContentInit { +export class MatMonthView implements AfterContentInit { /** * The date to display in this month view (everything other than the month and year is ignored). */ @@ -79,7 +75,7 @@ export class MdMonthView implements AfterContentInit { _monthLabel: string; /** Grid of calendar cells representing the dates of the month. */ - _weeks: MdCalendarCell[][]; + _weeks: MatCalendarCell[][]; /** The number of blank cells in the first row before the 1st of the month. */ _firstWeekOffset: number; @@ -97,12 +93,12 @@ export class MdMonthView implements AfterContentInit { _weekdays: {long: string, narrow: string}[]; constructor(@Optional() public _dateAdapter: DateAdapter, - @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats) { + @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats) { if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } if (!this._dateFormats) { - throw createMissingDateImplError('MD_DATE_FORMATS'); + throw createMissingDateImplError('MAT_DATE_FORMATS'); } const firstDayOfWeek = this._dateAdapter.getFirstDayOfWeek(); @@ -152,7 +148,7 @@ export class MdMonthView implements AfterContentInit { this._createWeekCells(); } - /** Creates MdCalendarCells for the dates in this month. */ + /** Creates MatCalendarCells for the dates in this month. */ private _createWeekCells() { let daysInMonth = this._dateAdapter.getNumDaysInMonth(this.activeDate); let dateNames = this._dateAdapter.getDateNames(); @@ -169,7 +165,7 @@ export class MdMonthView implements AfterContentInit { this.dateFilter(date); let ariaLabel = this._dateAdapter.format(date, this._dateFormats.display.dateA11yLabel); this._weeks[this._weeks.length - 1] - .push(new MdCalendarCell(i + 1, dateNames[i], ariaLabel, enabled)); + .push(new MatCalendarCell(i + 1, dateNames[i], ariaLabel, enabled)); } } diff --git a/src/lib/datepicker/public_api.ts b/src/lib/datepicker/public_api.ts index 89d5bac6d09b..661e07c2aac0 100644 --- a/src/lib/datepicker/public_api.ts +++ b/src/lib/datepicker/public_api.ts @@ -16,4 +16,4 @@ export * from './datepicker-intl'; export * from './datepicker-toggle'; export * from './month-view'; export * from './year-view'; -export * from './mat-exports'; + diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts index ee68a91e7134..4b44066a7a63 100644 --- a/src/lib/datepicker/year-view.spec.ts +++ b/src/lib/datepicker/year-view.spec.ts @@ -1,20 +1,20 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Component, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdYearView} from './year-view'; -import {MdCalendarBody} from './calendar-body'; -import {MdNativeDateModule} from '@angular/material/core'; +import {MatYearView} from './year-view'; +import {MatCalendarBody} from './calendar-body'; +import {MatNativeDateModule} from '@angular/material/core'; import {FEB, JAN, JUL, JUN, MAR} from '@angular/material/core'; -describe('MdYearView', () => { +describe('MatYearView', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdNativeDateModule, + MatNativeDateModule, ], declarations: [ - MdCalendarBody, - MdYearView, + MatCalendarBody, + MatYearView, // Test components. StandardYearView, @@ -34,7 +34,7 @@ describe('MdYearView', () => { fixture = TestBed.createComponent(StandardYearView); fixture.detectChanges(); - let yearViewDebugElement = fixture.debugElement.query(By.directive(MdYearView)); + let yearViewDebugElement = fixture.debugElement.query(By.directive(MatYearView)); yearViewNativeElement = yearViewDebugElement.nativeElement; testComponent = fixture.componentInstance; }); @@ -97,7 +97,7 @@ describe('MdYearView', () => { fixture = TestBed.createComponent(YearViewWithDateFilter); fixture.detectChanges(); - let yearViewDebugElement = fixture.debugElement.query(By.directive(MdYearView)); + let yearViewDebugElement = fixture.debugElement.query(By.directive(MatYearView)); yearViewNativeElement = yearViewDebugElement.nativeElement; testComponent = fixture.componentInstance; }); @@ -113,18 +113,18 @@ describe('MdYearView', () => { @Component({ template: ` - `, + `, }) class StandardYearView { date = new Date(2017, JAN, 5); selected = new Date(2017, MAR, 10); - @ViewChild(MdYearView) yearView: MdYearView; + @ViewChild(MatYearView) yearView: MatYearView; } @Component({ - template: `` + template: `` }) class YearViewWithDateFilter { activeDate = new Date(2017, JAN, 1); diff --git a/src/lib/datepicker/year-view.ts b/src/lib/datepicker/year-view.ts index db7699df0491..11f95149e317 100644 --- a/src/lib/datepicker/year-view.ts +++ b/src/lib/datepicker/year-view.ts @@ -17,8 +17,8 @@ import { Output, ViewEncapsulation, } from '@angular/core'; -import {DateAdapter, MD_DATE_FORMATS, MdDateFormats} from '@angular/material/core'; -import {MdCalendarCell} from './calendar-body'; +import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; +import {MatCalendarCell} from './calendar-body'; import {coerceDateProperty} from './coerce-date-property'; import {createMissingDateImplError} from './datepicker-errors'; @@ -29,13 +29,13 @@ import {createMissingDateImplError} from './datepicker-errors'; */ @Component({ moduleId: module.id, - selector: 'md-year-view, mat-year-view', + selector: 'mat-year-view', templateUrl: 'year-view.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdYearView implements AfterContentInit { +export class MatYearView implements AfterContentInit { /** The date to display in this year view (everything other than the year is ignored). */ @Input() get activeDate(): D { return this._activeDate; } @@ -64,7 +64,7 @@ export class MdYearView implements AfterContentInit { @Output() selectedChange = new EventEmitter(); /** Grid of calendar cells representing the months of the year. */ - _months: MdCalendarCell[][]; + _months: MatCalendarCell[][]; /** The label for this year (e.g. "2017"). */ _yearLabel: string; @@ -79,12 +79,12 @@ export class MdYearView implements AfterContentInit { _selectedMonth: number | null; constructor(@Optional() public _dateAdapter: DateAdapter, - @Optional() @Inject(MD_DATE_FORMATS) private _dateFormats: MdDateFormats) { + @Optional() @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats) { if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); } if (!this._dateFormats) { - throw createMissingDateImplError('MD_DATE_FORMATS'); + throw createMissingDateImplError('MAT_DATE_FORMATS'); } this._activeDate = this._dateAdapter.today(); @@ -124,12 +124,12 @@ export class MdYearView implements AfterContentInit { this._dateAdapter.getMonth(date) : null; } - /** Creates an MdCalendarCell for the given month. */ + /** Creates an MatCalendarCell for the given month. */ private _createCellForMonth(month: number, monthName: string) { let ariaLabel = this._dateAdapter.format( this._dateAdapter.createDate(this._dateAdapter.getYear(this.activeDate), month, 1), this._dateFormats.display.monthYearA11yLabel); - return new MdCalendarCell( + return new MatCalendarCell( month, monthName.toLocaleUpperCase(), ariaLabel, this._isMonthEnabled(month)); } diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts index a9a53e8826f3..f2dc3e0bd500 100644 --- a/src/lib/dialog/dialog-config.ts +++ b/src/lib/dialog/dialog-config.ts @@ -21,9 +21,9 @@ export interface DialogPosition { } /** - * Configuration for opening a modal dialog with the MdDialog service. + * Configuration for opening a modal dialog with the MatDialog service. */ -export class MdDialogConfig { +export class MatDialogConfig { /** * Where the attached component should live in Angular's *logical* component tree. diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index 0fc71833df46..372e21ee072a 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -27,7 +27,7 @@ import { TemplatePortal } from '@angular/cdk/portal'; import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y'; -import {MdDialogConfig} from './dialog-config'; +import {MatDialogConfig} from './dialog-config'; /** @@ -35,7 +35,7 @@ import {MdDialogConfig} from './dialog-config'; * attached to a DomPortalHost without an origin. * @docs-private */ -export function throwMdDialogContentAlreadyAttachedError() { +export function throwMatDialogContentAlreadyAttachedError() { throw Error('Attempting to attach dialog content after content is already attached'); } @@ -46,7 +46,7 @@ export function throwMdDialogContentAlreadyAttachedError() { */ @Component({ moduleId: module.id, - selector: 'md-dialog-container, mat-dialog-container', + selector: 'mat-dialog-container', templateUrl: 'dialog-container.html', styleUrls: ['dialog.css'], encapsulation: ViewEncapsulation.None, @@ -74,7 +74,7 @@ export function throwMdDialogContentAlreadyAttachedError() { '(@slideDialog.done)': '_onAnimationDone($event)', }, }) -export class MdDialogContainer extends BasePortalHost { +export class MatDialogContainer extends BasePortalHost { /** The portal host inside of this container into which the dialog content will be loaded. */ @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective; @@ -85,7 +85,7 @@ export class MdDialogContainer extends BasePortalHost { private _elementFocusedBeforeDialogWasOpened: HTMLElement | null = null; /** The dialog configuration. */ - _config: MdDialogConfig; + _config: MatDialogConfig; /** State of the dialog animation. */ _state: 'void' | 'enter' | 'exit' = 'enter'; @@ -114,7 +114,7 @@ export class MdDialogContainer extends BasePortalHost { */ attachComponentPortal(portal: ComponentPortal): ComponentRef { if (this._portalHost.hasAttached()) { - throwMdDialogContentAlreadyAttachedError(); + throwMatDialogContentAlreadyAttachedError(); } this._savePreviouslyFocusedElement(); @@ -127,7 +127,7 @@ export class MdDialogContainer extends BasePortalHost { */ attachTemplatePortal(portal: TemplatePortal): EmbeddedViewRef { if (this._portalHost.hasAttached()) { - throwMdDialogContentAlreadyAttachedError(); + throwMatDialogContentAlreadyAttachedError(); } this._savePreviouslyFocusedElement(); diff --git a/src/lib/dialog/dialog-content-directives.ts b/src/lib/dialog/dialog-content-directives.ts index c87e24a86f4b..99dd5c900c02 100644 --- a/src/lib/dialog/dialog-content-directives.ts +++ b/src/lib/dialog/dialog-content-directives.ts @@ -7,8 +7,8 @@ */ import {Directive, Input, OnChanges, OnInit, Optional, SimpleChanges} from '@angular/core'; -import {MdDialogRef} from './dialog-ref'; -import {MdDialogContainer} from './dialog-container'; +import {MatDialogRef} from './dialog-ref'; +import {MatDialogContainer} from './dialog-container'; /** Counter used to generate unique IDs for dialog elements. */ let dialogElementUid = 0; @@ -17,30 +17,26 @@ let dialogElementUid = 0; * Button that will close the current dialog. */ @Directive({ - selector: `button[md-dialog-close], button[mat-dialog-close], - button[mdDialogClose], button[matDialogClose]`, + selector: `button[mat-dialog-close], button[matDialogClose]`, host: { '(click)': 'dialogRef.close(dialogResult)', '[attr.aria-label]': 'ariaLabel', 'type': 'button', // Prevents accidental form submits. } }) -export class MdDialogClose implements OnChanges { +export class MatDialogClose implements OnChanges { /** Screenreader label for the button. */ @Input('aria-label') ariaLabel: string = 'Close dialog'; /** Dialog close input. */ - @Input('md-dialog-close') dialogResult: any; + @Input('mat-dialog-close') dialogResult: any; @Input('matDialogClose') _matDialogClose: any; - @Input('mdDialogClose') _mdDialogClose: any; - @Input('mat-dialog-close') _matDialogCloseResult: any; - constructor(public dialogRef: MdDialogRef) { } + constructor(public dialogRef: MatDialogRef) { } ngOnChanges(changes: SimpleChanges) { - const proxiedChange = changes._matDialogClose || changes._mdDialogClose || - changes._matDialogCloseResult; + const proxiedChange = changes._matDialogClose || changes._matDialogCloseResult; if (proxiedChange) { this.dialogResult = proxiedChange.currentValue; @@ -52,16 +48,16 @@ export class MdDialogClose implements OnChanges { * Title of a dialog element. Stays fixed to the top of the dialog when scrolling. */ @Directive({ - selector: '[md-dialog-title], [mat-dialog-title], [mdDialogTitle], [matDialogTitle]', + selector: '[mat-dialog-title], [matDialogTitle]', host: { 'class': 'mat-dialog-title', '[id]': 'id', }, }) -export class MdDialogTitle implements OnInit { - @Input() id = `md-dialog-title-${dialogElementUid++}`; +export class MatDialogTitle implements OnInit { + @Input() id = `mat-dialog-title-${dialogElementUid++}`; - constructor(@Optional() private _container: MdDialogContainer) { } + constructor(@Optional() private _container: MatDialogContainer) { } ngOnInit() { if (this._container && !this._container._ariaLabelledBy) { @@ -75,11 +71,10 @@ export class MdDialogTitle implements OnInit { * Scrollable content container of a dialog. */ @Directive({ - selector: `[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content, - [mdDialogContent], [matDialogContent]`, + selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`, host: {'class': 'mat-dialog-content'} }) -export class MdDialogContent { } +export class MatDialogContent { } /** @@ -87,8 +82,7 @@ export class MdDialogContent { } * Stays fixed to the bottom when scrolling. */ @Directive({ - selector: `[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions, - [mdDialogActions], [matDialogActions]`, + selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`, host: {'class': 'mat-dialog-actions'} }) -export class MdDialogActions { } +export class MatDialogActions { } diff --git a/src/lib/dialog/dialog-module.ts b/src/lib/dialog/dialog-module.ts index c587faf42df2..ef6e7a236080 100644 --- a/src/lib/dialog/dialog-module.ts +++ b/src/lib/dialog/dialog-module.ts @@ -11,14 +11,14 @@ import {CommonModule} from '@angular/common'; import {OverlayModule} from '@angular/cdk/overlay'; import {PortalModule} from '@angular/cdk/portal'; import {A11yModule} from '@angular/cdk/a11y'; -import {MdCommonModule} from '@angular/material/core'; -import {MdDialog, MD_DIALOG_SCROLL_STRATEGY_PROVIDER} from './dialog'; -import {MdDialogContainer} from './dialog-container'; +import {MatCommonModule} from '@angular/material/core'; +import {MatDialog, MAT_DIALOG_SCROLL_STRATEGY_PROVIDER} from './dialog'; +import {MatDialogContainer} from './dialog-container'; import { - MdDialogClose, - MdDialogContent, - MdDialogTitle, - MdDialogActions + MatDialogClose, + MatDialogContent, + MatDialogTitle, + MatDialogActions } from './dialog-content-directives'; @@ -28,27 +28,27 @@ import { OverlayModule, PortalModule, A11yModule, - MdCommonModule, + MatCommonModule, ], exports: [ - MdDialogContainer, - MdDialogClose, - MdDialogTitle, - MdDialogContent, - MdDialogActions, - MdCommonModule, + MatDialogContainer, + MatDialogClose, + MatDialogTitle, + MatDialogContent, + MatDialogActions, + MatCommonModule, ], declarations: [ - MdDialogContainer, - MdDialogClose, - MdDialogTitle, - MdDialogActions, - MdDialogContent, + MatDialogContainer, + MatDialogClose, + MatDialogTitle, + MatDialogActions, + MatDialogContent, ], providers: [ - MdDialog, - MD_DIALOG_SCROLL_STRATEGY_PROVIDER, + MatDialog, + MAT_DIALOG_SCROLL_STRATEGY_PROVIDER, ], - entryComponents: [MdDialogContainer], + entryComponents: [MatDialogContainer], }) -export class MdDialogModule {} +export class MatDialogModule {} diff --git a/src/lib/dialog/dialog-ref.ts b/src/lib/dialog/dialog-ref.ts index d4839bb486d0..98f1c5914ca6 100644 --- a/src/lib/dialog/dialog-ref.ts +++ b/src/lib/dialog/dialog-ref.ts @@ -11,7 +11,7 @@ import {filter, first, RxChain} from '@angular/cdk/rxjs'; import {DialogPosition} from './dialog-config'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; -import {MdDialogContainer} from './dialog-container'; +import {MatDialogContainer} from './dialog-container'; // TODO(jelbourn): resizing @@ -20,9 +20,9 @@ import {MdDialogContainer} from './dialog-container'; let uniqueId = 0; /** - * Reference to a dialog opened via the MdDialog service. + * Reference to a dialog opened via the MatDialog service. */ -export class MdDialogRef { +export class MatDialogRef { /** The instance of component opened into the dialog. */ componentInstance: T; @@ -43,8 +43,8 @@ export class MdDialogRef { constructor( private _overlayRef: OverlayRef, - private _containerInstance: MdDialogContainer, - public readonly id: string = `md-dialog-${uniqueId++}`) { + private _containerInstance: MatDialogContainer, + public readonly id: string = `mat-dialog-${uniqueId++}`) { // Emit when opening animation completes RxChain.from(_containerInstance._animationStateChanged) diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md index f2d42df5f1cd..c20447c35b56 100644 --- a/src/lib/dialog/dialog.md +++ b/src/lib/dialog/dialog.md @@ -1,10 +1,10 @@ -The `MdDialog` service can be used to open modal dialogs with Material Design styling and +The `MatDialog` service can be used to open modal dialogs with Material Design styling and animations. A dialog is opened by calling the `open` method with a component to be loaded and an optional -config object. The `open` method will return an instance of `MdDialogRef`: +config object. The `open` method will return an instance of `MatDialogRef`: ```ts let dialogRef = dialog.open(UserProfileComponent, { @@ -13,7 +13,7 @@ let dialogRef = dialog.open(UserProfileComponent, { }); ``` -The `MdDialogRef` provides a handle on the opened dialog. It can be used to close the dialog and to +The `MatDialogRef` provides a handle on the opened dialog. It can be used to close the dialog and to receive notification when the dialog has been closed. ```ts @@ -24,14 +24,14 @@ dialogRef.afterClosed().subscribe(result => { dialogRef.close('Pizza!'); ``` -Components created via `MdDialog` can _inject_ `MdDialogRef` and use it to close the dialog +Components created via `MatDialog` can _inject_ `MatDialogRef` and use it to close the dialog in which they are contained. When closing, an optional result value can be provided. This result value is forwarded as the result of the `afterClosed` promise. ```ts @Component({/* ... */}) export class YourDialog { - constructor(public dialogRef: MdDialogRef) { } + constructor(public dialogRef: MatDialogRef) { } closeDialog() { this.dialogRef.close('Pizza!'); @@ -48,18 +48,18 @@ let dialogRef = dialog.open(YourDialog, { }); ``` -To access the data in your dialog component, you have to use the MD_DIALOG_DATA injection token: +To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token: ```ts import {Component, Inject} from '@angular/core'; -import {MD_DIALOG_DATA} from '@angular/material'; +import {MAT_DIALOG_DATA} from '@angular/material'; @Component({ selector: 'your-dialog', template: 'passed in {{ data.name }}', }) export class YourDialog { - constructor(@Inject(MD_DIALOG_DATA) public data: any) { } + constructor(@Inject(MAT_DIALOG_DATA) public data: any) { } } ``` @@ -70,20 +70,20 @@ Several directives are available to make it easier to structure your dialog cont | Name | Description | |-----------------------|---------------------------------------------------------------------------------------------------------------| -| `md-dialog-title` | \[Attr] Dialog title, applied to a heading element (e.g., `

    `, `

    `) | -| `` | Primary scrollable content of the dialog | -| `` | Container for action buttons at the bottom of the dialog | -| `md-dialog-close` | \[Attr] Added to a ` +

    Delete all

    +Are you sure? + + - -     + + ``` Once a dialog opens, the dialog will automatically focus the first tabbable element. @@ -91,14 +91,14 @@ Once a dialog opens, the dialog will automatically focus the first tabbable elem You can control which elements are tab stops with the `tabindex` attribute ```html - + ``` ### AOT Compilation -Due to the dynamic nature of the `MdDialog`, and its usage of `ViewContainerRef#createComponent()` +Due to the dynamic nature of the `MatDialog`, and its usage of `ViewContainerRef#createComponent()` to create the component on the fly, the AOT compiler will not know to create the proper `ComponentFactory` for your dialog component by default. @@ -109,7 +109,7 @@ that the AOT compiler knows to create the `ComponentFactory` for it. @NgModule({ imports: [ // ... - MdDialogModule + MatDialogModule ], declarations: [ @@ -129,10 +129,10 @@ export class AppModule() {} ### Accessibility By default, each dialog has `role="dialog"` on the root element. The role can be changed to -`alertdialog` via the `MdDialogConfig` when opening. +`alertdialog` via the `MatDialogConfig` when opening. The `aria-label`, `aria-labelledby`, and `aria-describedby` attributes can all be set to the -dialog element via the `MdDialogConfig` as well. Each dialog should typically have a label +dialog element via the `MatDialogConfig` as well. Each dialog should typically have a label set via `aria-label` or `aria-labelledby`. #### Focus management diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts index 70c09652081d..dcd1489553d2 100644 --- a/src/lib/dialog/dialog.spec.ts +++ b/src/lib/dialog/dialog.spec.ts @@ -1,36 +1,36 @@ import { - inject, async, + ComponentFixture, fakeAsync, flushMicrotasks, - ComponentFixture, + inject, TestBed, tick, } from '@angular/core/testing'; import { - NgModule, + ChangeDetectionStrategy, Component, Directive, - ViewChild, - ViewContainerRef, - Injector, Inject, - ChangeDetectionStrategy, - TemplateRef + Injector, + NgModule, + TemplateRef, + ViewChild, + ViewContainerRef } from '@angular/core'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Location} from '@angular/common'; import {SpyLocation} from '@angular/common/testing'; -import {MdDialogContainer} from './dialog-container'; +import {MatDialogContainer} from './dialog-container'; import {OverlayContainer} from '@angular/cdk/overlay'; import {ESCAPE} from '@angular/cdk/keycodes'; import {dispatchKeyboardEvent} from '@angular/cdk/testing'; -import {MdDialogModule, MdDialogRef, MdDialog, MD_DIALOG_DATA} from './index'; +import {MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef} from './index'; -describe('MdDialog', () => { - let dialog: MdDialog; +describe('MatDialog', () => { + let dialog: MatDialog; let overlayContainerElement: HTMLElement; let testViewContainerRef: ViewContainerRef; @@ -39,7 +39,7 @@ describe('MdDialog', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDialogModule, DialogTestModule], + imports: [MatDialogModule, DialogTestModule], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); @@ -52,7 +52,7 @@ describe('MdDialog', () => { TestBed.compileComponents(); })); - beforeEach(inject([MdDialog, Location], (d: MdDialog, l: Location) => { + beforeEach(inject([MatDialog, Location], (d: MatDialog, l: Location) => { dialog = d; mockLocation = l as SpyLocation; })); @@ -76,7 +76,7 @@ describe('MdDialog', () => { expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef); viewContainerFixture.detectChanges(); - let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container')!; + let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); }); @@ -96,7 +96,7 @@ describe('MdDialog', () => { viewContainerFixture.detectChanges(); - let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container')!; + let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); dialogRef.close(); @@ -142,7 +142,7 @@ describe('MdDialog', () => { expect(dialogRef.componentInstance.dialogRef).toBe(dialogRef); viewContainerFixture.detectChanges(); - let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container')!; + let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('dialog'); }); @@ -151,7 +151,7 @@ describe('MdDialog', () => { viewContainerFixture.detectChanges(); - let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container')!; + let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('role')).toBe('alertdialog'); }); @@ -160,7 +160,7 @@ describe('MdDialog', () => { viewContainerFixture.detectChanges(); - let dialogContainerElement = overlayContainerElement.querySelector('md-dialog-container')!; + let dialogContainerElement = overlayContainerElement.querySelector('mat-dialog-container')!; expect(dialogContainerElement.getAttribute('aria-describedby')).toBe('description-element'); }); @@ -174,7 +174,7 @@ describe('MdDialog', () => { viewContainerFixture.whenStable().then(() => { expect(afterCloseCallback).toHaveBeenCalledWith('Charmander'); - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull(); }); })); @@ -183,7 +183,7 @@ describe('MdDialog', () => { // beforeClose should emit before dialog container is destroyed const beforeCloseHandler = jasmine.createSpy('beforeClose callback').and.callFake(() => { - expect(overlayContainerElement.querySelector('md-dialog-container')) + expect(overlayContainerElement.querySelector('mat-dialog-container')) .not.toBeNull('dialog container exists when beforeClose is called'); }); @@ -193,7 +193,7 @@ describe('MdDialog', () => { viewContainerFixture.whenStable().then(() => { expect(beforeCloseHandler).toHaveBeenCalledWith('Bulbasaurus'); - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull(); }); })); @@ -206,7 +206,7 @@ describe('MdDialog', () => { viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull(); }); })); @@ -223,7 +223,7 @@ describe('MdDialog', () => { onPushFixture.detectChanges(); flushMicrotasks(); - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length) + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length) .toBe(1, 'Expected one open dialog.'); dialogRef.close(); @@ -231,7 +231,7 @@ describe('MdDialog', () => { onPushFixture.detectChanges(); tick(500); - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length) + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length) .toBe(0, 'Expected no open dialogs.'); })); @@ -248,7 +248,7 @@ describe('MdDialog', () => { viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeFalsy(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy(); }); })); @@ -438,20 +438,20 @@ describe('MdDialog', () => { dialog.open(PizzaMsg); dialog.open(PizzaMsg); - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(3); + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(3); dialog.closeAll(); viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0); + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0); }); })); it('should set the proper animation states', () => { let dialogRef = dialog.open(PizzaMsg, { viewContainerRef: testViewContainerRef }); - let dialogContainer: MdDialogContainer = - viewContainerFixture.debugElement.query(By.directive(MdDialogContainer)).componentInstance; + let dialogContainer: MatDialogContainer = + viewContainerFixture.debugElement.query(By.directive(MatDialogContainer)).componentInstance; expect(dialogContainer._state).toBe('enter'); @@ -464,13 +464,13 @@ describe('MdDialog', () => { dialog.open(PizzaMsg); dialog.open(PizzaMsg); - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(2); + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); mockLocation.simulateUrlPop(''); viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0); + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0); }); })); @@ -478,13 +478,13 @@ describe('MdDialog', () => { dialog.open(PizzaMsg); dialog.open(PizzaMsg); - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(2); + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(2); mockLocation.simulateHashChange(''); viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.querySelectorAll('md-dialog-container').length).toBe(0); + expect(overlayContainerElement.querySelectorAll('mat-dialog-container').length).toBe(0); }); })); @@ -583,7 +583,7 @@ describe('MdDialog', () => { let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement; backdrop.click(); - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy(); }); it('should prevent closing via the escape key', () => { @@ -595,7 +595,7 @@ describe('MdDialog', () => { viewContainerFixture.detectChanges(); dispatchKeyboardEvent(document, 'keydown', ESCAPE); - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy(); }); it('should allow for the disableClose option to be updated while open', async(() => { @@ -609,14 +609,14 @@ describe('MdDialog', () => { let backdrop = overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement; backdrop.click(); - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeTruthy(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeTruthy(); dialogRef.disableClose = false; backdrop.click(); viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeFalsy(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeFalsy(); }); })); }); @@ -768,13 +768,13 @@ describe('MdDialog', () => { flushMicrotasks(); expect(document.activeElement.tagName) - .toBe('MD-DIALOG-CONTAINER', 'Expected dialog container to be focused.'); + .toBe('MAT-DIALOG-CONTAINER', 'Expected dialog container to be focused.'); })); }); describe('dialog content elements', () => { - let dialogRef: MdDialogRef; + let dialogRef: MatDialogRef; beforeEach(() => { dialogRef = dialog.open(ContentElementDialog); @@ -784,7 +784,7 @@ describe('MdDialog', () => { it('should close the dialog when clicking on the close button', async(() => { expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1); - (overlayContainerElement.querySelector('button[md-dialog-close]') as HTMLElement).click(); + (overlayContainerElement.querySelector('button[mat-dialog-close]') as HTMLElement).click(); viewContainerFixture.detectChanges(); viewContainerFixture.whenStable().then(() => { @@ -792,16 +792,16 @@ describe('MdDialog', () => { }); })); - it('should not close the dialog if [md-dialog-close] is applied on a non-button node', () => { + it('should not close the dialog if [mat-dialog-close] is applied on a non-button node', () => { expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1); - (overlayContainerElement.querySelector('div[md-dialog-close]') as HTMLElement).click(); + (overlayContainerElement.querySelector('div[mat-dialog-close]') as HTMLElement).click(); expect(overlayContainerElement.querySelectorAll('.mat-dialog-container').length).toBe(1); }); it('should allow for a user-specified aria-label on the close button', async(() => { - let button = overlayContainerElement.querySelector('button[md-dialog-close]')!; + let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!; dialogRef.componentInstance.closeButtonAriaLabel = 'Best close button ever'; viewContainerFixture.detectChanges(); @@ -812,12 +812,12 @@ describe('MdDialog', () => { })); it('should override the "type" attribute of the close button', () => { - let button = overlayContainerElement.querySelector('button[md-dialog-close]')!; + let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!; expect(button.getAttribute('type')).toBe('button'); }); - it('should return the [md-dialog-close] result when clicking on the close button', async(() => { + it('should return the [mat-dialog-close] result when clicking the close button', async(() => { let afterCloseCallback = jasmine.createSpy('afterClose callback'); dialogRef.afterClosed().subscribe(afterCloseCallback); @@ -830,8 +830,8 @@ describe('MdDialog', () => { })); it('should set the aria-labelledby attribute to the id of the title', async(() => { - let title = overlayContainerElement.querySelector('[md-dialog-title]')!; - let container = overlayContainerElement.querySelector('md-dialog-container')!; + let title = overlayContainerElement.querySelector('[mat-dialog-title]')!; + let container = overlayContainerElement.querySelector('mat-dialog-container')!; viewContainerFixture.whenStable().then(() => { expect(title.id).toBeTruthy('Expected title element to have an id.'); @@ -843,16 +843,16 @@ describe('MdDialog', () => { }); }); -describe('MdDialog with a parent MdDialog', () => { - let parentDialog: MdDialog; - let childDialog: MdDialog; +describe('MatDialog with a parent MatDialog', () => { + let parentDialog: MatDialog; + let childDialog: MatDialog; let overlayContainerElement: HTMLElement; - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdDialogModule, DialogTestModule], - declarations: [ComponentThatProvidesMdDialog], + imports: [MatDialogModule, DialogTestModule], + declarations: [ComponentThatProvidesMatDialog], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); @@ -865,10 +865,10 @@ describe('MdDialog with a parent MdDialog', () => { TestBed.compileComponents(); })); - beforeEach(inject([MdDialog], (d: MdDialog) => { + beforeEach(inject([MatDialog], (d: MatDialog) => { parentDialog = d; - fixture = TestBed.createComponent(ComponentThatProvidesMdDialog); + fixture = TestBed.createComponent(ComponentThatProvidesMatDialog); childDialog = fixture.componentInstance.dialog; fixture.detectChanges(); })); @@ -877,7 +877,7 @@ describe('MdDialog with a parent MdDialog', () => { overlayContainerElement.innerHTML = ''; }); - it('should close dialogs opened by a parent when calling closeAll on a child MdDialog', + it('should close dialogs opened by a parent when calling closeAll on a child MatDialog', async(() => { parentDialog.open(PizzaMsg); fixture.detectChanges(); @@ -890,11 +890,11 @@ describe('MdDialog with a parent MdDialog', () => { fixture.whenStable().then(() => { expect(overlayContainerElement.textContent!.trim()) - .toBe('', 'Expected closeAll on child MdDialog to close dialog opened by parent'); + .toBe('', 'Expected closeAll on child MatDialog to close dialog opened by parent'); }); })); - it('should close dialogs opened by a child when calling closeAll on a parent MdDialog', + it('should close dialogs opened by a child when calling closeAll on a parent MatDialog', async(() => { childDialog.open(PizzaMsg); fixture.detectChanges(); @@ -907,7 +907,7 @@ describe('MdDialog with a parent MdDialog', () => { fixture.whenStable().then(() => { expect(overlayContainerElement.textContent!.trim()) - .toBe('', 'Expected closeAll on parent MdDialog to close dialog opened by child'); + .toBe('', 'Expected closeAll on parent MatDialog to close dialog opened by child'); }); })); @@ -918,7 +918,7 @@ describe('MdDialog with a parent MdDialog', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - expect(overlayContainerElement.querySelector('md-dialog-container')).toBeNull(); + expect(overlayContainerElement.querySelector('mat-dialog-container')).toBeNull(); }); })); }); @@ -956,11 +956,11 @@ class ComponentWithChildViewContainer { }) class ComponentWithTemplateRef { localValue: string; - dialogRef: MdDialogRef; + dialogRef: MatDialogRef; @ViewChild(TemplateRef) templateRef: TemplateRef; - setDialogRef(dialogRef: MdDialogRef): string { + setDialogRef(dialogRef: MatDialogRef): string { this.dialogRef = dialogRef; return ''; } @@ -969,19 +969,19 @@ class ComponentWithTemplateRef { /** Simple component for testing ComponentPortal. */ @Component({template: '

    Pizza

    '}) class PizzaMsg { - constructor(public dialogRef: MdDialogRef, + constructor(public dialogRef: MatDialogRef, public dialogInjector: Injector) {} } @Component({ template: ` -

    This is the title

    - Lorem ipsum dolor sit amet. - - - -
    Should not close
    -     +

    This is the title

    + Lorem ipsum dolor sit amet. + + + +
    Should not close
    +     ` }) class ContentElementDialog { @@ -990,16 +990,16 @@ class ContentElementDialog { @Component({ template: '', - providers: [MdDialog] + providers: [MatDialog] }) -class ComponentThatProvidesMdDialog { - constructor(public dialog: MdDialog) {} +class ComponentThatProvidesMatDialog { + constructor(public dialog: MatDialog) {} } /** Simple component for testing ComponentPortal. */ @Component({template: ''}) class DialogWithInjectedData { - constructor(@Inject(MD_DIALOG_DATA) public data: any) { } + constructor(@Inject(MAT_DIALOG_DATA) public data: any) { } } @Component({template: '

    Pasta

    '}) @@ -1019,7 +1019,7 @@ const TEST_DIRECTIVES = [ ]; @NgModule({ - imports: [MdDialogModule, NoopAnimationsModule], + imports: [MatDialogModule, NoopAnimationsModule], exports: TEST_DIRECTIVES, declarations: TEST_DIRECTIVES, entryComponents: [ diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 0fa02226f787..7bbb1793cbb2 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -31,29 +31,29 @@ import {extendObject} from '@angular/material/core'; import {Observable} from 'rxjs/Observable'; import {defer} from 'rxjs/observable/defer'; import {Subject} from 'rxjs/Subject'; -import {MdDialogConfig} from './dialog-config'; -import {MdDialogContainer} from './dialog-container'; -import {MdDialogRef} from './dialog-ref'; +import {MatDialogConfig} from './dialog-config'; +import {MatDialogContainer} from './dialog-container'; +import {MatDialogRef} from './dialog-ref'; -export const MD_DIALOG_DATA = new InjectionToken('MdDialogData'); +export const MAT_DIALOG_DATA = new InjectionToken('MatDialogData'); /** Injection token that determines the scroll handling while the dialog is open. */ -export const MD_DIALOG_SCROLL_STRATEGY = - new InjectionToken<() => ScrollStrategy>('md-dialog-scroll-strategy'); +export const MAT_DIALOG_SCROLL_STRATEGY = + new InjectionToken<() => ScrollStrategy>('mat-dialog-scroll-strategy'); /** @docs-private */ -export function MD_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): +export function MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => BlockScrollStrategy { return () => overlay.scrollStrategies.block(); } /** @docs-private */ -export const MD_DIALOG_SCROLL_STRATEGY_PROVIDER = { - provide: MD_DIALOG_SCROLL_STRATEGY, +export const MAT_DIALOG_SCROLL_STRATEGY_PROVIDER = { + provide: MAT_DIALOG_SCROLL_STRATEGY, deps: [Overlay], - useFactory: MD_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, + useFactory: MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, }; @@ -61,19 +61,19 @@ export const MD_DIALOG_SCROLL_STRATEGY_PROVIDER = { * Service to open Material Design modal dialogs. */ @Injectable() -export class MdDialog { - private _openDialogsAtThisLevel: MdDialogRef[] = []; +export class MatDialog { + private _openDialogsAtThisLevel: MatDialogRef[] = []; private _afterAllClosedAtThisLevel = new Subject(); - private _afterOpenAtThisLevel = new Subject>(); + private _afterOpenAtThisLevel = new Subject>(); private _boundKeydown = this._handleKeydown.bind(this); /** Keeps track of the currently-open dialogs. */ - get openDialogs(): MdDialogRef[] { + get openDialogs(): MatDialogRef[] { return this._parentDialog ? this._parentDialog.openDialogs : this._openDialogsAtThisLevel; } /** Stream that emits when a dialog has been opened. */ - get afterOpen(): Subject> { + get afterOpen(): Subject> { return this._parentDialog ? this._parentDialog.afterOpen : this._afterOpenAtThisLevel; } @@ -94,8 +94,8 @@ export class MdDialog { private _overlay: Overlay, private _injector: Injector, @Optional() location: Location, - @Inject(MD_DIALOG_SCROLL_STRATEGY) private _scrollStrategy, - @Optional() @SkipSelf() private _parentDialog: MdDialog) { + @Inject(MAT_DIALOG_SCROLL_STRATEGY) private _scrollStrategy, + @Optional() @SkipSelf() private _parentDialog: MatDialog) { // Close all of the dialogs when the user goes forwards/backwards in history or when the // location hash changes. Note that this usually doesn't include clicking on links (unless @@ -113,7 +113,7 @@ export class MdDialog { * @returns Reference to the newly-opened dialog. */ open(componentOrTemplateRef: ComponentType | TemplateRef, - config?: MdDialogConfig): MdDialogRef { + config?: MatDialogConfig): MatDialogRef { const inProgressDialog = this.openDialogs.find(dialog => dialog._isAnimating()); @@ -163,7 +163,7 @@ export class MdDialog { * Finds an open dialog by its id. * @param id ID to use when looking up the dialog. */ - getDialogById(id: string): MdDialogRef | undefined { + getDialogById(id: string): MatDialogRef | undefined { return this.openDialogs.find(dialog => dialog.id === id); } @@ -172,7 +172,7 @@ export class MdDialog { * @param config The dialog configuration. * @returns A promise resolving to the OverlayRef for the created overlay. */ - private _createOverlay(config: MdDialogConfig): OverlayRef { + private _createOverlay(config: MatDialogConfig): OverlayRef { const overlayState = this._getOverlayState(config); return this._overlay.create(overlayState); } @@ -182,7 +182,7 @@ export class MdDialog { * @param dialogConfig The dialog configuration. * @returns The overlay configuration. */ - private _getOverlayState(dialogConfig: MdDialogConfig): OverlayConfig { + private _getOverlayState(dialogConfig: MatDialogConfig): OverlayConfig { const state = new OverlayConfig({ positionStrategy: this._overlay.position().global(), scrollStrategy: this._scrollStrategy(), @@ -199,37 +199,37 @@ export class MdDialog { } /** - * Attaches an MdDialogContainer to a dialog's already-created overlay. + * Attaches an MatDialogContainer to a dialog's already-created overlay. * @param overlay Reference to the dialog's underlying overlay. * @param config The dialog configuration. * @returns A promise resolving to a ComponentRef for the attached container. */ - private _attachDialogContainer(overlay: OverlayRef, config: MdDialogConfig): MdDialogContainer { - let containerPortal = new ComponentPortal(MdDialogContainer, config.viewContainerRef); - let containerRef: ComponentRef = overlay.attach(containerPortal); + private _attachDialogContainer(overlay: OverlayRef, config: MatDialogConfig): MatDialogContainer { + let containerPortal = new ComponentPortal(MatDialogContainer, config.viewContainerRef); + let containerRef: ComponentRef = overlay.attach(containerPortal); containerRef.instance._config = config; return containerRef.instance; } /** - * Attaches the user-provided component to the already-created MdDialogContainer. + * Attaches the user-provided component to the already-created MatDialogContainer. * @param componentOrTemplateRef The type of component being loaded into the dialog, * or a TemplateRef to instantiate as the content. - * @param dialogContainer Reference to the wrapping MdDialogContainer. + * @param dialogContainer Reference to the wrapping MatDialogContainer. * @param overlayRef Reference to the overlay in which the dialog resides. * @param config The dialog configuration. - * @returns A promise resolving to the MdDialogRef that should be returned to the user. + * @returns A promise resolving to the MatDialogRef that should be returned to the user. */ private _attachDialogContent( componentOrTemplateRef: ComponentType | TemplateRef, - dialogContainer: MdDialogContainer, + dialogContainer: MatDialogContainer, overlayRef: OverlayRef, - config: MdDialogConfig): MdDialogRef { + config: MatDialogConfig): MatDialogRef { // Create a reference to the dialog we're creating in order to give the user a handle // to modify and close it. - const dialogRef = new MdDialogRef(overlayRef, dialogContainer, config.id); + const dialogRef = new MatDialogRef(overlayRef, dialogContainer, config.id); // When the dialog backdrop is clicked, we want to close it. if (config.hasBackdrop) { @@ -267,16 +267,16 @@ export class MdDialog { * @returns The custom injector that can be used inside the dialog. */ private _createInjector( - config: MdDialogConfig, - dialogRef: MdDialogRef, - dialogContainer: MdDialogContainer): PortalInjector { + config: MatDialogConfig, + dialogRef: MatDialogRef, + dialogContainer: MatDialogContainer): PortalInjector { const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; const injectionTokens = new WeakMap(); - injectionTokens.set(MdDialogRef, dialogRef); - injectionTokens.set(MdDialogContainer, dialogContainer); - injectionTokens.set(MD_DIALOG_DATA, config.data); + injectionTokens.set(MatDialogRef, dialogRef); + injectionTokens.set(MatDialogContainer, dialogContainer); + injectionTokens.set(MAT_DIALOG_DATA, config.data); return new PortalInjector(userInjector || this._injector, injectionTokens); } @@ -285,7 +285,7 @@ export class MdDialog { * Removes a dialog from the array of open dialogs. * @param dialogRef Dialog to be removed. */ - private _removeOpenDialog(dialogRef: MdDialogRef) { + private _removeOpenDialog(dialogRef: MatDialogRef) { const index = this.openDialogs.indexOf(dialogRef); if (index > -1) { @@ -318,6 +318,6 @@ export class MdDialog { * @param config Config to be modified. * @returns The new configuration object. */ -function _applyConfigDefaults(config?: MdDialogConfig): MdDialogConfig { - return extendObject(new MdDialogConfig(), config); +function _applyConfigDefaults(config?: MatDialogConfig): MatDialogConfig { + return extendObject(new MatDialogConfig(), config); } diff --git a/src/lib/dialog/mat-exports.ts b/src/lib/dialog/mat-exports.ts deleted file mode 100644 index ce9f2daf51c3..000000000000 --- a/src/lib/dialog/mat-exports.ts +++ /dev/null @@ -1,40 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_DIALOG_DATA, - MD_DIALOG_SCROLL_STRATEGY, - MD_DIALOG_SCROLL_STRATEGY_PROVIDER, - MD_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY, - MdDialog, -} from './dialog'; -import {MdDialogConfig} from './dialog-config'; -import {MdDialogContainer} from './dialog-container'; -import { - MdDialogActions, - MdDialogClose, - MdDialogContent, - MdDialogTitle, -} from './dialog-content-directives'; -import {MdDialogModule} from './dialog-module'; -import {MdDialogRef} from './dialog-ref'; - - -export {MD_DIALOG_DATA as MAT_DIALOG_DATA}; -export {MD_DIALOG_SCROLL_STRATEGY as MAT_DIALOG_SCROLL_STRATEGY}; -export {MD_DIALOG_SCROLL_STRATEGY_PROVIDER as MAT_DIALOG_SCROLL_STRATEGY_PROVIDER}; -export {MD_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_DIALOG_SCROLL_STRATEGY_PROVIDER_FACTORY}; -export {MdDialog as MatDialog}; -export {MdDialogActions as MatDialogActions}; -export {MdDialogClose as MatDialogClose}; -export {MdDialogConfig as MatDialogConfig}; -export {MdDialogContainer as MatDialogContainer}; -export {MdDialogContent as MatDialogContent}; -export {MdDialogModule as MatDialogModule}; -export {MdDialogRef as MatDialogRef}; -export {MdDialogTitle as MatDialogTitle}; diff --git a/src/lib/dialog/public_api.ts b/src/lib/dialog/public_api.ts index 040eb5aff84f..39d91ce6af2e 100644 --- a/src/lib/dialog/public_api.ts +++ b/src/lib/dialog/public_api.ts @@ -12,4 +12,4 @@ export * from './dialog-container'; export * from './dialog-content-directives'; export * from './dialog-config'; export * from './dialog-ref'; -export * from './mat-exports'; + diff --git a/src/lib/expansion/accordion.spec.ts b/src/lib/expansion/accordion.spec.ts index f29dd5e5ab5e..f1f1e6047788 100644 --- a/src/lib/expansion/accordion.spec.ts +++ b/src/lib/expansion/accordion.spec.ts @@ -2,7 +2,7 @@ import {async, TestBed} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {MdExpansionModule} from './index'; +import {MatExpansionModule} from './index'; describe('CdkAccordion', () => { @@ -10,7 +10,7 @@ describe('CdkAccordion', () => { TestBed.configureTestingModule({ imports: [ BrowserAnimationsModule, - MdExpansionModule + MatExpansionModule ], declarations: [ SetOfItems @@ -49,16 +49,16 @@ describe('CdkAccordion', () => { @Component({template: ` - - - Summary + + + Summary

    Content

    -     - - Summary + + + Summary

    Content

    -     -     `}) + + `}) class SetOfItems { multi: boolean = false; firstPanelExpanded: boolean = false; diff --git a/src/lib/expansion/accordion.ts b/src/lib/expansion/accordion.ts index 8439c30d83af..17c72e0a2831 100644 --- a/src/lib/expansion/accordion.ts +++ b/src/lib/expansion/accordion.ts @@ -9,8 +9,8 @@ import {Directive, Input} from '@angular/core'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -/** MdAccordion's display modes. */ -export type MdAccordionDisplayMode = 'default' | 'flat'; +/** MatAccordion's display modes. */ +export type MatAccordionDisplayMode = 'default' | 'flat'; /** Unique ID counter */ let nextId = 0; @@ -43,16 +43,16 @@ export class CdkAccordion { * flat - no spacing is placed around expanded panels, showing all panels at the same * elevation. */ - @Input() displayMode: MdAccordionDisplayMode = 'default'; + @Input() displayMode: MatAccordionDisplayMode = 'default'; } /** * Directive for a Material Design Accordion. */ @Directive({ - selector: 'mat-accordion, md-accordion', + selector: 'mat-accordion', host: { class: 'mat-accordion' } }) -export class MdAccordion extends CdkAccordion {} +export class MatAccordion extends CdkAccordion {} diff --git a/src/lib/expansion/expansion-module.ts b/src/lib/expansion/expansion-module.ts index 80119c2c93cf..156b774476ac 100644 --- a/src/lib/expansion/expansion-module.ts +++ b/src/lib/expansion/expansion-module.ts @@ -8,37 +8,37 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {CompatibilityModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/material/core'; +import {UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '@angular/material/core'; import {A11yModule} from '@angular/cdk/a11y'; -import {CdkAccordion, MdAccordion} from './accordion'; -import {MdExpansionPanel, MdExpansionPanelActionRow} from './expansion-panel'; +import {CdkAccordion, MatAccordion} from './accordion'; +import {MatExpansionPanel, MatExpansionPanelActionRow} from './expansion-panel'; import { - MdExpansionPanelDescription, - MdExpansionPanelHeader, - MdExpansionPanelTitle, + MatExpansionPanelDescription, + MatExpansionPanelHeader, + MatExpansionPanelTitle, } from './expansion-panel-header'; @NgModule({ - imports: [CompatibilityModule, CommonModule, A11yModule], + imports: [CommonModule, A11yModule], exports: [ CdkAccordion, - MdAccordion, - MdExpansionPanel, - MdExpansionPanelActionRow, - MdExpansionPanelHeader, - MdExpansionPanelTitle, - MdExpansionPanelDescription + MatAccordion, + MatExpansionPanel, + MatExpansionPanelActionRow, + MatExpansionPanelHeader, + MatExpansionPanelTitle, + MatExpansionPanelDescription ], declarations: [ CdkAccordion, - MdAccordion, - MdExpansionPanel, - MdExpansionPanelActionRow, - MdExpansionPanelHeader, - MdExpansionPanelTitle, - MdExpansionPanelDescription + MatAccordion, + MatExpansionPanel, + MatExpansionPanelActionRow, + MatExpansionPanelHeader, + MatExpansionPanelTitle, + MatExpansionPanelDescription ], providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER] }) -export class MdExpansionModule {} +export class MatExpansionModule {} diff --git a/src/lib/expansion/expansion-panel-header.html b/src/lib/expansion/expansion-panel-header.html index 20373a9cb3ef..41c329965859 100644 --- a/src/lib/expansion/expansion-panel-header.html +++ b/src/lib/expansion/expansion-panel-header.html @@ -1,6 +1,6 @@ - - + + component. + * component. * - * This component corresponds to the header element of an . + * This component corresponds to the header element of an . * * Please refer to README.md for examples on how to use it. */ @Component({ moduleId: module.id, - selector: 'md-expansion-panel-header, mat-expansion-panel-header', + selector: 'mat-expansion-panel-header', styleUrls: ['./expansion-panel-header.css'], templateUrl: './expansion-panel-header.html', encapsulation: ViewEncapsulation.None, @@ -81,12 +81,12 @@ import {EXPANSION_PANEL_ANIMATION_TIMING, MdExpansionPanel} from './expansion-pa ]), ], }) -export class MdExpansionPanelHeader implements OnDestroy { +export class MatExpansionPanelHeader implements OnDestroy { private _parentChangeSubscription = Subscription.EMPTY; constructor( renderer: Renderer2, - @Host() public panel: MdExpansionPanel, + @Host() public panel: MatExpansionPanel, private _element: ElementRef, private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef) { @@ -157,27 +157,27 @@ export class MdExpansionPanelHeader implements OnDestroy { } /** - * directive. + * directive. * - * This direction is to be used inside of the MdExpansionPanelHeader component. + * This direction is to be used inside of the MatExpansionPanelHeader component. */ @Directive({ - selector: 'md-panel-description, mat-panel-description', + selector: 'mat-panel-description', host : { class: 'mat-expansion-panel-header-description' } }) -export class MdExpansionPanelDescription {} +export class MatExpansionPanelDescription {} /** - * directive. + * directive. * - * This direction is to be used inside of the MdExpansionPanelHeader component. + * This direction is to be used inside of the MatExpansionPanelHeader component. */ @Directive({ - selector: 'md-panel-title, mat-panel-title', + selector: 'mat-panel-title', host : { class: 'mat-expansion-panel-header-title' } }) -export class MdExpansionPanelTitle {} +export class MatExpansionPanelTitle {} diff --git a/src/lib/expansion/expansion-panel.html b/src/lib/expansion/expansion-panel.html index 751e5176a0ab..93e8f6f8e47e 100644 --- a/src/lib/expansion/expansion-panel.html +++ b/src/lib/expansion/expansion-panel.html @@ -1,8 +1,8 @@ - +
    - +
    diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts index 5ed09e2fcf79..cf4a209f4c9d 100644 --- a/src/lib/expansion/expansion-panel.ts +++ b/src/lib/expansion/expansion-panel.ts @@ -23,29 +23,29 @@ import { } from '@angular/core'; import {CanDisable, mixinDisabled, UniqueSelectionDispatcher} from '@angular/material/core'; import {Subject} from 'rxjs/Subject'; -import {MdAccordion} from './accordion'; +import {MatAccordion} from './accordion'; import {AccordionItem} from './accordion-item'; -// Boilerplate for applying mixins to MdExpansionPanel. +// Boilerplate for applying mixins to MatExpansionPanel. /** @docs-private */ -export class MdExpansionPanelBase extends AccordionItem { - constructor(accordion: MdAccordion, +export class MatExpansionPanelBase extends AccordionItem { + constructor(accordion: MatAccordion, _changeDetectorRef: ChangeDetectorRef, _uniqueSelectionDispatcher: UniqueSelectionDispatcher) { super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher); } } -export const _MdExpansionPanelMixinBase = mixinDisabled(MdExpansionPanelBase); +export const _MatExpansionPanelMixinBase = mixinDisabled(MatExpansionPanelBase); -/** MdExpansionPanel's states. */ -export type MdExpansionPanelState = 'expanded' | 'collapsed'; +/** MatExpansionPanel's states. */ +export type MatExpansionPanelState = 'expanded' | 'collapsed'; /** Time and timing curve for expansion panel animations. */ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,1)'; /** - * component. + * component. * * This component can be used as a single element to show expandable content, or as one of * multiple children of an element with the CdkAccordion directive attached. @@ -55,7 +55,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2, @Component({ moduleId: module.id, styleUrls: ['./expansion-panel.css'], - selector: 'md-expansion-panel, mat-expansion-panel', + selector: 'mat-expansion-panel', templateUrl: './expansion-panel.html', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, @@ -67,7 +67,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2, '[class.mat-expansion-panel-spacing]': '_hasSpacing()', }, providers: [ - {provide: AccordionItem, useExisting: forwardRef(() => MdExpansionPanel)} + {provide: AccordionItem, useExisting: forwardRef(() => MatExpansionPanel)} ], animations: [ trigger('bodyExpansion', [ @@ -77,7 +77,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2, ]), ], }) -export class MdExpansionPanel extends _MdExpansionPanelMixinBase +export class MatExpansionPanel extends _MatExpansionPanelMixinBase implements CanDisable, OnChanges, OnDestroy { /** Whether the toggle indicator should be hidden. */ @Input() hideToggle: boolean = false; @@ -85,7 +85,7 @@ export class MdExpansionPanel extends _MdExpansionPanelMixinBase /** Stream that emits for changes in `@Input` properties. */ _inputChanges = new Subject(); - constructor(@Optional() @Host() accordion: MdAccordion, + constructor(@Optional() @Host() accordion: MatAccordion, _changeDetectorRef: ChangeDetectorRef, _uniqueSelectionDispatcher: UniqueSelectionDispatcher) { super(accordion, _changeDetectorRef, _uniqueSelectionDispatcher); @@ -109,7 +109,7 @@ export class MdExpansionPanel extends _MdExpansionPanelMixinBase } /** Gets the expanded state string. */ - _getExpandedState(): MdExpansionPanelState { + _getExpandedState(): MatExpansionPanelState { return this.expanded ? 'expanded' : 'collapsed'; } @@ -123,9 +123,9 @@ export class MdExpansionPanel extends _MdExpansionPanelMixinBase } @Directive({ - selector: 'mat-action-row, md-action-row', + selector: 'mat-action-row', host: { class: 'mat-action-row' } }) -export class MdExpansionPanelActionRow {} +export class MatExpansionPanelActionRow {} diff --git a/src/lib/expansion/expansion.md b/src/lib/expansion/expansion.md index 14ad08aaacee..e52b1f069d2d 100644 --- a/src/lib/expansion/expansion.md +++ b/src/lib/expansion/expansion.md @@ -1,4 +1,4 @@ -`` provides an expandable details-summary view. +`` provides an expandable details-summary view. @@ -8,9 +8,9 @@ Each expansion-panel must include a header and may optionally include an action #### Header -The `` shows a summary of the panel content and acts +The `` shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an -`` and an ``, which format the content of the +`` and an ``, which format the content of the header to align with Material Design specifications. By default, the expansion-panel header includes a toggle icon at the end of the @@ -18,19 +18,19 @@ header to indicate the expansion state. This icon can be hidden via the `hideToggle` property. ```html - - - + + + This is the expansion title - - + + This is a summary of the content - - +     +

    This is the primary content of the panel.

    - + ``` #### Action bar @@ -39,17 +39,17 @@ Actions may optionally be included at the bottom of the panel, visible only when is in its expanded state. ```html - - + + This is the expansion title - +

    This is the primary content of the panel.

    - - - -     + + + + ``` #### Disabling a panel @@ -58,14 +58,14 @@ Expansion panels can be disabled using the `disabled` attribute. A disabled expa be toggled by the user, but can still be manipulated using programmatically. ```html - - + + This is the expansion title - - + + This is a summary of the content - - + + ``` @@ -76,27 +76,27 @@ expansions state to be set independently of each other. When `multi="false"` (de panel can be expanded at a given time: ```html - + - - + + This is the expansion 1 title - + This the expansion 1 content - + - - + + This is the expansion 2 title - + This the expansion 2 content - + - + ``` ### Accessibility diff --git a/src/lib/expansion/expansion.spec.ts b/src/lib/expansion/expansion.spec.ts index 5c0033a326e4..53a0cae367c4 100644 --- a/src/lib/expansion/expansion.spec.ts +++ b/src/lib/expansion/expansion.spec.ts @@ -2,15 +2,15 @@ import {async, TestBed, fakeAsync, tick, ComponentFixture} from '@angular/core/t import {Component, ViewChild} from '@angular/core'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MdExpansionModule, MdExpansionPanel} from './index'; +import {MatExpansionModule, MatExpansionPanel} from './index'; -describe('MdExpansionPanel', () => { +describe('MatExpansionPanel', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ NoopAnimationsModule, - MdExpansionModule + MatExpansionModule ], declarations: [ PanelWithContent, @@ -82,7 +82,7 @@ describe('MdExpansionPanel', () => { let fixture = TestBed.createComponent(PanelWithCustomMargin); fixture.detectChanges(); - let panel = fixture.debugElement.query(By.css('md-expansion-panel')); + let panel = fixture.debugElement.query(By.css('mat-expansion-panel')); let styles = getComputedStyle(panel.nativeElement); expect(panel.componentInstance._hasSpacing()).toBe(false); @@ -146,8 +146,8 @@ describe('MdExpansionPanel', () => { beforeEach(() => { fixture = TestBed.createComponent(PanelWithContent); fixture.detectChanges(); - panel = fixture.debugElement.query(By.css('md-expansion-panel')).nativeElement; - header = fixture.debugElement.query(By.css('md-expansion-panel-header')).nativeElement; + panel = fixture.debugElement.query(By.css('mat-expansion-panel')).nativeElement; + header = fixture.debugElement.query(By.css('mat-expansion-panel-header')).nativeElement; }); it('should toggle the aria-disabled attribute on the header', () => { @@ -202,15 +202,15 @@ describe('MdExpansionPanel', () => { @Component({ template: ` - - Panel Title + Panel Title

    Some content

    -     ` + ` }) class PanelWithContent { expanded = false; @@ -218,21 +218,21 @@ class PanelWithContent { disabled = false; openCallback = jasmine.createSpy('openCallback'); closeCallback = jasmine.createSpy('closeCallback'); - @ViewChild(MdExpansionPanel) panel: MdExpansionPanel; + @ViewChild(MatExpansionPanel) panel: MatExpansionPanel; } @Component({ styles: [ - `md-expansion-panel { + `mat-expansion-panel { margin: 13px 37px; }` ], template: ` - + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores officia, aliquam dicta corrupti maxime voluptate accusamus impedit atque incidunt pariatur. - ` + ` }) class PanelWithCustomMargin { expanded: boolean = false; diff --git a/src/lib/expansion/mat-exports.ts b/src/lib/expansion/mat-exports.ts deleted file mode 100644 index be1bed20796f..000000000000 --- a/src/lib/expansion/mat-exports.ts +++ /dev/null @@ -1,31 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdAccordion, MdAccordionDisplayMode} from './accordion'; -import {MdExpansionModule} from './expansion-module'; -import { - MdExpansionPanel, - MdExpansionPanelActionRow, - MdExpansionPanelState, -} from './expansion-panel'; -import { - MdExpansionPanelDescription, - MdExpansionPanelHeader, - MdExpansionPanelTitle, -} from './expansion-panel-header'; - - -export {MdAccordion as MatAccordion}; -export {MdAccordionDisplayMode as MatAccordionDisplayMode}; -export {MdExpansionModule as MatExpansionModule}; -export {MdExpansionPanel as MatExpansionPanel}; -export {MdExpansionPanelActionRow as MatExpansionPanelActionRow}; -export {MdExpansionPanelDescription as MatExpansionPanelDescription}; -export {MdExpansionPanelHeader as MatExpansionPanelHeader}; -export {MdExpansionPanelState as MatExpansionPanelState}; -export {MdExpansionPanelTitle as MatExpansionPanelTitle}; diff --git a/src/lib/expansion/public_api.ts b/src/lib/expansion/public_api.ts index d2e7b1224299..919561d57005 100644 --- a/src/lib/expansion/public_api.ts +++ b/src/lib/expansion/public_api.ts @@ -9,19 +9,19 @@ export * from './expansion-module'; export { CdkAccordion, - MdAccordion, - MdAccordionDisplayMode + MatAccordion, + MatAccordionDisplayMode } from './accordion'; export {AccordionItem} from './accordion-item'; export { - MdExpansionPanel, - MdExpansionPanelState, - MdExpansionPanelActionRow + MatExpansionPanel, + MatExpansionPanelState, + MatExpansionPanelActionRow } from './expansion-panel'; export { - MdExpansionPanelHeader, - MdExpansionPanelDescription, - MdExpansionPanelTitle + MatExpansionPanelHeader, + MatExpansionPanelDescription, + MatExpansionPanelTitle } from './expansion-panel-header'; -export * from './mat-exports'; + diff --git a/src/lib/form-field/error.ts b/src/lib/form-field/error.ts index 40d5bb1762ec..21c659d5dd55 100644 --- a/src/lib/form-field/error.ts +++ b/src/lib/form-field/error.ts @@ -14,13 +14,13 @@ let nextUniqueId = 0; /** Single error message to be shown underneath the form field. */ @Directive({ - selector: 'md-error, mat-error', + selector: 'mat-error', host: { 'class': 'mat-error', 'role': 'alert', '[attr.id]': 'id', } }) -export class MdError { +export class MatError { @Input() id: string = `mat-error-${nextUniqueId++}`; } diff --git a/src/lib/form-field/form-field-control.ts b/src/lib/form-field/form-field-control.ts index 8bbf3b6cf12c..f2f006421a44 100644 --- a/src/lib/form-field/form-field-control.ts +++ b/src/lib/form-field/form-field-control.ts @@ -10,13 +10,13 @@ import {Observable} from 'rxjs/Observable'; import {NgControl} from '@angular/forms'; -/** An interface which allows a control to work inside of a `MdFormField`. */ -export abstract class MdFormFieldControl { +/** An interface which allows a control to work inside of a `MatFormField`. */ +export abstract class MatFormFieldControl { /** The value of the control. */ value: T; /** - * Stream that emits whenever the state of the control changes such that the parent `MdFormField` + * Stream that emits whenever the state of the control changes such that the parent `MatFormField` * needs to run change detection. */ readonly stateChanges: Observable; @@ -36,7 +36,7 @@ export abstract class MdFormFieldControl { /** Whether the control is empty. */ readonly empty: boolean; - /** Whether the `MdFormField` label should try to float. */ + /** Whether the `MatFormField` label should try to float. */ readonly shouldPlaceholderFloat: boolean; /** Whether the control is required. */ @@ -49,7 +49,7 @@ export abstract class MdFormFieldControl { readonly errorState: boolean; /** - * An optional name for the control type that can be used to distinguish `md-form-field` elements + * An optional name for the control type that can be used to distinguish `mat-form-field` elements * based on their control type. The form field will add a class, * `mat-form-field-type-{{controlType}}` to its root element. */ diff --git a/src/lib/form-field/form-field-errors.ts b/src/lib/form-field/form-field-errors.ts index 008393915e4c..21869d7fc271 100644 --- a/src/lib/form-field/form-field-errors.ts +++ b/src/lib/form-field/form-field-errors.ts @@ -7,17 +7,17 @@ */ /** @docs-private */ -export function getMdFormFieldPlaceholderConflictError(): Error { +export function getMatFormFieldPlaceholderConflictError(): Error { return Error('Placeholder attribute and child element were both specified.'); } /** @docs-private */ -export function getMdFormFieldDuplicatedHintError(align: string): Error { +export function getMatFormFieldDuplicatedHintError(align: string): Error { return Error(`A hint was already declared for 'align="${align}"'.`); } /** @docs-private */ -export function getMdFormFieldMissingControlError(): Error { - return Error('md-form-field must contain a MdFormFieldControl. ' + - 'Did you forget to add mdInput to the native input or textarea element?'); +export function getMatFormFieldMissingControlError(): Error { + return Error('mat-form-field must contain a MatFormFieldControl. ' + + 'Did you forget to add matInput to the native input or textarea element?'); } diff --git a/src/lib/form-field/form-field-module.ts b/src/lib/form-field/form-field-module.ts index 46f51cd12a8e..eecad6ddb328 100644 --- a/src/lib/form-field/form-field-module.ts +++ b/src/lib/form-field/form-field-module.ts @@ -9,34 +9,34 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {PlatformModule} from '@angular/cdk/platform'; -import {MdError} from './error'; -import {MdFormField} from './form-field'; -import {MdHint} from './hint'; -import {MdPlaceholder} from './placeholder'; -import {MdPrefix} from './prefix'; -import {MdSuffix} from './suffix'; +import {MatError} from './error'; +import {MatFormField} from './form-field'; +import {MatHint} from './hint'; +import {MatPlaceholder} from './placeholder'; +import {MatPrefix} from './prefix'; +import {MatSuffix} from './suffix'; @NgModule({ declarations: [ - MdError, - MdHint, - MdFormField, - MdPlaceholder, - MdPrefix, - MdSuffix, + MatError, + MatHint, + MatFormField, + MatPlaceholder, + MatPrefix, + MatSuffix, ], imports: [ CommonModule, PlatformModule, ], exports: [ - MdError, - MdHint, - MdFormField, - MdPlaceholder, - MdPrefix, - MdSuffix, + MatError, + MatHint, + MatFormField, + MatPlaceholder, + MatPrefix, + MatSuffix, ], }) -export class MdFormFieldModule {} +export class MatFormFieldModule {} diff --git a/src/lib/form-field/form-field.html b/src/lib/form-field/form-field.html index 4bf46aec7a8a..3ab526ce0e7e 100644 --- a/src/lib/form-field/form-field.html +++ b/src/lib/form-field/form-field.html @@ -2,7 +2,7 @@
    - +
    @@ -20,7 +20,7 @@ [class.mat-warn]="color == 'warn'" #placeholder *ngIf="_hasPlaceholder()"> - + {{_control.placeholder}}
    - +
    @@ -45,16 +45,16 @@
    - +
    {{hintLabel}}
    - +
    - +
    diff --git a/src/lib/form-field/form-field.scss b/src/lib/form-field/form-field.scss index 33de45151f6e..a3e5bbf295d2 100644 --- a/src/lib/form-field/form-field.scss +++ b/src/lib/form-field/form-field.scss @@ -118,7 +118,7 @@ $mat-form-field-underline-height: 1px !default; // Pseudo-class for Chrome and Safari auto-fill to move the placeholder to the floating position. // This is necessary because these browsers do not actually fire any events when a form auto-fill is -// occurring. Once the autofill is committed, a change event happen and the regular md-form-field +// occurring. Once the autofill is committed, a change event happen and the regular mat-form-field // classes take over to fulfill this behaviour. .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-placeholder { diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index 8d320f2f7fbc..75c2991d6b5f 100644 --- a/src/lib/form-field/form-field.ts +++ b/src/lib/form-field/form-field.ts @@ -28,21 +28,21 @@ import { } from '@angular/core'; import { FloatPlaceholderType, - MD_PLACEHOLDER_GLOBAL_OPTIONS, + MAT_PLACEHOLDER_GLOBAL_OPTIONS, PlaceholderOptions, } from '@angular/material/core'; import {fromEvent} from 'rxjs/observable/fromEvent'; -import {MdError} from './error'; -import {MdFormFieldControl} from './form-field-control'; +import {MatError} from './error'; +import {MatFormFieldControl} from './form-field-control'; import { - getMdFormFieldDuplicatedHintError, - getMdFormFieldMissingControlError, - getMdFormFieldPlaceholderConflictError, + getMatFormFieldDuplicatedHintError, + getMatFormFieldMissingControlError, + getMatFormFieldPlaceholderConflictError, } from './form-field-errors'; -import {MdHint} from './hint'; -import {MdPlaceholder} from './placeholder'; -import {MdPrefix} from './prefix'; -import {MdSuffix} from './suffix'; +import {MatHint} from './hint'; +import {MatPlaceholder} from './placeholder'; +import {MatPrefix} from './prefix'; +import {MatSuffix} from './suffix'; let nextUniqueId = 0; @@ -52,11 +52,11 @@ let nextUniqueId = 0; @Component({ moduleId: module.id, // TODO(mmalerba): the input-container selectors and classes are deprecated and will be removed. - selector: 'md-input-container, mat-input-container, md-form-field, mat-form-field', + selector: 'mat-input-container, mat-form-field', templateUrl: 'form-field.html', - // MdInput is a directive and can't have styles, so we need to include its styles here. - // The MdInput styles are fairly minimal so it shouldn't be a big deal for people who aren't using - // MdInput. + // MatInput is a directive and can't have styles, so we need to include its styles here. + // The MatInput styles are fairly minimal so it shouldn't be a big deal for people who + // aren't using MatInput. styleUrls: ['form-field.css', '../input/input.css'], animations: [ // TODO(mmalerba): Use angular animations for placeholder animation as well. @@ -91,7 +91,7 @@ let nextUniqueId = 0; changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdFormField implements AfterViewInit, AfterContentInit, AfterContentChecked { +export class MatFormField implements AfterViewInit, AfterContentInit, AfterContentChecked { private _placeholderOptions: PlaceholderOptions; /** Color of the form field underline, based on the theme. */ @@ -121,7 +121,7 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten /** Whether the placeholder can float or not. */ get _canPlaceholderFloat() { return this._floatPlaceholder !== 'never'; } - /** State of the md-hint and md-error animations. */ + /** State of the mat-hint and mat-error animations. */ _subscriptAnimationState: string = ''; /** Text for the form field hint. */ @@ -134,7 +134,7 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten private _hintLabel = ''; // Unique id for the hint label. - _hintLabelId: string = `md-hint-${nextUniqueId++}`; + _hintLabelId: string = `mat-hint-${nextUniqueId++}`; /** Whether the placeholder should always float, never float or float as the user types. */ @Input() @@ -151,18 +151,18 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten @ViewChild('underline') underlineRef: ElementRef; @ViewChild('connectionContainer') _connectionContainerRef: ElementRef; @ViewChild('placeholder') private _placeholder: ElementRef; - @ContentChild(MdFormFieldControl) _control: MdFormFieldControl; - @ContentChild(MdPlaceholder) _placeholderChild: MdPlaceholder; - @ContentChildren(MdError) _errorChildren: QueryList; - @ContentChildren(MdHint) _hintChildren: QueryList; - @ContentChildren(MdPrefix) _prefixChildren: QueryList; - @ContentChildren(MdSuffix) _suffixChildren: QueryList; + @ContentChild(MatFormFieldControl) _control: MatFormFieldControl; + @ContentChild(MatPlaceholder) _placeholderChild: MatPlaceholder; + @ContentChildren(MatError) _errorChildren: QueryList; + @ContentChildren(MatHint) _hintChildren: QueryList; + @ContentChildren(MatPrefix) _prefixChildren: QueryList; + @ContentChildren(MatSuffix) _suffixChildren: QueryList; constructor( public _elementRef: ElementRef, private _renderer: Renderer2, private _changeDetectorRef: ChangeDetectorRef, - @Optional() @Inject(MD_PLACEHOLDER_GLOBAL_OPTIONS) placeholderOptions: PlaceholderOptions) { + @Optional() @Inject(MAT_PLACEHOLDER_GLOBAL_OPTIONS) placeholderOptions: PlaceholderOptions) { this._placeholderOptions = placeholderOptions ? placeholderOptions : {}; this.floatPlaceholder = this._placeholderOptions.float || 'auto'; } @@ -244,11 +244,11 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten /** * Ensure that there is only one placeholder (either `placeholder` attribute on the child control - * or child element with the `md-placeholder` directive). + * or child element with the `mat-placeholder` directive). */ private _validatePlaceholders() { if (this._control.placeholder && this._placeholderChild) { - throw getMdFormFieldPlaceholderConflictError(); + throw getMatFormFieldPlaceholderConflictError(); } } @@ -259,22 +259,22 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten } /** - * Ensure that there is a maximum of one of each `` alignment specified, with the + * 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; - let endHint: MdHint; - this._hintChildren.forEach((hint: MdHint) => { + let startHint: MatHint; + let endHint: MatHint; + this._hintChildren.forEach((hint: MatHint) => { if (hint.align == 'start') { if (startHint || this.hintLabel) { - throw getMdFormFieldDuplicatedHintError('start'); + throw getMatFormFieldDuplicatedHintError('start'); } startHint = hint; } else if (hint.align == 'end') { if (endHint) { - throw getMdFormFieldDuplicatedHintError('end'); + throw getMatFormFieldDuplicatedHintError('end'); } endHint = hint; } @@ -306,7 +306,7 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten ids.push(endHint.id); } } else if (this._errorChildren) { - ids = this._errorChildren.map(mdError => mdError.id); + ids = this._errorChildren.map(error => error.id); } this._control.setDescribedByIds(ids); @@ -316,7 +316,7 @@ export class MdFormField implements AfterViewInit, AfterContentInit, AfterConten /** Throws an error if the form field's control is missing. */ protected _validateControlChild() { if (!this._control) { - throw getMdFormFieldMissingControlError(); + throw getMatFormFieldMissingControlError(); } } } diff --git a/src/lib/form-field/hint.ts b/src/lib/form-field/hint.ts index 3a5e21857aeb..8b0079d84f0e 100644 --- a/src/lib/form-field/hint.ts +++ b/src/lib/form-field/hint.ts @@ -14,7 +14,7 @@ let nextUniqueId = 0; /** Hint text to be shown underneath the form field control. */ @Directive({ - selector: 'md-hint, mat-hint', + selector: 'mat-hint', host: { 'class': 'mat-hint', '[class.mat-right]': 'align == "end"', @@ -23,7 +23,7 @@ let nextUniqueId = 0; '[attr.align]': 'null', } }) -export class MdHint { +export class MatHint { /** Whether to align the hint label at the start or end of the line. */ @Input() align: 'start' | 'end' = 'start'; diff --git a/src/lib/form-field/mat-exports.ts b/src/lib/form-field/mat-exports.ts deleted file mode 100644 index 788c9b4452d2..000000000000 --- a/src/lib/form-field/mat-exports.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MdFormField, -} from './form-field'; -import {MdError} from './error'; -import {MdHint} from './hint'; -import {MdFormFieldModule} from './form-field-module'; -import {MdPrefix} from './prefix'; -import {MdSuffix} from './suffix'; -import {MdPlaceholder} from './placeholder'; -import {MdFormFieldControl} from './form-field-control'; - - -export {MdFormFieldModule as MatFormFieldModule}; -export {MdError as MatError}; -export {MdFormField as MatFormField}; -export {MdFormFieldControl as MatFormFieldControl}; -export {MdHint as MatHint}; -export {MdPlaceholder as MatPlaceholder}; -export {MdPrefix as MatPrefix}; -export {MdSuffix as MatSuffix}; diff --git a/src/lib/form-field/placeholder.ts b/src/lib/form-field/placeholder.ts index 260a4b8fef91..12473820043d 100644 --- a/src/lib/form-field/placeholder.ts +++ b/src/lib/form-field/placeholder.ts @@ -9,8 +9,8 @@ import {Directive} from '@angular/core'; -/** The floating placeholder for an `MdFormField`. */ +/** The floating placeholder for an `MatFormField`. */ @Directive({ - selector: 'md-placeholder, mat-placeholder' + selector: 'mat-placeholder' }) -export class MdPlaceholder {} +export class MatPlaceholder {} diff --git a/src/lib/form-field/prefix.ts b/src/lib/form-field/prefix.ts index 3ac184b14331..8bb192de1864 100644 --- a/src/lib/form-field/prefix.ts +++ b/src/lib/form-field/prefix.ts @@ -11,6 +11,6 @@ import {Directive} from '@angular/core'; /** Prefix to be placed the the front of the form field. */ @Directive({ - selector: '[mdPrefix], [matPrefix]', + selector: '[matPrefix]', }) -export class MdPrefix {} +export class MatPrefix {} diff --git a/src/lib/form-field/public_api.ts b/src/lib/form-field/public_api.ts index 4edf1173bbe0..0ef3a74f0654 100644 --- a/src/lib/form-field/public_api.ts +++ b/src/lib/form-field/public_api.ts @@ -15,4 +15,4 @@ export * from './hint'; export * from './placeholder'; export * from './prefix'; export * from './suffix'; -export * from './mat-exports'; + diff --git a/src/lib/form-field/suffix.ts b/src/lib/form-field/suffix.ts index be70eec03959..8f707f93a996 100644 --- a/src/lib/form-field/suffix.ts +++ b/src/lib/form-field/suffix.ts @@ -11,6 +11,6 @@ import {Directive} from '@angular/core'; /** Suffix to be placed at the end of the form field. */ @Directive({ - selector: '[mdSuffix], [matSuffix]', + selector: '[matSuffix]', }) -export class MdSuffix {} +export class MatSuffix {} diff --git a/src/lib/grid-list/grid-list-module.ts b/src/lib/grid-list/grid-list-module.ts index d57f8b80b5b0..f8206cd014cb 100644 --- a/src/lib/grid-list/grid-list-module.ts +++ b/src/lib/grid-list/grid-list-module.ts @@ -7,33 +7,33 @@ */ import {NgModule} from '@angular/core'; -import {MdLineModule, MdCommonModule} from '@angular/material/core'; +import {MatLineModule, MatCommonModule} from '@angular/material/core'; import { - MdGridTile, MdGridTileText, MdGridTileFooterCssMatStyler, - MdGridTileHeaderCssMatStyler, MdGridAvatarCssMatStyler + MatGridTile, MatGridTileText, MatGridTileFooterCssMatStyler, + MatGridTileHeaderCssMatStyler, MatGridAvatarCssMatStyler } from './grid-tile'; -import {MdGridList} from './grid-list'; +import {MatGridList} from './grid-list'; @NgModule({ - imports: [MdLineModule, MdCommonModule], + imports: [MatLineModule, MatCommonModule], exports: [ - MdGridList, - MdGridTile, - MdGridTileText, - MdLineModule, - MdCommonModule, - MdGridTileHeaderCssMatStyler, - MdGridTileFooterCssMatStyler, - MdGridAvatarCssMatStyler + MatGridList, + MatGridTile, + MatGridTileText, + MatLineModule, + MatCommonModule, + MatGridTileHeaderCssMatStyler, + MatGridTileFooterCssMatStyler, + MatGridAvatarCssMatStyler ], declarations: [ - MdGridList, - MdGridTile, - MdGridTileText, - MdGridTileHeaderCssMatStyler, - MdGridTileFooterCssMatStyler, - MdGridAvatarCssMatStyler + MatGridList, + MatGridTile, + MatGridTileText, + MatGridTileHeaderCssMatStyler, + MatGridTileFooterCssMatStyler, + MatGridAvatarCssMatStyler ], }) -export class MdGridListModule {} +export class MatGridListModule {} diff --git a/src/lib/grid-list/grid-list.md b/src/lib/grid-list/grid-list.md index 6cc3bde1ed73..0142c9d0a77e 100644 --- a/src/lib/grid-list/grid-list.md +++ b/src/lib/grid-list/grid-list.md @@ -1,11 +1,11 @@ -`md-grid-list` is a two-dimensional list view that arranges cells into grid-based layout. +`mat-grid-list` is a two-dimensional list view that arranges cells into grid-based layout. See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html). ### Setting the number of columns -An `md-grid-list` must specify a `cols` attribute which sets the number of columns in the grid. The +An `mat-grid-list` must specify a `cols` attribute which sets the number of columns in the grid. The number of rows will be automatically determined based on the number of columns and the number of items. @@ -32,15 +32,15 @@ units are specified, `px` units are assumed. By default the gutter size is `1px` ### Adding tiles that span multiple rows or columns -It is possible to set the rowspan and colspan of each `md-grid-tile` individually, using the +It is possible to set the rowspan and colspan of each `mat-grid-tile` individually, using the `rowspan` and `colspan` properties. If not set, they both default to `1`. The `colspan` must not -exceed the number of `cols` in the `md-grid-list`. There is no such restriction on the `rowspan` +exceed the number of `cols` in the `mat-grid-list`. There is no such restriction on the `rowspan` however, more rows will simply be added for it the tile to fill. ### Tile headers and footers -A header and footer can be added to an `md-grid-tile` using the `md-grid-tile-header` and -`md-grid-tile-footer` elements respectively. +A header and footer can be added to an `mat-grid-tile` using the `mat-grid-tile-header` and +`mat-grid-tile-footer` elements respectively. ### Accessibility By default, the grid-list assumes that it will be used in a purely decorative fashion and thus sets diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts index 048d430d8545..4ccf274839a8 100644 --- a/src/lib/grid-list/grid-list.spec.ts +++ b/src/lib/grid-list/grid-list.spec.ts @@ -1,14 +1,14 @@ import {async, TestBed} from '@angular/core/testing'; import {Component, DebugElement} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdGridList, MdGridListModule} from './index'; -import {MdGridTile, MdGridTileText} from './grid-tile'; +import {MatGridList, MatGridListModule} from './index'; +import {MatGridTile, MatGridTileText} from './grid-tile'; -describe('MdGridList', () => { +describe('MatGridList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdGridListModule], + imports: [MatGridListModule], declarations: [ GridListWithoutCols, GridListWithInvalidRowHeightRatio, @@ -55,7 +55,7 @@ describe('MdGridList', () => { it('should default to 1:1 row height if undefined ', () => { let fixture = TestBed.createComponent(GridListWithUnspecifiedRowHeight); fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); // In ratio mode, heights are set using the padding-top property. expect(getStyle(tile, 'padding-top')).toBe('200px'); @@ -67,7 +67,7 @@ describe('MdGridList', () => { fixture.componentInstance.rowHeight = '4:1'; fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getStyle(tile, 'padding-top')).toBe('100px'); fixture.componentInstance.rowHeight = '2:1'; @@ -81,7 +81,7 @@ describe('MdGridList', () => { fixture.componentInstance.totalHeight = '300px'; fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); // 149.5 * 2 = 299px + 1px gutter = 300px expect(getStyle(tile, 'height')).toBe('149.5px'); @@ -99,7 +99,7 @@ describe('MdGridList', () => { fixture.componentInstance.rowHeight = '100px'; fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getStyle(tile, 'height')).toBe('100px'); fixture.componentInstance.rowHeight = '200px'; @@ -112,7 +112,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithUnitlessFixedRowHeight); fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getStyle(tile, 'height')).toBe('100px'); }); @@ -120,7 +120,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithUnspecifiedGutterSize); fixture.detectChanges(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + let tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); // check horizontal gutter expect(getStyle(tiles[0], 'width')).toBe('99.5px'); @@ -135,7 +135,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithGutterSize); fixture.detectChanges(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + let tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); // check horizontal gutter expect(getStyle(tiles[0], 'width')).toBe('99px'); @@ -150,7 +150,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithUnitlessGutterSize); fixture.detectChanges(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + let tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); // check horizontal gutter expect(getStyle(tiles[0], 'width')).toBe('99px'); @@ -165,7 +165,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithRatioHeightAndMulipleRows); fixture.detectChanges(); - let list = fixture.debugElement.query(By.directive(MdGridList)); + let list = fixture.debugElement.query(By.directive(MatGridList)); expect(getStyle(list, 'padding-bottom')).toBe('201px'); }); @@ -173,7 +173,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithFixRowHeightAndMultipleRows); fixture.detectChanges(); - let list = fixture.debugElement.query(By.directive(MdGridList)); + let list = fixture.debugElement.query(By.directive(MatGridList)); expect(getStyle(list, 'height')).toBe('201px'); }); @@ -182,7 +182,7 @@ describe('MdGridList', () => { fixture.componentInstance.colspan = 2; fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getStyle(tile, 'width')).toBe('199.5px'); fixture.componentInstance.colspan = 3; @@ -196,7 +196,7 @@ describe('MdGridList', () => { fixture.componentInstance.rowspan = 2; fixture.detectChanges(); - let tile = fixture.debugElement.query(By.directive(MdGridTile)); + let tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getStyle(tile, 'height')).toBe('201px'); fixture.componentInstance.rowspan = 3; @@ -215,7 +215,7 @@ describe('MdGridList', () => { ]; fixture.detectChanges(); - let tiles = fixture.debugElement.queryAll(By.css('md-grid-tile')); + let tiles = fixture.debugElement.queryAll(By.css('mat-grid-tile')); expect(getStyle(tiles[0], 'width')).toBe('299.75px'); expect(getStyle(tiles[0], 'height')).toBe('100px'); @@ -242,7 +242,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithFootersWithoutLines); fixture.detectChanges(); - let footer = fixture.debugElement.query(By.directive(MdGridTileText)); + let footer = fixture.debugElement.query(By.directive(MatGridTileText)); expect(footer.nativeElement.classList.contains('mat-2-line')).toBe(false); }); @@ -250,7 +250,7 @@ describe('MdGridList', () => { let fixture = TestBed.createComponent(GridListWithFooterContainingTwoLines); fixture.detectChanges(); - let footer = fixture.debugElement.query(By.directive(MdGridTileText)); + let footer = fixture.debugElement.query(By.directive(MatGridTileText)); expect(footer.nativeElement.classList.contains('mat-2-line')).toBe(true); }); @@ -260,7 +260,7 @@ describe('MdGridList', () => { fixture.componentInstance.rowHeight = '4:1'; fixture.detectChanges(); - const firstTile = fixture.debugElement.query(By.directive(MdGridTile)).nativeElement; + const firstTile = fixture.debugElement.query(By.directive(MatGridTile)).nativeElement; expect(firstTile.style.marginTop).toBe('0px'); expect(firstTile.style.left).toBe('0px'); @@ -272,8 +272,8 @@ describe('MdGridList', () => { fixture.componentInstance.rowHeight = '4:1'; fixture.detectChanges(); - const list = fixture.debugElement.query(By.directive(MdGridList)); - const tile = fixture.debugElement.query(By.directive(MdGridTile)); + const list = fixture.debugElement.query(By.directive(MatGridList)); + const tile = fixture.debugElement.query(By.directive(MatGridTile)); expect(getStyle(tile, 'padding-top')).toBe('100px'); expect(getStyle(list, 'padding-bottom')).toBe('100px'); @@ -308,153 +308,153 @@ function getComputedLeft(element: DebugElement): number { -@Component({template: ''}) +@Component({template: ''}) class GridListWithoutCols { } -@Component({template: ''}) +@Component({template: ''}) class GridListWithInvalidRowHeightRatio { } @Component({template: - ''}) + ''}) class GridListWithTooWideColspan { } @Component({template: `
    - - - + + +
    `}) class GridListWithUnspecifiedRowHeight { } @Component({template: `
    - - - + + +
    `}) class GirdListWithRowHeightRatio { rowHeight: string; } @Component({template: ` - - - - `}) + + + + `}) class GridListWithFitRowHeightMode { totalHeight: string; } @Component({template: ` - - - `}) + + + `}) class GridListWithFixedRowHeightMode { rowHeight: string; } @Component({template: ` - - - `}) + + + `}) class GridListWithUnitlessFixedRowHeight { rowHeight: string; } @Component({template: `
    - - - - - + + + + +
    `}) class GridListWithUnspecifiedGutterSize { } @Component({template: `
    - - - - - + + + + +
    `}) class GridListWithGutterSize { } @Component({template: `
    - - - - - + + + + +
    `}) class GridListWithUnitlessGutterSize { } @Component({template: `
    - - - - + + + +
    `}) class GridListWithRatioHeightAndMulipleRows { } @Component({template: ` - - - - `}) + + + + `}) class GridListWithFixRowHeightAndMultipleRows { } @Component({template: `
    - - - + + +
    `}) class GridListWithColspanBinding { colspan: number; } @Component({template: ` - - - `}) + + + `}) class GridListWithRowspanBinding { rowspan: number; } @Component({template: `
    - - + {{tile.text}} - - + +
    `}) class GridListWithComplexLayout { tiles: any[]; } @Component({template: ` - - - + + + I'm a footer! - - - `}) + + + `}) class GridListWithFootersWithoutLines { } @Component({template: ` - - - -

    First line

    - Second line -     -     -     `}) + + + +

    First line

    + Second line +     +     +     `}) class GridListWithFooterContainingTwoLines { } diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index bfa2c9a802b3..dbd3b2a74bd2 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -19,7 +19,7 @@ import { Optional, ChangeDetectionStrategy, } from '@angular/core'; -import {MdGridTile} from './grid-tile'; +import {MatGridTile} from './grid-tile'; import {TileCoordinator} from './tile-coordinator'; import {TileStyler, FitTileStyler, RatioTileStyler, FixedTileStyler} from './tile-styler'; import {Directionality} from '@angular/cdk/bidi'; @@ -33,11 +33,11 @@ import { // TODO(kara): Re-layout on window resize / media change (debounced). // TODO(kara): gridTileHeader and gridTileFooter. -const MD_FIT_MODE = 'fit'; +const MAT_FIT_MODE = 'fit'; @Component({ moduleId: module.id, - selector: 'md-grid-list, mat-grid-list', + selector: 'mat-grid-list', templateUrl: 'grid-list.html', styleUrls: ['grid-list.css'], host: { @@ -47,7 +47,7 @@ const MD_FIT_MODE = 'fit'; encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdGridList implements OnInit, AfterContentChecked { +export class MatGridList implements OnInit, AfterContentChecked { /** Number of columns being rendered. */ private _cols: number; @@ -66,7 +66,7 @@ export class MdGridList implements OnInit, AfterContentChecked { private _tileStyler: TileStyler; /** Query list of tiles that are being rendered. */ - @ContentChildren(MdGridTile) _tiles: QueryList; + @ContentChildren(MatGridTile) _tiles: QueryList; constructor( private _renderer: Renderer2, @@ -110,8 +110,8 @@ export class MdGridList implements OnInit, AfterContentChecked { /** Throw a friendly error if cols property is missing */ private _checkCols() { if (!this.cols) { - throw Error(`md-grid-list: must pass in number of columns. ` + - `Example: `); + throw Error(`mat-grid-list: must pass in number of columns. ` + + `Example: `); } } @@ -128,7 +128,7 @@ export class MdGridList implements OnInit, AfterContentChecked { this._tileStyler.reset(this); } - if (rowHeight === MD_FIT_MODE) { + if (rowHeight === MAT_FIT_MODE) { this._tileStyler = new FitTileStyler(); } else if (rowHeight && rowHeight.indexOf(':') > -1) { this._tileStyler = new RatioTileStyler(rowHeight); diff --git a/src/lib/grid-list/grid-tile-text.html b/src/lib/grid-list/grid-tile-text.html index 03c27a703a66..ec16bf917e16 100644 --- a/src/lib/grid-list/grid-tile-text.html +++ b/src/lib/grid-list/grid-tile-text.html @@ -1,3 +1,3 @@ - -
    + +
    diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts index 62443ef026e6..7f0e14f3780a 100644 --- a/src/lib/grid-list/grid-tile.ts +++ b/src/lib/grid-list/grid-tile.ts @@ -18,12 +18,12 @@ import { Directive, ChangeDetectionStrategy, } from '@angular/core'; -import {MdLine, MdLineSetter} from '@angular/material/core'; +import {MatLine, MatLineSetter} from '@angular/material/core'; import {coerceToNumber} from './grid-list-measure'; @Component({ moduleId: module.id, - selector: 'md-grid-tile, mat-grid-tile', + selector: 'mat-grid-tile', host: { 'class': 'mat-grid-tile', }, @@ -33,7 +33,7 @@ import {coerceToNumber} from './grid-list-measure'; preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdGridTile { +export class MatGridTile { _rowspan: number = 1; _colspan: number = 1; @@ -60,24 +60,24 @@ export class MdGridTile { @Component({ moduleId: module.id, - selector: 'md-grid-tile-header, mat-grid-tile-header, md-grid-tile-footer, mat-grid-tile-footer', + selector: 'mat-grid-tile-header, mat-grid-tile-footer', templateUrl: 'grid-tile-text.html', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdGridTileText implements AfterContentInit { +export class MatGridTileText implements AfterContentInit { /** * Helper that watches the number of lines in a text area and sets * a class on the host element that matches the line count. */ - _lineSetter: MdLineSetter; - @ContentChildren(MdLine) _lines: QueryList; + _lineSetter: MatLineSetter; + @ContentChildren(MatLine) _lines: QueryList; constructor(private _renderer: Renderer2, private _element: ElementRef) {} ngAfterContentInit() { - this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element); + this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element); } } @@ -86,27 +86,27 @@ export class MdGridTileText implements AfterContentInit { * @docs-private */ @Directive({ - selector: '[md-grid-avatar], [mat-grid-avatar], [mdGridAvatar], [matGridAvatar]', + selector: '[mat-grid-avatar], [matGridAvatar]', host: {'class': 'mat-grid-avatar'} }) -export class MdGridAvatarCssMatStyler {} +export class MatGridAvatarCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: 'md-grid-tile-header, mat-grid-tile-header', + selector: 'mat-grid-tile-header', host: {'class': 'mat-grid-tile-header'} }) -export class MdGridTileHeaderCssMatStyler {} +export class MatGridTileHeaderCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: 'md-grid-tile-footer, mat-grid-tile-footer', + selector: 'mat-grid-tile-footer', host: {'class': 'mat-grid-tile-footer'} }) -export class MdGridTileFooterCssMatStyler {} +export class MatGridTileFooterCssMatStyler {} diff --git a/src/lib/grid-list/mat-exports.ts b/src/lib/grid-list/mat-exports.ts deleted file mode 100644 index 0590465d4b71..000000000000 --- a/src/lib/grid-list/mat-exports.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdGridList} from './grid-list'; -import {MdGridListModule} from './grid-list-module'; -import {MdGridTile} from './grid-tile'; - - -export {MdGridList as MatGridList}; -export {MdGridListModule as MatGridListModule}; -export {MdGridTile as MatGridTile}; diff --git a/src/lib/grid-list/public_api.ts b/src/lib/grid-list/public_api.ts index 5329b294b274..dadf36d92a04 100644 --- a/src/lib/grid-list/public_api.ts +++ b/src/lib/grid-list/public_api.ts @@ -8,5 +8,5 @@ export * from './grid-list-module'; export * from './grid-list'; -export {MdGridTile} from './grid-tile'; -export * from './mat-exports'; +export {MatGridTile} from './grid-tile'; + diff --git a/src/lib/grid-list/tile-coordinator.ts b/src/lib/grid-list/tile-coordinator.ts index 7610ef154bba..281db2482fc9 100644 --- a/src/lib/grid-list/tile-coordinator.ts +++ b/src/lib/grid-list/tile-coordinator.ts @@ -7,7 +7,7 @@ */ import {QueryList} from '@angular/core'; -import {MdGridTile} from './grid-tile'; +import {MatGridTile} from './grid-tile'; /** * Class for determining, from a list of tiles, the (row, col) position of each of those tiles @@ -51,7 +51,7 @@ export class TileCoordinator { /** The computed (row, col) position of each tile (the output). */ positions: TilePosition[]; - constructor(numColumns: number, tiles: QueryList) { + constructor(numColumns: number, tiles: QueryList) { this.tracker = new Array(numColumns); this.tracker.fill(0, 0, this.tracker.length); @@ -59,7 +59,7 @@ export class TileCoordinator { } /** Calculates the row and col position of a tile. */ - private _trackTile(tile: MdGridTile): TilePosition { + private _trackTile(tile: MatGridTile): TilePosition { // Find a gap large enough for this tile. let gapStartIndex = this._findMatchingGap(tile.colspan); @@ -76,7 +76,7 @@ export class TileCoordinator { /** Finds the next available space large enough to fit the tile. */ private _findMatchingGap(tileCols: number): number { if (tileCols > this.tracker.length) { - throw Error(`md-grid-list: tile with colspan ${tileCols} is wider than ` + + throw Error(`mat-grid-list: tile with colspan ${tileCols} is wider than ` + `grid with cols="${this.tracker.length}".`); } @@ -138,7 +138,7 @@ export class TileCoordinator { } /** Update the tile tracker to account for the given tile in the given space. */ - private _markTilePosition(start: number, tile: MdGridTile): void { + private _markTilePosition(start: number, tile: MatGridTile): void { for (let i = 0; i < tile.colspan; i++) { this.tracker[start + i] = tile.rowspan; } diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index 36a897e1d583..1be3f05e54f8 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {MdGridList} from './grid-list'; -import {MdGridTile} from './grid-tile'; +import {MatGridList} from './grid-list'; +import {MatGridTile} from './grid-tile'; import {TileCoordinator} from './tile-coordinator'; /** @@ -86,7 +86,7 @@ export abstract class TileStyler { * @param rowIndex Index of the tile's row. * @param colIndex Index of the tile's column. */ - setStyle(tile: MdGridTile, rowIndex: number, colIndex: number): void { + setStyle(tile: MatGridTile, rowIndex: number, colIndex: number): void { // Percent of the available horizontal space that one column takes up. let percentWidthPerTile = 100 / this._cols; @@ -99,7 +99,7 @@ export abstract class TileStyler { } /** Sets the horizontal placement of the tile in the list. */ - setColStyles(tile: MdGridTile, colIndex: number, percentWidth: number, + setColStyles(tile: MatGridTile, colIndex: number, percentWidth: number, gutterWidth: number) { // Base horizontal size of a column. let baseTileWidth = this.getBaseTileSize(percentWidth, gutterWidth); @@ -131,7 +131,7 @@ export abstract class TileStyler { * This method will be implemented by each type of TileStyler. * @docs-private */ - abstract setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, + abstract setRowStyles(tile: MatGridTile, rowIndex: number, percentWidth: number, gutterWidth: number); /** @@ -146,13 +146,13 @@ export abstract class TileStyler { * @param list Grid list that the styler was attached to. * @docs-private */ - abstract reset(list: MdGridList); + abstract reset(list: MatGridList); } /** * This type of styler is instantiated when the user passes in a fixed row height. - * Example + * Example * @docs-private */ export class FixedTileStyler extends TileStyler { @@ -164,7 +164,7 @@ export class FixedTileStyler extends TileStyler { this.fixedRowHeight = normalizeUnits(this.fixedRowHeight); } - setRowStyles(tile: MdGridTile, rowIndex: number): void { + setRowStyles(tile: MatGridTile, rowIndex: number): void { tile._setStyle('top', this.getTilePosition(this.fixedRowHeight, rowIndex)); tile._setStyle('height', calc(this.getTileSize(this.fixedRowHeight, tile.rowspan))); } @@ -175,7 +175,7 @@ export class FixedTileStyler extends TileStyler { ]; } - reset(list: MdGridList) { + reset(list: MatGridList) { list._setListStyle(['height', null]); list._tiles.forEach(tile => { @@ -188,7 +188,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 + * for the row height. Example * @docs-private */ export class RatioTileStyler extends TileStyler { @@ -202,7 +202,7 @@ export class RatioTileStyler extends TileStyler { this._parseRatio(value); } - setRowStyles(tile: MdGridTile, rowIndex: number, percentWidth: number, + setRowStyles(tile: MatGridTile, rowIndex: number, percentWidth: number, gutterWidth: number): void { let percentHeightPerTile = percentWidth / this.rowHeightRatio; this.baseTileHeight = this.getBaseTileSize(percentHeightPerTile, gutterWidth); @@ -220,7 +220,7 @@ export class RatioTileStyler extends TileStyler { ]; } - reset(list: MdGridList) { + reset(list: MatGridList) { list._setListStyle(['padding-bottom', null]); list._tiles.forEach(tile => { @@ -233,7 +233,7 @@ export class RatioTileStyler extends TileStyler { const ratioParts = value.split(':'); if (ratioParts.length !== 2) { - throw Error(`md-grid-list: invalid ratio given for row-height: "${value}"`); + throw Error(`mat-grid-list: invalid ratio given for row-height: "${value}"`); } this.rowHeightRatio = parseFloat(ratioParts[0]) / parseFloat(ratioParts[1]); @@ -243,13 +243,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 + * by the number of rows. Example * * @docs-private */ export class FitTileStyler extends TileStyler { - setRowStyles(tile: MdGridTile, rowIndex: number): void { + setRowStyles(tile: MatGridTile, rowIndex: number): void { // Percent of the available vertical space that one row takes up. let percentHeightPerTile = 100 / this._rowspan; @@ -263,7 +263,7 @@ export class FitTileStyler extends TileStyler { tile._setStyle('height', calc(this.getTileSize(baseTileHeight, tile.rowspan))); } - reset(list: MdGridList) { + reset(list: MatGridList) { list._tiles.forEach(tile => { tile._setStyle('top', null); tile._setStyle('height', null); diff --git a/src/lib/icon/icon-module.ts b/src/lib/icon/icon-module.ts index 1104d7a29429..75a0d144810b 100644 --- a/src/lib/icon/icon-module.ts +++ b/src/lib/icon/icon-module.ts @@ -7,15 +7,15 @@ */ import {NgModule} from '@angular/core'; -import {MdCommonModule} from '@angular/material/core'; -import {MdIcon} from './icon'; +import {MatCommonModule} from '@angular/material/core'; +import {MatIcon} from './icon'; import {ICON_REGISTRY_PROVIDER} from './icon-registry'; @NgModule({ - imports: [MdCommonModule], - exports: [MdIcon, MdCommonModule], - declarations: [MdIcon], + imports: [MatCommonModule], + exports: [MatIcon, MatCommonModule], + declarations: [MatIcon], providers: [ICON_REGISTRY_PROVIDER], }) -export class MdIconModule {} +export class MatIconModule {} diff --git a/src/lib/icon/icon-registry.ts b/src/lib/icon/icon-registry.ts index 7ff669fc292d..f0f2a06e70c1 100644 --- a/src/lib/icon/icon-registry.ts +++ b/src/lib/icon/icon-registry.ts @@ -21,17 +21,17 @@ import {_throw as observableThrow} from 'rxjs/observable/throw'; * load an icon with a name that cannot be found. * @docs-private */ -export function getMdIconNameNotFoundError(iconName: string): Error { +export function getMatIconNameNotFoundError(iconName: string): Error { return Error(`Unable to find icon with the name "${iconName}"`); } /** * Returns an exception to be thrown when the consumer attempts to use - * `` without including @angular/http. + * `` without including @angular/http. * @docs-private */ -export function getMdIconNoHttpProviderError(): Error { +export function getMatIconNoHttpProviderError(): Error { return Error('Could not find Http provider for use with Angular Material icons. ' + 'Please include the HttpModule from @angular/http in your app imports.'); } @@ -42,8 +42,8 @@ export function getMdIconNoHttpProviderError(): Error { * @param url URL that was attempted to be sanitized. * @docs-private */ -export function getMdIconFailedToSanitizeError(url: SafeResourceUrl): Error { - return Error(`The URL provided to MdIconRegistry was not trusted as a resource URL ` + +export function getMatIconFailedToSanitizeError(url: SafeResourceUrl): Error { + return Error(`The URL provided to MatIconRegistry was not trusted as a resource URL ` + `via Angular's DomSanitizer. Attempted URL was "${url}".`); } @@ -57,14 +57,14 @@ class SvgIconConfig { } /** - * Service to register and display icons used by the component. + * Service to register and display icons used by the component. * - Registers icon URLs by namespace and name. * - Registers icon set URLs by namespace. * - Registers aliases for CSS classes, for use with icon fonts. * - Loads icons from URLs and extracts individual icons from icon sets. */ @Injectable() -export class MdIconRegistry { +export class MatIconRegistry { /** * URLs and cached SVG elements for individual icons. Keys are of the format "[namespace]:[icon]". */ @@ -86,7 +86,7 @@ export class MdIconRegistry { private _fontCssClassesByAlias = new Map(); /** - * The CSS class to apply when an component has no icon name, url, or font specified. + * The CSS class to apply when an component has no icon name, url, or font specified. * The default 'material-icons' value assumes that the material icon font has been loaded as * described at http://google.github.io/material-design-icons/#icon-font-for-the-web */ @@ -141,9 +141,9 @@ export class MdIconRegistry { } /** - * Defines an alias for a CSS class name to be used for icon fonts. Creating an mdIcon + * Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon * component with the alias as the fontSet input will cause the class name to be applied - * to the element. + * to the element. * * @param alias Alias for the font. * @param className Class name override to be used instead of the alias. @@ -162,7 +162,7 @@ export class MdIconRegistry { } /** - * Sets the CSS class name to be used for icon fonts when an component does not + * Sets the CSS class name to be used for icon fonts when an component does not * have a fontSet input value, and is not loading an icon by name or URL. * * @param className @@ -173,7 +173,7 @@ export class MdIconRegistry { } /** - * Returns the CSS class name to be used for icon fonts when an component does not + * Returns the CSS class name to be used for icon fonts when an component does not * have a fontSet input value, and is not loading an icon by name or URL. */ getDefaultFontSetClass(): string { @@ -192,7 +192,7 @@ export class MdIconRegistry { let url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl); if (!url) { - throw getMdIconFailedToSanitizeError(safeUrl); + throw getMatIconFailedToSanitizeError(safeUrl); } let cachedIcon = this._cachedIconsByUrl.get(url); @@ -231,7 +231,7 @@ export class MdIconRegistry { return this._getSvgFromIconSetConfigs(name, iconSetConfigs); } - return observableThrow(getMdIconNameNotFoundError(key)); + return observableThrow(getMatIconNameNotFoundError(key)); } /** @@ -300,7 +300,7 @@ export class MdIconRegistry { const foundIcon = this._extractIconWithNameFromAnySet(name, iconSetConfigs); if (!foundIcon) { - throw getMdIconNameNotFoundError(name); + throw getMatIconNameNotFoundError(name); } return foundIcon; @@ -443,13 +443,13 @@ export class MdIconRegistry { */ private _fetchUrl(safeUrl: SafeResourceUrl): Observable { if (!this._http) { - throw getMdIconNoHttpProviderError(); + throw getMatIconNoHttpProviderError(); } const url = this._sanitizer.sanitize(SecurityContext.RESOURCE_URL, safeUrl); if (!url) { - throw getMdIconFailedToSanitizeError(safeUrl); + throw getMatIconFailedToSanitizeError(safeUrl); } // Store in-progress fetches to avoid sending a duplicate request for a URL when there is @@ -476,15 +476,15 @@ export class MdIconRegistry { /** @docs-private */ export function ICON_REGISTRY_PROVIDER_FACTORY( - parentRegistry: MdIconRegistry, http: Http, sanitizer: DomSanitizer) { - return parentRegistry || new MdIconRegistry(http, sanitizer); + parentRegistry: MatIconRegistry, http: Http, sanitizer: DomSanitizer) { + return parentRegistry || new MatIconRegistry(http, sanitizer); } /** @docs-private */ export const ICON_REGISTRY_PROVIDER = { - // If there is already an MdIconRegistry available, use that. Otherwise, provide a new one. - provide: MdIconRegistry, - deps: [[new Optional(), new SkipSelf(), MdIconRegistry], [new Optional(), Http], DomSanitizer], + // If there is already an MatIconRegistry available, use that. Otherwise, provide a new one. + provide: MatIconRegistry, + deps: [[new Optional(), new SkipSelf(), MatIconRegistry], [new Optional(), Http], DomSanitizer], useFactory: ICON_REGISTRY_PROVIDER_FACTORY }; diff --git a/src/lib/icon/icon.md b/src/lib/icon/icon.md index 15dfa0dfa27f..6a08ac010789 100644 --- a/src/lib/icon/icon.md +++ b/src/lib/icon/icon.md @@ -1,26 +1,26 @@ -`md-icon` makes it easier to use _vector-based_ icons in your app. This directive supports both +`mat-icon` makes it easier to use _vector-based_ icons in your app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.). ### Registering icons -`MdIconRegistry` is an injectable service that allows you to associate icon names with SVG URLs and +`MatIconRegistry` is an injectable service that allows you to associate icon names with SVG URLs and define aliases for CSS font classes. Its methods are discussed below and listed in the API summary. ### Font icons with ligatures Some fonts are designed to show icons by using [ligatures](https://en.wikipedia.org/wiki/Typographic_ligature), for example by rendering the text -"home" as a home image. To use a ligature icon, put its text in the content of the `md-icon` +"home" as a home image. To use a ligature icon, put its text in the content of the `mat-icon` component. -By default, `` expects the +By default, `` expects the [Material icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web). (You will still need to include the HTML to load the font and its CSS, as described in the link). You can specify a different font by setting the `fontSet` input to either the CSS class to apply to use the desired font, or to an alias previously registered with -`MdIconRegistry.registerFontClassAlias`. +`MatIconRegistry.registerFontClassAlias`. ### Font icons with CSS @@ -28,23 +28,23 @@ Fonts can also display icons by defining a CSS class for each icon glyph, which `:before` selector to cause the icon to appear. [FontAwesome](https://fortawesome.github.io/Font-Awesome/examples/) uses this approach to display its icons. To use such a font, set the `fontSet` input to the font's CSS class (either the class -itself or an alias registered with `MdIconRegistry.registerFontClassAlias`), and set the `fontIcon` +itself or an alias registered with `MatIconRegistry.registerFontClassAlias`), and set the `fontIcon` input to the class for the specific icon to show. For both types of font icons, you can specify the default font class to use when `fontSet` is not -explicitly set by calling `MdIconRegistry.setDefaultFontSetClass`. +explicitly set by calling `MatIconRegistry.setDefaultFontSetClass`. ### SVG icons -When an `md-icon` component displays an SVG icon, it does so by directly inlining the SVG content +When an `mat-icon` component displays an SVG icon, it does so by directly inlining the SVG content into the page as a child of the component. (Rather than using an tag or a div background image). This makes it easier to apply CSS styles to SVG icons. For example, the default color of the SVG content is the CSS [currentColor](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword) value. This makes SVG icons by default have the same color as surrounding text, and allows you to -change the color by setting the "color" style on the `md-icon` element. +change the color by setting the "color" style on the `mat-icon` element. -In order to prevent XSS vulnerabilities, any SVG URLs passed to the `MdIconRegistry` must be +In order to prevent XSS vulnerabilities, any SVG URLs passed to the `MatIconRegistry` must be marked as trusted resource URLs by using Angular's `DomSanitizer` service. Also note that all SVG icons are fetched via XmlHttpRequest, and due to the same-origin policy, @@ -54,7 +54,7 @@ to allow cross-domain access. #### Named icons To associate a name with an icon URL, use the `addSvgIcon` or `addSvgIconInNamespace` methods of -`MdIconRegistry`. After registering an icon, it can be displayed by setting the `svgIcon` input. +`MatIconRegistry`. After registering an icon, it can be displayed by setting the `svgIcon` input. For an icon in the default namespace, use the name directly. For a non-default namespace, use the format `[namespace]:[name]`. @@ -65,7 +65,7 @@ root `` tag that contains multiple nested `` tags in its `` sect nested tags is identified with an `id` attribute. This `id` is used as the name of the icon. Icon sets are registered using the `addSvgIconSet` or `addSvgIconSetInNamespace` methods of -`MdIconRegistry`. After an icon set is registered, each of its embedded icons can be accessed by +`MatIconRegistry`. After an icon set is registered, each of its embedded icons can be accessed by their `id` attributes. To display an icon from an icon set, use the `svgIcon` input in the same way as for individually registered icons. @@ -81,8 +81,8 @@ match the current theme's colors using the `color` attribute. This can be change ### Accessibility Similar to an `` element, an icon alone does not convey any useful information for a -screen-reader user. The user of `` must provide additional information pertaining to how -the icon is used. Based on the use-cases described below, `md-icon` is marked as +screen-reader user. The user of `` must provide additional information pertaining to how +the icon is used. Based on the use-cases described below, `mat-icon` is marked as `aria-hidden="true"` by default, but this can be overriden by adding `aria-hidden="false"` to the element. @@ -92,22 +92,22 @@ In thinking about accessibility, it is useful to place icon use into one of thre 3. **Indicator**: the icon is not interactive, but it conveys some information, such as a status. #### Decorative icons -When the icon is puely cosmetic and conveys no real semantic meaning, the `` element +When the icon is puely cosmetic and conveys no real semantic meaning, the `` element should be marked with `aria-hidden="true"`. #### Interactive icons Icons alone are not interactive elements for screen-reader users; when the user would interact with some icon on the page, a more appropriate element should "own" the interaction: -* The `` element should be a child of a `

    - + -
    +
    diff --git a/src/lib/list/list-module.ts b/src/lib/list/list-module.ts index 177bec5758b9..509f5ea0ad7e 100644 --- a/src/lib/list/list-module.ts +++ b/src/lib/list/list-module.ts @@ -9,55 +9,55 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import { - MdCommonModule, - MdLineModule, - MdPseudoCheckboxModule, - MdRippleModule, + MatCommonModule, + MatLineModule, + MatPseudoCheckboxModule, + MatRippleModule, } from '@angular/material/core'; import { - MdDividerCssMatStyler, - MdList, - MdListAvatarCssMatStyler, - MdListCssMatStyler, - MdListDivider, - MdListIconCssMatStyler, - MdListItem, - MdListSubheaderCssMatStyler, - MdNavListCssMatStyler, + MatDividerCssMatStyler, + MatList, + MatListAvatarCssMatStyler, + MatListCssMatStyler, + MatListDivider, + MatListIconCssMatStyler, + MatListItem, + MatListSubheaderCssMatStyler, + MatNavListCssMatStyler, } from './list'; -import {MdListOption, MdSelectionList} from './selection-list'; +import {MatListOption, MatSelectionList} from './selection-list'; @NgModule({ - imports: [MdLineModule, MdRippleModule, MdCommonModule, MdPseudoCheckboxModule, CommonModule], + imports: [MatLineModule, MatRippleModule, MatCommonModule, MatPseudoCheckboxModule, CommonModule], exports: [ - MdList, - MdListItem, - MdListDivider, - MdListAvatarCssMatStyler, - MdLineModule, - MdCommonModule, - MdListIconCssMatStyler, - MdListCssMatStyler, - MdNavListCssMatStyler, - MdDividerCssMatStyler, - MdListSubheaderCssMatStyler, - MdPseudoCheckboxModule, - MdSelectionList, - MdListOption + MatList, + MatListItem, + MatListDivider, + MatListAvatarCssMatStyler, + MatLineModule, + MatCommonModule, + MatListIconCssMatStyler, + MatListCssMatStyler, + MatNavListCssMatStyler, + MatDividerCssMatStyler, + MatListSubheaderCssMatStyler, + MatPseudoCheckboxModule, + MatSelectionList, + MatListOption ], declarations: [ - MdList, - MdListItem, - MdListDivider, - MdListAvatarCssMatStyler, - MdListIconCssMatStyler, - MdListCssMatStyler, - MdNavListCssMatStyler, - MdDividerCssMatStyler, - MdListSubheaderCssMatStyler, - MdSelectionList, - MdListOption + MatList, + MatListItem, + MatListDivider, + MatListAvatarCssMatStyler, + MatListIconCssMatStyler, + MatListCssMatStyler, + MatNavListCssMatStyler, + MatDividerCssMatStyler, + MatListSubheaderCssMatStyler, + MatSelectionList, + MatListOption ], }) -export class MdListModule {} +export class MatListModule {} diff --git a/src/lib/list/list.md b/src/lib/list/list.md index f9ad2ae169dd..b26595f5becf 100644 --- a/src/lib/list/list.md +++ b/src/lib/list/list.md @@ -1,4 +1,4 @@ -`` is a container component that wraps and formats a series of line items. As the base +`` is a container component that wraps and formats a series of line items. As the base list component, it provides Material Design styling, but no behavior of its own. @@ -6,40 +6,40 @@ list component, it provides Material Design styling, but no behavior of its own. ### Simple lists -An `` element contains a number of `` elements. +An `` element contains a number of `` elements. ```html - - Pepper - Salt - Paprika - + + Pepper + Salt + Paprika + ``` ### Navigation lists -Use `md-nav-list` tags for navigation lists (i.e. lists that have anchor tags). +Use `mat-nav-list` tags for navigation lists (i.e. lists that have anchor tags). -Simple navigation lists can use the `md-list-item` attribute on anchor tag elements directly: +Simple navigation lists can use the `mat-list-item` attribute on anchor tag elements directly: ```html - -     {{ link }} - + + {{ link }} + ``` For more complex navigation lists (e.g. with more than one target per item), wrap the anchor -element in an ``. +element in an ``. ```html - - - {{ link }} - - - + + ``` ### Selection lists @@ -52,101 +52,101 @@ as buttons and anchors. ### Multi-line lists -For lists that require multiple lines per item, annotate each line with an `mdLine` attribute. +For lists that require multiple lines per item, annotate each line with an `matLine` attribute. Whichever heading tag is appropriate for your DOM hierarchy should be used (not necessarily `

    ` as shown in the example). ```html - - -

    {{message.from}}

    -

    + + +

    {{message.from}}

    +

    {{message.subject}} -- {{message.content}}

    -     -     + + - - -

    {{message.from}}

    -

    {{message.subject}}

    -

    {{message.content}}

    -     -     + + +

    {{message.from}}

    +

    {{message.subject}}

    +

    {{message.content}}

    +     +     ``` ### Lists with icons -To add an icon to your list item, use the `mdListIcon` attribute. +To add an icon to your list item, use the `matListIcon` attribute. ```html - - - folder -

    {{message.from}}

    -

    + + + folder +

    {{message.from}}

    +

    {{message.subject}} -- {{message.content}}

    -     -     + + ``` ### Lists with avatars -To include an avatar image, add an image tag with an `mdListAvatar` attribute. +To include an avatar image, add an image tag with an `matListAvatar` attribute. ```html - - - ... -

    {{message.from}}

    -

    + + + ... +

    {{message.from}}

    +

    {{message.subject}} -- {{message.content}}

    -     -     + + ``` ### Dense lists Lists are also available in "dense layout" mode, which shrinks the font size and height of the list to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute -to the main `md-list` tag. +to the main `mat-list` tag. ```html - - Pepper - Salt - Paprika - + + Pepper + Salt + Paprika + ``` ### Lists with multiple sections -Subheader can be added to a list by annotating a heading tag with an `mdSubheader` attribute. -To add a divider, use ``. +Subheader can be added to a list by annotating a heading tag with an `matSubheader` attribute. +To add a divider, use ``. ```html - -

    Folders

    - - folder -

    {{folder.name}}

    -

    {{folder.updated}}

    -     - -

    Notes

    - - note -

    {{note.name}}

    -

    {{note.updated}}

    -     -     + +

    Folders

    + + folder +

    {{folder.name}}

    +

    {{folder.updated}}

    +     + +

    Notes

    + + note +

    {{note.name}}

    +

    {{note.updated}}

    +     +     ``` diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts index d9854cf1dfdf..f2b60c500aef 100644 --- a/src/lib/list/list.spec.ts +++ b/src/lib/list/list.spec.ts @@ -1,14 +1,14 @@ import {async, TestBed} from '@angular/core/testing'; import {Component, QueryList, ViewChildren} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdListItem, MdListModule} from './index'; +import {MatListItem, MatListModule} from './index'; -describe('MdList', () => { +describe('MatList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdListModule], + imports: [MatListModule], declarations: [ ListWithOneAnchorItem, ListWithOneItem, @@ -29,7 +29,7 @@ describe('MdList', () => { it('should add and remove focus class on focus/blur', () => { let fixture = TestBed.createComponent(ListWithOneAnchorItem); fixture.detectChanges(); - let listItem = fixture.debugElement.query(By.directive(MdListItem)); + let listItem = fixture.debugElement.query(By.directive(MatListItem)); let listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); expect(listItemEl.nativeElement.classList).not.toContain('mat-list-item-focus'); @@ -45,7 +45,7 @@ describe('MdList', () => { it('should not apply any additional class to a list without lines', () => { let fixture = TestBed.createComponent(ListWithOneItem); - let listItem = fixture.debugElement.query(By.css('md-list-item')); + let listItem = fixture.debugElement.query(By.css('mat-list-item')); fixture.detectChanges(); expect(listItem.nativeElement.className).toBe('mat-list-item'); }); @@ -54,7 +54,7 @@ describe('MdList', () => { let fixture = TestBed.createComponent(ListWithTwoLineItem); fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + let listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item')); expect(listItems[0].nativeElement.className).toContain('mat-2-line'); expect(listItems[1].nativeElement.className).toContain('mat-2-line'); }); @@ -63,7 +63,7 @@ describe('MdList', () => { let fixture = TestBed.createComponent(ListWithThreeLineItem); fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + let listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item')); expect(listItems[0].nativeElement.className).toContain('mat-3-line'); expect(listItems[1].nativeElement.className).toContain('mat-3-line'); }); @@ -72,7 +72,7 @@ describe('MdList', () => { let fixture = TestBed.createComponent(ListWithManyLines); fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + let listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item')); expect(listItems[0].nativeElement.className).toContain('mat-multi-line'); expect(listItems[1].nativeElement.className).toContain('mat-multi-line'); }); @@ -81,7 +81,7 @@ describe('MdList', () => { let fixture = TestBed.createComponent(ListWithAvatar); fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + let listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item')); expect(listItems[0].nativeElement.className).toContain('mat-list-item-avatar'); expect(listItems[1].nativeElement.className).not.toContain('mat-list-item-avatar'); }); @@ -90,7 +90,7 @@ describe('MdList', () => { let fixture = TestBed.createComponent(ListWithItemWithCssClass); fixture.detectChanges(); - let listItems = fixture.debugElement.children[0].queryAll(By.css('md-list-item')); + let listItems = fixture.debugElement.children[0].queryAll(By.css('mat-list-item')); expect(listItems[0].nativeElement.classList.contains('test-class')).toBe(true); }); @@ -99,7 +99,7 @@ describe('MdList', () => { fixture.debugElement.componentInstance.showThirdLine = false; fixture.detectChanges(); - let listItem = fixture.debugElement.children[0].query(By.css('md-list-item')); + let listItem = fixture.debugElement.children[0].query(By.css('mat-list-item')); expect(listItem.nativeElement.classList.length).toBe(2); expect(listItem.nativeElement.classList).toContain('mat-2-line'); expect(listItem.nativeElement.classList).toContain('mat-list-item'); @@ -114,7 +114,7 @@ describe('MdList', () => { fixture.detectChanges(); let list = fixture.debugElement.children[0]; - let listItem = fixture.debugElement.children[0].query(By.css('md-list-item')); + let listItem = fixture.debugElement.children[0].query(By.css('mat-list-item')); expect(list.nativeElement.getAttribute('role')).toBe('list'); expect(listItem.nativeElement.getAttribute('role')).toBe('listitem'); }); @@ -123,7 +123,7 @@ describe('MdList', () => { let fixture = TestBed.createComponent(ListWithOneAnchorItem); fixture.detectChanges(); - const items: QueryList = fixture.debugElement.componentInstance.listItems; + const items: QueryList = fixture.debugElement.componentInstance.listItems; expect(items.length).toBeGreaterThan(0); items.forEach(item => expect(item._isRippleDisabled()).toBe(true)); }); @@ -172,103 +172,103 @@ class BaseTestList { } @Component({template: ` - - + + Paprika - `}) + `}) class ListWithOneAnchorItem extends BaseTestList { // This needs to be declared directly on the class; if declared on the BaseTestList superclass, // it doesn't get populated. - @ViewChildren(MdListItem) listItems: QueryList; + @ViewChildren(MatListItem) listItems: QueryList; } @Component({template: ` - - + + Paprika - `}) + `}) class NavListWithOneAnchorItem extends BaseTestList { - @ViewChildren(MdListItem) listItems: QueryList; + @ViewChildren(MatListItem) listItems: QueryList; disableItemRipple: boolean = false; disableListRipple: boolean = false; } @Component({template: ` - - + + Paprika - - `}) + + `}) class ListWithOneItem extends BaseTestList { } @Component({template: ` - - + + -

    {{item.name}}

    -

    {{item.description}}

    -     -     `}) +

    {{item.name}}

    +

    {{item.description}}

    + + `}) class ListWithTwoLineItem extends BaseTestList { } @Component({template: ` - - -

    {{item.name}}

    -

    {{item.description}}

    -

    Some other text

    -     -     `}) + + +

    {{item.name}}

    +

    {{item.description}}

    +

    Some other text

    +     +     `}) class ListWithThreeLineItem extends BaseTestList { } @Component({template: ` - - -

    Line 1

    -

    Line 2

    -

    Line 3

    -

    Line 4

    -     -     `}) + + +

    Line 1

    +

    Line 2

    +

    Line 3

    +

    Line 4

    +     +     `}) class ListWithManyLines extends BaseTestList { } @Component({template: ` - - - + + + Paprika - - + + Pepper - - `}) + + `}) class ListWithAvatar extends BaseTestList { } @Component({template: ` - - -

    {{item.name}}

    -

    {{item.description}}

    -     -     `}) + + +

    {{item.name}}

    +

    {{item.description}}

    +     +     `}) class ListWithItemWithCssClass extends BaseTestList { } @Component({template: ` - - -

    {{item.name}}

    -

    {{item.description}}

    -

    Some other text

    -     -     `}) + + +

    {{item.name}}

    +

    {{item.description}}

    +

    Some other text

    +     +     `}) class ListWithDynamicNumberOfLines extends BaseTestList { } @Component({template: ` - - + + {{item.name}} - - `}) + + `}) class ListWithMultipleItems extends BaseTestList { } diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 183b8c81dd80..ab7d90daa514 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -8,6 +8,7 @@ import { AfterContentInit, + ChangeDetectionStrategy, Component, ContentChild, ContentChildren, @@ -17,36 +18,34 @@ import { QueryList, Renderer2, ViewEncapsulation, - ChangeDetectionStrategy, } from '@angular/core'; -import {MATERIAL_COMPATIBILITY_MODE, MdLine, MdLineSetter} from '@angular/material/core'; -import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; +import {CanDisableRipple, MatLine, MatLineSetter, mixinDisableRipple} from '@angular/material/core'; -// Boilerplate for applying mixins to MdList. +// Boilerplate for applying mixins to MatList. /** @docs-private */ -export class MdListBase {} -export const _MdListMixinBase = mixinDisableRipple(MdListBase); +export class MatListBase {} +export const _MatListMixinBase = mixinDisableRipple(MatListBase); -// Boilerplate for applying mixins to MdListItem. +// Boilerplate for applying mixins to MatListItem. /** @docs-private */ -export class MdListItemBase {} -export const _MdListItemMixinBase = mixinDisableRipple(MdListItemBase); +export class MatListItemBase {} +export const _MatListItemMixinBase = mixinDisableRipple(MatListItemBase); /** Divider between items within a list. */ @Directive({ - selector: 'md-divider, mat-divider', + selector: 'mat-divider', host: { 'role': 'separator', 'aria-orientation': 'horizontal' } }) -export class MdListDivider {} +export class MatListDivider {} /** A Material Design list component. */ @Component({ moduleId: module.id, - selector: 'md-list, mat-list, md-nav-list, mat-nav-list', + selector: 'mat-list, mat-nav-list', host: {'role': 'list'}, template: '', styleUrls: ['list.css'], @@ -55,72 +54,72 @@ export class MdListDivider {} preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdList extends _MdListMixinBase implements CanDisableRipple {} +export class MatList extends _MatListMixinBase implements CanDisableRipple {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: 'md-list, mat-list', + selector: 'mat-list', host: {'class': 'mat-list'} }) -export class MdListCssMatStyler {} +export class MatListCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: 'md-nav-list, mat-nav-list', + selector: 'mat-nav-list', host: {'class': 'mat-nav-list'} }) -export class MdNavListCssMatStyler {} +export class MatNavListCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: 'md-divider, mat-divider', + selector: 'mat-divider', host: {'class': 'mat-divider'} }) -export class MdDividerCssMatStyler {} +export class MatDividerCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: '[md-list-avatar], [mat-list-avatar], [mdListAvatar], [matListAvatar]', + selector: '[mat-list-avatar], [matListAvatar]', host: {'class': 'mat-list-avatar'} }) -export class MdListAvatarCssMatStyler {} +export class MatListAvatarCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: '[md-list-icon], [mat-list-icon], [mdListIcon], [matListIcon]', + selector: '[mat-list-icon], [matListIcon]', host: {'class': 'mat-list-icon'} }) -export class MdListIconCssMatStyler {} +export class MatListIconCssMatStyler {} /** * Directive whose purpose is to add the mat- CSS styling to this selector. * @docs-private */ @Directive({ - selector: '[md-subheader], [mat-subheader], [mdSubheader], [matSubheader]', + selector: '[mat-subheader], [matSubheader]', host: {'class': 'mat-subheader'} }) -export class MdListSubheaderCssMatStyler {} +export class MatListSubheaderCssMatStyler {} /** An item within a Material Design list. */ @Component({ moduleId: module.id, - selector: 'md-list-item, mat-list-item, a[md-list-item], a[mat-list-item]', + selector: 'mat-list-item, a[mat-list-item]', host: { 'role': 'listitem', 'class': 'mat-list-item', @@ -132,16 +131,16 @@ export class MdListSubheaderCssMatStyler {} encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdListItem extends _MdListItemMixinBase implements AfterContentInit, CanDisableRipple { - private _lineSetter: MdLineSetter; +export class MatListItem extends _MatListItemMixinBase implements AfterContentInit, + CanDisableRipple { + private _lineSetter: MatLineSetter; private _isNavList: boolean = false; - @ContentChildren(MdLine) _lines: QueryList; + @ContentChildren(MatLine) _lines: QueryList; - @ContentChild(MdListAvatarCssMatStyler) - set _hasAvatar(avatar: MdListAvatarCssMatStyler) { + @ContentChild(MatListAvatarCssMatStyler) + set _hasAvatar(avatar: MatListAvatarCssMatStyler) { if (avatar != null) { this._renderer.addClass(this._element.nativeElement, 'mat-list-item-avatar'); } else { @@ -151,14 +150,14 @@ export class MdListItem extends _MdListItemMixinBase implements AfterContentInit constructor(private _renderer: Renderer2, private _element: ElementRef, - @Optional() private _list: MdList, - @Optional() navList: MdNavListCssMatStyler) { + @Optional() private _list: MatList, + @Optional() navList: MatNavListCssMatStyler) { super(); this._isNavList = !!navList; } ngAfterContentInit() { - this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element); + this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element); } /** Whether this list item should show a ripple effect when clicked. */ diff --git a/src/lib/list/mat-exports.ts b/src/lib/list/mat-exports.ts deleted file mode 100644 index e8f8a9e89e40..000000000000 --- a/src/lib/list/mat-exports.ts +++ /dev/null @@ -1,48 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MdDividerCssMatStyler, - MdList, - MdListAvatarCssMatStyler, - MdListBase, - MdListCssMatStyler, - MdListDivider, - MdListIconCssMatStyler, - MdListItem, - MdListItemBase, - MdListSubheaderCssMatStyler, - MdNavListCssMatStyler, -} from './list'; -import { - MdListOption, - MdListOptionBase, - MdSelectionList, - MdSelectionListBase, - MdSelectionListOptionEvent, -} from './selection-list'; -import {MdListModule} from './list-module'; - - -export {MdDividerCssMatStyler as MatDividerCssMatStyler}; -export {MdList as MatList}; -export {MdListAvatarCssMatStyler as MatListAvatarCssMatStyler}; -export {MdListBase as MatListBase}; -export {MdListCssMatStyler as MatListCssMatStyler}; -export {MdListDivider as MatListDivider}; -export {MdListIconCssMatStyler as MatListIconCssMatStyler}; -export {MdListItem as MatListItem}; -export {MdListItemBase as MatListItemBase}; -export {MdListModule as MatListModule}; -export {MdListOption as MatListOption}; -export {MdListOptionBase as MatListOptionBase}; -export {MdListSubheaderCssMatStyler as MatListSubheaderCssMatStyler}; -export {MdNavListCssMatStyler as MatNavListCssMatStyler}; -export {MdSelectionList as MatSelectionList}; -export {MdSelectionListBase as MatSelectionListBase}; -export {MdSelectionListOptionEvent as MatSelectionListOptionEvent}; diff --git a/src/lib/list/public_api.ts b/src/lib/list/public_api.ts index 98b17cb93de7..bea6b187f243 100644 --- a/src/lib/list/public_api.ts +++ b/src/lib/list/public_api.ts @@ -9,4 +9,4 @@ export * from './list-module'; export * from './list'; export * from './selection-list'; -export * from './mat-exports'; + diff --git a/src/lib/list/selection-list.spec.ts b/src/lib/list/selection-list.spec.ts index bb3752c3fdd9..457d0b1532ea 100644 --- a/src/lib/list/selection-list.spec.ts +++ b/src/lib/list/selection-list.spec.ts @@ -4,10 +4,10 @@ import {createKeyboardEvent} from '@angular/cdk/testing'; import {Component, DebugElement} from '@angular/core'; import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {MdListModule, MdListOption, MdSelectionList} from './index'; +import {MatListModule, MatListOption, MatSelectionList} from './index'; -describe('MdSelectionList', () => { +describe('MatSelectionList', () => { describe('with list option', () => { let fixture: ComponentFixture; let listOption: DebugElement[]; @@ -16,7 +16,7 @@ describe('MdSelectionList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdListModule], + imports: [MatListModule], declarations: [ SelectionListWithListOptions, SelectionListWithCheckboxPositionAfter, @@ -30,9 +30,9 @@ describe('MdSelectionList', () => { beforeEach(async(() => { fixture = TestBed.createComponent(SelectionListWithListOptions); - listOption = fixture.debugElement.queryAll(By.directive(MdListOption)); + listOption = fixture.debugElement.queryAll(By.directive(MatListOption)); listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); - selectionList = fixture.debugElement.query(By.directive(MdSelectionList)); + selectionList = fixture.debugElement.query(By.directive(MatSelectionList)); fixture.detectChanges(); })); @@ -57,8 +57,9 @@ describe('MdSelectionList', () => { }); it('should be able to dispatch one selected item', () => { - let testListItem = listOption[2].injector.get(MdListOption); - let selectList = selectionList.injector.get(MdSelectionList).selectedOptions; + let testListItem = listOption[2].injector.get(MatListOption); + let selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; expect(selectList.selected.length).toBe(0); expect(listOption[2].nativeElement.getAttribute('aria-selected')).toBe('false'); @@ -72,9 +73,10 @@ describe('MdSelectionList', () => { }); it('should be able to dispatch multiple selected items', () => { - let testListItem = listOption[2].injector.get(MdListOption); - let testListItem2 = listOption[1].injector.get(MdListOption); - let selectList = selectionList.injector.get(MdSelectionList).selectedOptions; + let testListItem = listOption[2].injector.get(MatListOption); + let testListItem2 = listOption[1].injector.get(MatListOption); + let selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; expect(selectList.selected.length).toBe(0); expect(listOption[2].nativeElement.getAttribute('aria-selected')).toBe('false'); @@ -94,8 +96,9 @@ describe('MdSelectionList', () => { }); it('should be able to deselect an option', () => { - let testListItem = listOption[2].injector.get(MdListOption); - let selectList = selectionList.injector.get(MdSelectionList).selectedOptions; + let testListItem = listOption[2].injector.get(MatListOption); + let selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; expect(selectList.selected.length).toBe(0); @@ -111,8 +114,9 @@ describe('MdSelectionList', () => { }); it('should not allow selection of disabled items', () => { - let testListItem = listOption[0].injector.get(MdListOption); - let selectList = selectionList.injector.get(MdSelectionList).selectedOptions; + let testListItem = listOption[0].injector.get(MatListOption); + let selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; expect(selectList.selected.length).toBe(0); expect(listOption[0].nativeElement.getAttribute('aria-disabled')).toBe('true'); @@ -124,7 +128,7 @@ describe('MdSelectionList', () => { }); it('should be able to un-disable disabled items', () => { - let testListItem = listOption[0].injector.get(MdListOption); + let testListItem = listOption[0].injector.get(MatListOption); expect(listOption[0].nativeElement.getAttribute('aria-disabled')).toBe('true'); @@ -138,7 +142,8 @@ describe('MdSelectionList', () => { let testListItem = listOption[1].nativeElement as HTMLElement; let SPACE_EVENT: KeyboardEvent = createKeyboardEvent('keydown', SPACE, testListItem); - let selectList = selectionList.injector.get(MdSelectionList).selectedOptions; + let selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; let options = selectionList.componentInstance.options; let array = options.toArray(); let focusItem = array[1]; @@ -191,7 +196,7 @@ describe('MdSelectionList', () => { }); it('should be able to select all options', () => { - const list: MdSelectionList = selectionList.componentInstance; + const list: MatSelectionList = selectionList.componentInstance; expect(list.options.toArray().every(option => option.selected)).toBe(false); @@ -202,7 +207,7 @@ describe('MdSelectionList', () => { }); it('should be able to deselect all options', () => { - const list: MdSelectionList = selectionList.componentInstance; + const list: MatSelectionList = selectionList.componentInstance; list.options.forEach(option => option.toggle()); expect(list.options.toArray().every(option => option.selected)).toBe(true); @@ -223,7 +228,7 @@ describe('MdSelectionList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdListModule], + imports: [MatListModule], declarations: [ SelectionListWithListOptions, SelectionListWithCheckboxPositionAfter, @@ -237,9 +242,9 @@ describe('MdSelectionList', () => { beforeEach(async(() => { fixture = TestBed.createComponent(SelectionListWithOnlyOneOption); - listOption = fixture.debugElement.query(By.directive(MdListOption)); + listOption = fixture.debugElement.query(By.directive(MatListOption)); listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); - selectionList = fixture.debugElement.query(By.directive(MdSelectionList)); + selectionList = fixture.debugElement.query(By.directive(MatSelectionList)); fixture.detectChanges(); })); @@ -266,11 +271,11 @@ describe('MdSelectionList', () => { describe('with option disabled', () => { let fixture: ComponentFixture; let listOptionEl: HTMLElement; - let listOption: MdListOption; + let listOption: MatListOption; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdListModule], + imports: [MatListModule], declarations: [SelectionListWithDisabledOption] }); @@ -280,7 +285,7 @@ describe('MdSelectionList', () => { beforeEach(async(() => { fixture = TestBed.createComponent(SelectionListWithDisabledOption); - const listOptionDebug = fixture.debugElement.query(By.directive(MdListOption)); + const listOptionDebug = fixture.debugElement.query(By.directive(MatListOption)); listOption = listOptionDebug.componentInstance; listOptionEl = listOptionDebug.nativeElement; @@ -317,7 +322,7 @@ describe('MdSelectionList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdListModule], + imports: [MatListModule], declarations: [ SelectionListWithListOptions, SelectionListWithCheckboxPositionAfter, @@ -331,15 +336,16 @@ describe('MdSelectionList', () => { beforeEach(async(() => { fixture = TestBed.createComponent(SelectionListWithListDisabled); - listOption = fixture.debugElement.queryAll(By.directive(MdListOption)); + listOption = fixture.debugElement.queryAll(By.directive(MatListOption)); listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); - selectionList = fixture.debugElement.query(By.directive(MdSelectionList)); + selectionList = fixture.debugElement.query(By.directive(MatSelectionList)); fixture.detectChanges(); })); it('should not allow selection on disabled selection-list', () => { - let testListItem = listOption[2].injector.get(MdListOption); - let selectList = selectionList.injector.get(MdSelectionList).selectedOptions; + let testListItem = listOption[2].injector.get(MatListOption); + let selectList = + selectionList.injector.get(MatSelectionList).selectedOptions; expect(selectList.selected.length).toBe(0); @@ -358,7 +364,7 @@ describe('MdSelectionList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdListModule], + imports: [MatListModule], declarations: [ SelectionListWithListOptions, SelectionListWithCheckboxPositionAfter, @@ -372,9 +378,9 @@ describe('MdSelectionList', () => { beforeEach(async(() => { fixture = TestBed.createComponent(SelectionListWithCheckboxPositionAfter); - listOption = fixture.debugElement.queryAll(By.directive(MdListOption)); + listOption = fixture.debugElement.queryAll(By.directive(MatListOption)); listItemEl = fixture.debugElement.query(By.css('.mat-list-item')); - selectionList = fixture.debugElement.query(By.directive(MdSelectionList)); + selectionList = fixture.debugElement.query(By.directive(MatSelectionList)); fixture.detectChanges(); })); @@ -388,62 +394,62 @@ describe('MdSelectionList', () => { @Component({template: ` - + Inbox (disabled selection-option) - - + Starred - - + + Sent Mail - - + + Drafts - + `}) class SelectionListWithListOptions { } @Component({template: ` - + Inbox (disabled selection-option) - - + + Starred - - + + Sent Mail - - + + Drafts - + `}) class SelectionListWithCheckboxPositionAfter { } @Component({template: ` - + Inbox (disabled selection-option) - - + + Starred - - + + Sent Mail - - + + Drafts - + `}) class SelectionListWithListDisabled { } @Component({template: ` - Item + Item `}) class SelectionListWithDisabledOption { @@ -452,9 +458,9 @@ class SelectionListWithDisabledOption { @Component({template: ` - + Inbox - + `}) class SelectionListWithOnlyOneOption { } diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts index 5cd645a33c1d..3f939fa600c7 100644 --- a/src/lib/list/selection-list.ts +++ b/src/lib/list/selection-list.ts @@ -32,9 +32,8 @@ import { import { CanDisable, CanDisableRipple, - MATERIAL_COMPATIBILITY_MODE, - MdLine, - MdLineSetter, + MatLine, + MatLineSetter, mixinDisabled, mixinDisableRipple, } from '@angular/material/core'; @@ -43,16 +42,16 @@ import {Subscription} from 'rxjs/Subscription'; /** @docs-private */ -export class MdSelectionListBase {} -export const _MdSelectionListMixinBase = mixinDisableRipple(mixinDisabled(MdSelectionListBase)); +export class MatSelectionListBase {} +export const _MatSelectionListMixinBase = mixinDisableRipple(mixinDisabled(MatSelectionListBase)); /** @docs-private */ -export class MdListOptionBase {} -export const _MdListOptionMixinBase = mixinDisableRipple(MdListOptionBase); +export class MatListOptionBase {} +export const _MatListOptionMixinBase = mixinDisableRipple(MatListOptionBase); /** Event emitted by a selection-list whenever the state of an option is changed. */ -export interface MdSelectionListOptionEvent { - option: MdListOption; +export interface MatSelectionListOptionEvent { + option: MatListOption; } const FOCUSED_STYLE: string = 'mat-list-item-focus'; @@ -64,7 +63,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus'; */ @Component({ moduleId: module.id, - selector: 'md-list-option, mat-list-option', + selector: 'mat-list-option', inputs: ['disableRipple'], host: { 'role': 'option', @@ -81,19 +80,18 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus'; encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdListOption extends _MdListOptionMixinBase +export class MatListOption extends _MatListOptionMixinBase implements AfterContentInit, OnDestroy, FocusableOption, CanDisableRipple { - private _lineSetter: MdLineSetter; + private _lineSetter: MatLineSetter; private _selected: boolean = false; private _disabled: boolean = false; /** Whether the option has focus. */ _hasFocus: boolean = false; - @ContentChildren(MdLine) _lines: QueryList; + @ContentChildren(MatLine) _lines: QueryList; /** Whether the label should appear before or after the checkbox. Defaults to 'after' */ @Input() checkboxPosition: 'before' | 'after' = 'after'; @@ -112,27 +110,27 @@ export class MdListOption extends _MdListOptionMixinBase set selected(value: boolean) { this._selected = coerceBooleanProperty(value); } /** Emitted when the option is focused. */ - onFocus = new EventEmitter(); + onFocus = new EventEmitter(); /** Emitted when the option is selected. */ - @Output() selectChange = new EventEmitter(); + @Output() selectChange = new EventEmitter(); /** Emitted when the option is deselected. */ - @Output() deselected = new EventEmitter(); + @Output() deselected = new EventEmitter(); /** Emitted when the option is destroyed. */ - @Output() destroyed = new EventEmitter(); + @Output() destroyed = new EventEmitter(); constructor(private _renderer: Renderer2, private _element: ElementRef, private _changeDetector: ChangeDetectorRef, - @Optional() @Inject(forwardRef(() => MdSelectionList)) - public selectionList: MdSelectionList) { + @Optional() @Inject(forwardRef(() => MatSelectionList)) + public selectionList: MatSelectionList) { super(); } ngAfterContentInit() { - this._lineSetter = new MdLineSetter(this._lines, this._renderer, this._element); + this._lineSetter = new MatLineSetter(this._lines, this._renderer, this._element); if (this.selectionList.disabled) { this.disabled = true; @@ -188,7 +186,7 @@ export class MdListOption extends _MdListOptionMixinBase */ @Component({ moduleId: module.id, - selector: 'md-selection-list, mat-selection-list', + selector: 'mat-selection-list', inputs: ['disabled', 'disableRipple'], host: { 'role': 'listbox', @@ -203,7 +201,7 @@ export class MdListOption extends _MdListOptionMixinBase preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MdSelectionList extends _MdSelectionListMixinBase +export class MatSelectionList extends _MatSelectionListMixinBase implements FocusableOption, CanDisable, CanDisableRipple, AfterContentInit, OnDestroy { /** Tab index for the selection-list. */ @@ -216,20 +214,20 @@ export class MdSelectionList extends _MdSelectionListMixinBase private _optionDestroyStream = Subscription.EMPTY; /** The FocusKeyManager which handles focus. */ - _keyManager: FocusKeyManager; + _keyManager: FocusKeyManager; /** The option components contained within this selection-list. */ - @ContentChildren(MdListOption) options: QueryList; + @ContentChildren(MatListOption) options: QueryList; /** The currently selected options. */ - selectedOptions: SelectionModel = new SelectionModel(true); + selectedOptions: SelectionModel = new SelectionModel(true); constructor(private _element: ElementRef) { super(); } ngAfterContentInit(): void { - this._keyManager = new FocusKeyManager(this.options).withWrap(); + this._keyManager = new FocusKeyManager(this.options).withWrap(); if (this.disabled) { this._tabIndex = -1; @@ -271,9 +269,9 @@ export class MdSelectionList extends _MdSelectionListMixinBase private _onDestroySubscription(): Subscription { return RxChain.from(this.options.changes) .call(startWith, this.options) - .call(switchMap, (options: MdListOption[]) => { + .call(switchMap, (options: MatListOption[]) => { return merge(...options.map(option => option.destroyed)); - }).subscribe((e: MdSelectionListOptionEvent) => { + }).subscribe((e: MatSelectionListOptionEvent) => { let optionIndex: number = this.options.toArray().indexOf(e.option); if (e.option._hasFocus) { // Check whether the option is the last item @@ -291,9 +289,9 @@ export class MdSelectionList extends _MdSelectionListMixinBase private _onFocusSubscription(): Subscription { return RxChain.from(this.options.changes) .call(startWith, this.options) - .call(switchMap, (options: MdListOption[]) => { + .call(switchMap, (options: MatListOption[]) => { return merge(...options.map(option => option.onFocus)); - }).subscribe((e: MdSelectionListOptionEvent) => { + }).subscribe((e: MatSelectionListOptionEvent) => { let optionIndex: number = this.options.toArray().indexOf(e.option); this._keyManager.updateActiveItemIndex(optionIndex); }); @@ -317,7 +315,7 @@ export class MdSelectionList extends _MdSelectionListMixinBase let focusedIndex = this._keyManager.activeItemIndex; if (focusedIndex != null && this._isValidIndex(focusedIndex)) { - let focusedOption: MdListOption = this.options.toArray()[focusedIndex]; + let focusedOption: MatListOption = this.options.toArray()[focusedIndex]; if (focusedOption) { focusedOption.toggle(); diff --git a/src/lib/menu/mat-exports.ts b/src/lib/menu/mat-exports.ts deleted file mode 100644 index 1c123fbebf03..000000000000 --- a/src/lib/menu/mat-exports.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_MENU_DEFAULT_OPTIONS, - MdMenu, - MdMenuDefaultOptions, - MdMenuItem, - MdMenuPanel, - MdMenuTrigger, -} from './menu'; -import {MdMenuModule} from './menu-module'; - - -export {MD_MENU_DEFAULT_OPTIONS as MAT_MENU_DEFAULT_OPTIONS}; -export {MdMenu as MatMenu}; -export {MdMenuDefaultOptions as MatMenuDefaultOptions}; -export {MdMenuItem as MatMenuItem}; -export {MdMenuModule as MatMenuModule}; -export {MdMenuPanel as MatMenuPanel}; -export {MdMenuTrigger as MatMenuTrigger}; diff --git a/src/lib/menu/menu-animations.ts b/src/lib/menu/menu-animations.ts index ff709feb4b18..7a594819fc85 100644 --- a/src/lib/menu/menu-animations.ts +++ b/src/lib/menu/menu-animations.ts @@ -16,7 +16,7 @@ import{ } from '@angular/animations'; /** - * Below are all the animations for the md-menu component. + * Below are all the animations for the mat-menu component. * Animation duration and timing values are based on: * https://material.io/guidelines/components/menus.html#menus-usage */ diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index aa7d1c8dfef1..81243ac07b97 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -32,33 +32,33 @@ import {Observable} from 'rxjs/Observable'; import {merge} from 'rxjs/observable/merge'; import {Subscription} from 'rxjs/Subscription'; import {fadeInItems, transformMenu} from './menu-animations'; -import {throwMdMenuInvalidPositionX, throwMdMenuInvalidPositionY} from './menu-errors'; -import {MdMenuItem} from './menu-item'; -import {MdMenuPanel} from './menu-panel'; +import {throwMatMenuInvalidPositionX, throwMatMenuInvalidPositionY} from './menu-errors'; +import {MatMenuItem} from './menu-item'; +import {MatMenuPanel} from './menu-panel'; import {MenuPositionX, MenuPositionY} from './menu-positions'; -/** Default `md-menu` options that can be overridden. */ -export interface MdMenuDefaultOptions { +/** Default `mat-menu` options that can be overridden. */ +export interface MatMenuDefaultOptions { xPosition: MenuPositionX; yPosition: MenuPositionY; overlapTrigger: boolean; } -/** Injection token to be used to override the default options for `md-menu`. */ -export const MD_MENU_DEFAULT_OPTIONS = - new InjectionToken('md-menu-default-options'); +/** Injection token to be used to override the default options for `mat-menu`. */ +export const MAT_MENU_DEFAULT_OPTIONS = + new InjectionToken('mat-menu-default-options'); /** * Start elevation for the menu panel. * @docs-private */ -const MD_MENU_BASE_ELEVATION = 2; +const MAT_MENU_BASE_ELEVATION = 2; @Component({ moduleId: module.id, - selector: 'md-menu, mat-menu', + selector: 'mat-menu', templateUrl: 'menu.html', styleUrls: ['menu.css'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -68,10 +68,10 @@ const MD_MENU_BASE_ELEVATION = 2; transformMenu, fadeInItems ], - exportAs: 'mdMenu, matMenu' + exportAs: 'matMenu' }) -export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { - private _keyManager: FocusKeyManager; +export class MatMenu implements AfterContentInit, MatMenuPanel, OnDestroy { + private _keyManager: FocusKeyManager; private _xPosition: MenuPositionX = this._defaultOptions.xPosition; private _yPosition: MenuPositionY = this._defaultOptions.yPosition; private _previousElevation: string; @@ -86,7 +86,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { _panelAnimationState: 'void' | 'enter-start' | 'enter' = 'void'; /** Parent menu of the current menu panel. */ - parentMenu: MdMenuPanel | undefined; + parentMenu: MatMenuPanel | undefined; /** Layout direction of the menu. */ direction: Direction; @@ -96,7 +96,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { get xPosition() { return this._xPosition; } set xPosition(value: MenuPositionX) { if (value !== 'before' && value !== 'after') { - throwMdMenuInvalidPositionX(); + throwMatMenuInvalidPositionX(); } this._xPosition = value; this.setPositionClasses(); @@ -107,7 +107,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { get yPosition() { return this._yPosition; } set yPosition(value: MenuPositionY) { if (value !== 'above' && value !== 'below') { - throwMdMenuInvalidPositionY(); + throwMatMenuInvalidPositionY(); } this._yPosition = value; this.setPositionClasses(); @@ -116,13 +116,13 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { @ViewChild(TemplateRef) templateRef: TemplateRef; /** List of the items inside of a menu. */ - @ContentChildren(MdMenuItem) items: QueryList; + @ContentChildren(MatMenuItem) items: QueryList; /** Whether the menu should overlap its trigger. */ @Input() overlapTrigger = this._defaultOptions.overlapTrigger; /** - * This method takes classes set on the host md-menu element and applies them on the + * This method takes classes set on the host mat-menu element and applies them on the * menu template that displays in the overlay container. Otherwise, it's difficult * to style the containing menu from outside the component. * @param classes list of class names @@ -145,10 +145,10 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { constructor( private _elementRef: ElementRef, - @Inject(MD_MENU_DEFAULT_OPTIONS) private _defaultOptions: MdMenuDefaultOptions) { } + @Inject(MAT_MENU_DEFAULT_OPTIONS) private _defaultOptions: MatMenuDefaultOptions) { } ngAfterContentInit() { - this._keyManager = new FocusKeyManager(this.items).withWrap(); + this._keyManager = new FocusKeyManager(this.items).withWrap(); this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.close.emit('keydown')); } @@ -159,10 +159,10 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { } /** Stream that emits whenever the hovered menu item changes. */ - hover(): Observable { + hover(): Observable { return RxChain.from(this.items.changes) .call(startWith, this.items) - .call(switchMap, (items: MdMenuItem[]) => merge(...items.map(item => item.hover))) + .call(switchMap, (items: MatMenuItem[]) => merge(...items.map(item => item.hover))) .result(); } @@ -213,7 +213,7 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy { */ setElevation(depth: number): void { // The elevation starts at the base and increases by one for each level. - const newElevation = `mat-elevation-z${MD_MENU_BASE_ELEVATION + depth}`; + const newElevation = `mat-elevation-z${MAT_MENU_BASE_ELEVATION + depth}`; const customElevation = Object.keys(this._classList).find(c => c.startsWith('mat-elevation-z')); if (!customElevation || customElevation === this._previousElevation) { diff --git a/src/lib/menu/menu-errors.ts b/src/lib/menu/menu-errors.ts index 4090e71fa812..0ab32e469c05 100644 --- a/src/lib/menu/menu-errors.ts +++ b/src/lib/menu/menu-errors.ts @@ -7,15 +7,15 @@ */ /** - * Throws an exception for the case when menu trigger doesn't have a valid md-menu instance + * Throws an exception for the case when menu trigger doesn't have a valid mat-menu instance * @docs-private */ -export function throwMdMenuMissingError() { - throw Error(`md-menu-trigger: must pass in an md-menu instance. +export function throwMatMenuMissingError() { + throw Error(`mat-menu-trigger: must pass in an mat-menu instance. Example: - - `); + + `); } /** @@ -23,9 +23,9 @@ export function throwMdMenuMissingError() { * In other words, it doesn't match 'before' or 'after'. * @docs-private */ -export function throwMdMenuInvalidPositionX() { +export function throwMatMenuInvalidPositionX() { throw Error(`x-position value must be either 'before' or after'. - Example: `); + Example: `); } /** @@ -33,7 +33,7 @@ export function throwMdMenuInvalidPositionX() { * In other words, it doesn't match 'above' or 'below'. * @docs-private */ -export function throwMdMenuInvalidPositionY() { +export function throwMatMenuInvalidPositionY() { throw Error(`y-position value must be either 'above' or below'. - Example: `); + Example: `); } diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts index fe9ff3dcbb55..c08a7e39cf3a 100644 --- a/src/lib/menu/menu-item.ts +++ b/src/lib/menu/menu-item.ts @@ -14,21 +14,21 @@ import { OnDestroy, ViewEncapsulation, } from '@angular/core'; -import {CanDisable, MATERIAL_COMPATIBILITY_MODE, mixinDisabled} from '@angular/material/core'; +import {CanDisable, mixinDisabled} from '@angular/material/core'; import {Subject} from 'rxjs/Subject'; -// Boilerplate for applying mixins to MdMenuItem. +// Boilerplate for applying mixins to MatMenuItem. /** @docs-private */ -export class MdMenuItemBase {} -export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase); +export class MatMenuItemBase {} +export const _MatMenuItemMixinBase = mixinDisabled(MatMenuItemBase); /** - * This directive is intended to be used inside an md-menu tag. + * This directive is intended to be used inside an mat-menu tag. * It exists mostly to set the role attribute. */ @Component({ moduleId: module.id, - selector: '[md-menu-item], [mat-menu-item]', + selector: '[mat-menu-item]', inputs: ['disabled'], host: { 'role': 'menuitem', @@ -45,14 +45,13 @@ export const _MdMenuItemMixinBase = mixinDisabled(MdMenuItemBase); encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, templateUrl: 'menu-item.html', - exportAs: 'mdMenuItem, matMenuItem', - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], + exportAs: 'matMenuItem', }) -export class MdMenuItem extends _MdMenuItemMixinBase implements FocusableOption, CanDisable, +export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOption, CanDisable, OnDestroy { /** Stream that emits when the menu item is hovered. */ - hover: Subject = new Subject(); + hover: Subject = new Subject(); /** Whether the menu item is highlighted. */ _highlighted: boolean = false; diff --git a/src/lib/menu/menu-module.ts b/src/lib/menu/menu-module.ts index 2ebfabe5a916..3c35206d6e46 100644 --- a/src/lib/menu/menu-module.ts +++ b/src/lib/menu/menu-module.ts @@ -8,27 +8,27 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdCommonModule} from '@angular/material/core'; +import {MatCommonModule} from '@angular/material/core'; import {OverlayModule} from '@angular/cdk/overlay'; -import {MdMenu, MD_MENU_DEFAULT_OPTIONS} from './menu-directive'; -import {MdMenuItem} from './menu-item'; -import {MdMenuTrigger, MD_MENU_SCROLL_STRATEGY_PROVIDER} from './menu-trigger'; -import {MdRippleModule} from '@angular/material/core'; +import {MatMenu, MAT_MENU_DEFAULT_OPTIONS} from './menu-directive'; +import {MatMenuItem} from './menu-item'; +import {MatMenuTrigger, MAT_MENU_SCROLL_STRATEGY_PROVIDER} from './menu-trigger'; +import {MatRippleModule} from '@angular/material/core'; @NgModule({ imports: [ OverlayModule, CommonModule, - MdRippleModule, - MdCommonModule, + MatRippleModule, + MatCommonModule, ], - exports: [MdMenu, MdMenuItem, MdMenuTrigger, MdCommonModule], - declarations: [MdMenu, MdMenuItem, MdMenuTrigger], + exports: [MatMenu, MatMenuItem, MatMenuTrigger, MatCommonModule], + declarations: [MatMenu, MatMenuItem, MatMenuTrigger], providers: [ - MD_MENU_SCROLL_STRATEGY_PROVIDER, + MAT_MENU_SCROLL_STRATEGY_PROVIDER, { - provide: MD_MENU_DEFAULT_OPTIONS, + provide: MAT_MENU_DEFAULT_OPTIONS, useValue: { overlapTrigger: true, xPosition: 'after', @@ -37,4 +37,4 @@ import {MdRippleModule} from '@angular/material/core'; } ], }) -export class MdMenuModule {} +export class MatMenuModule {} diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts index 073d40805267..3f1a6eb18492 100644 --- a/src/lib/menu/menu-panel.ts +++ b/src/lib/menu/menu-panel.ts @@ -10,13 +10,13 @@ import {EventEmitter, TemplateRef} from '@angular/core'; import {MenuPositionX, MenuPositionY} from './menu-positions'; import {Direction} from '@angular/cdk/bidi'; -export interface MdMenuPanel { +export interface MatMenuPanel { xPosition: MenuPositionX; yPosition: MenuPositionY; overlapTrigger: boolean; templateRef: TemplateRef; close: EventEmitter; - parentMenu?: MdMenuPanel | undefined; + parentMenu?: MatMenuPanel | undefined; direction?: Direction; focusFirstItem: () => void; setPositionClasses: (x: MenuPositionX, y: MenuPositionY) => void; diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 09d2e9c63764..32e520353ee6 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -38,28 +38,28 @@ import { import {merge} from 'rxjs/observable/merge'; import {of as observableOf} from 'rxjs/observable/of'; import {Subscription} from 'rxjs/Subscription'; -import {MdMenu} from './menu-directive'; -import {throwMdMenuMissingError} from './menu-errors'; -import {MdMenuItem} from './menu-item'; -import {MdMenuPanel} from './menu-panel'; +import {MatMenu} from './menu-directive'; +import {throwMatMenuMissingError} from './menu-errors'; +import {MatMenuItem} from './menu-item'; +import {MatMenuPanel} from './menu-panel'; import {MenuPositionX, MenuPositionY} from './menu-positions'; /** Injection token that determines the scroll handling while the menu is open. */ -export const MD_MENU_SCROLL_STRATEGY = - new InjectionToken<() => ScrollStrategy>('md-menu-scroll-strategy'); +export const MAT_MENU_SCROLL_STRATEGY = + new InjectionToken<() => ScrollStrategy>('mat-menu-scroll-strategy'); /** @docs-private */ -export function MD_MENU_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): +export function MAT_MENU_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => RepositionScrollStrategy { return () => overlay.scrollStrategies.reposition(); } /** @docs-private */ -export const MD_MENU_SCROLL_STRATEGY_PROVIDER = { - provide: MD_MENU_SCROLL_STRATEGY, +export const MAT_MENU_SCROLL_STRATEGY_PROVIDER = { + provide: MAT_MENU_SCROLL_STRATEGY, deps: [Overlay], - useFactory: MD_MENU_SCROLL_STRATEGY_PROVIDER_FACTORY, + useFactory: MAT_MENU_SCROLL_STRATEGY_PROVIDER_FACTORY, }; @@ -69,21 +69,20 @@ export const MD_MENU_SCROLL_STRATEGY_PROVIDER = { export const MENU_PANEL_TOP_PADDING = 8; /** - * This directive is intended to be used in conjunction with an md-menu tag. It is + * This directive is intended to be used in conjunction with an mat-menu tag. It is * responsible for toggling the display of the provided menu instance. */ @Directive({ - selector: `[md-menu-trigger-for], [mat-menu-trigger-for], - [mdMenuTriggerFor], [matMenuTriggerFor]`, + selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`, host: { 'aria-haspopup': 'true', '(mousedown)': '_handleMousedown($event)', '(keydown)': '_handleKeydown($event)', '(click)': '_handleClick($event)', }, - exportAs: 'mdMenuTrigger, matMenuTrigger' + exportAs: 'matMenuTrigger' }) -export class MdMenuTrigger implements AfterViewInit, OnDestroy { +export class MatMenuTrigger implements AfterViewInit, OnDestroy { private _portal: TemplatePortal; private _overlayRef: OverlayRef | null = null; private _menuOpen: boolean = false; @@ -95,38 +94,18 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { // the first item of the list when the menu is opened via the keyboard private _openedByMouse: boolean = false; - /** @deprecated */ - @Input('md-menu-trigger-for') - get _deprecatedMdMenuTriggerFor(): MdMenuPanel { - return this.menu; - } - - set _deprecatedMdMenuTriggerFor(v: MdMenuPanel) { - this.menu = v; - } - /** @deprecated */ @Input('mat-menu-trigger-for') - get _deprecatedMatMenuTriggerFor(): MdMenuPanel { - return this.menu; - } - - set _deprecatedMatMenuTriggerFor(v: MdMenuPanel) { - this.menu = v; - } - - // Trigger input for compatibility mode - @Input('matMenuTriggerFor') - get _matMenuTriggerFor(): MdMenuPanel { + get _deprecatedMatMenuTriggerFor(): MatMenuPanel { return this.menu; } - set _matMenuTriggerFor(v: MdMenuPanel) { + set _deprecatedMatMenuTriggerFor(v: MatMenuPanel) { this.menu = v; } /** References the menu instance that the trigger is associated with. */ - @Input('mdMenuTriggerFor') menu: MdMenuPanel; + @Input('matMenuTriggerFor') menu: MatMenuPanel; /** Event emitted when the associated menu is opened. */ @Output() onMenuOpen = new EventEmitter(); @@ -137,9 +116,9 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { constructor(private _overlay: Overlay, private _element: ElementRef, private _viewContainerRef: ViewContainerRef, - @Inject(MD_MENU_SCROLL_STRATEGY) private _scrollStrategy, - @Optional() private _parentMenu: MdMenu, - @Optional() @Self() private _menuItemInstance: MdMenuItem, + @Inject(MAT_MENU_SCROLL_STRATEGY) private _scrollStrategy, + @Optional() private _parentMenu: MatMenu, + @Optional() @Self() private _menuItemInstance: MatMenuItem, @Optional() private _dir: Directionality) { if (_menuItemInstance) { @@ -206,7 +185,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { this._closeSubscription = this._menuClosingActions().subscribe(() => this.menu.close.emit()); this._initMenu(); - if (this.menu instanceof MdMenu) { + if (this.menu instanceof MatMenu) { this.menu._startAnimation(); } } @@ -220,7 +199,7 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { this._closeSubscription.unsubscribe(); this.menu.close.emit(); - if (this.menu instanceof MdMenu) { + if (this.menu instanceof MatMenu) { this.menu._resetAnimation(); } } @@ -291,12 +270,12 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { } /** - * This method checks that a valid instance of MdMenu has been passed into - * mdMenuTriggerFor. If not, an exception is thrown. + * This method checks that a valid instance of MatMenu has been passed into + * matMenuTriggerFor. If not, an exception is thrown. */ private _checkMenu() { if (!this.menu) { - throwMdMenuMissingError(); + throwMatMenuMissingError(); } } diff --git a/src/lib/menu/menu.md b/src/lib/menu/menu.md index 70529834470e..f202c21ce9c5 100644 --- a/src/lib/menu/menu.md +++ b/src/lib/menu/menu.md @@ -1,28 +1,28 @@ -`` is a floating panel containing list of options. +`` is a floating panel containing list of options. -By itself, the `` element does not render anything. The menu is attached to and opened -via application of the `mdMenuTriggerFor` directive: +By itself, the `` element does not render anything. The menu is attached to and opened +via application of the `matMenuTriggerFor` directive: ```html - - - - + + + + - ``` ### Toggling the menu programmatically The menu exposes an API to open/close programmatically. Please note that in this case, an -`mdMenuTriggerFor` directive is still necessary to attach the menu to a trigger element in the DOM. +`matMenuTriggerFor` directive is still necessary to attach the menu to a trigger element in the DOM. ```ts class MyComponent { - @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; + @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; someMethod() { this.trigger.openMenu(); @@ -31,24 +31,24 @@ class MyComponent { ``` ### Icons -Menus support displaying `md-icon` elements before the menu item text. +Menus support displaying `mat-icon` elements before the menu item text. *my-comp.html* ```html - - - - - + ``` ### Customizing menu position @@ -59,36 +59,36 @@ The position can be changed using the `xPosition` (`before | after`) and `yPosit `[overlapTrigger]="false"` attribute. ```html - - - - + + + + - ``` ### Nested menu -Material supports the ability for an `md-menu-item` to open a sub-menu. To do so, you have to define -your root menu and sub-menus, in addition to setting the `[mdMenuTriggerFor]` on the `md-menu-item` +Material supports the ability for an `mat-menu-item` to open a sub-menu. To do so, you have to define +your root menu and sub-menus, in addition to setting the `[matMenuTriggerFor]` on the `mat-menu-item` that should trigger the sub-menu: ```html - - - - - - - - - - - - + + + + + + + + + + ``` diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts index 8b07cf95975c..1b82873a61d3 100644 --- a/src/lib/menu/menu.spec.ts +++ b/src/lib/menu/menu.spec.ts @@ -14,11 +14,11 @@ import {Direction, Directionality} from '@angular/cdk/bidi'; import {OverlayContainer} from '@angular/cdk/overlay'; import {ESCAPE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes'; import { - MD_MENU_DEFAULT_OPTIONS, - MdMenu, - MdMenuModule, - MdMenuPanel, - MdMenuTrigger, + MAT_MENU_DEFAULT_OPTIONS, + MatMenu, + MatMenuModule, + MatMenuPanel, + MatMenuTrigger, MenuPositionX, MenuPositionY, } from './index'; @@ -33,14 +33,14 @@ import { } from '@angular/cdk/testing'; -describe('MdMenu', () => { +describe('MatMenu', () => { let overlayContainerElement: HTMLElement; let dir: Direction; beforeEach(async(() => { dir = 'ltr'; TestBed.configureTestingModule({ - imports: [MdMenuModule, NoopAnimationsModule], + imports: [MatMenuModule, NoopAnimationsModule], declarations: [ SimpleMenu, PositionedMenu, @@ -145,7 +145,7 @@ describe('MdMenu', () => { fixture.detectChanges(); fixture.componentInstance.trigger.openMenu(); - const menuEl = fixture.debugElement.query(By.css('md-menu')).nativeElement; + const menuEl = fixture.debugElement.query(By.css('mat-menu')).nativeElement; const panel = overlayContainerElement.querySelector('.mat-menu-panel')!; expect(menuEl.classList).not.toContain('custom-one'); @@ -489,7 +489,7 @@ describe('MdMenu', () => { }); it('should emit an event when a menu item is clicked', () => { - const menuItem = overlayContainerElement.querySelector('[md-menu-item]') as HTMLElement; + const menuItem = overlayContainerElement.querySelector('[mat-menu-item]') as HTMLElement; menuItem.click(); fixture.detectChanges(); @@ -576,7 +576,7 @@ describe('MdMenu', () => { const spy = jasmine.createSpy('hover spy'); const subscription = instance.rootMenu.hover().subscribe(spy); - const menuItems = overlay.querySelectorAll('[md-menu-item]'); + const menuItems = overlay.querySelectorAll('[mat-menu-item]'); dispatchMouseEvent(menuItems[0], 'mouseenter'); fixture.detectChanges(); @@ -597,7 +597,7 @@ describe('MdMenu', () => { fixture.detectChanges(); expect(overlay.querySelectorAll('.mat-menu-panel').length).toBe(1, 'Expected one open menu'); - const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [md-menu-item]')); + const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [mat-menu-item]')); const levelOneTrigger = overlay.querySelector('#level-one-trigger')!; dispatchMouseEvent(levelOneTrigger, 'mouseenter'); @@ -621,7 +621,7 @@ describe('MdMenu', () => { instance.rootTriggerEl.nativeElement.click(); fixture.detectChanges(); - const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [md-menu-item]')); + const items = Array.from(overlay.querySelectorAll('.mat-menu-panel [mat-menu-item]')); const levelOneTrigger = overlay.querySelector('#level-one-trigger')!; dispatchMouseEvent(levelOneTrigger, 'mouseenter'); @@ -895,7 +895,7 @@ describe('MdMenu', () => { instance.rootTrigger.openMenu(); fixture.detectChanges(); - const menuItems = overlay.querySelectorAll('[md-menu-item]'); + const menuItems = overlay.querySelectorAll('[mat-menu-item]'); expect(menuItems[0].classList).toContain('mat-menu-item-submenu-trigger'); expect(menuItems[1].classList).not.toContain('mat-menu-item-submenu-trigger'); @@ -1025,7 +1025,7 @@ describe('MdMenu', () => { Object.defineProperty(event, 'buttons', {get: () => 1}); event.preventDefault = jasmine.createSpy('preventDefault spy'); - dispatchMouseEvent(overlay.querySelector('[md-menu-item]')!, 'mousedown', 0, 0, event); + dispatchMouseEvent(overlay.querySelector('[mat-menu-item]')!, 'mousedown', 0, 0, event); expect(event.preventDefault).toHaveBeenCalled(); }); @@ -1033,13 +1033,13 @@ describe('MdMenu', () => { }); -describe('MdMenu default overrides', () => { +describe('MatMenu default overrides', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdMenuModule, NoopAnimationsModule], + imports: [MatMenuModule, NoopAnimationsModule], declarations: [SimpleMenu], providers: [{ - provide: MD_MENU_DEFAULT_OPTIONS, + provide: MAT_MENU_DEFAULT_OPTIONS, useValue: {overlapTrigger: false, xPosition: 'before', yPosition: 'above'}, }], }).compileComponents(); @@ -1058,50 +1058,50 @@ describe('MdMenu default overrides', () => { @Component({ template: ` - - - - - + + + + + ` }) class SimpleMenu { - @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; + @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; @ViewChild('triggerEl') triggerEl: ElementRef; - @ViewChild(MdMenu) menu: MdMenu; + @ViewChild(MatMenu) menu: MatMenu; closeCallback = jasmine.createSpy('menu closed callback'); } @Component({ template: ` - - - - + + + + ` }) class PositionedMenu { - @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; + @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; @ViewChild('triggerEl') triggerEl: ElementRef; xPosition: MenuPositionX = 'before'; yPosition: MenuPositionY = 'above'; } interface TestableMenu { - trigger: MdMenuTrigger; + trigger: MatMenuTrigger; triggerEl: ElementRef; } @Component({ template: ` - - - - + + + + ` }) class OverlapMenu implements TestableMenu { @Input() overlapTrigger: boolean; - @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; + @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; @ViewChild('triggerEl') triggerEl: ElementRef; } @@ -1113,14 +1113,14 @@ class OverlapMenu implements TestableMenu { `, - exportAs: 'mdCustomMenu, matCustomMenu' + exportAs: 'matCustomMenu' }) -class CustomMenuPanel implements MdMenuPanel { +class CustomMenuPanel implements MatMenuPanel { direction: Direction; xPosition: MenuPositionX = 'after'; yPosition: MenuPositionY = 'below'; overlapTrigger = true; - parentMenu: MdMenuPanel; + parentMenu: MatMenuPanel; @ViewChild(TemplateRef) templateRef: TemplateRef; @Output() close = new EventEmitter(); @@ -1130,96 +1130,96 @@ class CustomMenuPanel implements MdMenuPanel { @Component({ template: ` - - - + + + ` }) class CustomMenu { - @ViewChild(MdMenuTrigger) trigger: MdMenuTrigger; + @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; } @Component({ template: ` + [matMenuTriggerFor]="levelTwo" + #alternateTrigger="matMenuTrigger">Toggle alternate menu - - - - + + - + [matMenuTriggerFor]="lazy" + #lazyTrigger="matMenuTrigger">Three + - - - + - - - - - - - - - - - - - - + [matMenuTriggerFor]="levelTwo" + #levelTwoTrigger="matMenuTrigger">Five + + + + + + + + + + + + + + ` }) class NestedMenu { - @ViewChild('root') rootMenu: MdMenu; - @ViewChild('rootTrigger') rootTrigger: MdMenuTrigger; + @ViewChild('root') rootMenu: MatMenu; + @ViewChild('rootTrigger') rootTrigger: MatMenuTrigger; @ViewChild('rootTriggerEl') rootTriggerEl: ElementRef; - @ViewChild('alternateTrigger') alternateTrigger: MdMenuTrigger; + @ViewChild('alternateTrigger') alternateTrigger: MatMenuTrigger; - @ViewChild('levelOne') levelOneMenu: MdMenu; - @ViewChild('levelOneTrigger') levelOneTrigger: MdMenuTrigger; + @ViewChild('levelOne') levelOneMenu: MatMenu; + @ViewChild('levelOneTrigger') levelOneTrigger: MatMenuTrigger; - @ViewChild('levelTwo') levelTwoMenu: MdMenu; - @ViewChild('levelTwoTrigger') levelTwoTrigger: MdMenuTrigger; + @ViewChild('levelTwo') levelTwoMenu: MatMenu; + @ViewChild('levelTwoTrigger') levelTwoTrigger: MatMenuTrigger; - @ViewChild('lazy') lazyMenu: MdMenu; - @ViewChild('lazyTrigger') lazyTrigger: MdMenuTrigger; + @ViewChild('lazy') lazyMenu: MatMenu; + @ViewChild('lazyTrigger') lazyTrigger: MatMenuTrigger; showLazy = false; } @Component({ template: ` - + - - - + + + - - - + + + ` }) class NestedMenuCustomElevation { - @ViewChild('rootTrigger') rootTrigger: MdMenuTrigger; - @ViewChild('levelOneTrigger') levelOneTrigger: MdMenuTrigger; + @ViewChild('rootTrigger') rootTrigger: MatMenuTrigger; + @ViewChild('levelOneTrigger') levelOneTrigger: MatMenuTrigger; } diff --git a/src/lib/menu/menu.ts b/src/lib/menu/menu.ts index 1eff665c413b..4d0993cd6763 100644 --- a/src/lib/menu/menu.ts +++ b/src/lib/menu/menu.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -export {MdMenu, MdMenuDefaultOptions, MD_MENU_DEFAULT_OPTIONS} from './menu-directive'; -export {MdMenuItem} from './menu-item'; -export {MdMenuTrigger} from './menu-trigger'; -export {MdMenuPanel} from './menu-panel'; +export {MatMenu, MatMenuDefaultOptions, MAT_MENU_DEFAULT_OPTIONS} from './menu-directive'; +export {MatMenuItem} from './menu-item'; +export {MatMenuTrigger} from './menu-trigger'; +export {MatMenuPanel} from './menu-panel'; export {MenuPositionX, MenuPositionY} from './menu-positions'; diff --git a/src/lib/menu/public_api.ts b/src/lib/menu/public_api.ts index 21d9f21df158..39c6fdda609b 100644 --- a/src/lib/menu/public_api.ts +++ b/src/lib/menu/public_api.ts @@ -8,6 +8,6 @@ export * from './menu-module'; export * from './menu'; -export {MD_MENU_SCROLL_STRATEGY} from './menu-trigger'; +export {MAT_MENU_SCROLL_STRATEGY} from './menu-trigger'; export {fadeInItems, transformMenu} from './menu-animations'; -export * from './mat-exports'; + diff --git a/src/lib/paginator/mat-exports.ts b/src/lib/paginator/mat-exports.ts deleted file mode 100644 index 26c46461f0bb..000000000000 --- a/src/lib/paginator/mat-exports.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdPaginator} from './paginator'; -import {MdPaginatorIntl} from './paginator-intl'; -import {MdPaginatorModule} from './paginator-module'; - - -export {MdPaginator as MatPaginator}; -export {MdPaginatorIntl as MatPaginatorIntl}; -export {MdPaginatorModule as MatPaginatorModule}; diff --git a/src/lib/paginator/paginator-intl.ts b/src/lib/paginator/paginator-intl.ts index 1c9f6ec4c6f8..5e0bac5dda7e 100644 --- a/src/lib/paginator/paginator-intl.ts +++ b/src/lib/paginator/paginator-intl.ts @@ -10,11 +10,11 @@ import {Injectable} from '@angular/core'; import {Subject} from 'rxjs/Subject'; /** - * To modify the labels and text displayed, create a new instance of MdPaginatorIntl and + * To modify the labels and text displayed, create a new instance of MatPaginatorIntl and * include it in a custom provider */ @Injectable() -export class MdPaginatorIntl { +export class MatPaginatorIntl { /** * Stream that emits whenever the labels here are changed. Use this to notify * components if the labels have changed after initialization. diff --git a/src/lib/paginator/paginator-module.ts b/src/lib/paginator/paginator-module.ts index a9873e73e2da..c5eede24e2ff 100644 --- a/src/lib/paginator/paginator-module.ts +++ b/src/lib/paginator/paginator-module.ts @@ -8,22 +8,22 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MdButtonModule} from '@angular/material/button'; -import {MdSelectModule} from '@angular/material/select'; -import {MdTooltipModule} from '@angular/material/tooltip'; -import {MdPaginator} from './paginator'; -import {MdPaginatorIntl} from './paginator-intl'; +import {MatButtonModule} from '@angular/material/button'; +import {MatSelectModule} from '@angular/material/select'; +import {MatTooltipModule} from '@angular/material/tooltip'; +import {MatPaginator} from './paginator'; +import {MatPaginatorIntl} from './paginator-intl'; @NgModule({ imports: [ CommonModule, - MdButtonModule, - MdSelectModule, - MdTooltipModule, + MatButtonModule, + MatSelectModule, + MatTooltipModule, ], - exports: [MdPaginator], - declarations: [MdPaginator], - providers: [MdPaginatorIntl], + exports: [MatPaginator], + declarations: [MatPaginator], + providers: [MatPaginatorIntl], }) -export class MdPaginatorModule {} +export class MatPaginatorModule {} diff --git a/src/lib/paginator/paginator.md b/src/lib/paginator/paginator.md index a744fb95002d..7284bb8829eb 100644 --- a/src/lib/paginator/paginator.md +++ b/src/lib/paginator/paginator.md @@ -1,4 +1,4 @@ -`` provides navigation for paged information, typically used with a table. +`` provides navigation for paged information, typically used with a table. @@ -19,11 +19,11 @@ dropdown can be set via `pageSizeOptions` The current pageSize will always appear in the dropdown, even if it is not included in pageSizeOptions. ### Internationalization -The labels for the paginator can be customized by providing your own instance of `MdPaginatorIntl`. +The labels for the paginator can be customized by providing your own instance of `MatPaginatorIntl`. This will allow you to change the following: 1. The label for the length of each page. 2. The range text displayed to the user. 3. The tooltip messages on the navigation buttons. ### Accessibility -The `aria-label`s for next page and previous page buttons can be set in `MdPaginatorIntl`. +The `aria-label`s for next page and previous page buttons can be set in `MatPaginatorIntl`. diff --git a/src/lib/paginator/paginator.spec.ts b/src/lib/paginator/paginator.spec.ts index bf3d9cd96ef0..234b5f32808e 100644 --- a/src/lib/paginator/paginator.spec.ts +++ b/src/lib/paginator/paginator.spec.ts @@ -1,37 +1,37 @@ import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing'; -import {MdPaginatorModule} from './index'; -import {MdPaginator, PageEvent} from './paginator'; +import {MatPaginatorModule} from './index'; +import {MatPaginator, PageEvent} from './paginator'; import {Component, ViewChild} from '@angular/core'; -import {MdPaginatorIntl} from './paginator-intl'; +import {MatPaginatorIntl} from './paginator-intl'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {dispatchMouseEvent} from '@angular/cdk/testing'; -describe('MdPaginator', () => { - let fixture: ComponentFixture; - let component: MdPaginatorApp; - let paginator: MdPaginator; +describe('MatPaginator', () => { + let fixture: ComponentFixture; + let component: MatPaginatorApp; + let paginator: MatPaginator; beforeEach(async(() => { TestBed.configureTestingModule({ imports: [ - MdPaginatorModule, + MatPaginatorModule, NoopAnimationsModule, ], declarations: [ - MdPaginatorApp, - MdPaginatorWithoutPageSizeApp, - MdPaginatorWithoutOptionsApp, - MdPaginatorWithoutInputsApp, + MatPaginatorApp, + MatPaginatorWithoutPageSizeApp, + MatPaginatorWithoutOptionsApp, + MatPaginatorWithoutInputsApp, ], - providers: [MdPaginatorIntl] + providers: [MatPaginatorIntl] }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(MdPaginatorApp); + fixture = TestBed.createComponent(MatPaginatorApp); component = fixture.componentInstance; - paginator = component.mdPaginator; + paginator = component.paginator; fixture.detectChanges(); }); @@ -92,7 +92,7 @@ describe('MdPaginator', () => { }); it('should re-render when the i18n labels change', - inject([MdPaginatorIntl], (intl: MdPaginatorIntl) => { + inject([MatPaginatorIntl], (intl: MatPaginatorIntl) => { const label = fixture.nativeElement.querySelector('.mat-paginator-page-size-label'); intl.itemsPerPageLabel = '1337 items per page'; @@ -175,18 +175,18 @@ describe('MdPaginator', () => { }); it('should default the page size options to the page size if no options provided', () => { - const withoutOptionsAppFixture = TestBed.createComponent(MdPaginatorWithoutOptionsApp); + const withoutOptionsAppFixture = TestBed.createComponent(MatPaginatorWithoutOptionsApp); withoutOptionsAppFixture.detectChanges(); - expect(withoutOptionsAppFixture.componentInstance.mdPaginator._displayedPageSizeOptions) + expect(withoutOptionsAppFixture.componentInstance.paginator._displayedPageSizeOptions) .toEqual([10]); }); it('should default the page size to the first page size option if not provided', () => { - const withoutPageSizeAppFixture = TestBed.createComponent(MdPaginatorWithoutPageSizeApp); + const withoutPageSizeAppFixture = TestBed.createComponent(MatPaginatorWithoutPageSizeApp); withoutPageSizeAppFixture.detectChanges(); - expect(withoutPageSizeAppFixture.componentInstance.mdPaginator.pageSize).toEqual(10); + expect(withoutPageSizeAppFixture.componentInstance.paginator.pageSize).toEqual(10); }); it('should show a sorted list of page size options including the current page size', () => { @@ -263,15 +263,15 @@ function getNextButton(fixture: ComponentFixture) { @Component({ template: ` - - + `, }) -class MdPaginatorApp { +class MatPaginatorApp { pageIndex = 0; pageSize = 10; pageSizeOptions = [5, 10, 25, 100]; @@ -279,7 +279,7 @@ class MdPaginatorApp { latestPageEvent: PageEvent | null; - @ViewChild(MdPaginator) mdPaginator: MdPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; goToLastPage() { this.pageIndex = Math.ceil(this.length / this.pageSize); @@ -288,27 +288,27 @@ class MdPaginatorApp { @Component({ template: ` - + `, }) -class MdPaginatorWithoutInputsApp { - @ViewChild(MdPaginator) mdPaginator: MdPaginator; +class MatPaginatorWithoutInputsApp { + @ViewChild(MatPaginator) paginator: MatPaginator; } @Component({ template: ` - + `, }) -class MdPaginatorWithoutPageSizeApp { - @ViewChild(MdPaginator) mdPaginator: MdPaginator; +class MatPaginatorWithoutPageSizeApp { + @ViewChild(MatPaginator) paginator: MatPaginator; } @Component({ template: ` - + `, }) -class MdPaginatorWithoutOptionsApp { - @ViewChild(MdPaginator) mdPaginator: MdPaginator; +class MatPaginatorWithoutOptionsApp { + @ViewChild(MatPaginator) paginator: MatPaginator; } diff --git a/src/lib/paginator/paginator.ts b/src/lib/paginator/paginator.ts index 22391029aaf9..5e45fd2a1205 100644 --- a/src/lib/paginator/paginator.ts +++ b/src/lib/paginator/paginator.ts @@ -17,9 +17,8 @@ import { Output, ViewEncapsulation, } from '@angular/core'; -import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core'; import {Subscription} from 'rxjs/Subscription'; -import {MdPaginatorIntl} from './paginator-intl'; +import {MatPaginatorIntl} from './paginator-intl'; /** The default page size if there is no page size and there are no provided page size options. */ const DEFAULT_PAGE_SIZE = 50; @@ -46,18 +45,17 @@ export class PageEvent { */ @Component({ moduleId: module.id, - selector: 'md-paginator, mat-paginator', + selector: 'mat-paginator', templateUrl: 'paginator.html', styleUrls: ['paginator.css'], host: { 'class': 'mat-paginator', }, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdPaginator implements OnInit, OnDestroy { +export class MatPaginator implements OnInit, OnDestroy { private _initialized: boolean; private _intlChanges: Subscription; @@ -103,7 +101,7 @@ export class MdPaginator implements OnInit, OnDestroy { /** Displayed set of page size options. Will be sorted and include current page size. */ _displayedPageSizeOptions: number[]; - constructor(public _intl: MdPaginatorIntl, + constructor(public _intl: MatPaginatorIntl, private _changeDetectorRef: ChangeDetectorRef) { this._intlChanges = _intl.changes.subscribe(() => this._changeDetectorRef.markForCheck()); } diff --git a/src/lib/paginator/public_api.ts b/src/lib/paginator/public_api.ts index f8689f8d2280..0dc5a6a5505c 100644 --- a/src/lib/paginator/public_api.ts +++ b/src/lib/paginator/public_api.ts @@ -9,4 +9,4 @@ export * from './paginator-module'; export * from './paginator'; export * from './paginator-intl'; -export * from './mat-exports'; + diff --git a/src/lib/progress-bar/mat-exports.ts b/src/lib/progress-bar/mat-exports.ts deleted file mode 100644 index 7550fc80e7df..000000000000 --- a/src/lib/progress-bar/mat-exports.ts +++ /dev/null @@ -1,14 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdProgressBar} from './progress-bar'; -import {MdProgressBarModule} from './progress-bar-module'; - - -export {MdProgressBar as MatProgressBar}; -export {MdProgressBarModule as MatProgressBarModule}; diff --git a/src/lib/progress-bar/progress-bar-module.ts b/src/lib/progress-bar/progress-bar-module.ts index c67dbcd654b7..0d8bf6c1086c 100644 --- a/src/lib/progress-bar/progress-bar-module.ts +++ b/src/lib/progress-bar/progress-bar-module.ts @@ -8,13 +8,13 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdCommonModule} from '@angular/material/core'; -import {MdProgressBar} from './progress-bar'; +import {MatCommonModule} from '@angular/material/core'; +import {MatProgressBar} from './progress-bar'; @NgModule({ - imports: [CommonModule, MdCommonModule], - exports: [MdProgressBar, MdCommonModule], - declarations: [MdProgressBar], + imports: [CommonModule, MatCommonModule], + exports: [MatProgressBar, MatCommonModule], + declarations: [MatProgressBar], }) -export class MdProgressBarModule {} +export class MatProgressBarModule {} diff --git a/src/lib/progress-bar/progress-bar.md b/src/lib/progress-bar/progress-bar.md index a6ceee2cfd62..98c3d301913f 100644 --- a/src/lib/progress-bar/progress-bar.md +++ b/src/lib/progress-bar/progress-bar.md @@ -1,4 +1,4 @@ -`` is a horizontal progress-bar for indicating progress and activity. +`` is a horizontal progress-bar for indicating progress and activity. diff --git a/src/lib/progress-bar/progress-bar.scss b/src/lib/progress-bar/progress-bar.scss index cf537f16bcde..1d82aadfb7e3 100644 --- a/src/lib/progress-bar/progress-bar.scss +++ b/src/lib/progress-bar/progress-bar.scss @@ -7,11 +7,11 @@ $mat-progress-bar-piece-animation-duration: 250ms !default; .mat-progress-bar { display: block; - // Height is provided for md-progress-bar to act as a default. + // Height is provided for mat-progress-bar to act as a default. height: $mat-progress-bar-height; overflow: hidden; position: relative; - // translateZ is added to force the md-progress-bar into its own GPU layer. + // translateZ is added to force the mat-progress-bar into its own GPU layer. transform: translateZ(0); transition: opacity $mat-progress-bar-piece-animation-duration linear; width: 100%; @@ -110,7 +110,7 @@ $mat-progress-bar-piece-animation-duration: 250ms !default; } -// The values used for animations in md-progress-bar, both timing and transformation, can be +// The values used for animations in mat-progress-bar, both timing and transformation, can be // considered magic values. They are sourced from the Material Design example spec and duplicate // the values of the original designers definitions. // diff --git a/src/lib/progress-bar/progress-bar.spec.ts b/src/lib/progress-bar/progress-bar.spec.ts index f5208b321f65..be8337dcbd14 100644 --- a/src/lib/progress-bar/progress-bar.spec.ts +++ b/src/lib/progress-bar/progress-bar.spec.ts @@ -1,14 +1,14 @@ import {TestBed, async, ComponentFixture} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdProgressBarModule} from './index'; +import {MatProgressBarModule} from './index'; -describe('MdProgressBar', () => { +describe('MatProgressBar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdProgressBarModule], + imports: [MatProgressBarModule], declarations: [ BasicProgressBar, BufferProgressBar, @@ -28,18 +28,18 @@ describe('MdProgressBar', () => { }); it('should apply a mode of "determinate" if no mode is provided.', () => { - let progressElement = fixture.debugElement.query(By.css('md-progress-bar')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); expect(progressElement.componentInstance.mode).toBe('determinate'); }); it('should define default values for value and bufferValue attributes', () => { - let progressElement = fixture.debugElement.query(By.css('md-progress-bar')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); expect(progressElement.componentInstance.value).toBe(0); expect(progressElement.componentInstance.bufferValue).toBe(0); }); it('should clamp value and bufferValue between 0 and 100', () => { - let progressElement = fixture.debugElement.query(By.css('md-progress-bar')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); let progressComponent = progressElement.componentInstance; progressComponent.value = 50; @@ -62,7 +62,7 @@ describe('MdProgressBar', () => { }); it('should return the transform attribute for bufferValue and mode', () => { - let progressElement = fixture.debugElement.query(By.css('md-progress-bar')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); let progressComponent = progressElement.componentInstance; expect(progressComponent._primaryTransform()).toEqual({transform: 'scaleX(0)'}); @@ -98,15 +98,15 @@ describe('MdProgressBar', () => { }); it('should not modify the mode if a valid mode is provided.', () => { - let progressElement = fixture.debugElement.query(By.css('md-progress-bar')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-bar')); expect(progressElement.componentInstance.mode).toBe('buffer'); }); }); }); -@Component({template: ''}) +@Component({template: ''}) class BasicProgressBar { } -@Component({template: ''}) +@Component({template: ''}) class BufferProgressBar { } diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index 36bdc00aa7d5..2396d693e012 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -13,11 +13,11 @@ import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@ang /** - * component. + * component. */ @Component({ moduleId: module.id, - selector: 'md-progress-bar, mat-progress-bar', + selector: 'mat-progress-bar', host: { 'role': 'progressbar', 'aria-valuemin': '0', @@ -35,7 +35,7 @@ import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@ang encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdProgressBar { +export class MatProgressBar { /** Color of the progress bar. */ @Input() color: 'primary' | 'accent' | 'warn' = 'primary'; diff --git a/src/lib/progress-bar/public_api.ts b/src/lib/progress-bar/public_api.ts index e4284632b898..4d60aeebce2a 100644 --- a/src/lib/progress-bar/public_api.ts +++ b/src/lib/progress-bar/public_api.ts @@ -8,4 +8,4 @@ export * from './progress-bar-module'; export * from './progress-bar'; -export * from './mat-exports'; + diff --git a/src/lib/progress-spinner/mat-exports.ts b/src/lib/progress-spinner/mat-exports.ts deleted file mode 100644 index 6b1c3708aa8d..000000000000 --- a/src/lib/progress-spinner/mat-exports.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MdProgressSpinner, - MdProgressSpinnerBase, - MdProgressSpinnerCssMatStyler, - MdSpinner, -} from './progress-spinner'; -import {MdProgressSpinnerModule} from './progress-spinner-module'; - - -export {MdProgressSpinner as MatProgressSpinner}; -export {MdProgressSpinnerBase as MatProgressSpinnerBase}; -export {MdProgressSpinnerCssMatStyler as MatProgressSpinnerCssMatStyler}; -export {MdProgressSpinnerModule as MatProgressSpinnerModule}; -export {MdSpinner as MatSpinner}; diff --git a/src/lib/progress-spinner/progress-spinner-module.ts b/src/lib/progress-spinner/progress-spinner-module.ts index cb106eaee75b..11e7e841acab 100644 --- a/src/lib/progress-spinner/progress-spinner-module.ts +++ b/src/lib/progress-spinner/progress-spinner-module.ts @@ -7,26 +7,26 @@ */ import {NgModule} from '@angular/core'; -import {MdCommonModule} from '@angular/material/core'; +import {MatCommonModule} from '@angular/material/core'; import { - MdProgressSpinner, - MdSpinner, - MdProgressSpinnerCssMatStyler, + MatProgressSpinner, + MatSpinner, + MatProgressSpinnerCssMatStyler, } from './progress-spinner'; @NgModule({ - imports: [MdCommonModule], + imports: [MatCommonModule], exports: [ - MdProgressSpinner, - MdSpinner, - MdCommonModule, - MdProgressSpinnerCssMatStyler + MatProgressSpinner, + MatSpinner, + MatCommonModule, + MatProgressSpinnerCssMatStyler ], declarations: [ - MdProgressSpinner, - MdSpinner, - MdProgressSpinnerCssMatStyler + MatProgressSpinner, + MatSpinner, + MatProgressSpinnerCssMatStyler ], }) -export class MdProgressSpinnerModule {} +export class MatProgressSpinnerModule {} diff --git a/src/lib/progress-spinner/progress-spinner.md b/src/lib/progress-spinner/progress-spinner.md index 1843e1fe40b4..0b591738df9c 100644 --- a/src/lib/progress-spinner/progress-spinner.md +++ b/src/lib/progress-spinner/progress-spinner.md @@ -1,10 +1,10 @@ -`` and `` are a circular indicators of progress and activity. +`` and `` are a circular indicators of progress and activity. ### Progress mode The progress-spinner supports two modes, "determinate" and "indeterminate". -The `` component is an alias for ``. +The `` component is an alias for ``. | Mode | Description | |---------------|----------------------------------------------------------------------------------| diff --git a/src/lib/progress-spinner/progress-spinner.spec.ts b/src/lib/progress-spinner/progress-spinner.spec.ts index fc8efd45a373..755b499398b1 100644 --- a/src/lib/progress-spinner/progress-spinner.spec.ts +++ b/src/lib/progress-spinner/progress-spinner.spec.ts @@ -1,15 +1,15 @@ import {TestBed, async} from '@angular/core/testing'; import {Component} from '@angular/core'; import {By} from '@angular/platform-browser'; -import {MdProgressSpinnerModule} from './index'; +import {MatProgressSpinnerModule} from './index'; import {PROGRESS_SPINNER_STROKE_WIDTH} from './progress-spinner'; -describe('MdProgressSpinner', () => { +describe('MatProgressSpinner', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdProgressSpinnerModule], + imports: [MatProgressSpinnerModule], declarations: [ BasicProgressSpinner, IndeterminateProgressSpinner, @@ -29,7 +29,7 @@ describe('MdProgressSpinner', () => { let fixture = TestBed.createComponent(BasicProgressSpinner); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); expect(progressElement.componentInstance.mode).toBe('determinate'); }); @@ -37,7 +37,7 @@ describe('MdProgressSpinner', () => { let fixture = TestBed.createComponent(IndeterminateProgressSpinner); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); expect(progressElement.componentInstance.mode).toBe('indeterminate'); }); @@ -45,13 +45,13 @@ describe('MdProgressSpinner', () => { let fixture = TestBed.createComponent(BasicProgressSpinner); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); expect(progressElement.componentInstance.value).toBeUndefined(); }); it('should set the value to 0 when the mode is set to indeterminate', () => { let fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); fixture.componentInstance.mode = 'determinate'; fixture.detectChanges(); @@ -65,7 +65,7 @@ describe('MdProgressSpinner', () => { let fixture = TestBed.createComponent(BasicProgressSpinner); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); let progressComponent = progressElement.componentInstance; progressComponent.value = 50; @@ -88,7 +88,7 @@ describe('MdProgressSpinner', () => { let fixture = TestBed.createComponent(IndeterminateProgressSpinnerWithNgIf); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy(); fixture.componentInstance.isHidden = true; @@ -100,7 +100,7 @@ describe('MdProgressSpinner', () => { let fixture = TestBed.createComponent(SpinnerWithNgIf); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-spinner')); expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy(); @@ -131,11 +131,11 @@ describe('MdProgressSpinner', () => { .toBe(40, 'Expected the custom stroke width to be applied to the path element.'); }); - it('should set the color class on the md-spinner', () => { + it('should set the color class on the mat-spinner', () => { let fixture = TestBed.createComponent(SpinnerWithColor); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-spinner')); expect(progressElement.nativeElement.classList).toContain('mat-primary'); @@ -146,11 +146,11 @@ describe('MdProgressSpinner', () => { expect(progressElement.nativeElement.classList).not.toContain('mat-primary'); }); - it('should set the color class on the md-progress-spinner', () => { + it('should set the color class on the mat-progress-spinner', () => { let fixture = TestBed.createComponent(ProgressSpinnerWithColor); fixture.detectChanges(); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')); + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')); expect(progressElement.nativeElement.classList).toContain('mat-primary'); @@ -163,7 +163,7 @@ describe('MdProgressSpinner', () => { it('should re-render the circle when switching from indeterminate to determinate mode', () => { let fixture = TestBed.createComponent(ProgressSpinnerWithValueAndBoundMode); - let progressElement = fixture.debugElement.query(By.css('md-progress-spinner')).nativeElement; + let progressElement = fixture.debugElement.query(By.css('mat-progress-spinner')).nativeElement; fixture.componentInstance.mode = 'indeterminate'; fixture.detectChanges(); @@ -189,29 +189,29 @@ describe('MdProgressSpinner', () => { }); -@Component({template: ''}) +@Component({template: ''}) class BasicProgressSpinner {} -@Component({template: ''}) +@Component({template: ''}) class ProgressSpinnerCustomStrokeWidth { strokeWidth: number; } -@Component({template: ''}) +@Component({template: ''}) class IndeterminateProgressSpinner { } -@Component({template: ''}) +@Component({template: ''}) class ProgressSpinnerWithValueAndBoundMode { mode = 'indeterminate'; } @Component({template: ` - `}) + `}) class IndeterminateProgressSpinnerWithNgIf { isHidden = false; } -@Component({template: ``}) +@Component({template: ``}) class SpinnerWithNgIf { isHidden = false; } -@Component({template: ``}) +@Component({template: ``}) class SpinnerWithColor { color: string = 'primary'; } -@Component({template: ``}) +@Component({template: ``}) class ProgressSpinnerWithColor { color: string = 'primary'; } diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts index 136a18335815..56b4f1e872f8 100644 --- a/src/lib/progress-spinner/progress-spinner.ts +++ b/src/lib/progress-spinner/progress-spinner.ts @@ -51,24 +51,24 @@ type EasingFn = (currentTime: number, startValue: number, * @docs-private */ @Directive({ - selector: 'md-progress-spinner, mat-progress-spinner', + selector: 'mat-progress-spinner', host: {'class': 'mat-progress-spinner'} }) -export class MdProgressSpinnerCssMatStyler {} +export class MatProgressSpinnerCssMatStyler {} -// Boilerplate for applying mixins to MdProgressSpinner. +// Boilerplate for applying mixins to MatProgressSpinner. /** @docs-private */ -export class MdProgressSpinnerBase { +export class MatProgressSpinnerBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase, 'primary'); +export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, 'primary'); /** - * component. + * component. */ @Component({ moduleId: module.id, - selector: 'md-progress-spinner, mat-progress-spinner', + selector: 'mat-progress-spinner', host: { 'role': 'progressbar', 'class': 'mat-progress-spinner', @@ -84,7 +84,7 @@ export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase, 'pr encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdProgressSpinner extends _MdProgressSpinnerMixinBase +export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements OnDestroy, CanColor { /** The id of the last requested animation. */ @@ -272,14 +272,14 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase /** - * component. + * component. * * This is a component definition to be used as a convenience reference to create an - * indeterminate instance. + * indeterminate instance. */ @Component({ moduleId: module.id, - selector: 'md-spinner, mat-spinner', + selector: 'mat-spinner', host: { 'role': 'progressbar', 'mode': 'indeterminate', @@ -292,7 +292,7 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdSpinner extends MdProgressSpinner { +export class MatSpinner extends MatProgressSpinner { constructor(elementRef: ElementRef, ngZone: NgZone, renderer: Renderer2) { super(renderer, elementRef, ngZone); this.mode = 'indeterminate'; diff --git a/src/lib/progress-spinner/public_api.ts b/src/lib/progress-spinner/public_api.ts index 563453f03d91..fc42969ad9c2 100644 --- a/src/lib/progress-spinner/public_api.ts +++ b/src/lib/progress-spinner/public_api.ts @@ -8,4 +8,4 @@ export * from './progress-spinner-module'; export * from './progress-spinner'; -export * from './mat-exports'; + diff --git a/src/lib/radio/mat-exports.ts b/src/lib/radio/mat-exports.ts deleted file mode 100644 index 75ef35bdb6f4..000000000000 --- a/src/lib/radio/mat-exports.ts +++ /dev/null @@ -1,26 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, - MdRadioButton, - MdRadioButtonBase, - MdRadioChange, - MdRadioGroup, - MdRadioGroupBase, -} from './radio'; -import {MdRadioModule} from './radio-module'; - - -export {MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR as MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR}; -export {MdRadioButton as MatRadioButton}; -export {MdRadioButtonBase as MatRadioButtonBase}; -export {MdRadioChange as MatRadioChange}; -export {MdRadioGroup as MatRadioGroup}; -export {MdRadioGroupBase as MatRadioGroupBase}; -export {MdRadioModule as MatRadioModule}; diff --git a/src/lib/radio/public_api.ts b/src/lib/radio/public_api.ts index 0d89666ce7db..0456641c48fa 100644 --- a/src/lib/radio/public_api.ts +++ b/src/lib/radio/public_api.ts @@ -8,4 +8,4 @@ export * from './radio-module'; export * from './radio'; -export * from './mat-exports'; + diff --git a/src/lib/radio/radio-module.ts b/src/lib/radio/radio-module.ts index 114970a7ff10..59238a1682f1 100644 --- a/src/lib/radio/radio-module.ts +++ b/src/lib/radio/radio-module.ts @@ -10,17 +10,17 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; import {VIEWPORT_RULER_PROVIDER} from '@angular/cdk/overlay'; import { - MdRippleModule, - MdCommonModule, + MatRippleModule, + MatCommonModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER, } from '@angular/material/core'; -import {MdRadioGroup, MdRadioButton} from './radio'; +import {MatRadioGroup, MatRadioButton} from './radio'; import {A11yModule} from '@angular/cdk/a11y'; @NgModule({ - imports: [CommonModule, MdRippleModule, MdCommonModule, A11yModule], - exports: [MdRadioGroup, MdRadioButton, MdCommonModule], + imports: [CommonModule, MatRippleModule, MatCommonModule, A11yModule], + exports: [MatRadioGroup, MatRadioButton, MatCommonModule], providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, VIEWPORT_RULER_PROVIDER], - declarations: [MdRadioGroup, MdRadioButton], + declarations: [MatRadioGroup, MatRadioButton], }) -export class MdRadioModule {} +export class MatRadioModule {} diff --git a/src/lib/radio/radio.md b/src/lib/radio/radio.md index da7b56704516..4a50e8c72c9e 100644 --- a/src/lib/radio/radio.md +++ b/src/lib/radio/radio.md @@ -1,4 +1,4 @@ -`` provides the same functionality as a native `` enhanced with +`` provides the same functionality as a native `` enhanced with Material Design styling and animations. @@ -6,7 +6,7 @@ Material Design styling and animations. All radio-buttons with the same `name` comprise a set from which only one may be selected at a time. ### Radio-button label -The radio-button label is provided as the content to the `` element. The label can +The radio-button label is provided as the content to the `` element. The label can be positioned before or after the radio-button by setting the `labelPosition` property to `'before'` or `'after'`. @@ -17,7 +17,7 @@ specify an appropriate label. ### Radio groups -Radio-buttons should typically be placed inside of an `` unless the DOM structure +Radio-buttons should typically be placed inside of an `` unless the DOM structure would make that impossible (e.g., radio-buttons inside of table cells). The radio-group has a `value` property that reflects the currently selected radio-button inside of the group. @@ -25,12 +25,12 @@ Individual radio-buttons inside of a radio-group will inherit the `name` of the ### Use with `@angular/forms` -`` is compatible with `@angular/forms` and supports both `FormsModule` +`` is compatible with `@angular/forms` and supports both `FormsModule` and `ReactiveFormsModule`. ### Accessibility -The `` uses an internal `` to provide an accessible experience. +The `` uses an internal `` to provide an accessible experience. This internal radio button receives focus and is automatically labelled by the text content of the -`` element. +`` element. Radio button groups should should be given a meaningful label via `aria-label` or `aria-labelledby`. diff --git a/src/lib/radio/radio.spec.ts b/src/lib/radio/radio.spec.ts index d87f5a623271..96f0447a9f37 100644 --- a/src/lib/radio/radio.spec.ts +++ b/src/lib/radio/radio.spec.ts @@ -5,13 +5,13 @@ import {By} from '@angular/platform-browser'; import {ViewportRuler} from '@angular/cdk/scrolling'; import {dispatchFakeEvent, FakeViewportRuler} from '@angular/cdk/testing'; import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core'; -import {MdRadioButton, MdRadioChange, MdRadioGroup, MdRadioModule} from './index'; +import {MatRadioButton, MatRadioChange, MatRadioGroup, MatRadioModule} from './index'; -describe('MdRadio', () => { +describe('MatRadio', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdRadioModule, FormsModule, ReactiveFormsModule], + imports: [MatRadioModule, FormsModule, ReactiveFormsModule], declarations: [ FocusableRadioButton, RadiosInsideRadioGroup, @@ -35,8 +35,8 @@ describe('MdRadio', () => { let radioNativeElements: HTMLElement[]; let radioLabelElements: HTMLLabelElement[]; let radioInputElements: HTMLInputElement[]; - let groupInstance: MdRadioGroup; - let radioInstances: MdRadioButton[]; + let groupInstance: MatRadioGroup; + let radioInstances: MatRadioButton[]; let testComponent: RadiosInsideRadioGroup; beforeEach(async(() => { @@ -45,11 +45,11 @@ describe('MdRadio', () => { testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup)); + groupDebugElement = fixture.debugElement.query(By.directive(MatRadioGroup)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get(MdRadioGroup); + groupInstance = groupDebugElement.injector.get(MatRadioGroup); - radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton)); + radioDebugElements = fixture.debugElement.queryAll(By.directive(MatRadioButton)); radioNativeElements = radioDebugElements.map(debugEl => debugEl.nativeElement); radioInstances = radioDebugElements.map(debugEl => debugEl.componentInstance); @@ -269,7 +269,7 @@ describe('MdRadio', () => { .toBe(1, 'Expected an enabled radio button to show ripples'); }); - it('should not show ripples if mdRippleDisabled input is set', () => { + it('should not show ripples if matRippleDisabled input is set', () => { testComponent.disableRipple = true; fixture.detectChanges(); @@ -385,8 +385,8 @@ describe('MdRadio', () => { let radioDebugElements: DebugElement[]; let innerRadios: DebugElement[]; let radioLabelElements: HTMLLabelElement[]; - let groupInstance: MdRadioGroup; - let radioInstances: MdRadioButton[]; + let groupInstance: MatRadioGroup; + let radioInstances: MatRadioButton[]; let testComponent: RadioGroupWithNgModel; let groupNgModel: NgModel; @@ -396,12 +396,12 @@ describe('MdRadio', () => { testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup)); + groupDebugElement = fixture.debugElement.query(By.directive(MatRadioGroup)); groupNativeElement = groupDebugElement.nativeElement; - groupInstance = groupDebugElement.injector.get(MdRadioGroup); + groupInstance = groupDebugElement.injector.get(MatRadioGroup); groupNgModel = groupDebugElement.injector.get(NgModel); - radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton)); + radioDebugElements = fixture.debugElement.queryAll(By.directive(MatRadioButton)); radioInstances = radioDebugElements.map(debugEl => debugEl.componentInstance); innerRadios = fixture.debugElement.queryAll(By.css('input[type="radio"]')); @@ -494,7 +494,7 @@ describe('MdRadio', () => { describe('group with FormControl', () => { let fixture: ComponentFixture; let groupDebugElement: DebugElement; - let groupInstance: MdRadioGroup; + let groupInstance: MatRadioGroup; let testComponent: RadioGroupWithFormControl; beforeEach(() => { @@ -502,8 +502,8 @@ describe('MdRadio', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - groupDebugElement = fixture.debugElement.query(By.directive(MdRadioGroup)); - groupInstance = groupDebugElement.injector.get(MdRadioGroup); + groupDebugElement = fixture.debugElement.query(By.directive(MatRadioGroup)); + groupInstance = groupDebugElement.injector.get(MatRadioGroup); }); it('should toggle the disabled state', () => { @@ -524,9 +524,9 @@ describe('MdRadio', () => { describe('as standalone', () => { let fixture: ComponentFixture; let radioDebugElements: DebugElement[]; - let seasonRadioInstances: MdRadioButton[]; - let weatherRadioInstances: MdRadioButton[]; - let fruitRadioInstances: MdRadioButton[]; + let seasonRadioInstances: MatRadioButton[]; + let weatherRadioInstances: MatRadioButton[]; + let fruitRadioInstances: MatRadioButton[]; let fruitRadioNativeInputs: HTMLElement[]; let testComponent: StandaloneRadioButtons; @@ -536,7 +536,7 @@ describe('MdRadio', () => { testComponent = fixture.debugElement.componentInstance; - radioDebugElements = fixture.debugElement.queryAll(By.directive(MdRadioButton)); + radioDebugElements = fixture.debugElement.queryAll(By.directive(MatRadioButton)); seasonRadioInstances = radioDebugElements .filter(debugEl => debugEl.componentInstance.name == 'season') .map(debugEl => debugEl.componentInstance); @@ -665,22 +665,22 @@ describe('MdRadio', () => { @Component({ template: ` - - Charmander - - + + Squirtle - - + + Bulbasaur - - + + ` }) class RadiosInsideRadioGroup { @@ -696,21 +696,21 @@ class RadiosInsideRadioGroup { @Component({ template: ` - Spring - Summer - Autumn + Spring + Summer + Autumn - Spring - Summer - Autumn + Spring + Summer + Autumn Baby Banana - - - Raspberry + + Raspberry ` }) class StandaloneRadioButtons { @@ -721,11 +721,11 @@ class StandaloneRadioButtons { @Component({ template: ` - - + + {{option.label}} - - + + ` }) class RadioGroupWithNgModel { @@ -735,14 +735,14 @@ class RadioGroupWithNgModel { {label: 'Chocolate', value: 'chocolate'}, {label: 'Strawberry', value: 'strawberry'}, ]; - lastEvent: MdRadioChange; + lastEvent: MatRadioChange; } @Component({ template: ` - - One - + + One + ` }) class RadioGroupWithFormControl { @@ -750,6 +750,6 @@ class RadioGroupWithFormControl { } @Component({ - template: `` + template: `` }) class FocusableRadioButton {} diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 406dd39f715a..530c77f85a0b 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -8,78 +8,81 @@ import { AfterContentInit, + AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, Directive, ElementRef, - Renderer2, EventEmitter, + forwardRef, Input, + OnDestroy, OnInit, Optional, Output, QueryList, - ViewEncapsulation, - forwardRef, + Renderer2, ViewChild, - OnDestroy, - AfterViewInit, + ViewEncapsulation, } from '@angular/core'; -import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; import { + CanColor, + CanDisable, + CanDisableRipple, + MatRipple, + mixinColor, + mixinDisabled, + mixinDisableRipple, RippleRef, UniqueSelectionDispatcher, - MdRipple, MATERIAL_COMPATIBILITY_MODE, } from '@angular/material/core'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {mixinDisabled, CanDisable} from '@angular/material/core'; -import {CanColor, mixinColor} from '@angular/material/core'; -import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for radio components. let nextUniqueId = 0; /** - * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This + * Provider Expression that allows mat-radio-group to register as a ControlValueAccessor. This * allows it to support [(ngModel)] and ngControl. * @docs-private */ -export const MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = { +export const MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdRadioGroup), + useExisting: forwardRef(() => MatRadioGroup), multi: true }; -/** Change event object emitted by MdRadio and MdRadioGroup. */ -export class MdRadioChange { - /** The MdRadioButton that emits the change event. */ - source: MdRadioButton | null; - /** The value of the MdRadioButton. */ +/** Change event object emitted by MatRadio and MatRadioGroup. */ +export class MatRadioChange { + /** The MatRadioButton that emits the change event. */ + source: MatRadioButton | null; + /** The value of the MatRadioButton. */ value: any; } -// Boilerplate for applying mixins to MdRadioGroup. +// Boilerplate for applying mixins to MatRadioGroup. /** @docs-private */ -export class MdRadioGroupBase { } -export const _MdRadioGroupMixinBase = mixinDisabled(MdRadioGroupBase); +export class MatRadioGroupBase { } +export const _MatRadioGroupMixinBase = mixinDisabled(MatRadioGroupBase); /** - * A group of radio buttons. May contain one or more `` elements. + * A group of radio buttons. May contain one or more `` elements. */ @Directive({ - selector: 'md-radio-group, mat-radio-group', - providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], + selector: 'mat-radio-group', + providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], host: { 'role': 'radiogroup', 'class': 'mat-radio-group', }, inputs: ['disabled'], }) -export class MdRadioGroup extends _MdRadioGroupMixinBase +export class MatRadioGroup extends _MatRadioGroupMixinBase implements AfterContentInit, ControlValueAccessor, CanDisable { /** * Selected value for group. Should equal the value of the selected radio button if there *is* @@ -90,10 +93,10 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase private _value: any = null; /** The HTML name attribute applied to radio buttons in this group. */ - private _name: string = `md-radio-group-${nextUniqueId++}`; + private _name: string = `mat-radio-group-${nextUniqueId++}`; /** The currently selected radio button. Should match value. */ - private _selected: MdRadioButton | null = null; + private _selected: MatRadioButton | null = null; /** Whether the `value` has been set to its initial value. */ private _isInitialized: boolean = false; @@ -121,10 +124,10 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase * Change events are only emitted when the value changes due to user interaction with * a radio button (the same behavior as ``). */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); /** Child radio buttons. */ - @ContentChildren(forwardRef(() => MdRadioButton)) _radios: QueryList; + @ContentChildren(forwardRef(() => MatRadioButton)) _radios: QueryList; /** Name of the radio button group. All radio buttons inside this group will use this name. */ @Input() @@ -183,7 +186,7 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase /** Whether the radio button is selected. */ @Input() get selected() { return this._selected; } - set selected(selected: MdRadioButton | null) { + set selected(selected: MatRadioButton | null) { this._selected = selected; this.value = selected ? selected.value : null; this._checkSelectedRadioButton(); @@ -215,8 +218,8 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase */ ngAfterContentInit() { // Mark this component as initialized in AfterContentInit because the initial value can - // possibly be set by NgModel on MdRadioGroup, and it is possible that the OnInit of the - // NgModel occurs *after* the OnInit of the MdRadioGroup. + // possibly be set by NgModel on MatRadioGroup, and it is possible that the OnInit of the + // NgModel occurs *after* the OnInit of the MatRadioGroup. this._isInitialized = true; } @@ -257,7 +260,7 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase /** Dispatch change event with current selection and group value. */ _emitChangeEvent(): void { if (this._isInitialized) { - const event = new MdRadioChange(); + const event = new MatRadioChange(); event.source = this._selected; event.value = this._value; this.change.emit(event); @@ -307,21 +310,22 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase } } -// Boilerplate for applying mixins to MdRadioButton. +// Boilerplate for applying mixins to MatRadioButton. /** @docs-private */ -export class MdRadioButtonBase { +export class MatRadioButtonBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } // As per Material design specifications the selection control radio should use the accent color // palette by default. https://material.io/guidelines/components/selection-controls.html -export const _MdRadioButtonMixinBase = mixinColor(mixinDisableRipple(MdRadioButtonBase), 'accent'); +export const _MatRadioButtonMixinBase = + mixinColor(mixinDisableRipple(MatRadioButtonBase), 'accent'); /** * A radio-button. May be inside of */ @Component({ moduleId: module.id, - selector: 'md-radio-button, mat-radio-button', + selector: 'mat-radio-button', templateUrl: 'radio.html', styleUrls: ['radio.css'], inputs: ['color', 'disableRipple'], @@ -338,12 +342,11 @@ export const _MdRadioButtonMixinBase = mixinColor(mixinDisableRipple(MdRadioButt '(focus)': '_inputElement.nativeElement.focus()', }, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdRadioButton extends _MdRadioButtonMixinBase +export class MatRadioButton extends _MatRadioButtonMixinBase implements OnInit, AfterViewInit, OnDestroy, CanColor, CanDisableRipple { - private _uniqueId: string = `md-radio-${++nextUniqueId}`; + private _uniqueId: string = `mat-radio-${++nextUniqueId}`; /** The unique ID for the radio button. */ @Input() id: string = this._uniqueId; @@ -454,12 +457,12 @@ export class MdRadioButton extends _MdRadioButtonMixinBase * Change events are only emitted when the value changes due to user interaction with * the radio button (the same behavior as ``). */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); /** The parent radio group. May or may not be present. */ - radioGroup: MdRadioGroup; + radioGroup: MatRadioGroup; - /** ID of the native input element inside `` */ + /** ID of the native input element inside `` */ get inputId(): string { return `${this.id || this._uniqueId}-input`; } /** Whether this radio is checked. */ @@ -475,7 +478,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase private _value: any = null; /** The child ripple instance. */ - @ViewChild(MdRipple) _ripple: MdRipple; + @ViewChild(MatRipple) _ripple: MatRipple; /** Reference to the current focus ripple. */ private _focusRipple: RippleRef | null; @@ -486,7 +489,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase /** The native `` element */ @ViewChild('input') _inputElement: ElementRef; - constructor(@Optional() radioGroup: MdRadioGroup, + constructor(@Optional() radioGroup: MatRadioGroup, elementRef: ElementRef, renderer: Renderer2, private _changeDetector: ChangeDetectorRef, @@ -544,7 +547,7 @@ export class MdRadioButton extends _MdRadioButtonMixinBase /** Dispatch change event with current value. */ private _emitChangeEvent(): void { - const event = new MdRadioChange(); + const event = new MatRadioChange(); event.source = this; event.value = this._value; this.change.emit(event); diff --git a/src/lib/select/mat-exports.ts b/src/lib/select/mat-exports.ts deleted file mode 100644 index 4028df76cc0b..000000000000 --- a/src/lib/select/mat-exports.ts +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_SELECT_SCROLL_STRATEGY, - MD_SELECT_SCROLL_STRATEGY_PROVIDER, - MD_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, - MdSelect, - MdSelectBase, - MdSelectChange, - MdSelectTrigger, -} from './select'; -import {MdSelectModule} from './select-module'; - - -export {MD_SELECT_SCROLL_STRATEGY as MAT_SELECT_SCROLL_STRATEGY}; -export {MD_SELECT_SCROLL_STRATEGY_PROVIDER as MAT_SELECT_SCROLL_STRATEGY_PROVIDER}; -export {MD_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY}; -export {MdSelect as MatSelect}; -export {MdSelectBase as MatSelectBase}; -export {MdSelectChange as MatSelectChange}; -export {MdSelectModule as MatSelectModule}; -export {MdSelectTrigger as MatSelectTrigger}; diff --git a/src/lib/select/public_api.ts b/src/lib/select/public_api.ts index 01ccc2f3e727..b51fac91de9a 100644 --- a/src/lib/select/public_api.ts +++ b/src/lib/select/public_api.ts @@ -9,4 +9,3 @@ export * from './select-module'; export * from './select'; export * from './select-animations'; -export * from './mat-exports'; diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts index 2813519212ef..870081304b46 100644 --- a/src/lib/select/select-animations.ts +++ b/src/lib/select/select-animations.ts @@ -16,10 +16,10 @@ import { } from '@angular/animations'; /** - * The following are all the animations for the md-select component, with each + * The following are all the animations for the mat-select component, with each * const containing the metadata for one animation. * - * The values below match the implementation of the AngularJS Material md-select animation. + * The values below match the implementation of the AngularJS Material mat-select animation. */ /** diff --git a/src/lib/select/select-errors.ts b/src/lib/select/select-errors.ts index f0578131858b..8075a08d2452 100644 --- a/src/lib/select/select-errors.ts +++ b/src/lib/select/select-errors.ts @@ -11,7 +11,7 @@ * after initialization. * @docs-private */ -export function getMdSelectDynamicMultipleError(): Error { +export function getMatSelectDynamicMultipleError(): Error { return Error('Cannot change `multiple` mode of select after initialization.'); } @@ -21,7 +21,7 @@ export function getMdSelectDynamicMultipleError(): Error { * resetting the value. * @docs-private */ -export function getMdSelectNonArrayValueError(): Error { +export function getMatSelectNonArrayValueError(): Error { return Error('Cannot assign truthy non-array value to select in `multiple` mode.'); } @@ -30,6 +30,6 @@ export function getMdSelectNonArrayValueError(): Error { * used to determine if a value corresponds to an option. Note that whether the function * actually takes two values and returns a boolean is not checked. */ -export function getMdSelectNonFunctionValueError(): Error { +export function getMatSelectNonFunctionValueError(): Error { return Error('Cannot assign a non-function value to `compareWith`.'); } diff --git a/src/lib/select/select-module.ts b/src/lib/select/select-module.ts index 0b0c397b3680..99b154bfc2e0 100644 --- a/src/lib/select/select-module.ts +++ b/src/lib/select/select-module.ts @@ -8,8 +8,8 @@ import {NgModule} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdSelect, MdSelectTrigger, MD_SELECT_SCROLL_STRATEGY_PROVIDER} from './select'; -import {MdCommonModule, MdOptionModule} from '@angular/material/core'; +import {MatSelect, MatSelectTrigger, MAT_SELECT_SCROLL_STRATEGY_PROVIDER} from './select'; +import {MatCommonModule, MatOptionModule} from '@angular/material/core'; import {OverlayModule} from '@angular/cdk/overlay'; @@ -17,11 +17,11 @@ import {OverlayModule} from '@angular/cdk/overlay'; imports: [ CommonModule, OverlayModule, - MdOptionModule, - MdCommonModule, + MatOptionModule, + MatCommonModule, ], - exports: [MdSelect, MdSelectTrigger, MdOptionModule, MdCommonModule], - declarations: [MdSelect, MdSelectTrigger], - providers: [MD_SELECT_SCROLL_STRATEGY_PROVIDER] + exports: [MatSelect, MatSelectTrigger, MatOptionModule, MatCommonModule], + declarations: [MatSelect, MatSelectTrigger], + providers: [MAT_SELECT_SCROLL_STRATEGY_PROVIDER] }) -export class MdSelectModule {} +export class MatSelectModule {} diff --git a/src/lib/select/select.html b/src/lib/select/select.html index 9379f0980a2e..b16a0b2e959e 100644 --- a/src/lib/select/select.html +++ b/src/lib/select/select.html @@ -12,7 +12,7 @@ {{'\xa0'}} {{ triggerValue }} - + diff --git a/src/lib/select/select.md b/src/lib/select/select.md index 389060fb44c0..1a0014e929c6 100644 --- a/src/lib/select/select.md +++ b/src/lib/select/select.md @@ -1,23 +1,23 @@ -`` is a form control for selecting a value from a set of options, similar to the native +`` is a form control for selecting a value from a set of options, similar to the native `` to provide an accessible +The `` uses an internal `` to provide an accessible experience. This internal checkbox receives focus and is automatically labelled by the text content -of the `` element. +of the `` element. Slide toggles without text or labels should be given a meaningful label via `aria-label` or `aria-labelledby`. diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index 14794ab96555..bf50e88ec225 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -5,17 +5,17 @@ import { flushMicrotasks } from '@angular/core/testing'; import {NgModel, FormsModule, ReactiveFormsModule, FormControl} from '@angular/forms'; -import {MdSlideToggle, MdSlideToggleChange, MdSlideToggleModule} from './index'; +import {MatSlideToggle, MatSlideToggleChange, MatSlideToggleModule} from './index'; import {TestGestureConfig} from '../slider/test-gesture-config'; import {dispatchFakeEvent} from '@angular/cdk/testing'; import {RIPPLE_FADE_IN_DURATION, RIPPLE_FADE_OUT_DURATION} from '@angular/material/core'; -describe('MdSlideToggle without forms', () => { +describe('MatSlideToggle without forms', () => { let gestureConfig: TestGestureConfig; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSlideToggleModule], + imports: [MatSlideToggleModule], declarations: [ SlideToggleBasic, SlideToggleWithTabindexAttr, @@ -33,7 +33,7 @@ describe('MdSlideToggle without forms', () => { let fixture: ComponentFixture; let testComponent: SlideToggleBasic; - let slideToggle: MdSlideToggle; + let slideToggle: MatSlideToggle; let slideToggleElement: HTMLElement; let labelElement: HTMLLabelElement; let inputElement: HTMLInputElement; @@ -50,7 +50,7 @@ describe('MdSlideToggle without forms', () => { // Initialize the slide-toggle component, by triggering the first change detection cycle. fixture.detectChanges(); - const slideToggleDebug = fixture.debugElement.query(By.css('md-slide-toggle')); + const slideToggleDebug = fixture.debugElement.query(By.css('mat-slide-toggle')); testComponent = fixture.debugElement.componentInstance; slideToggle = slideToggleDebug.componentInstance; @@ -180,7 +180,7 @@ describe('MdSlideToggle without forms', () => { fixture.detectChanges(); // Once the id binding is set to null, the id property should auto-generate a unique id. - expect(inputElement.id).toMatch(/md-slide-toggle-\d+-input/); + expect(inputElement.id).toMatch(/mat-slide-toggle-\d+-input/); }); it('should forward the tabIndex to the underlying input', () => { @@ -248,7 +248,7 @@ describe('MdSlideToggle without forms', () => { })); it('should support subscription on the change observable', () => { - slideToggle.change.subscribe((event: MdSlideToggleChange) => { + slideToggle.change.subscribe((event: MatSlideToggleChange) => { expect(event.checked).toBe(true); }); @@ -344,7 +344,7 @@ describe('MdSlideToggle without forms', () => { fixture.detectChanges(); const slideToggle = fixture.debugElement - .query(By.directive(MdSlideToggle)).componentInstance as MdSlideToggle; + .query(By.directive(MatSlideToggle)).componentInstance as MatSlideToggle; expect(slideToggle.tabIndex) .toBe(5, 'Expected tabIndex property to have been set based on the native attribute'); @@ -355,7 +355,7 @@ describe('MdSlideToggle without forms', () => { let fixture: ComponentFixture; let testComponent: SlideToggleBasic; - let slideToggle: MdSlideToggle; + let slideToggle: MatSlideToggle; let slideToggleElement: HTMLElement; let slideThumbContainer: HTMLElement; let inputElement: HTMLInputElement; @@ -364,7 +364,7 @@ describe('MdSlideToggle without forms', () => { fixture = TestBed.createComponent(SlideToggleBasic); fixture.detectChanges(); - const slideToggleDebug = fixture.debugElement.query(By.css('md-slide-toggle')); + const slideToggleDebug = fixture.debugElement.query(By.css('mat-slide-toggle')); const thumbContainerDebug = slideToggleDebug .query(By.css('.mat-slide-toggle-thumb-container')); @@ -507,7 +507,7 @@ describe('MdSlideToggle without forms', () => { beforeEach(() => { fixture = TestBed.createComponent(SlideToggleWithoutLabel); - const slideToggleDebugEl = fixture.debugElement.query(By.directive(MdSlideToggle)); + const slideToggleDebugEl = fixture.debugElement.query(By.directive(MatSlideToggle)); testComponent = fixture.componentInstance; slideToggleElement = slideToggleDebugEl.nativeElement; @@ -555,11 +555,11 @@ describe('MdSlideToggle without forms', () => { }); }); -describe('MdSlideToggle with forms', () => { +describe('MatSlideToggle with forms', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSlideToggleModule, FormsModule, ReactiveFormsModule], + imports: [MatSlideToggleModule, FormsModule, ReactiveFormsModule], declarations: [ SlideToggleWithForm, SlideToggleWithModel, @@ -574,7 +574,7 @@ describe('MdSlideToggle with forms', () => { let fixture: ComponentFixture; let testComponent: SlideToggleWithModel; - let slideToggle: MdSlideToggle; + let slideToggle: MatSlideToggle; let slideToggleElement: HTMLElement; let slideToggleModel: NgModel; let inputElement: HTMLInputElement; @@ -585,7 +585,7 @@ describe('MdSlideToggle with forms', () => { fixture = TestBed.createComponent(SlideToggleWithModel); fixture.detectChanges(); - const slideToggleDebug = fixture.debugElement.query(By.directive(MdSlideToggle)); + const slideToggleDebug = fixture.debugElement.query(By.directive(MatSlideToggle)); testComponent = fixture.debugElement.componentInstance; slideToggle = slideToggleDebug.componentInstance; @@ -681,7 +681,7 @@ describe('MdSlideToggle with forms', () => { it('should update checked state on click if control is checked initially', fakeAsync(() => { fixture = TestBed.createComponent(SlideToggleWithModel); - slideToggle = fixture.debugElement.query(By.directive(MdSlideToggle)).componentInstance; + slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).componentInstance; labelElement = fixture.debugElement.query(By.css('label')).nativeElement; fixture.componentInstance.modelValue = true; @@ -710,7 +710,7 @@ describe('MdSlideToggle with forms', () => { fixture.componentInstance.modelValue = true; fixture.detectChanges(); - const debugElement = fixture.debugElement.query(By.directive(MdSlideToggle)); + const debugElement = fixture.debugElement.query(By.directive(MatSlideToggle)); const modelInstance = debugElement.injector.get(NgModel); // Flush the microtasks because the forms module updates the model state asynchronously. @@ -724,7 +724,7 @@ describe('MdSlideToggle with forms', () => { let fixture: ComponentFixture; let testComponent: SlideToggleWithFormControl; - let slideToggle: MdSlideToggle; + let slideToggle: MatSlideToggle; let inputElement: HTMLInputElement; beforeEach(() => { @@ -732,7 +732,7 @@ describe('MdSlideToggle with forms', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - slideToggle = fixture.debugElement.query(By.directive(MdSlideToggle)).componentInstance; + slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).componentInstance; inputElement = fixture.debugElement.query(By.css('input')).nativeElement; }); @@ -799,7 +799,7 @@ describe('MdSlideToggle with forms', () => { @Component({ template: ` - { (change)="onSlideChange($event)" (click)="onSlideClick($event)"> Test Slide Toggle - `, + `, }) class SlideToggleBasic { isDisabled: boolean = false; @@ -826,17 +826,17 @@ class SlideToggleBasic { slideLabel: string | null; slideLabelledBy: string | null; slideTabindex: number; - lastEvent: MdSlideToggleChange; + lastEvent: MatSlideToggleChange; labelPosition: string; onSlideClick: (event?: Event) => void = () => {}; - onSlideChange = (event: MdSlideToggleChange) => this.lastEvent = event; + onSlideChange = (event: MatSlideToggleChange) => this.lastEvent = event; } @Component({ template: `
    - Required + Required ` }) @@ -846,7 +846,7 @@ class SlideToggleWithForm { } @Component({ - template: `` + template: `` }) class SlideToggleWithModel { modelValue = false; @@ -854,21 +854,21 @@ class SlideToggleWithModel { @Component({ template: ` - + Test Slide Toggle - `, +     `, }) class SlideToggleWithFormControl { formControl = new FormControl(); } @Component({ - template: `` + template: `` }) class SlideToggleWithTabindexAttr {} @Component({ - template: `{{label}}` + template: `{{label}}` }) class SlideToggleWithoutLabel { label: string; diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 114bf16e3184..1bd02ed5ed40 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -31,8 +31,7 @@ import { CanDisableRipple, HammerInput, HasTabIndex, - MATERIAL_COMPATIBILITY_MODE, - MdRipple, + MatRipple, mixinColor, mixinDisabled, mixinDisableRipple, @@ -45,30 +44,30 @@ import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y'; // Increasing integer for generating unique ids for slide-toggle components. let nextUniqueId = 0; -export const MD_SLIDE_TOGGLE_VALUE_ACCESSOR: any = { +export const MAT_SLIDE_TOGGLE_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdSlideToggle), + useExisting: forwardRef(() => MatSlideToggle), multi: true }; -/** Change event object emitted by a MdSlideToggle. */ -export class MdSlideToggleChange { - source: MdSlideToggle; +/** Change event object emitted by a MatSlideToggle. */ +export class MatSlideToggleChange { + source: MatSlideToggle; checked: boolean; } -// Boilerplate for applying mixins to MdSlideToggle. +// Boilerplate for applying mixins to MatSlideToggle. /** @docs-private */ -export class MdSlideToggleBase { +export class MatSlideToggleBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdSlideToggleMixinBase = - mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MdSlideToggleBase)), 'accent')); +export const _MatSlideToggleMixinBase = + mixinTabIndex(mixinColor(mixinDisableRipple(mixinDisabled(MatSlideToggleBase)), 'accent')); /** Represents a slidable "switch" toggle that can be moved between on and off. */ @Component({ moduleId: module.id, - selector: 'md-slide-toggle, mat-slide-toggle', + selector: 'mat-slide-toggle', host: { 'class': 'mat-slide-toggle', '[id]': 'id', @@ -78,20 +77,19 @@ export const _MdSlideToggleMixinBase = }, templateUrl: 'slide-toggle.html', styleUrls: ['slide-toggle.css'], - providers: [MD_SLIDE_TOGGLE_VALUE_ACCESSOR], - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], + providers: [MAT_SLIDE_TOGGLE_VALUE_ACCESSOR], inputs: ['disabled', 'disableRipple', 'color', 'tabIndex'], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, AfterContentInit, +export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestroy, AfterContentInit, ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple { private onChange = (_: any) => {}; private onTouched = () => {}; - private _uniqueId: string = `md-slide-toggle-${++nextUniqueId}`; + private _uniqueId: string = `mat-slide-toggle-${++nextUniqueId}`; private _slideRenderer: SlideToggleRenderer; private _required: boolean = false; private _checked: boolean = false; @@ -129,7 +127,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, this._changeDetectorRef.markForCheck(); } /** An event will be dispatched each time the slide-toggle changes its value. */ - @Output() change: EventEmitter = new EventEmitter(); + @Output() change: EventEmitter = new EventEmitter(); /** Returns the unique id for the visual hidden input. */ get inputId(): string { return `${this.id || this._uniqueId}-input`; } @@ -138,7 +136,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, @ViewChild('input') _inputElement: ElementRef; /** Reference to the ripple directive on the thumb container. */ - @ViewChild(MdRipple) _ripple: MdRipple; + @ViewChild(MatRipple) _ripple: MatRipple; constructor(elementRef: ElementRef, renderer: Renderer2, @@ -250,7 +248,7 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase implements OnDestroy, * Emits a change event on the `change` output. Also notifies the FormControl about the change. */ private _emitChangeEvent() { - let event = new MdSlideToggleChange(); + let event = new MatSlideToggleChange(); event.source = this; event.checked = this.checked; this.change.emit(event); diff --git a/src/lib/slider/mat-exports.ts b/src/lib/slider/mat-exports.ts deleted file mode 100644 index 99bad0cf9260..000000000000 --- a/src/lib/slider/mat-exports.ts +++ /dev/null @@ -1,22 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_SLIDER_VALUE_ACCESSOR, - MdSlider, - MdSliderBase, - MdSliderChange, -} from './slider'; -import {MdSliderModule} from './slider-module'; - - -export {MD_SLIDER_VALUE_ACCESSOR as MAT_SLIDER_VALUE_ACCESSOR}; -export {MdSlider as MatSlider}; -export {MdSliderBase as MatSliderBase}; -export {MdSliderChange as MatSliderChange}; -export {MdSliderModule as MatSliderModule}; diff --git a/src/lib/slider/public_api.ts b/src/lib/slider/public_api.ts index 96bbf656a58d..b448421096c6 100644 --- a/src/lib/slider/public_api.ts +++ b/src/lib/slider/public_api.ts @@ -8,4 +8,4 @@ export * from './slider-module'; export * from './slider'; -export * from './mat-exports'; + diff --git a/src/lib/slider/slider-module.ts b/src/lib/slider/slider-module.ts index 979859b91a12..64f6679adb4f 100644 --- a/src/lib/slider/slider-module.ts +++ b/src/lib/slider/slider-module.ts @@ -10,15 +10,15 @@ import {A11yModule} from '@angular/cdk/a11y'; import {BidiModule} from '@angular/cdk/bidi'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {GestureConfig, MdCommonModule} from '@angular/material/core'; +import {GestureConfig, MatCommonModule} from '@angular/material/core'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; -import {MdSlider} from './slider'; +import {MatSlider} from './slider'; @NgModule({ - imports: [CommonModule, MdCommonModule, BidiModule, A11yModule], - exports: [MdSlider, MdCommonModule], - declarations: [MdSlider], + imports: [CommonModule, MatCommonModule, BidiModule, A11yModule], + exports: [MatSlider, MatCommonModule], + declarations: [MatSlider], providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}] }) -export class MdSliderModule {} +export class MatSliderModule {} diff --git a/src/lib/slider/slider.md b/src/lib/slider/slider.md index d64fb7daf111..9c0dac948c67 100644 --- a/src/lib/slider/slider.md +++ b/src/lib/slider/slider.md @@ -1,4 +1,4 @@ -`` allows for the selection of a value from a range via mouse, touch, or keyboard, +`` allows for the selection of a value from a range via mouse, touch, or keyboard, similar to ``. @@ -12,7 +12,7 @@ in increments of `1`. These values can be changed by setting the `min`, `max`, a respectively. The initial value is set to the minimum value unless otherwise specified. ```html - + ``` ### Orientation @@ -22,7 +22,7 @@ right. The `vertical` attribute can be added to a slider to make it vertical wit on bottom and the maximum value on top. ```html - + ``` An `invert` attribute is also available which can be specified to flip the axis that the thumb moves @@ -31,7 +31,7 @@ on the left, while an inverted vertical slider will have the minimum value on to value on bottom. ```html - + ``` ### Thumb label @@ -43,7 +43,7 @@ The [Material Design spec](https://material.google.com/components/sliders.html) discrete value (such as a 1-5 rating). ```html - + ``` ### Tick marks @@ -53,14 +53,14 @@ of steps between between ticks. For example a `tickInterval` of `3` with a `step tick marks at every `3` steps, which is the same as every `12` values. ```html - + ``` The `tickInterval` can also be set to `auto` which will automatically choose the number of steps such that there is at least `30px` of space between ticks. ```html - + ``` The slider will always show a tick at the beginning and end of the track. If the remaining space diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts index 72e0ef7d9a06..c8afaa626383 100644 --- a/src/lib/slider/slider.spec.ts +++ b/src/lib/slider/slider.spec.ts @@ -15,16 +15,16 @@ import {Component, DebugElement, ViewChild} from '@angular/core'; import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {By, HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; -import {MdSlider, MdSliderModule} from './index'; +import {MatSlider, MatSliderModule} from './index'; import {TestGestureConfig} from './test-gesture-config'; -describe('MdSlider without forms', () => { +describe('MatSlider without forms', () => { let gestureConfig: TestGestureConfig; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSliderModule, ReactiveFormsModule, FormsModule, BidiModule], + imports: [MatSliderModule, ReactiveFormsModule, FormsModule, BidiModule], declarations: [ StandardSlider, DisabledSlider, @@ -56,7 +56,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let trackFillElement: HTMLElement; let sliderWrapperElement: HTMLElement; @@ -64,7 +64,7 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(StandardSlider); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderInstance = sliderDebugElement.componentInstance; @@ -186,14 +186,14 @@ describe('MdSlider without forms', () => { let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; let sliderWrapperElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let trackFillElement: HTMLElement; beforeEach(() => { fixture = TestBed.createComponent(DisabledSlider); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); sliderInstance = sliderDebugElement.componentInstance; @@ -247,7 +247,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let trackFillElement: HTMLElement; let ticksContainerElement: HTMLElement; @@ -258,10 +258,10 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithMinAndMax); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); testComponent = fixture.debugElement.componentInstance; sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); ticksContainerElement = @@ -347,16 +347,16 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; beforeEach(() => { fixture = TestBed.createComponent(SliderWithValue); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -385,7 +385,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let trackFillElement: HTMLElement; @@ -393,9 +393,9 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithStep); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); }); @@ -467,7 +467,7 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithAutoTickInterval); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; ticksContainerElement = sliderNativeElement.querySelector('.mat-slider-ticks-container'); @@ -497,7 +497,7 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithSetTickInterval); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; ticksContainerElement = sliderNativeElement.querySelector('.mat-slider-ticks-container'); @@ -532,7 +532,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let thumbLabelTextElement: Element; @@ -540,7 +540,7 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithThumbLabel); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderInstance = sliderDebugElement.componentInstance; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); @@ -576,7 +576,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let testComponent: SliderWithOneWayBinding; let trackFillElement: HTMLElement; @@ -587,9 +587,9 @@ describe('MdSlider without forms', () => { testComponent = fixture.debugElement.componentInstance; - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); }); @@ -612,7 +612,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let trackFillElement: HTMLElement; @@ -620,7 +620,7 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithValueSmallerThanMin); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderInstance = sliderDebugElement.componentInstance; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); @@ -642,7 +642,7 @@ describe('MdSlider without forms', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let trackFillElement: HTMLElement; @@ -650,7 +650,7 @@ describe('MdSlider without forms', () => { fixture = TestBed.createComponent(SliderWithValueGreaterThanMax); fixture.detectChanges(); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderInstance = sliderDebugElement.componentInstance; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); @@ -683,7 +683,7 @@ describe('MdSlider without forms', () => { spyOn(testComponent, 'onChange'); spyOn(testComponent, 'onInput'); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -756,7 +756,7 @@ describe('MdSlider without forms', () => { spyOn(testComponent, 'onInput'); spyOn(testComponent, 'onChange'); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -796,7 +796,7 @@ describe('MdSlider without forms', () => { let sliderNativeElement: HTMLElement; let sliderWrapperElement: HTMLElement; let testComponent: SliderWithChangeHandler; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; beforeEach(() => { fixture = TestBed.createComponent(SliderWithChangeHandler); @@ -806,10 +806,10 @@ describe('MdSlider without forms', () => { spyOn(testComponent, 'onInput'); spyOn(testComponent, 'onChange'); - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); }); it('should increment slider by 1 on up arrow pressed', () => { @@ -936,7 +936,7 @@ describe('MdSlider without forms', () => { let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; let sliderWrapperElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let testComponent: SliderWithDirAndInvert; beforeEach(() => { @@ -944,8 +944,8 @@ describe('MdSlider without forms', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -1079,7 +1079,7 @@ describe('MdSlider without forms', () => { let sliderNativeElement: HTMLElement; let sliderWrapperElement: HTMLElement; let trackFillElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let testComponent: VerticalSlider; beforeEach(() => { @@ -1087,8 +1087,8 @@ describe('MdSlider without forms', () => { fixture.detectChanges(); testComponent = fixture.debugElement.componentInstance; - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderNativeElement = sliderDebugElement.nativeElement; sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); trackFillElement = sliderNativeElement.querySelector('.mat-slider-track-fill'); @@ -1138,12 +1138,12 @@ describe('MdSlider without forms', () => { }); }); -describe('MdSlider with forms module', () => { +describe('MatSlider with forms module', () => { let gestureConfig: TestGestureConfig; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSliderModule, ReactiveFormsModule, FormsModule, BidiModule], + imports: [MatSliderModule, ReactiveFormsModule, FormsModule, BidiModule], declarations: [ SliderWithFormControl, SliderWithNgModel, @@ -1163,7 +1163,7 @@ describe('MdSlider with forms module', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let testComponent: SliderWithNgModel; @@ -1173,9 +1173,9 @@ describe('MdSlider with forms module', () => { testComponent = fixture.debugElement.componentInstance; - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -1211,7 +1211,7 @@ describe('MdSlider with forms module', () => { let fixture: ComponentFixture; let sliderDebugElement: DebugElement; let sliderNativeElement: HTMLElement; - let sliderInstance: MdSlider; + let sliderInstance: MatSlider; let sliderWrapperElement: HTMLElement; let testComponent: SliderWithFormControl; @@ -1221,9 +1221,9 @@ describe('MdSlider with forms module', () => { testComponent = fixture.debugElement.componentInstance; - sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider)); + sliderDebugElement = fixture.debugElement.query(By.directive(MatSlider)); sliderNativeElement = sliderDebugElement.nativeElement; - sliderInstance = sliderDebugElement.injector.get(MdSlider); + sliderInstance = sliderDebugElement.injector.get(MatSlider); sliderWrapperElement = sliderNativeElement.querySelector('.mat-slider-wrapper'); }); @@ -1320,19 +1320,19 @@ const styles = ` `; @Component({ - template: ``, + template: ``, styles: [styles], }) class StandardSlider { } @Component({ - template: ``, + template: ``, styles: [styles], }) class DisabledSlider { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithMinAndMax { @@ -1341,13 +1341,13 @@ class SliderWithMinAndMax { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithValue { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithStep { @@ -1355,13 +1355,13 @@ class SliderWithStep { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithAutoTickInterval { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithSetTickInterval { @@ -1369,13 +1369,13 @@ class SliderWithSetTickInterval { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithThumbLabel { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithOneWayBinding { @@ -1383,7 +1383,7 @@ class SliderWithOneWayBinding { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithFormControl { @@ -1391,7 +1391,7 @@ class SliderWithFormControl { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithNgModel { @@ -1399,30 +1399,30 @@ class SliderWithNgModel { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithValueSmallerThanMin { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithValueGreaterThanMax { } @Component({ - template: ``, + template: ``, styles: [styles], }) class SliderWithChangeHandler { onChange() { } onInput() { } - @ViewChild(MdSlider) slider: MdSlider; + @ViewChild(MatSlider) slider: MatSlider; } @Component({ - template: `
    `, + template: `
    `, styles: [styles], }) class SliderWithDirAndInvert { @@ -1431,7 +1431,7 @@ class SliderWithDirAndInvert { } @Component({ - template: ``, + template: ``, styles: [styles], }) class VerticalSlider { @@ -1441,7 +1441,7 @@ class VerticalSlider { /** * Dispatches a click event sequence (consisting of moueseenter, click) from an element. * Note: The mouse event truncates the position for the click. - * @param sliderElement The md-slider element from which the event will be dispatched. + * @param sliderElement The mat-slider element from which the event will be dispatched. * @param percentage The percentage of the slider where the click should occur. Used to find the * physical location of the click. */ @@ -1457,7 +1457,7 @@ function dispatchClickEventSequence(sliderElement: HTMLElement, percentage: numb /** * Dispatches a slide event sequence (consisting of slidestart, slide, slideend) from an element. - * @param sliderElement The md-slider element from which the event will be dispatched. + * @param sliderElement The mat-slider element from which the event will be dispatched. * @param startPercent The percentage of the slider where the slide will begin. * @param endPercent The percentage of the slider where the slide will end. * @param gestureConfig The gesture config for the test to handle emitting the slide events. @@ -1473,7 +1473,7 @@ function dispatchSlideEventSequence(sliderElement: HTMLElement, startPercent: nu /** * Dispatches a slide event from an element. - * @param sliderElement The md-slider element from which the event will be dispatched. + * @param sliderElement The mat-slider element from which the event will be dispatched. * @param percent The percentage of the slider where the slide will happen. * @param gestureConfig The gesture config for the test to handle emitting the slide events. */ @@ -1492,7 +1492,7 @@ function dispatchSlideEvent(sliderElement: HTMLElement, percent: number, /** * Dispatches a slidestart event from an element. - * @param sliderElement The md-slider element from which the event will be dispatched. + * @param sliderElement The mat-slider element from which the event will be dispatched. * @param percent The percentage of the slider where the slide will begin. * @param gestureConfig The gesture config for the test to handle emitting the slide events. */ @@ -1513,7 +1513,7 @@ function dispatchSlideStartEvent(sliderElement: HTMLElement, percent: number, /** * Dispatches a slideend event from an element. - * @param sliderElement The md-slider element from which the event will be dispatched. + * @param sliderElement The mat-slider element from which the event will be dispatched. * @param percent The percentage of the slider where the slide will end. * @param gestureConfig The gesture config for the test to handle emitting the slide events. */ diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 25dda65e0354..e3d2a838327a 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -61,31 +61,31 @@ const MIN_VALUE_NONACTIVE_THUMB_GAP = 7; const MIN_VALUE_ACTIVE_THUMB_GAP = 10; /** - * Provider Expression that allows md-slider to register as a ControlValueAccessor. + * Provider Expression that allows mat-slider to register as a ControlValueAccessor. * This allows it to support [(ngModel)] and [formControl]. */ -export const MD_SLIDER_VALUE_ACCESSOR: any = { +export const MAT_SLIDER_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => MdSlider), + useExisting: forwardRef(() => MatSlider), multi: true }; -/** A simple change event emitted by the MdSlider component. */ -export class MdSliderChange { - /** The MdSlider that changed. */ - source: MdSlider; +/** A simple change event emitted by the MatSlider component. */ +export class MatSliderChange { + /** The MatSlider that changed. */ + source: MatSlider; /** The new value of the source slider. */ value: number | null; } -// Boilerplate for applying mixins to MdSlider. +// Boilerplate for applying mixins to MatSlider. /** @docs-private */ -export class MdSliderBase { +export class MatSliderBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdSliderMixinBase = mixinColor(mixinDisabled(MdSliderBase), 'accent'); +export const _MatSliderMixinBase = mixinColor(mixinDisabled(MatSliderBase), 'accent'); /** * Allows users to select from a range of values by moving the slider thumb. It is similar in @@ -93,8 +93,8 @@ export const _MdSliderMixinBase = mixinColor(mixinDisabled(MdSliderBase), 'accen */ @Component({ moduleId: module.id, - selector: 'md-slider, mat-slider', - providers: [MD_SLIDER_VALUE_ACCESSOR], + selector: 'mat-slider', + providers: [MAT_SLIDER_VALUE_ACCESSOR], host: { '(focus)': '_onFocus()', '(blur)': '_onBlur()', @@ -130,7 +130,7 @@ export const _MdSliderMixinBase = mixinColor(mixinDisabled(MdSliderBase), 'accen preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdSlider extends _MdSliderMixinBase +export class MatSlider extends _MatSliderMixinBase implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit { /** Whether the slider is inverted. */ @Input() @@ -246,10 +246,10 @@ export class MdSlider extends _MdSliderMixinBase private _vertical = false; /** Event emitted when the slider value has changed. */ - @Output() change = new EventEmitter(); + @Output() change = new EventEmitter(); /** Event emitted when the slider thumb moves. */ - @Output() input = new EventEmitter(); + @Output() input = new EventEmitter(); /** The value to be used for display purposes. */ get displayValue(): string | number { @@ -644,8 +644,8 @@ export class MdSlider extends _MdSliderMixinBase } /** Creates a slider change object from the specified value. */ - private _createChangeEvent(value = this.value): MdSliderChange { - let event = new MdSliderChange(); + private _createChangeEvent(value = this.value): MatSliderChange { + let event = new MatSliderChange(); event.source = this; event.value = value; diff --git a/src/lib/snack-bar/mat-exports.ts b/src/lib/snack-bar/mat-exports.ts deleted file mode 100644 index 04dd5838aed8..000000000000 --- a/src/lib/snack-bar/mat-exports.ts +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdSnackBar} from './snack-bar'; -import {MD_SNACK_BAR_DATA, MdSnackBarConfig} from './snack-bar-config'; -import {MdSnackBarContainer} from './snack-bar-container'; -import {MdSnackBarModule} from './snack-bar-module'; -import {MdSnackBarRef} from './snack-bar-ref'; - - -export {MD_SNACK_BAR_DATA as MAT_SNACK_BAR_DATA}; -export {MdSnackBar as MatSnackBar}; -export {MdSnackBarConfig as MatSnackBarConfig}; -export {MdSnackBarContainer as MatSnackBarContainer}; -export {MdSnackBarModule as MatSnackBarModule}; -export {MdSnackBarRef as MatSnackBarRef}; diff --git a/src/lib/snack-bar/public_api.ts b/src/lib/snack-bar/public_api.ts index 6799827122dd..14496ed504b4 100644 --- a/src/lib/snack-bar/public_api.ts +++ b/src/lib/snack-bar/public_api.ts @@ -12,4 +12,4 @@ export * from './snack-bar-container'; export * from './snack-bar-config'; export * from './snack-bar-ref'; export * from './simple-snack-bar'; -export * from './mat-exports'; + diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts index e0236fd0e4c8..a10c004c61d8 100644 --- a/src/lib/snack-bar/simple-snack-bar.ts +++ b/src/lib/snack-bar/simple-snack-bar.ts @@ -7,8 +7,8 @@ */ import {Component, ViewEncapsulation, Inject, ChangeDetectionStrategy} from '@angular/core'; -import {MdSnackBarRef} from './snack-bar-ref'; -import {MD_SNACK_BAR_DATA} from './snack-bar-config'; +import {MatSnackBarRef} from './snack-bar-ref'; +import {MAT_SNACK_BAR_DATA} from './snack-bar-config'; /** @@ -32,8 +32,8 @@ export class SimpleSnackBar { data: { message: string, action: string }; constructor( - public snackBarRef: MdSnackBarRef, - @Inject(MD_SNACK_BAR_DATA) data: any) { + public snackBarRef: MatSnackBarRef, + @Inject(MAT_SNACK_BAR_DATA) data: any) { this.data = data; } diff --git a/src/lib/snack-bar/snack-bar-config.ts b/src/lib/snack-bar/snack-bar-config.ts index 4f0f2c1fa9cc..44a6844ef769 100644 --- a/src/lib/snack-bar/snack-bar-config.ts +++ b/src/lib/snack-bar/snack-bar-config.ts @@ -10,22 +10,22 @@ import {ViewContainerRef, InjectionToken} from '@angular/core'; import {AriaLivePoliteness} from '@angular/cdk/a11y'; import {Direction} from '@angular/cdk/bidi'; -export const MD_SNACK_BAR_DATA = new InjectionToken('MdSnackBarData'); +export const MAT_SNACK_BAR_DATA = new InjectionToken('MatSnackBarData'); -/** Possible values for horizontalPosition on MdSnackBarConfig. */ -export type MdSnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right'; +/** Possible values for horizontalPosition on MatSnackBarConfig. */ +export type MatSnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right'; -/** Possible values for verticalPosition on MdSnackBarConfig. */ -export type MdSnackBarVerticalPosition = 'top' | 'bottom'; +/** Possible values for verticalPosition on MatSnackBarConfig. */ +export type MatSnackBarVerticalPosition = 'top' | 'bottom'; /** * Configuration used when opening a snack-bar. */ -export class MdSnackBarConfig { - /** The politeness level for the MdAriaLiveAnnouncer announcement. */ +export class MatSnackBarConfig { + /** The politeness level for the MatAriaLiveAnnouncer announcement. */ politeness?: AriaLivePoliteness = 'assertive'; - /** Message to be announced by the MdAriaLiveAnnouncer */ + /** Message to be announced by the MatAriaLiveAnnouncer */ announcementMessage?: string = ''; /** The view container to place the overlay for the snack bar into. */ @@ -44,8 +44,8 @@ export class MdSnackBarConfig { data?: any = null; /** The horizontal position to place the snack bar. */ - horizontalPosition?: MdSnackBarHorizontalPosition = 'center'; + horizontalPosition?: MatSnackBarHorizontalPosition = 'center'; /** The vertical position to place the snack bar. */ - verticalPosition?: MdSnackBarVerticalPosition = 'bottom'; + verticalPosition?: MatSnackBarVerticalPosition = 'bottom'; } diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts index 79688edc6731..15288df08ef1 100644 --- a/src/lib/snack-bar/snack-bar-container.ts +++ b/src/lib/snack-bar/snack-bar-container.ts @@ -35,7 +35,7 @@ import { import {first} from '@angular/cdk/rxjs'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; -import {MdSnackBarConfig} from './snack-bar-config'; +import {MatSnackBarConfig} from './snack-bar-config'; export type SnackBarState = 'visible' | 'hidden' | 'void'; @@ -79,7 +79,7 @@ export const HIDE_ANIMATION = '195ms cubic-bezier(0.0,0.0,0.2,1)'; ]) ], }) -export class MdSnackBarContainer extends BasePortalHost implements OnDestroy { +export class MatSnackBarContainer extends BasePortalHost implements OnDestroy { /** Whether the component has been destroyed. */ private _destroyed = false; @@ -96,7 +96,7 @@ export class MdSnackBarContainer extends BasePortalHost implements OnDestroy { private _animationState: SnackBarState; /** The snack bar configuration. */ - snackBarConfig: MdSnackBarConfig; + snackBarConfig: MatSnackBarConfig; constructor( private _ngZone: NgZone, diff --git a/src/lib/snack-bar/snack-bar-module.ts b/src/lib/snack-bar/snack-bar-module.ts index d436a4da504c..7d3da1c1b4d8 100644 --- a/src/lib/snack-bar/snack-bar-module.ts +++ b/src/lib/snack-bar/snack-bar-module.ts @@ -11,9 +11,9 @@ import {CommonModule} from '@angular/common'; import {OverlayModule} from '@angular/cdk/overlay'; import {PortalModule} from '@angular/cdk/portal'; import {LIVE_ANNOUNCER_PROVIDER} from '@angular/cdk/a11y'; -import {MdCommonModule} from '@angular/material/core'; -import {MdSnackBar} from './snack-bar'; -import {MdSnackBarContainer} from './snack-bar-container'; +import {MatCommonModule} from '@angular/material/core'; +import {MatSnackBar} from './snack-bar'; +import {MatSnackBarContainer} from './snack-bar-container'; import {SimpleSnackBar} from './simple-snack-bar'; @@ -22,11 +22,11 @@ import {SimpleSnackBar} from './simple-snack-bar'; OverlayModule, PortalModule, CommonModule, - MdCommonModule, + MatCommonModule, ], - exports: [MdSnackBarContainer, MdCommonModule], - declarations: [MdSnackBarContainer, SimpleSnackBar], - entryComponents: [MdSnackBarContainer, SimpleSnackBar], - providers: [MdSnackBar, LIVE_ANNOUNCER_PROVIDER] + exports: [MatSnackBarContainer, MatCommonModule], + declarations: [MatSnackBarContainer, SimpleSnackBar], + entryComponents: [MatSnackBarContainer, SimpleSnackBar], + providers: [MatSnackBar, LIVE_ANNOUNCER_PROVIDER] }) -export class MdSnackBarModule {} +export class MatSnackBarModule {} diff --git a/src/lib/snack-bar/snack-bar-ref.ts b/src/lib/snack-bar/snack-bar-ref.ts index b9a5c4dc50ee..b329f5e54c07 100644 --- a/src/lib/snack-bar/snack-bar-ref.ts +++ b/src/lib/snack-bar/snack-bar-ref.ts @@ -9,12 +9,12 @@ import {OverlayRef} from '@angular/cdk/overlay'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; -import {MdSnackBarContainer} from './snack-bar-container'; +import {MatSnackBarContainer} from './snack-bar-container'; /** * Reference to a snack bar dispatched from the snack bar service. */ -export class MdSnackBarRef { +export class MatSnackBarRef { /** The instance of the component making up the content of the snack bar. */ instance: T; @@ -22,7 +22,7 @@ export class MdSnackBarRef { * The instance of the component making up the content of the snack bar. * @docs-private */ - containerInstance: MdSnackBarContainer; + containerInstance: MatSnackBarContainer; /** Subject for notifying the user that the snack bar has closed. */ private _afterClosed = new Subject(); @@ -39,7 +39,7 @@ export class MdSnackBarRef { */ private _durationTimeoutId: number; - constructor(containerInstance: MdSnackBarContainer, + constructor(containerInstance: MatSnackBarContainer, private _overlayRef: OverlayRef) { this.containerInstance = containerInstance; // Dismiss snackbar on action. diff --git a/src/lib/snack-bar/snack-bar.md b/src/lib/snack-bar/snack-bar.md index a468dfa3718a..eee50987e6a8 100644 --- a/src/lib/snack-bar/snack-bar.md +++ b/src/lib/snack-bar/snack-bar.md @@ -1,4 +1,4 @@ -`MdSnackBar` is a service for displaying snack-bar notifications. +`MatSnackBar` is a service for displaying snack-bar notifications. @@ -15,11 +15,11 @@ let snackBarRef = snackBar.open('Message archived', 'Undo'); let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent); ``` -In either case, a `MdSnackBarRef` is returned. This can be used to dismiss the snack-bar or to +In either case, a `MatSnackBarRef` is returned. This can be used to dismiss the snack-bar or to receive notification of when the snack-bar is dismissed. For simple messages with an action, the -`MdSnackBarRef` exposes an observable for when the action is triggered. +`MatSnackBarRef` exposes an observable for when the action is triggered. If you want to close a custom snack-bar that was opened via `openFromComponent`, from within the -component itself, you can inject the `MdSnackBarRef`. +component itself, you can inject the `MatSnackBarRef`. ```ts snackBarRef.afterDismissed().subscribe(() => { @@ -35,7 +35,7 @@ snackBarRef.dismiss(); ``` ### Dismissal -A snack-bar can be dismissed manually by calling the `dismiss` method on the `MdSnackBarRef` +A snack-bar can be dismissed manually by calling the `dismiss` method on the `MatSnackBarRef` returned from the call to `open`. Only one snack-bar can ever be opened at one time. If a new snackbar is opened while a previous @@ -58,18 +58,18 @@ snackbar.openFromComponent(MessageArchivedComponent, { }); ``` -To access the data in your component, you have to use the `MD_SNACK_BAR_DATA` injection token: +To access the data in your component, you have to use the `MAT_SNACK_BAR_DATA` injection token: ```ts import {Component, Inject} from '@angular/core'; -import {MD_SNACK_BAR_DATA} from '@angular/material'; +import {MAT_SNACK_BAR_DATA} from '@angular/material'; @Component({ selector: 'your-snack-bar', template: 'passed in {{ data }}', }) export class MessageArchivedComponent { - constructor(@Inject(MD_SNACK_BAR_DATA) public data: any) { } + constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { } } ``` ### Accessibility diff --git a/src/lib/snack-bar/snack-bar.spec.ts b/src/lib/snack-bar/snack-bar.spec.ts index fdd1da844e82..91f6adb70f0b 100644 --- a/src/lib/snack-bar/snack-bar.spec.ts +++ b/src/lib/snack-bar/snack-bar.spec.ts @@ -13,17 +13,17 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {OverlayContainer} from '@angular/cdk/overlay'; import {LiveAnnouncer} from '@angular/cdk/a11y'; import { - MdSnackBarModule, - MdSnackBar, - MdSnackBarConfig, - MdSnackBarRef, + MatSnackBarModule, + MatSnackBar, + MatSnackBarConfig, + MatSnackBarRef, SimpleSnackBar, - MD_SNACK_BAR_DATA, + MAT_SNACK_BAR_DATA, } from './index'; -describe('MdSnackBar', () => { - let snackBar: MdSnackBar; +describe('MatSnackBar', () => { + let snackBar: MatSnackBar; let liveAnnouncer: LiveAnnouncer; let overlayContainerElement: HTMLElement; @@ -35,7 +35,7 @@ describe('MdSnackBar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSnackBarModule, SnackBarTestModule, NoopAnimationsModule], + imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); @@ -46,7 +46,7 @@ describe('MdSnackBar', () => { TestBed.compileComponents(); })); - beforeEach(inject([MdSnackBar, LiveAnnouncer], (sb: MdSnackBar, la: LiveAnnouncer) => { + beforeEach(inject([MatSnackBar, LiveAnnouncer], (sb: MatSnackBar, la: LiveAnnouncer) => { snackBar = sb; liveAnnouncer = la; })); @@ -64,7 +64,7 @@ describe('MdSnackBar', () => { }); it('should have the role of alert', () => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; snackBar.open(simpleMessage, simpleActionLabel, config); let containerElement = overlayContainerElement.querySelector('snack-bar-container')!; @@ -90,7 +90,7 @@ describe('MdSnackBar', () => { })); it('should open a simple message with a button', () => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, simpleActionLabel, config); viewContainerFixture.detectChanges(); @@ -114,7 +114,7 @@ describe('MdSnackBar', () => { }); it('should open a simple message with no button', () => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, undefined, config); viewContainerFixture.detectChanges(); @@ -132,7 +132,7 @@ describe('MdSnackBar', () => { }); it('should dismiss the snack bar and remove itself from the view', async(() => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let dismissObservableCompleted = false; let snackBarRef = snackBar.open(simpleMessage, undefined, config); @@ -182,7 +182,7 @@ describe('MdSnackBar', () => { })); it('should set the animation state to visible on entry', () => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, undefined, config); viewContainerFixture.detectChanges(); @@ -196,7 +196,7 @@ describe('MdSnackBar', () => { }); it('should set the animation state to complete on exit', () => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, undefined, config); snackBarRef.dismiss(); @@ -207,7 +207,7 @@ describe('MdSnackBar', () => { it(`should set the old snack bar animation state to complete and the new snack bar animation state to visible on entry of new snack bar`, async(() => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, undefined, config); let dismissObservableCompleted = false; @@ -233,7 +233,7 @@ describe('MdSnackBar', () => { })); it('should open a new snackbar after dismissing a previous snackbar', async(() => { - let config: MdSnackBarConfig = {viewContainerRef: testViewContainerRef}; + let config: MatSnackBarConfig = {viewContainerRef: testViewContainerRef}; let snackBarRef = snackBar.open(simpleMessage, 'Dismiss', config); viewContainerFixture.detectChanges(); @@ -337,7 +337,7 @@ describe('MdSnackBar', () => { it('should dismiss automatically after a specified timeout', fakeAsync(() => { let dismissObservableCompleted = false; - let config = new MdSnackBarConfig(); + let config = new MatSnackBarConfig(); config.duration = 250; let snackBarRef = snackBar.open('content', 'test', config); snackBarRef.afterDismissed().subscribe(() => { @@ -355,7 +355,7 @@ describe('MdSnackBar', () => { })); it('should clear the dismiss timeout when dismissed before timeout expiration', fakeAsync(() => { - let config = new MdSnackBarConfig(); + let config = new MatSnackBarConfig(); config.duration = 1000; snackBar.open('content', 'test', config); @@ -443,17 +443,17 @@ describe('MdSnackBar', () => { }); -describe('MdSnackBar with parent MdSnackBar', () => { - let parentSnackBar: MdSnackBar; - let childSnackBar: MdSnackBar; +describe('MatSnackBar with parent MatSnackBar', () => { + let parentSnackBar: MatSnackBar; + let childSnackBar: MatSnackBar; let overlayContainerElement: HTMLElement; - let fixture: ComponentFixture; + let fixture: ComponentFixture; let liveAnnouncer: LiveAnnouncer; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSnackBarModule, SnackBarTestModule, NoopAnimationsModule], - declarations: [ComponentThatProvidesMdSnackBar], + imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], + declarations: [ComponentThatProvidesMatSnackBar], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerElement = document.createElement('div'); @@ -465,11 +465,11 @@ describe('MdSnackBar with parent MdSnackBar', () => { TestBed.compileComponents(); })); - beforeEach(inject([MdSnackBar, LiveAnnouncer], (sb: MdSnackBar, la: LiveAnnouncer) => { + beforeEach(inject([MatSnackBar, LiveAnnouncer], (sb: MatSnackBar, la: LiveAnnouncer) => { parentSnackBar = sb; liveAnnouncer = la; - fixture = TestBed.createComponent(ComponentThatProvidesMdSnackBar); + fixture = TestBed.createComponent(ComponentThatProvidesMatSnackBar); childSnackBar = fixture.componentInstance.snackBar; fixture.detectChanges(); })); @@ -479,7 +479,7 @@ describe('MdSnackBar with parent MdSnackBar', () => { liveAnnouncer.ngOnDestroy(); }); - it('should close snackBars opened by parent when opening from child MdSnackBar', fakeAsync(() => { + it('should close snackBars opened by parent when opening from child', fakeAsync(() => { parentSnackBar.open('Pizza'); fixture.detectChanges(); tick(1000); @@ -495,7 +495,7 @@ describe('MdSnackBar with parent MdSnackBar', () => { .toContain('Taco', 'Expected parent snackbar msg to be dismissed by opening from child'); })); - it('should close snackBars opened by child when opening from parent MdSnackBar', fakeAsync(() => { + it('should close snackBars opened by child when opening from parent', fakeAsync(() => { childSnackBar.open('Pizza'); fixture.detectChanges(); tick(1000); @@ -513,8 +513,8 @@ describe('MdSnackBar with parent MdSnackBar', () => { }); -describe('MdSnackBar Positioning', () => { - let snackBar: MdSnackBar; +describe('MatSnackBar Positioning', () => { + let snackBar: MatSnackBar; let liveAnnouncer: LiveAnnouncer; let overlayContainerEl: HTMLElement; @@ -526,7 +526,7 @@ describe('MdSnackBar Positioning', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSnackBarModule, SnackBarTestModule, NoopAnimationsModule], + imports: [MatSnackBarModule, SnackBarTestModule, NoopAnimationsModule], providers: [ {provide: OverlayContainer, useFactory: () => { overlayContainerEl = document.createElement('div'); @@ -537,7 +537,7 @@ describe('MdSnackBar Positioning', () => { TestBed.compileComponents(); })); - beforeEach(inject([MdSnackBar, LiveAnnouncer], (sb: MdSnackBar, la: LiveAnnouncer) => { + beforeEach(inject([MatSnackBar, LiveAnnouncer], (sb: MatSnackBar, la: LiveAnnouncer) => { snackBar = sb; liveAnnouncer = la; })); @@ -555,7 +555,7 @@ describe('MdSnackBar Positioning', () => { }); it('should default to bottom center', () => { - let config: MdSnackBarConfig = {}; + let config: MatSnackBarConfig = {}; snackBar.open(simpleMessage, simpleActionLabel, config); let containerEl = overlayContainerEl.querySelector('snack-bar-container') as HTMLElement; let overlayPaneEl = overlayContainerEl.querySelector('.cdk-overlay-pane') as HTMLElement; @@ -569,7 +569,7 @@ describe('MdSnackBar Positioning', () => { }); it('should be in the bottom left corner', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'bottom', horizontalPosition: 'left' }; @@ -586,7 +586,7 @@ describe('MdSnackBar Positioning', () => { }); it('should be in the bottom right corner', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'bottom', horizontalPosition: 'right' }; @@ -603,7 +603,7 @@ describe('MdSnackBar Positioning', () => { }); it('should be in the bottom center', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'bottom', horizontalPosition: 'center' }; @@ -620,7 +620,7 @@ describe('MdSnackBar Positioning', () => { }); it('should be in the top left corner', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'left' }; @@ -637,7 +637,7 @@ describe('MdSnackBar Positioning', () => { }); it('should be in the top right corner', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'right' }; @@ -654,7 +654,7 @@ describe('MdSnackBar Positioning', () => { }); it('should be in the top center', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'center' }; @@ -671,7 +671,7 @@ describe('MdSnackBar Positioning', () => { }); it('should handle start based on direction (rtl)', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'start', direction: 'rtl', @@ -689,7 +689,7 @@ describe('MdSnackBar Positioning', () => { }); it('should handle start based on direction (ltr)', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'start', direction: 'ltr', @@ -708,7 +708,7 @@ describe('MdSnackBar Positioning', () => { it('should handle end based on direction (rtl)', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'end', direction: 'rtl', @@ -726,7 +726,7 @@ describe('MdSnackBar Positioning', () => { }); it('should handle end based on direction (ltr)', () => { - let config: MdSnackBarConfig = { + let config: MatSnackBarConfig = { verticalPosition: 'top', horizontalPosition: 'end', direction: 'ltr', @@ -769,17 +769,17 @@ class ComponentWithChildViewContainer { @Component({template: '

    Burritos are on the way.

    '}) class BurritosNotification { constructor( - public snackBarRef: MdSnackBarRef, - @Inject(MD_SNACK_BAR_DATA) public data: any) { } + public snackBarRef: MatSnackBarRef, + @Inject(MAT_SNACK_BAR_DATA) public data: any) { } } @Component({ template: '', - providers: [MdSnackBar] + providers: [MatSnackBar] }) -class ComponentThatProvidesMdSnackBar { - constructor(public snackBar: MdSnackBar) {} +class ComponentThatProvidesMatSnackBar { + constructor(public snackBar: MatSnackBar) {} } @@ -791,7 +791,7 @@ const TEST_DIRECTIVES = [ComponentWithChildViewContainer, BurritosNotification, DirectiveWithViewContainer]; @NgModule({ - imports: [CommonModule, MdSnackBarModule], + imports: [CommonModule, MatSnackBarModule], exports: TEST_DIRECTIVES, declarations: TEST_DIRECTIVES, entryComponents: [ComponentWithChildViewContainer, BurritosNotification], diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index 293e2c903e95..25635acfddd8 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -12,30 +12,30 @@ import {ComponentPortal, ComponentType, PortalInjector} from '@angular/cdk/porta import {ComponentRef, Injectable, Injector, Optional, SkipSelf} from '@angular/core'; import {extendObject} from '@angular/material/core'; import {SimpleSnackBar} from './simple-snack-bar'; -import {MD_SNACK_BAR_DATA, MdSnackBarConfig} from './snack-bar-config'; -import {MdSnackBarContainer} from './snack-bar-container'; -import {MdSnackBarRef} from './snack-bar-ref'; +import {MAT_SNACK_BAR_DATA, MatSnackBarConfig} from './snack-bar-config'; +import {MatSnackBarContainer} from './snack-bar-container'; +import {MatSnackBarRef} from './snack-bar-ref'; /** * Service to dispatch Material Design snack bar messages. */ @Injectable() -export class MdSnackBar { +export class MatSnackBar { /** * Reference to the current snack bar in the view *at this level* (in the Angular injector tree). * If there is a parent snack-bar service, all operations should delegate to that parent * via `_openedSnackBarRef`. */ - private _snackBarRefAtThisLevel: MdSnackBarRef | null = null; + private _snackBarRefAtThisLevel: MatSnackBarRef | null = null; /** Reference to the currently opened snackbar at *any* level. */ - get _openedSnackBarRef(): MdSnackBarRef | null { + get _openedSnackBarRef(): MatSnackBarRef | null { const parent = this._parentSnackBar; return parent ? parent._openedSnackBarRef : this._snackBarRefAtThisLevel; } - set _openedSnackBarRef(value: MdSnackBarRef | null) { + set _openedSnackBarRef(value: MatSnackBarRef | null) { if (this._parentSnackBar) { this._parentSnackBar._openedSnackBarRef = value; } else { @@ -47,7 +47,7 @@ export class MdSnackBar { private _overlay: Overlay, private _live: LiveAnnouncer, private _injector: Injector, - @Optional() @SkipSelf() private _parentSnackBar: MdSnackBar) {} + @Optional() @SkipSelf() private _parentSnackBar: MatSnackBar) {} /** * Creates and dispatches a snack bar with a custom component for the content, removing any @@ -56,7 +56,7 @@ export class MdSnackBar { * @param component Component to be instantiated. * @param config Extra configuration for the snack bar. */ - openFromComponent(component: ComponentType, config?: MdSnackBarConfig): MdSnackBarRef { + openFromComponent(component: ComponentType, config?: MatSnackBarConfig): MatSnackBarRef { const _config = _applyConfigDefaults(config); const snackBarRef = this._attach(component, _config); @@ -99,7 +99,7 @@ export class MdSnackBar { * @param action The label for the snackbar action. * @param config Additional configuration options for the snackbar. */ - open(message: string, action = '', config?: MdSnackBarConfig): MdSnackBarRef { + open(message: string, action = '', config?: MatSnackBarConfig): MatSnackBarRef { const _config = _applyConfigDefaults(config); // Since the user doesn't have access to the component, we can @@ -123,9 +123,9 @@ export class MdSnackBar { * Attaches the snack bar container component to the overlay. */ private _attachSnackBarContainer(overlayRef: OverlayRef, - config: MdSnackBarConfig): MdSnackBarContainer { - const containerPortal = new ComponentPortal(MdSnackBarContainer, config.viewContainerRef); - const containerRef: ComponentRef = overlayRef.attach(containerPortal); + config: MatSnackBarConfig): MatSnackBarContainer { + const containerPortal = new ComponentPortal(MatSnackBarContainer, config.viewContainerRef); + const containerRef: ComponentRef = overlayRef.attach(containerPortal); containerRef.instance.snackBarConfig = config; return containerRef.instance; } @@ -133,10 +133,10 @@ export class MdSnackBar { /** * Places a new component as the content of the snack bar container. */ - private _attach(component: ComponentType, config: MdSnackBarConfig): MdSnackBarRef { + private _attach(component: ComponentType, config: MatSnackBarConfig): MatSnackBarRef { const overlayRef = this._createOverlay(config); const container = this._attachSnackBarContainer(overlayRef, config); - const snackBarRef = new MdSnackBarRef(container, overlayRef); + const snackBarRef = new MatSnackBarRef(container, overlayRef); const injector = this._createInjector(config, snackBarRef); const portal = new ComponentPortal(component, undefined, injector); const contentRef = container.attachComponentPortal(portal); @@ -151,7 +151,7 @@ export class MdSnackBar { * Creates a new overlay and places it in the correct location. * @param config The user-specified snack bar config. */ - private _createOverlay(config: MdSnackBarConfig): OverlayRef { + private _createOverlay(config: MatSnackBarConfig): OverlayRef { const state = new OverlayConfig(); state.direction = config.direction; @@ -187,14 +187,14 @@ export class MdSnackBar { * @param snackBarRef Reference to the snack bar. */ private _createInjector( - config: MdSnackBarConfig, - snackBarRef: MdSnackBarRef): PortalInjector { + config: MatSnackBarConfig, + snackBarRef: MatSnackBarRef): PortalInjector { const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector; const injectionTokens = new WeakMap(); - injectionTokens.set(MdSnackBarRef, snackBarRef); - injectionTokens.set(MD_SNACK_BAR_DATA, config.data); + injectionTokens.set(MatSnackBarRef, snackBarRef); + injectionTokens.set(MAT_SNACK_BAR_DATA, config.data); return new PortalInjector(userInjector || this._injector, injectionTokens); } @@ -205,6 +205,6 @@ export class MdSnackBar { * @param config The configuration to which the defaults will be applied. * @returns The new configuration object with defaults applied. */ -function _applyConfigDefaults(config?: MdSnackBarConfig): MdSnackBarConfig { - return extendObject(new MdSnackBarConfig(), config); +function _applyConfigDefaults(config?: MatSnackBarConfig): MatSnackBarConfig { + return extendObject(new MatSnackBarConfig(), config); } diff --git a/src/lib/sort/mat-exports.ts b/src/lib/sort/mat-exports.ts deleted file mode 100644 index 44a7b1ccb49c..000000000000 --- a/src/lib/sort/mat-exports.ts +++ /dev/null @@ -1,19 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdSort, MdSortable} from './sort'; -import {MdSortHeader} from './sort-header'; -import {MdSortHeaderIntl} from './sort-header-intl'; -import {MdSortModule} from './sort-module'; - - -export {MdSort as MatSort}; -export {MdSortable as MatSortable}; -export {MdSortHeader as MatSortHeader}; -export {MdSortHeaderIntl as MatSortHeaderIntl}; -export {MdSortModule as MatSortModule}; diff --git a/src/lib/sort/public_api.ts b/src/lib/sort/public_api.ts index a9cb88a5c038..382f6c9168da 100644 --- a/src/lib/sort/public_api.ts +++ b/src/lib/sort/public_api.ts @@ -11,4 +11,4 @@ export * from './sort-direction'; export * from './sort-header'; export * from './sort-header-intl'; export * from './sort'; -export * from './mat-exports'; + diff --git a/src/lib/sort/sort-errors.ts b/src/lib/sort/sort-errors.ts index f9eb38da6204..5fb61c38ca34 100644 --- a/src/lib/sort/sort-errors.ts +++ b/src/lib/sort/sort-errors.ts @@ -7,16 +7,16 @@ */ /** @docs-private */ -export function getMdSortDuplicateMdSortableIdError(id: string): Error { - return Error(`Cannot have two MdSortables with the same id (${id}).`); +export function getSortDuplicateSortableIdError(id: string): Error { + return Error(`Cannot have two MatSortables with the same id (${id}).`); } /** @docs-private */ -export function getMdSortHeaderNotContainedWithinMdSortError(): Error { - return Error(`MdSortHeader must be placed within a parent element with the MdSort directive.`); +export function getSortHeaderNotContainedWithinSortError(): Error { + return Error(`MatSortHeader must be placed within a parent element with the MatSort directive.`); } /** @docs-private */ -export function getMdSortHeaderMissingIdError(): Error { - return Error(`MdSortHeader must be provided with a unique id.`); +export function getSortHeaderMissingIdError(): Error { + return Error(`MatSortHeader must be provided with a unique id.`); } diff --git a/src/lib/sort/sort-header-intl.ts b/src/lib/sort/sort-header-intl.ts index 48c38d0dbd28..35c45470c4c1 100644 --- a/src/lib/sort/sort-header-intl.ts +++ b/src/lib/sort/sort-header-intl.ts @@ -11,11 +11,11 @@ import {Subject} from 'rxjs/Subject'; import {SortDirection} from './sort-direction'; /** - * To modify the labels and text displayed, create a new instance of MdSortHeaderIntl and + * To modify the labels and text displayed, create a new instance of MatSortHeaderIntl and * include it in a custom provider. */ @Injectable() -export class MdSortHeaderIntl { +export class MatSortHeaderIntl { /** * Stream that emits whenever the labels here are changed. Use this to notify * components if the labels have changed after initialization. diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts index 5547cce09be1..b516ee6f6649 100644 --- a/src/lib/sort/sort-header.ts +++ b/src/lib/sort/sort-header.ts @@ -25,9 +25,9 @@ import { import {CdkColumnDef} from '@angular/cdk/table'; import {Subscription} from 'rxjs/Subscription'; import {merge} from 'rxjs/observable/merge'; -import {MdSort, MdSortable} from './sort'; -import {MdSortHeaderIntl} from './sort-header-intl'; -import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors'; +import {MatSort, MatSortable} from './sort'; +import {MatSortHeaderIntl} from './sort-header-intl'; +import {getSortHeaderNotContainedWithinSortError} from './sort-errors'; import {AnimationCurves, AnimationDurations} from '@angular/material/core'; const SORT_ANIMATION_TRANSITION = @@ -37,14 +37,14 @@ const SORT_ANIMATION_TRANSITION = * Applies sorting behavior (click to change sort) and styles to an element, including an * arrow to display the current sort direction. * - * Must be provided with an id and contained within a parent MdSort directive. + * Must be provided with an id and contained within a parent MatSort directive. * * If used on header cells in a CdkTable, it will automatically default its id from its containing * column definition. */ @Component({ moduleId: module.id, - selector: '[md-sort-header], [mat-sort-header]', + selector: '[mat-sort-header]', templateUrl: 'sort-header.html', styleUrls: ['sort-header.css'], host: { @@ -73,22 +73,22 @@ const SORT_ANIMATION_TRANSITION = ]) ] }) -export class MdSortHeader implements MdSortable { +export class MatSortHeader implements MatSortable { private _rerenderSubscription: Subscription; /** * ID of this sort header. If used within the context of a CdkColumnDef, this will default to * the column's name. */ - @Input('md-sort-header') id: string; + @Input('mat-sort-header') id: string; /** Sets the position of the arrow that displays when sorted. */ @Input() arrowPosition: 'before' | 'after' = 'after'; - /** Overrides the sort start value of the containing MdSort for this MdSortable. */ + /** Overrides the sort start value of the containing MatSort for this MatSortable. */ @Input('start') start: 'asc' | 'desc'; - /** Overrides the disable clear value of the containing MdSort for this MdSortable. */ + /** Overrides the disable clear value of the containing MatSort for this MatSortable. */ @Input() get disableClear() { return this._disableClear; } set disableClear(v) { this._disableClear = coerceBooleanProperty(v); } @@ -98,12 +98,12 @@ export class MdSortHeader implements MdSortable { get _id() { return this.id; } set _id(v: string) { this.id = v; } - constructor(public _intl: MdSortHeaderIntl, + constructor(public _intl: MatSortHeaderIntl, changeDetectorRef: ChangeDetectorRef, - @Optional() public _sort: MdSort, + @Optional() public _sort: MatSort, @Optional() public _cdkColumnDef: CdkColumnDef) { if (!_sort) { - throw getMdSortHeaderNotContainedWithinMdSortError(); + throw getSortHeaderNotContainedWithinSortError(); } this._rerenderSubscription = merge(_sort.sortChange, _intl.changes).subscribe(() => { @@ -124,7 +124,7 @@ export class MdSortHeader implements MdSortable { this._rerenderSubscription.unsubscribe(); } - /** Whether this MdSortHeader is currently sorted in either ascending or descending order. */ + /** Whether this MatSortHeader is currently sorted in either ascending or descending order. */ _isSorted() { return this._sort.active == this.id && this._sort.direction; } diff --git a/src/lib/sort/sort-module.ts b/src/lib/sort/sort-module.ts index 3f8cb960f55c..df4ad12434e1 100644 --- a/src/lib/sort/sort-module.ts +++ b/src/lib/sort/sort-module.ts @@ -7,16 +7,16 @@ */ import {NgModule} from '@angular/core'; -import {MdSortHeader} from './sort-header'; -import {MdSort} from './sort'; -import {MdSortHeaderIntl} from './sort-header-intl'; +import {MatSortHeader} from './sort-header'; +import {MatSort} from './sort'; +import {MatSortHeaderIntl} from './sort-header-intl'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], - exports: [MdSort, MdSortHeader], - declarations: [MdSort, MdSortHeader], - providers: [MdSortHeaderIntl] + exports: [MatSort, MatSortHeader], + declarations: [MatSort, MatSortHeader], + providers: [MatSortHeaderIntl] }) -export class MdSortModule {} +export class MatSortModule {} diff --git a/src/lib/sort/sort.md b/src/lib/sort/sort.md index fb228e645821..5b331deeb797 100644 --- a/src/lib/sort/sort.md +++ b/src/lib/sort/sort.md @@ -1,17 +1,17 @@ -The `mdSort` and `md-sort-header` are used, respectively, to add sorting state and display +The `matSort` and `mat-sort-header` are used, respectively, to add sorting state and display to tabular data. ### Adding sort to table headers -To add sorting behavior and styling to a set of table headers, add the `` component +To add sorting behavior and styling to a set of table headers, add the `` component to each header and provide an `id` that will identify it. These headers should be contained within a -parent element with the `mdSort` directive, which will emit an `mdSortChange` event when the user +parent element with the `matSort` directive, which will emit an `matSortChange` event when the user triggers sorting on the header. Users can trigger the sort header through a mouse click or keyboard action. When this happens, the -`mdSort` will emit an `mdSortChange` event that contains the ID of the header triggered and the +`matSort` will emit an `matSortChange` event that contains the ID of the header triggered and the direction to sort (`asc` or `desc`). #### Changing the sort order @@ -19,20 +19,20 @@ direction to sort (`asc` or `desc`). By default, a sort header starts its sorting at `asc` and then `desc`. Triggering the sort header after `desc` will remove sorting. -To reverse the sort order for all headers, set the `mdSortStart` to `desc` on the `mdSort` +To reverse the sort order for all headers, set the `matSortStart` to `desc` on the `matSort` directive. To reverse the order only for a specific header, set the `start` input only on the header instead. To prevent the user from clearing the sort sort state from an already sorted column, set -`mdSortDisableClear` to `true` on the `mdSort` to affect all headers, or set `disableClear` to +`matSortDisableClear` to `true` on the `matSort` to affect all headers, or set `disableClear` to `true` on a specific header. -#### Using sort with the md-table +#### Using sort with the mat-table -When used on an `md-table` header, it is not required to set an `md-sort-header` id on because +When used on an `mat-table` header, it is not required to set an `mat-sort-header` id on because by default it will use the id of the column. ### Accessibility -The `aria-label` for the sort button can be set in `MdSortHeaderIntl`. +The `aria-label` for the sort button can be set in `MatSortHeaderIntl`. diff --git a/src/lib/sort/sort.spec.ts b/src/lib/sort/sort.spec.ts index 36038f4d0d70..4bc46e516d45 100644 --- a/src/lib/sort/sort.spec.ts +++ b/src/lib/sort/sort.spec.ts @@ -7,72 +7,79 @@ import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; import {Observable} from 'rxjs/Observable'; import {map} from 'rxjs/operator/map'; -import {MdTableModule} from '../table/index'; -import {MdSort, MdSortHeader, MdSortHeaderIntl, MdSortModule, Sort, SortDirection} from './index'; +import {MatTableModule} from '../table/index'; import { - getMdSortDuplicateMdSortableIdError, - getMdSortHeaderMissingIdError, - getMdSortHeaderNotContainedWithinMdSortError, + MatSort, + MatSortHeader, + MatSortHeaderIntl, + MatSortModule, + Sort, + SortDirection +} from './index'; +import { + getSortDuplicateSortableIdError, + getSortHeaderMissingIdError, + getSortHeaderNotContainedWithinSortError, } from './sort-errors'; -describe('MdSort', () => { - let fixture: ComponentFixture; +describe('MatSort', () => { + let fixture: ComponentFixture; - let component: SimpleMdSortApp; + let component: SimpleMatSortApp; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdSortModule, MdTableModule, CdkTableModule, NoopAnimationsModule], + imports: [MatSortModule, MatTableModule, CdkTableModule, NoopAnimationsModule], declarations: [ - SimpleMdSortApp, - CdkTableMdSortApp, - MdTableMdSortApp, - MdSortHeaderMissingMdSortApp, - MdSortDuplicateMdSortableIdsApp, - MdSortableMissingIdApp + SimpleMatSortApp, + CdkTableMatSortApp, + MatTableMatSortApp, + MatSortHeaderMissingMatSortApp, + MatSortDuplicateMatSortableIdsApp, + MatSortableMissingIdApp ], }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(SimpleMdSortApp); + fixture = TestBed.createComponent(SimpleMatSortApp); component = fixture.componentInstance; fixture.detectChanges(); }); it('should have the sort headers register and deregister themselves', () => { - const sortables = component.mdSort.sortables; + const sortables = component.matSort.sortables; expect(sortables.size).toBe(4); - expect(sortables.get('defaultSortHeaderA')).toBe(component.mdSortHeaderDefaultA); - expect(sortables.get('defaultSortHeaderB')).toBe(component.mdSortHeaderDefaultB); + expect(sortables.get('defaultSortHeaderA')).toBe(component.matSortHeaderDefaultA); + expect(sortables.get('defaultSortHeaderB')).toBe(component.matSortHeaderDefaultB); fixture.destroy(); expect(sortables.size).toBe(0); }); it('should use the column definition if used within a cdk table', () => { - let cdkTableMdSortAppFixture = TestBed.createComponent(CdkTableMdSortApp); - let cdkTableMdSortAppComponent = cdkTableMdSortAppFixture.componentInstance; + let cdkTableMatSortAppFixture = TestBed.createComponent(CdkTableMatSortApp); + let cdkTableMatSortAppComponent = cdkTableMatSortAppFixture.componentInstance; - cdkTableMdSortAppFixture.detectChanges(); - cdkTableMdSortAppFixture.detectChanges(); + cdkTableMatSortAppFixture.detectChanges(); + cdkTableMatSortAppFixture.detectChanges(); - const sortables = cdkTableMdSortAppComponent.mdSort.sortables; + const sortables = cdkTableMatSortAppComponent.matSort.sortables; expect(sortables.size).toBe(3); expect(sortables.has('column_a')).toBe(true); expect(sortables.has('column_b')).toBe(true); expect(sortables.has('column_c')).toBe(true); }); - it('should use the column definition if used within an md table', () => { - let mdTableMdSortAppFixture = TestBed.createComponent(MdTableMdSortApp); - let mdTableMdSortAppComponent = mdTableMdSortAppFixture.componentInstance; + it('should use the column definition if used within an mat table', () => { + let matTableMatSortAppFixture = TestBed.createComponent(MatTableMatSortApp); + let matTableMatSortAppComponent = matTableMatSortAppFixture.componentInstance; - mdTableMdSortAppFixture.detectChanges(); - mdTableMdSortAppFixture.detectChanges(); + matTableMatSortAppFixture.detectChanges(); + matTableMatSortAppFixture.detectChanges(); - const sortables = mdTableMdSortAppComponent.mdSort.sortables; + const sortables = matTableMatSortAppComponent.matSort.sortables; expect(sortables.size).toBe(3); expect(sortables.has('column_a')).toBe(true); expect(sortables.has('column_b')).toBe(true); @@ -102,34 +109,34 @@ describe('MdSort', () => { it('should reset sort direction when a different column is sorted', () => { component.sort('defaultSortHeaderA'); - expect(component.mdSort.active).toBe('defaultSortHeaderA'); - expect(component.mdSort.direction).toBe('asc'); + expect(component.matSort.active).toBe('defaultSortHeaderA'); + expect(component.matSort.direction).toBe('asc'); component.sort('defaultSortHeaderA'); - expect(component.mdSort.active).toBe('defaultSortHeaderA'); - expect(component.mdSort.direction).toBe('desc'); + expect(component.matSort.active).toBe('defaultSortHeaderA'); + expect(component.matSort.direction).toBe('desc'); component.sort('defaultSortHeaderB'); - expect(component.mdSort.active).toBe('defaultSortHeaderB'); - expect(component.mdSort.direction).toBe('asc'); + expect(component.matSort.active).toBe('defaultSortHeaderB'); + expect(component.matSort.direction).toBe('asc'); }); - it('should throw an error if an MdSortable is not contained within an MdSort directive', () => { - expect(() => TestBed.createComponent(MdSortHeaderMissingMdSortApp).detectChanges()) - .toThrowError(wrappedErrorMessage(getMdSortHeaderNotContainedWithinMdSortError())); + it('should throw an error if an MatSortable is not contained within an MatSort directive', () => { + expect(() => TestBed.createComponent(MatSortHeaderMissingMatSortApp).detectChanges()) + .toThrowError(wrappedErrorMessage(getSortHeaderNotContainedWithinSortError())); }); - it('should throw an error if two MdSortables have the same id', () => { - expect(() => TestBed.createComponent(MdSortDuplicateMdSortableIdsApp).detectChanges()) - .toThrowError(wrappedErrorMessage(getMdSortDuplicateMdSortableIdError('duplicateId'))); + it('should throw an error if two MatSortables have the same id', () => { + expect(() => TestBed.createComponent(MatSortDuplicateMatSortableIdsApp).detectChanges()) + .toThrowError(wrappedErrorMessage(getSortDuplicateSortableIdError('duplicateId'))); }); - it('should throw an error if an MdSortable is missing an id', () => { - expect(() => TestBed.createComponent(MdSortableMissingIdApp).detectChanges()) - .toThrowError(wrappedErrorMessage(getMdSortHeaderMissingIdError())); + it('should throw an error if an MatSortable is missing an id', () => { + expect(() => TestBed.createComponent(MatSortableMissingIdApp).detectChanges()) + .toThrowError(wrappedErrorMessage(getSortHeaderMissingIdError())); }); - it('should allow let MdSortable override the default sort parameters', () => { + it('should allow let MatSortable override the default sort parameters', () => { testSingleColumnSortDirectionSequence( fixture, ['asc', 'desc', '']); @@ -146,8 +153,8 @@ describe('MdSort', () => { }); it('should re-render when the i18n labels have changed', - inject([MdSortHeaderIntl], (intl: MdSortHeaderIntl) => { - const header = fixture.debugElement.query(By.directive(MdSortHeader)).nativeElement; + inject([MatSortHeaderIntl], (intl: MatSortHeaderIntl) => { + const header = fixture.debugElement.query(By.directive(MatSortHeader)).nativeElement; const button = header.querySelector('.mat-sort-header-button'); intl.sortButtonLabel = () => 'Sort all of the things'; @@ -161,54 +168,58 @@ describe('MdSort', () => { /** * Performs a sequence of sorting on a single column to see if the sort directions are * consistent with expectations. Detects any changes in the fixture to reflect any changes in - * the inputs and resets the MdSort to remove any side effects from previous tests. + * the inputs and resets the MatSort to remove any side effects from previous tests. */ -function testSingleColumnSortDirectionSequence(fixture: ComponentFixture, +function testSingleColumnSortDirectionSequence(fixture: ComponentFixture, expectedSequence: SortDirection[], id: string = 'defaultSortHeaderA') { // Detect any changes that were made in preparation for this sort sequence fixture.detectChanges(); - // Reset the md sort to make sure there are no side affects from previous tests + // Reset the sort to make sure there are no side affects from previous tests const component = fixture.componentInstance; - component.mdSort.active = ''; - component.mdSort.direction = ''; + component.matSort.active = ''; + component.matSort.direction = ''; // Run through the sequence to confirm the order let actualSequence = expectedSequence.map(() => { component.sort(id); - // Check that the sort event's active sort is consistent with the MdSort - expect(component.mdSort.active).toBe(id); + // Check that the sort event's active sort is consistent with the MatSort + expect(component.matSort.active).toBe(id); expect(component.latestSortEvent.active).toBe(id); - // Check that the sort event's direction is consistent with the MdSort - expect(component.mdSort.direction).toBe(component.latestSortEvent.direction); - return component.mdSort.direction; + // Check that the sort event's direction is consistent with the MatSort + expect(component.matSort.direction).toBe(component.latestSortEvent.direction); + return component.matSort.direction; }); expect(actualSequence).toEqual(expectedSequence); // Expect that performing one more sort will loop it back to the beginning. component.sort(id); - expect(component.mdSort.direction).toBe(expectedSequence[0]); + expect(component.matSort.direction).toBe(expectedSequence[0]); } @Component({ template: ` -
    -
    A
    -
    B
    -
    D
    -
    E
    +
    +
    + A +
    +
    + B +
    +
    D
    +
    E
    ` }) -class SimpleMdSortApp { +class SimpleMatSortApp { latestSortEvent: Sort; active: string; @@ -216,9 +227,9 @@ class SimpleMdSortApp { direction: SortDirection = ''; disableClear: boolean; - @ViewChild(MdSort) mdSort: MdSort; - @ViewChild('defaultSortHeaderA') mdSortHeaderDefaultA: MdSortHeader; - @ViewChild('defaultSortHeaderB') mdSortHeaderDefaultB: MdSortHeader; + @ViewChild(MatSort) matSort: MatSort; + @ViewChild('defaultSortHeaderA') matSortHeaderDefaultA: MatSortHeader; + @ViewChild('defaultSortHeaderB') matSortHeaderDefaultB: MatSortHeader; constructor (public elementRef: ElementRef) { } @@ -238,19 +249,19 @@ class FakeDataSource extends DataSource { @Component({ template: ` - + - Column A + Column A {{row.a}} - Column B + Column B {{row.b}} - Column C + Column C {{row.c}} @@ -259,8 +270,8 @@ class FakeDataSource extends DataSource { ` }) -class CdkTableMdSortApp { - @ViewChild(MdSort) mdSort: MdSort; +class CdkTableMatSortApp { + @ViewChild(MatSort) matSort: MatSort; dataSource = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; @@ -268,29 +279,29 @@ class CdkTableMdSortApp { @Component({ template: ` - - - Column A - {{row.a}} + + + Column A + {{row.a}} - - Column B - {{row.b}} + + Column B + {{row.b}} - - Column C - {{row.c}} + + Column C + {{row.c}} - - - + + + ` }) -class MdTableMdSortApp { - @ViewChild(MdSort) mdSort: MdSort; +class MatTableMatSortApp { + @ViewChild(MatSort) matSort: MatSort; dataSource = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; @@ -298,27 +309,27 @@ class MdTableMdSortApp { @Component({ - template: `
    A
    ` + template: `
    A
    ` }) -class MdSortHeaderMissingMdSortApp { } +class MatSortHeaderMissingMatSortApp { } @Component({ template: ` -
    -
    A
    -
    A
    +
    +
    A
    +
    A
    ` }) -class MdSortDuplicateMdSortableIdsApp { } +class MatSortDuplicateMatSortableIdsApp { } @Component({ template: ` -
    -
    A
    +
    +
    A
    ` }) -class MdSortableMissingIdApp { } +class MatSortableMissingIdApp { } diff --git a/src/lib/sort/sort.ts b/src/lib/sort/sort.ts index c0151361bfe3..3c5f7078dacf 100644 --- a/src/lib/sort/sort.ts +++ b/src/lib/sort/sort.ts @@ -9,9 +9,9 @@ import {Directive, EventEmitter, Input, Output} from '@angular/core'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {SortDirection} from './sort-direction'; -import {getMdSortDuplicateMdSortableIdError, getMdSortHeaderMissingIdError} from './sort-errors'; +import {getSortDuplicateSortableIdError, getSortHeaderMissingIdError} from './sort-errors'; -export interface MdSortable { +export interface MatSortable { id: string; start: 'asc' | 'desc'; disableClear: boolean; @@ -22,86 +22,63 @@ export interface Sort { direction: SortDirection; } -/** Container for MdSortables to manage the sort state and provide default sort parameters. */ +/** Container for MatSortables to manage the sort state and provide default sort parameters. */ @Directive({ - selector: '[mdSort], [matSort]', + selector: '[matSort]', }) -export class MdSort { +export class MatSort { /** Collection of all registered sortables that this directive manages. */ - sortables = new Map(); + sortables = new Map(); - /** The id of the most recently sorted MdSortable. */ - @Input('mdSortActive') active: string; + /** The id of the most recently sorted MatSortable. */ + @Input('matSortActive') active: string; /** - * The direction to set when an MdSortable is initially sorted. - * May be overriden by the MdSortable's sort start. + * The direction to set when an MatSortable is initially sorted. + * May be overriden by the MatSortable's sort start. */ - @Input('mdSortStart') start: 'asc' | 'desc' = 'asc'; + @Input('matSortStart') start: 'asc' | 'desc' = 'asc'; - /** The sort direction of the currently active MdSortable. */ - @Input('mdSortDirection') direction: SortDirection = ''; + /** The sort direction of the currently active MatSortable. */ + @Input('matSortDirection') direction: SortDirection = ''; /** * Whether to disable the user from clearing the sort by finishing the sort direction cycle. - * May be overriden by the MdSortable's disable clear input. + * May be overriden by the MatSortable's disable clear input. */ - @Input('mdSortDisableClear') + @Input('matSortDisableClear') get disableClear() { return this._disableClear; } set disableClear(v) { this._disableClear = coerceBooleanProperty(v); } private _disableClear: boolean; - // Properties with `mat-` prefix for noconflict mode. - @Input('matSortActive') - get _matSortActive() { return this.active; } - set _matSortActive(v) { this.active = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matSortStart') - get _matSortStart() { return this.start; } - set _matSortStart(v) { this.start = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matSortDirection') - get _matSortDirection() { return this.direction; } - set _matSortDirection(v) { this.direction = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matSortDisableClear') - get _matSortDisableClear() { return this.disableClear; } - set _matSortDisableClear(v) { this.disableClear = v; } - /** Event emitted when the user changes either the active sort or sort direction. */ - @Output('mdSortChange') readonly sortChange = new EventEmitter(); - - @Output('matSortChange') - get _matSortChange(): EventEmitter { return this.sortChange; } + @Output('matSortChange') readonly sortChange = new EventEmitter(); /** - * Register function to be used by the contained MdSortables. Adds the MdSortable to the - * collection of MdSortables. + * Register function to be used by the contained MatSortables. Adds the MatSortable to the + * collection of MatSortables. */ - register(sortable: MdSortable) { + register(sortable: MatSortable) { if (!sortable.id) { - throw getMdSortHeaderMissingIdError(); + throw getSortHeaderMissingIdError(); } if (this.sortables.has(sortable.id)) { - throw getMdSortDuplicateMdSortableIdError(sortable.id); + throw getSortDuplicateSortableIdError(sortable.id); } this.sortables.set(sortable.id, sortable); } /** - * Unregister function to be used by the contained MdSortables. Removes the MdSortable from the - * collection of contained MdSortables. + * Unregister function to be used by the contained MatSortables. Removes the MatSortable from the + * collection of contained MatSortables. */ - deregister(sortable: MdSortable) { + deregister(sortable: MatSortable) { this.sortables.delete(sortable.id); } /** Sets the active sort id and determines the new sort direction. */ - sort(sortable: MdSortable) { + sort(sortable: MatSortable) { if (this.active != sortable.id) { this.active = sortable.id; this.direction = sortable.start ? sortable.start : this.start; @@ -113,7 +90,7 @@ export class MdSort { } /** Returns the next sort direction of the active sortable, checking for potential overrides. */ - getNextSortDirection(sortable: MdSortable): SortDirection { + getNextSortDirection(sortable: MatSortable): SortDirection { if (!sortable) { return ''; } // Get the sort direction cycle with the potential sortable overrides. diff --git a/src/lib/stepper/mat-exports.ts b/src/lib/stepper/mat-exports.ts deleted file mode 100644 index f561023416b9..000000000000 --- a/src/lib/stepper/mat-exports.ts +++ /dev/null @@ -1,29 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MdHorizontalStepper, - MdStep, - MdStepper, - MdVerticalStepper, -} from './stepper'; -import {MdStepHeader} from './step-header'; -import {MdStepLabel} from './step-label'; -import {MdStepperNext, MdStepperPrevious} from './stepper-button'; -import {MdStepperModule} from './stepper-module'; - - -export {MdStep as MatStep}; -export {MdStepHeader as MatStepHeader}; -export {MdStepLabel as MatStepLabel}; -export {MdStepper as MatStepper}; -export {MdHorizontalStepper as MatHorizontalStepper}; -export {MdStepperModule as MatStepperModule}; -export {MdVerticalStepper as MatVerticalStepper}; -export {MdStepperPrevious as MatStepperPrevious}; -export {MdStepperNext as MatStepperNext}; diff --git a/src/lib/stepper/public_api.ts b/src/lib/stepper/public_api.ts index f55f0ffc768d..3fa16f569ac9 100644 --- a/src/lib/stepper/public_api.ts +++ b/src/lib/stepper/public_api.ts @@ -11,4 +11,4 @@ export * from './step-label'; export * from './stepper'; export * from './stepper-button'; export * from './step-header'; -export * from './mat-exports'; + diff --git a/src/lib/stepper/step-header.ts b/src/lib/stepper/step-header.ts index be0390fc7b58..3b87ea8d4932 100644 --- a/src/lib/stepper/step-header.ts +++ b/src/lib/stepper/step-header.ts @@ -8,13 +8,12 @@ import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion'; import {Component, Input, ViewEncapsulation} from '@angular/core'; -import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core'; -import {MdStepLabel} from './step-label'; +import {MatStepLabel} from './step-label'; @Component({ moduleId: module.id, - selector: 'md-step-header, mat-step-header', + selector: 'mat-step-header', templateUrl: 'step-header.html', styleUrls: ['step-header.css'], host: { @@ -23,14 +22,13 @@ import {MdStepLabel} from './step-label'; }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdStepHeader { +export class MatStepHeader { /** Icon for the given step. */ @Input() icon: string; /** Label of the given step. */ - @Input() label: MdStepLabel | string; + @Input() label: MatStepLabel | string; /** Index of the given step. */ @Input() @@ -66,11 +64,11 @@ export class MdStepHeader { /** Returns string label of given step if it is a text label. */ _stringLabel(): string | null { - return this.label instanceof MdStepLabel ? null : this.label; + return this.label instanceof MatStepLabel ? null : this.label; } - /** Returns MdStepLabel if the label of given step is a template label. */ - _templateLabel(): MdStepLabel | null { - return this.label instanceof MdStepLabel ? this.label : null; + /** Returns MatStepLabel if the label of given step is a template label. */ + _templateLabel(): MatStepLabel | null { + return this.label instanceof MatStepLabel ? this.label : null; } } diff --git a/src/lib/stepper/step-label.ts b/src/lib/stepper/step-label.ts index 62e1bc7f60e4..e4f166057a10 100644 --- a/src/lib/stepper/step-label.ts +++ b/src/lib/stepper/step-label.ts @@ -10,12 +10,12 @@ import {Directive, TemplateRef} from '@angular/core'; import {CdkStepLabel} from '@angular/cdk/stepper'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdStepLabel = CdkStepLabel; +export const _MatStepLabel = CdkStepLabel; @Directive({ - selector: '[mdStepLabel], [matStepLabel]', + selector: '[matStepLabel]', }) -export class MdStepLabel extends _MdStepLabel { +export class MatStepLabel extends _MatStepLabel { constructor(template: TemplateRef) { super(template); } diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts index e1d5bb488bef..46d209710bfd 100644 --- a/src/lib/stepper/stepper-button.ts +++ b/src/lib/stepper/stepper-button.ts @@ -8,24 +8,24 @@ import {Directive} from '@angular/core'; import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper'; -import {MdStepper} from './stepper'; +import {MatStepper} from './stepper'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdStepperNext = CdkStepperNext; -export const _MdStepperPrevious = CdkStepperPrevious; +export const _MatStepperNext = CdkStepperNext; +export const _MatStepperPrevious = CdkStepperPrevious; /** Button that moves to the next step in a stepper workflow. */ @Directive({ - selector: 'button[mdStepperNext], button[matStepperNext]', + selector: 'button[matStepperNext]', host: {'(click)': '_stepper.next()'}, - providers: [{provide: CdkStepper, useExisting: MdStepper}] + providers: [{provide: CdkStepper, useExisting: MatStepper}] }) -export class MdStepperNext extends _MdStepperNext { } +export class MatStepperNext extends _MatStepperNext { } /** Button that moves to the previous step in a stepper workflow. */ @Directive({ - selector: 'button[mdStepperPrevious], button[matStepperPrevious]', + selector: 'button[matStepperPrevious]', host: {'(click)': '_stepper.previous()'}, - providers: [{provide: CdkStepper, useExisting: MdStepper}] + providers: [{provide: CdkStepper, useExisting: MatStepper}] }) -export class MdStepperPrevious extends _MdStepperPrevious { } +export class MatStepperPrevious extends _MatStepperPrevious { } diff --git a/src/lib/stepper/stepper-module.ts b/src/lib/stepper/stepper-module.ts index 5737a20e61e8..31d0751b644d 100644 --- a/src/lib/stepper/stepper-module.ts +++ b/src/lib/stepper/stepper-module.ts @@ -10,36 +10,36 @@ import {PortalModule} from '@angular/cdk/portal'; import {CdkStepperModule} from '@angular/cdk/stepper'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MdButtonModule} from '@angular/material/button'; -import {MdCommonModule} from '@angular/material/core'; -import {MdIconModule} from '@angular/material/icon'; -import {MdStepHeader} from './step-header'; -import {MdStepLabel} from './step-label'; -import {MdHorizontalStepper, MdStep, MdStepper, MdVerticalStepper} from './stepper'; -import {MdStepperNext, MdStepperPrevious} from './stepper-button'; +import {MatButtonModule} from '@angular/material/button'; +import {MatCommonModule} from '@angular/material/core'; +import {MatIconModule} from '@angular/material/icon'; +import {MatStepHeader} from './step-header'; +import {MatStepLabel} from './step-label'; +import {MatHorizontalStepper, MatStep, MatStepper, MatVerticalStepper} from './stepper'; +import {MatStepperNext, MatStepperPrevious} from './stepper-button'; @NgModule({ imports: [ - MdCommonModule, + MatCommonModule, CommonModule, PortalModule, - MdButtonModule, + MatButtonModule, CdkStepperModule, - MdIconModule + MatIconModule ], exports: [ - MdCommonModule, - MdHorizontalStepper, - MdVerticalStepper, - MdStep, - MdStepLabel, - MdStepper, - MdStepperNext, - MdStepperPrevious, - MdStepHeader + MatCommonModule, + MatHorizontalStepper, + MatVerticalStepper, + MatStep, + MatStepLabel, + MatStepper, + MatStepperNext, + MatStepperPrevious, + MatStepHeader ], - declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper, - MdStepperNext, MdStepperPrevious, MdStepHeader], + declarations: [MatHorizontalStepper, MatVerticalStepper, MatStep, MatStepLabel, MatStepper, + MatStepperNext, MatStepperPrevious, MatStepHeader], }) -export class MdStepperModule {} +export class MatStepperModule {} diff --git a/src/lib/stepper/stepper.md b/src/lib/stepper/stepper.md index cf3381330478..e41d89b68c39 100644 --- a/src/lib/stepper/stepper.md +++ b/src/lib/stepper/stepper.md @@ -7,110 +7,110 @@ that drives a stepped workflow. Material stepper extends the CDK stepper and has styling. ### Stepper variants -There are two stepper components: `md-horizontal-stepper` and `md-vertical-stepper`. They +There are two stepper components: `mat-horizontal-stepper` and `mat-vertical-stepper`. They can be used the same way. The only difference is the orientation of stepper. -`md-horizontal-stepper` selector can be used to create a horizontal stepper, and -`md-vertical-stepper` can be used to create a vertical stepper. `md-step` components need to be +`mat-horizontal-stepper` selector can be used to create a horizontal stepper, and +`mat-vertical-stepper` can be used to create a vertical stepper. `mat-step` components need to be placed inside either one of the two stepper components. ### Labels If a step's label is only text, then the `label` attribute can be used. ```html - - + + Content 1 - - + + Content 2 - - + + ``` -For more complex labels, add a template with the `mdStepLabel` directive inside the -`md-step`. +For more complex labels, add a template with the `matStepLabel` directive inside the +`mat-step`. ```html - - - ... + + + ... ... - - + + ``` ### Stepper buttons There are two button directives to support navigation between different steps: -`mdStepperPrevious` and `mdStepperNext`. +`matStepperPrevious` and `matStepperNext`. ```html - - + + ...
    - - + +
    -     -     + + ``` ### Linear stepper -The `linear` attribute can be set on `md-horizontal-stepper` and `md-vertical-stepper` to create +The `linear` attribute can be set on `mat-horizontal-stepper` and `mat-vertical-stepper` to create a linear stepper that requires the user to complete previous steps before proceeding -to following steps. For each `md-step`, the `stepControl` attribute can be set to the top level +to following steps. For each `mat-step`, the `stepControl` attribute can be set to the top level `AbstractControl` that is used to check the validity of the step. There are two possible approaches. One is using a single form for stepper, and the other is using a different form for each step. #### Using a single form -When using a single form for the stepper, `mdStepperPrevious` and `mdStepperNext` have to be +When using a single form for the stepper, `matStepperPrevious` and `matStepperNext` have to be set to `type="button"` in order to prevent submission of the form before all steps are completed. ```html
    - - + + ...
    - +
    -     - + + ...
    - - + +
    -     + ... -     + ``` #### Using a different form for each step ```html - - + +
    ... -     - + +
    ... -     -     + + ``` ### Types of steps #### Optional step If completion of a step in linear stepper is not required, then the `optional` attribute can be set -on `md-step`. +on `mat-step`. #### Editable step By default, steps are editable, which means users can return to previously completed steps and -edit their responses. `editable="true"` can be set on `md-step` to change the default. +edit their responses. `editable="true"` can be set on `mat-step` to change the default. #### Completed step By default, the `completed` attribute of a step returns `true` if the step is valid (in case of diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index ec042211fd71..eebd89f6dee9 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -6,22 +6,22 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms'; import {By} from '@angular/platform-browser'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MdStepperModule} from './index'; -import {MdHorizontalStepper, MdStepper, MdVerticalStepper} from './stepper'; -import {MdStepperNext, MdStepperPrevious} from './stepper-button'; +import {MatStepperModule} from './index'; +import {MatHorizontalStepper, MatStepper, MatVerticalStepper} from './stepper'; +import {MatStepperNext, MatStepperPrevious} from './stepper-button'; const VALID_REGEX = /valid/; -describe('MdHorizontalStepper', () => { +describe('MatHorizontalStepper', () => { let dir = 'ltr'; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdStepperModule, NoopAnimationsModule, ReactiveFormsModule], + imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule], declarations: [ - SimpleMdHorizontalStepperApp, - LinearMdHorizontalStepperApp + SimpleMatHorizontalStepperApp, + LinearMatHorizontalStepperApp ], providers: [ {provide: Directionality, useFactory: () => ({value: dir})} @@ -32,16 +32,16 @@ describe('MdHorizontalStepper', () => { })); describe('basic horizontal stepper', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(() => { - fixture = TestBed.createComponent(SimpleMdHorizontalStepperApp); + fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); fixture.detectChanges(); }); it('should default to the first step', () => { let stepperComponent = fixture.debugElement - .query(By.css('md-horizontal-stepper')).componentInstance; + .query(By.css('mat-horizontal-stepper')).componentInstance; expect(stepperComponent.selectedIndex).toBe(0); }); @@ -51,7 +51,7 @@ describe('MdHorizontalStepper', () => { }); it('should set the "tablist" role on stepper', () => { - let stepperEl = fixture.debugElement.query(By.css('md-horizontal-stepper')).nativeElement; + let stepperEl = fixture.debugElement.query(By.css('mat-horizontal-stepper')).nativeElement; expect(stepperEl.getAttribute('role')).toBe('tablist'); }); @@ -99,11 +99,11 @@ describe('MdHorizontalStepper', () => { }); describe('RTL', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(() => { dir = 'rtl'; - fixture = TestBed.createComponent(SimpleMdHorizontalStepperApp); + fixture = TestBed.createComponent(SimpleMatHorizontalStepperApp); fixture.detectChanges(); }); @@ -118,17 +118,17 @@ describe('MdHorizontalStepper', () => { }); describe('linear horizontal stepper', () => { - let fixture: ComponentFixture; - let testComponent: LinearMdHorizontalStepperApp; - let stepperComponent: MdHorizontalStepper; + let fixture: ComponentFixture; + let testComponent: LinearMatHorizontalStepperApp; + let stepperComponent: MatHorizontalStepper; beforeEach(() => { - fixture = TestBed.createComponent(LinearMdHorizontalStepperApp); + fixture = TestBed.createComponent(LinearMatHorizontalStepperApp); fixture.detectChanges(); testComponent = fixture.componentInstance; stepperComponent = fixture.debugElement - .query(By.css('md-horizontal-stepper')).componentInstance; + .query(By.css('mat-horizontal-stepper')).componentInstance; }); it('should have true linear attribute', () => { @@ -156,15 +156,15 @@ describe('MdHorizontalStepper', () => { }); }); -describe('MdVerticalStepper', () => { +describe('MatVerticalStepper', () => { let dir = 'ltr'; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdStepperModule, NoopAnimationsModule, ReactiveFormsModule], + imports: [MatStepperModule, NoopAnimationsModule, ReactiveFormsModule], declarations: [ - SimpleMdVerticalStepperApp, - LinearMdVerticalStepperApp + SimpleMatVerticalStepperApp, + LinearMatVerticalStepperApp ], providers: [ {provide: Directionality, useFactory: () => ({value: dir})} @@ -175,16 +175,16 @@ describe('MdVerticalStepper', () => { })); describe('basic vertical stepper', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(() => { - fixture = TestBed.createComponent(SimpleMdVerticalStepperApp); + fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); fixture.detectChanges(); }); it('should default to the first step', () => { let stepperComponent = fixture.debugElement - .query(By.css('md-vertical-stepper')).componentInstance; + .query(By.css('mat-vertical-stepper')).componentInstance; expect(stepperComponent.selectedIndex).toBe(0); }); @@ -195,7 +195,7 @@ describe('MdVerticalStepper', () => { }); it('should set the "tablist" role on stepper', () => { - let stepperEl = fixture.debugElement.query(By.css('md-vertical-stepper')).nativeElement; + let stepperEl = fixture.debugElement.query(By.css('mat-vertical-stepper')).nativeElement; expect(stepperEl.getAttribute('role')).toBe('tablist'); }); @@ -243,11 +243,11 @@ describe('MdVerticalStepper', () => { }); describe('RTL', () => { - let fixture: ComponentFixture; + let fixture: ComponentFixture; beforeEach(() => { dir = 'rtl'; - fixture = TestBed.createComponent(SimpleMdVerticalStepperApp); + fixture = TestBed.createComponent(SimpleMatVerticalStepperApp); fixture.detectChanges(); }); @@ -262,17 +262,17 @@ describe('MdVerticalStepper', () => { }); describe('linear vertical stepper', () => { - let fixture: ComponentFixture; - let testComponent: LinearMdVerticalStepperApp; - let stepperComponent: MdVerticalStepper; + let fixture: ComponentFixture; + let testComponent: LinearMatVerticalStepperApp; + let stepperComponent: MatVerticalStepper; beforeEach(() => { - fixture = TestBed.createComponent(LinearMdVerticalStepperApp); + fixture = TestBed.createComponent(LinearMatVerticalStepperApp); fixture.detectChanges(); testComponent = fixture.componentInstance; stepperComponent = fixture.debugElement - .query(By.css('md-vertical-stepper')).componentInstance; + .query(By.css('mat-vertical-stepper')).componentInstance; }); it('should have true linear attribute', () => { @@ -304,7 +304,7 @@ describe('MdVerticalStepper', () => { /** Asserts that `selectedIndex` updates correctly when header of another step is clicked. */ function assertSelectionChangeOnHeaderClick(fixture: ComponentFixture, stepHeaders: DebugElement[]) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; expect(stepperComponent.selectedIndex).toBe(0); @@ -326,7 +326,7 @@ function assertSelectionChangeOnHeaderClick(fixture: ComponentFixture, /** Asserts that 'aria-expanded' attribute is correct for expanded content of step. */ function assertCorrectAriaExpandedAttribute(fixture: ComponentFixture, stepContents: DebugElement[]) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; let firstStepContentEl = stepContents[0].nativeElement; expect(firstStepContentEl.getAttribute('aria-expanded')).toBe('true'); @@ -340,7 +340,7 @@ function assertCorrectAriaExpandedAttribute(fixture: ComponentFixture, /** Asserts that step has correct label. */ function assertCorrectStepLabel(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; let selectedLabel = fixture.nativeElement.querySelector('[aria-selected="true"]'); expect(selectedLabel.textContent).toMatch('Step 1'); @@ -357,57 +357,57 @@ function assertCorrectStepLabel(fixture: ComponentFixture) { expect(selectedLabel.textContent).toMatch('New Label'); } -/** Asserts that clicking on MdStepperNext button updates `selectedIndex` correctly. */ +/** Asserts that clicking on MatStepperNext button updates `selectedIndex` correctly. */ function assertNextStepperButtonClick(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; expect(stepperComponent.selectedIndex).toBe(0); let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[0].nativeElement; + .queryAll(By.directive(MatStepperNext))[0].nativeElement; nextButtonNativeEl.click(); fixture.detectChanges(); expect(stepperComponent.selectedIndex).toBe(1); nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[1].nativeElement; + .queryAll(By.directive(MatStepperNext))[1].nativeElement; nextButtonNativeEl.click(); fixture.detectChanges(); expect(stepperComponent.selectedIndex).toBe(2); nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[2].nativeElement; + .queryAll(By.directive(MatStepperNext))[2].nativeElement; nextButtonNativeEl.click(); fixture.detectChanges(); expect(stepperComponent.selectedIndex).toBe(2); } -/** Asserts that clicking on MdStepperPrevious button updates `selectedIndex` correctly. */ +/** Asserts that clicking on MatStepperPrevious button updates `selectedIndex` correctly. */ function assertPreviousStepperButtonClick(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; expect(stepperComponent.selectedIndex).toBe(0); stepperComponent.selectedIndex = 2; let previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperPrevious))[2].nativeElement; + .queryAll(By.directive(MatStepperPrevious))[2].nativeElement; previousButtonNativeEl.click(); fixture.detectChanges(); expect(stepperComponent.selectedIndex).toBe(1); previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperPrevious))[1].nativeElement; + .queryAll(By.directive(MatStepperPrevious))[1].nativeElement; previousButtonNativeEl.click(); fixture.detectChanges(); expect(stepperComponent.selectedIndex).toBe(0); previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperPrevious))[0].nativeElement; + .queryAll(By.directive(MatStepperPrevious))[0].nativeElement; previousButtonNativeEl.click(); fixture.detectChanges(); @@ -416,7 +416,7 @@ function assertPreviousStepperButtonClick(fixture: ComponentFixture) { /** Asserts that step position is correct for animation. */ function assertCorrectStepAnimationDirection(fixture: ComponentFixture, rtl?: 'rtl') { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; expect(stepperComponent._getAnimationDirection(0)).toBe('current'); if (rtl === 'rtl') { @@ -455,7 +455,7 @@ function assertCorrectStepAnimationDirection(fixture: ComponentFixture, rtl /** Asserts that keyboard interaction works correctly. */ function assertCorrectKeyboardInteraction(fixture: ComponentFixture, stepHeaders: DebugElement[]) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; expect(stepperComponent._focusIndex).toBe(0); expect(stepperComponent.selectedIndex).toBe(0); @@ -514,10 +514,10 @@ function assertCorrectKeyboardInteraction(fixture: ComponentFixture, /** Asserts that step selection change using stepper buttons does not focus step header. */ function assertStepHeaderFocusNotCalled(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; let stepHeaderEl = fixture.debugElement.queryAll(By.css('mat-step-header'))[1].nativeElement; let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[0].nativeElement; + .queryAll(By.directive(MatStepperNext))[0].nativeElement; spyOn(stepHeaderEl, 'focus'); nextButtonNativeEl.click(); fixture.detectChanges(); @@ -529,7 +529,7 @@ function assertStepHeaderFocusNotCalled(fixture: ComponentFixture) { /** Asserts that arrow key direction works correctly in RTL mode. */ function assertArrowKeyInteractionInRtl(fixture: ComponentFixture, stepHeaders: DebugElement[]) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; expect(stepperComponent._focusIndex).toBe(0); @@ -551,9 +551,10 @@ function assertArrowKeyInteractionInRtl(fixture: ComponentFixture, */ function assertLinearStepperValidity(stepHeaderEl: HTMLElement, testComponent: - LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp, + LinearMatHorizontalStepperApp | + LinearMatVerticalStepperApp, fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; stepHeaderEl.click(); fixture.detectChanges(); @@ -561,7 +562,7 @@ function assertLinearStepperValidity(stepHeaderEl: HTMLElement, expect(stepperComponent.selectedIndex).toBe(0); let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[0].nativeElement; + .queryAll(By.directive(MatStepperNext))[0].nativeElement; nextButtonNativeEl.click(); fixture.detectChanges(); @@ -588,12 +589,12 @@ function assertStepHeaderBlurred(fixture: ComponentFixture) { /** Asserts that it is only possible to go back to a previous step if the step is editable. */ function assertEditableStepChange(fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; stepperComponent.selectedIndex = 1; stepperComponent._steps.toArray()[0].editable = false; let previousButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperPrevious))[1].nativeElement; + .queryAll(By.directive(MatStepperPrevious))[1].nativeElement; previousButtonNativeEl.click(); fixture.detectChanges(); @@ -611,9 +612,9 @@ function assertEditableStepChange(fixture: ComponentFixture) { * or the input is valid. */ function assertOptionalStepValidity(testComponent: - LinearMdHorizontalStepperApp | LinearMdVerticalStepperApp, + LinearMatHorizontalStepperApp | LinearMatVerticalStepperApp, fixture: ComponentFixture) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; testComponent.oneGroup.get('oneCtrl')!.setValue('input'); testComponent.twoGroup.get('twoCtrl')!.setValue('input'); @@ -624,7 +625,7 @@ function assertOptionalStepValidity(testComponent: expect(testComponent.threeGroup.get('threeCtrl')!.valid).toBe(true); let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[2].nativeElement; + .queryAll(By.directive(MatStepperNext))[2].nativeElement; nextButtonNativeEl.click(); fixture.detectChanges(); @@ -653,9 +654,9 @@ function assertOptionalStepValidity(testComponent: function assertCorrectStepIcon(fixture: ComponentFixture, isEditable: boolean, icon: String) { - let stepperComponent = fixture.debugElement.query(By.directive(MdStepper)).componentInstance; + let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance; let nextButtonNativeEl = fixture.debugElement - .queryAll(By.directive(MdStepperNext))[0].nativeElement; + .queryAll(By.directive(MatStepperNext))[0].nativeElement; expect(stepperComponent._getIndicatorType(0)).toBe('number'); stepperComponent._steps.toArray()[0].editable = isEditable; nextButtonNativeEl.click(); @@ -666,83 +667,83 @@ function assertCorrectStepIcon(fixture: ComponentFixture, @Component({ template: ` - - - Step 1 + + + Step 1 Content 1
    - - + +
    -     - - Step 2 + + + Step 2 Content 2
    - - + +
    -     - + + Content 3
    - - + +
    -     -     + + ` }) -class SimpleMdHorizontalStepperApp { +class SimpleMatHorizontalStepperApp { inputLabel = 'Step 3'; } @Component({ template: ` - - + +
    - Step one - - - + Step one + + +
    - - + +
    -     - + +
    - Step two - - - + Step two + + +
    - - + +
    -     - + +
    - Step two - - - + Step two + + +
    - - + +
    -     - + + Done - -     + + ` }) -class LinearMdHorizontalStepperApp { +class LinearMatHorizontalStepperApp { oneGroup: FormGroup; twoGroup: FormGroup; threeGroup: FormGroup; @@ -762,83 +763,83 @@ class LinearMdHorizontalStepperApp { @Component({ template: ` - - - Step 1 + + + Step 1 Content 1
    - - + +
    -     - - Step 2 + + + Step 2 Content 2
    - - + +
    -     - + + Content 3
    - - + +
    -     -     + + ` }) -class SimpleMdVerticalStepperApp { +class SimpleMatVerticalStepperApp { inputLabel = 'Step 3'; } @Component({ template: ` - - + +
    - Step one - - - + Step one + + +
    - - + +
    -     - + +
    - Step two - - - + Step two + + +
    - - + +
    -     - + +
    - Step two - - - + Step two + + +
    - - + +
    -     - + + Done - -     + + ` }) -class LinearMdVerticalStepperApp { +class LinearMatVerticalStepperApp { oneGroup: FormGroup; twoGroup: FormGroup; threeGroup: FormGroup; diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 1472de27a0fa..120e6dad7923 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -26,34 +26,35 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import { defaultErrorStateMatcher, ErrorOptions, - ErrorStateMatcher, MATERIAL_COMPATIBILITY_MODE, - MD_ERROR_GLOBAL_OPTIONS, + ErrorStateMatcher, + MAT_ERROR_GLOBAL_OPTIONS, } from '@angular/material/core'; -import {MdStepHeader} from './step-header'; -import {MdStepLabel} from './step-label'; +import {MatStepHeader} from './step-header'; +import {MatStepLabel} from './step-label'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdStep = CdkStep; -export const _MdStepper = CdkStepper; +export const _MatStep = CdkStep; +export const _MatStepper = CdkStepper; @Component({ moduleId: module.id, - selector: 'md-step, mat-step', + selector: 'mat-step', templateUrl: 'step.html', - providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}], + providers: [{provide: MAT_ERROR_GLOBAL_OPTIONS, useExisting: MatStep}], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdStep extends _MdStep implements ErrorOptions { - /** Content for step label given by or . */ - @ContentChild(MdStepLabel) stepLabel: MdStepLabel; +export class MatStep extends _MatStep implements ErrorOptions { + /** Content for step label given by . */ + @ContentChild(MatStepLabel) stepLabel: MatStepLabel; /** Original ErrorStateMatcher that checks the validity of form control. */ private _originalErrorStateMatcher: ErrorStateMatcher; - constructor(@Inject(forwardRef(() => MdStepper)) mdStepper: MdStepper, - @Optional() @SkipSelf() @Inject(MD_ERROR_GLOBAL_OPTIONS) errorOptions: ErrorOptions) { - super(mdStepper); + constructor(@Inject(forwardRef(() => MatStepper)) stepper: MatStepper, + @Optional() @SkipSelf() @Inject(MAT_ERROR_GLOBAL_OPTIONS) + errorOptions: ErrorOptions) { + super(stepper); if (errorOptions && errorOptions.errorStateMatcher) { this._originalErrorStateMatcher = errorOptions.errorStateMatcher; } else { @@ -75,19 +76,19 @@ export class MdStep extends _MdStep implements ErrorOptions { } @Directive({ - selector: '[mdStepper]' + selector: '[matStepper]' }) -export class MdStepper extends _MdStepper { +export class MatStepper extends _MatStepper { /** The list of step headers of the steps in the stepper. */ - @ViewChildren(MdStepHeader, {read: ElementRef}) _stepHeader: QueryList; + @ViewChildren(MatStepHeader, {read: ElementRef}) _stepHeader: QueryList; /** Steps that the stepper holds. */ - @ContentChildren(MdStep) _steps: QueryList; + @ContentChildren(MatStep) _steps: QueryList; } @Component({ moduleId: module.id, - selector: 'md-horizontal-stepper, mat-horizontal-stepper', + selector: 'mat-horizontal-stepper', templateUrl: 'stepper-horizontal.html', styleUrls: ['stepper.css'], inputs: ['selectedIndex'], @@ -104,16 +105,15 @@ export class MdStepper extends _MdStepper { animate('500ms cubic-bezier(0.35, 0, 0.25, 1)')) ]) ], - providers: [{provide: MdStepper, useExisting: MdHorizontalStepper}], + providers: [{provide: MatStepper, useExisting: MatHorizontalStepper}], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdHorizontalStepper extends MdStepper { } +export class MatHorizontalStepper extends MatStepper { } @Component({ moduleId: module.id, - selector: 'md-vertical-stepper, mat-vertical-stepper', + selector: 'mat-vertical-stepper', templateUrl: 'stepper-vertical.html', styleUrls: ['stepper.css'], inputs: ['selectedIndex'], @@ -129,9 +129,8 @@ export class MdHorizontalStepper extends MdStepper { } transition('* <=> current', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')) ]) ], - providers: [{provide: MdStepper, useExisting: MdVerticalStepper}], - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], + providers: [{provide: MatStepper, useExisting: MatVerticalStepper}], encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdVerticalStepper extends MdStepper { } +export class MatVerticalStepper extends MatStepper { } diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts index 089103fdfc5e..f7e7fc0407e7 100644 --- a/src/lib/table/cell.ts +++ b/src/lib/table/cell.ts @@ -16,59 +16,54 @@ import { } from '@angular/cdk/table'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdCellDef = CdkCellDef; -export const _MdHeaderCellDef = CdkHeaderCellDef; -export const _MdColumnDef = CdkColumnDef; -export const _MdHeaderCell = CdkHeaderCell; -export const _MdCell = CdkCell; +export const _MatCellDef = CdkCellDef; +export const _MatHeaderCellDef = CdkHeaderCellDef; +export const _MatColumnDef = CdkColumnDef; +export const _MatHeaderCell = CdkHeaderCell; +export const _MatCell = CdkCell; /** - * Cell definition for the md-table. + * Cell definition for the mat-table. * Captures the template of a column's data row cell as well as cell-specific properties. */ @Directive({ - selector: '[mdCellDef], [matCellDef]', - providers: [{provide: CdkCellDef, useExisting: MdCellDef}] + selector: '[matCellDef]', + providers: [{provide: CdkCellDef, useExisting: MatCellDef}] }) -export class MdCellDef extends _MdCellDef { } +export class MatCellDef extends _MatCellDef { } /** - * Header cell definition for the md-table. + * Header cell definition for the mat-table. * Captures the template of a column's header cell and as well as cell-specific properties. */ @Directive({ - selector: '[mdHeaderCellDef], [matHeaderCellDef]', - providers: [{provide: CdkHeaderCellDef, useExisting: MdHeaderCellDef}] + selector: '[matHeaderCellDef]', + providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}] }) -export class MdHeaderCellDef extends _MdHeaderCellDef { } +export class MatHeaderCellDef extends _MatHeaderCellDef { } /** - * Column definition for the md-table. + * Column definition for the mat-table. * Defines a set of cells available for a table column. */ @Directive({ - selector: '[mdColumnDef], [matColumnDef]', - providers: [{provide: CdkColumnDef, useExisting: MdColumnDef}], + selector: '[matColumnDef]', + providers: [{provide: CdkColumnDef, useExisting: MatColumnDef}], }) -export class MdColumnDef extends _MdColumnDef { +export class MatColumnDef extends _MatColumnDef { /** Unique name for this column. */ - @Input('mdColumnDef') name: string; - - // Properties with `mat-` prefix for noconflict mode. - @Input('matColumnDef') - get _matColumnDefName() { return this.name; } - set _matColumnDefName(name) { this.name = name; } + @Input('matColumnDef') name: string; } /** Header cell template container that adds the right classes and role. */ @Directive({ - selector: 'md-header-cell, mat-header-cell', + selector: 'mat-header-cell', host: { 'class': 'mat-header-cell', 'role': 'columnheader', }, }) -export class MdHeaderCell extends _MdHeaderCell { +export class MatHeaderCell extends _MatHeaderCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2) { @@ -79,13 +74,13 @@ export class MdHeaderCell extends _MdHeaderCell { /** Cell template container that adds the right classes and role. */ @Directive({ - selector: 'md-cell, mat-cell', + selector: 'mat-cell', host: { 'class': 'mat-cell', 'role': 'gridcell', }, }) -export class MdCell extends _MdCell { +export class MatCell extends _MatCell { constructor(columnDef: CdkColumnDef, elementRef: ElementRef, renderer: Renderer2) { diff --git a/src/lib/table/mat-exports.ts b/src/lib/table/mat-exports.ts deleted file mode 100644 index 9554e6695834..000000000000 --- a/src/lib/table/mat-exports.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdCell, MdCellDef, MdColumnDef, MdHeaderCell, MdHeaderCellDef} from './cell'; -import {MdHeaderRow, MdRow} from './row'; -import {MdTable} from './table'; -import {MdTableModule} from './table-module'; - - -export {MdCell as MatCell}; -export {MdCellDef as MatCellDef}; -export {MdColumnDef as MatColumnDef}; -export {MdHeaderCell as MatHeaderCell}; -export {MdHeaderCellDef as MatHeaderCellDef}; -export {MdHeaderRow as MatHeaderRow}; -export {MdRow as MatRow}; -export {MdTable as MatTable}; -export {MdTableModule as MatTableModule}; diff --git a/src/lib/table/public_api.ts b/src/lib/table/public_api.ts index 8626940dc2e6..50da1057bc1c 100644 --- a/src/lib/table/public_api.ts +++ b/src/lib/table/public_api.ts @@ -10,4 +10,4 @@ export * from './table-module'; export * from './cell'; export * from './table'; export * from './row'; -export * from './mat-exports'; + diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts index 20857c9ca12a..6fb1b2bbd7ed 100644 --- a/src/lib/table/row.ts +++ b/src/lib/table/row.ts @@ -16,53 +16,37 @@ import { } from '@angular/cdk/table'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdHeaderRowDef = CdkHeaderRowDef; -export const _MdCdkRowDef = CdkRowDef; -export const _MdHeaderRow = CdkHeaderRow; -export const _MdRow = CdkRow; +export const _MatHeaderRowDef = CdkHeaderRowDef; +export const _MatCdkRowDef = CdkRowDef; +export const _MatHeaderRow = CdkHeaderRow; +export const _MatRow = CdkRow; /** - * Header row definition for the md-table. + * Header row definition for the mat-table. * Captures the header row's template and other header properties such as the columns to display. */ -@Directive({ - selector: '[mdHeaderRowDef]', - providers: [{provide: CdkHeaderRowDef, useExisting: MdHeaderRowDef}], - inputs: ['columns: mdHeaderRowDef'], -}) -export class MdHeaderRowDef extends _MdHeaderRowDef { } - -/** Mat-compatible version of MdHeaderRowDef */ @Directive({ selector: '[matHeaderRowDef]', providers: [{provide: CdkHeaderRowDef, useExisting: MatHeaderRowDef}], inputs: ['columns: matHeaderRowDef'], }) -export class MatHeaderRowDef extends _MdHeaderRowDef { } +export class MatHeaderRowDef extends _MatHeaderRowDef { } /** - * Data row definition for the md-table. + * Data row definition for the mat-table. * Captures the header row's template and other row properties such as the columns to display. */ -@Directive({ - selector: '[mdRowDef]', - providers: [{provide: CdkRowDef, useExisting: MdRowDef}], - inputs: ['columns: mdRowDefColumns'], -}) -export class MdRowDef extends _MdCdkRowDef { } - -/** Mat-compatible version of MdRowDef */ @Directive({ selector: '[matRowDef]', providers: [{provide: CdkRowDef, useExisting: MatRowDef}], inputs: ['columns: matRowDefColumns'], }) -export class MatRowDef extends _MdCdkRowDef { } +export class MatRowDef extends _MatCdkRowDef { } /** Header template container that contains the cell outlet. Adds the right class and role. */ @Component({ moduleId: module.id, - selector: 'md-header-row, mat-header-row', + selector: 'mat-header-row', template: CDK_ROW_TEMPLATE, host: { 'class': 'mat-header-row', @@ -72,12 +56,12 @@ export class MatRowDef extends _MdCdkRowDef { } encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdHeaderRow extends _MdHeaderRow { } +export class MatHeaderRow extends _MatHeaderRow { } /** Data row template container that contains the cell outlet. Adds the right class and role. */ @Component({ moduleId: module.id, - selector: 'md-row, mat-row', + selector: 'mat-row', template: CDK_ROW_TEMPLATE, host: { 'class': 'mat-row', @@ -87,4 +71,4 @@ export class MdHeaderRow extends _MdHeaderRow { } encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, }) -export class MdRow extends _MdRow { } +export class MatRow extends _MatRow { } diff --git a/src/lib/table/table-module.ts b/src/lib/table/table-module.ts index 791d0317b60d..378e92aac47d 100644 --- a/src/lib/table/table-module.ts +++ b/src/lib/table/table-module.ts @@ -7,22 +7,20 @@ */ import {NgModule} from '@angular/core'; -import {MdTable} from './table'; +import {MatTable} from './table'; import {CdkTableModule} from '@angular/cdk/table'; -import {MdCell, MdHeaderCell, MdCellDef, MdHeaderCellDef, MdColumnDef} from './cell'; -import {MdHeaderRow, MdRow, MdHeaderRowDef, MdRowDef, MatHeaderRowDef, MatRowDef} from './row'; +import {MatCell, MatHeaderCell, MatCellDef, MatHeaderCellDef, MatColumnDef} from './cell'; +import {MatHeaderRow, MatRow, MatHeaderRowDef, MatRowDef} from './row'; import {CommonModule} from '@angular/common'; -import {MdCommonModule} from '@angular/material/core'; +import {MatCommonModule} from '@angular/material/core'; @NgModule({ - imports: [CdkTableModule, CommonModule, MdCommonModule], - exports: [MdTable, MdCellDef, MdHeaderCellDef, MdColumnDef, - MdHeaderRowDef, MdRowDef, - MdHeaderCell, MdCell, MdHeaderRow, MdRow, + imports: [CdkTableModule, CommonModule, MatCommonModule], + exports: [MatTable, MatCellDef, MatHeaderCellDef, MatColumnDef, + MatHeaderCell, MatCell, MatHeaderRow, MatRow, MatHeaderRowDef, MatRowDef], - declarations: [MdTable, MdCellDef, MdHeaderCellDef, MdColumnDef, - MdHeaderRowDef, MdRowDef, - MdHeaderCell, MdCell, MdHeaderRow, MdRow, + declarations: [MatTable, MatCellDef, MatHeaderCellDef, MatColumnDef, + MatHeaderCell, MatCell, MatHeaderRow, MatRow, MatHeaderRowDef, MatRowDef], }) -export class MdTableModule {} +export class MatTableModule {} diff --git a/src/lib/table/table.md b/src/lib/table/table.md index 8b4a89d4de27..8fbb3601ee11 100644 --- a/src/lib/table/table.md +++ b/src/lib/table/table.md @@ -1,9 +1,9 @@ -The `md-table` provides a Material Design styled data-table that can be used to display rows of +The `mat-table` provides a Material Design styled data-table that can be used to display rows of data. This table builds on the foundation of the CDK data-table and uses a similar interface for its data source input and template, except that its element and attribute selectors will be prefixed -with `md-` instead of `cdk-`. +with `mat-` instead of `cdk-`. For more information on the interface and how it works, see the [guide covering the CDK data-table](https://material.angular.io/guide/cdk-table). @@ -12,7 +12,7 @@ For more information on the interface and how it works, see the ### Features -The `` itself only deals with the rendering of a table structure (rows and cells). +The `` itself only deals with the rendering of a table structure (rows and cells). Additional features can be built on top of the table by adding behavior inside cell templates (e.g., sort headers) or next to the table (e.g. a paginator). Interactions that affect the rendered data (such as sorting and pagination) should be propagated through the table's data source. @@ -20,14 +20,14 @@ rendered data (such as sorting and pagination) should be propagated through the #### Pagination -The `` adds a pagination UI that can be used in conjunction with the ``. The +The `` adds a pagination UI that can be used in conjunction with the ``. The paginator emits events that can be used to trigger an update via the table's data source. #### Sorting -Use the `mdSort` directive and `` adds a sorting UI the table's column headers. The +Use the `matSort` directive and `` adds a sorting UI the table's column headers. The sort headers emit events that can be used to trigger an update via the table's data source. @@ -52,5 +52,5 @@ Tables without text or labels should be given a meaningful label via `aria-label Table's default role is `grid`, and it can be changed to `treegrid` through `role` attribute. -`md-table` does not manage any focus/keyboard interaction on its own. Users can add desired +`mat-table` does not manage any focus/keyboard interaction on its own. Users can add desired focus/keyboard interactions in their application. diff --git a/src/lib/table/table.spec.ts b/src/lib/table/table.spec.ts index 00ec04b84b7b..64b8ff5f1c65 100644 --- a/src/lib/table/table.spec.ts +++ b/src/lib/table/table.spec.ts @@ -3,21 +3,21 @@ import {Component, ViewChild} from '@angular/core'; import {DataSource} from '@angular/cdk/collections'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; -import {MdTableModule} from './index'; -import {MdTable} from './table'; +import {MatTableModule} from './index'; +import {MatTable} from './table'; -describe('MdTable', () => { - let fixture: ComponentFixture; +describe('MatTable', () => { + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdTableModule], - declarations: [SimpleMdTableApp], + imports: [MatTableModule], + declarations: [SimpleMatTableApp], }).compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(SimpleMdTableApp); + fixture = TestBed.createComponent(SimpleMatTableApp); fixture.detectChanges(); fixture.detectChanges(); }); @@ -85,31 +85,31 @@ class FakeDataSource extends DataSource { @Component({ template: ` - - - Column A - {{row.a}} + + + Column A + {{row.a}} - - Column B - {{row.b}} + + Column B + {{row.b}} - - Column C - {{row.c}} + + Column C + {{row.c}} - - - + + + ` }) -class SimpleMdTableApp { +class SimpleMatTableApp { dataSource: FakeDataSource | null = new FakeDataSource(); columnsToRender = ['column_a', 'column_b', 'column_c']; - @ViewChild(MdTable) table: MdTable; + @ViewChild(MatTable) table: MatTable; } diff --git a/src/lib/table/table.ts b/src/lib/table/table.ts index d0ecc92bede3..97f936f1046c 100644 --- a/src/lib/table/table.ts +++ b/src/lib/table/table.ts @@ -10,14 +10,14 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co import {CDK_TABLE_TEMPLATE, CdkTable} from '@angular/cdk/table'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdTable = CdkTable; +export const _MatTable = CdkTable; /** * Wrapper for the CdkTable with Material design styles. */ @Component({ moduleId: module.id, - selector: 'md-table, mat-table', + selector: 'mat-table', template: CDK_TABLE_TEMPLATE, styleUrls: ['table.css'], host: { @@ -27,4 +27,4 @@ export const _MdTable = CdkTable; preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MdTable extends _MdTable { } +export class MatTable extends _MatTable { } diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts index b5ec5d72ea97..363fe443f1ac 100644 --- a/src/lib/tabs/ink-bar.ts +++ b/src/lib/tabs/ink-bar.ts @@ -14,12 +14,12 @@ import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core'; * @docs-private */ @Directive({ - selector: 'md-ink-bar, mat-ink-bar', + selector: 'mat-ink-bar', host: { 'class': 'mat-ink-bar', }, }) -export class MdInkBar { +export class MatInkBar { constructor( private _renderer: Renderer2, private _elementRef: ElementRef, diff --git a/src/lib/tabs/mat-exports.ts b/src/lib/tabs/mat-exports.ts deleted file mode 100644 index b859f73cff3e..000000000000 --- a/src/lib/tabs/mat-exports.ts +++ /dev/null @@ -1,34 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdInkBar} from './ink-bar'; -import {MdTab} from './tab'; -import {MdTabBody, MdTabBodyOriginState, MdTabBodyPositionState} from './tab-body'; -import {MdTabChangeEvent, MdTabGroup, MdTabGroupBase, MdTabHeaderPosition} from './tab-group'; -import {MdTabHeader} from './tab-header'; -import {MdTabLabel} from './tab-label'; -import {MdTabLabelWrapper} from './tab-label-wrapper'; -import {MdTabLink, MdTabNav} from './tab-nav-bar/index'; -import {MdTabsModule} from './tabs-module'; - - -export {MdInkBar as MatInkBar}; -export {MdTab as MatTab}; -export {MdTabBody as MatTabBody}; -export {MdTabBodyOriginState as MatTabBodyOriginState}; -export {MdTabBodyPositionState as MatTabBodyPositionState}; -export {MdTabChangeEvent as MatTabChangeEvent}; -export {MdTabGroup as MatTabGroup}; -export {MdTabGroupBase as MatTabGroupBase}; -export {MdTabHeader as MatTabHeader}; -export {MdTabHeaderPosition as MatTabHeaderPosition}; -export {MdTabLabel as MatTabLabel}; -export {MdTabLabelWrapper as MatTabLabelWrapper}; -export {MdTabLink as MatTabLink}; -export {MdTabNav as MatTabNav}; -export {MdTabsModule as MatTabsModule}; diff --git a/src/lib/tabs/public_api.ts b/src/lib/tabs/public_api.ts index 75d1ff5c1acc..eaa78fceb60b 100644 --- a/src/lib/tabs/public_api.ts +++ b/src/lib/tabs/public_api.ts @@ -8,12 +8,12 @@ export * from './tabs-module'; 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'; -export {MdTabNav, MdTabLink} from './tab-nav-bar/index'; +export {MatInkBar} from './ink-bar'; +export {MatTabBody, MatTabBodyOriginState, MatTabBodyPositionState} from './tab-body'; +export {MatTabHeader, ScrollDirection} from './tab-header'; +export {MatTabLabelWrapper} from './tab-label-wrapper'; +export {MatTab} from './tab'; +export {MatTabLabel} from './tab-label'; +export {MatTabNav, MatTabLink} from './tab-nav-bar/index'; + -export * from './mat-exports'; diff --git a/src/lib/tabs/tab-body.spec.ts b/src/lib/tabs/tab-body.spec.ts index cead88350898..83cf647816a4 100644 --- a/src/lib/tabs/tab-body.spec.ts +++ b/src/lib/tabs/tab-body.spec.ts @@ -3,20 +3,20 @@ import {PortalModule, TemplatePortal} from '@angular/cdk/portal'; import {CommonModule} from '@angular/common'; import {Component, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core'; import {async, ComponentFixture, fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing'; -import {MdRippleModule} from '@angular/material/core'; +import {MatRippleModule} from '@angular/material/core'; import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -import {MdTabBody} from './tab-body'; +import {MatTabBody} from './tab-body'; -describe('MdTabBody', () => { +describe('MatTabBody', () => { let dir: Direction = 'ltr'; beforeEach(async(() => { dir = 'ltr'; TestBed.configureTestingModule({ - imports: [CommonModule, PortalModule, MdRippleModule, NoopAnimationsModule], + imports: [CommonModule, PortalModule, MatRippleModule, NoopAnimationsModule], declarations: [ - MdTabBody, + MatTabBody, SimpleTabBodyApp, ], providers: [ @@ -40,7 +40,7 @@ describe('MdTabBody', () => { fixture.componentInstance.position = 0; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('center'); + expect(fixture.componentInstance.tabBody._position).toBe('center'); }); it('should be left-origin-center position with negative or zero origin', () => { @@ -48,7 +48,7 @@ describe('MdTabBody', () => { fixture.componentInstance.origin = 0; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('left-origin-center'); + expect(fixture.componentInstance.tabBody._position).toBe('left-origin-center'); }); it('should be right-origin-center position with positive nonzero origin', () => { @@ -56,7 +56,7 @@ describe('MdTabBody', () => { fixture.componentInstance.origin = 1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('right-origin-center'); + expect(fixture.componentInstance.tabBody._position).toBe('right-origin-center'); }); }); @@ -71,7 +71,7 @@ describe('MdTabBody', () => { fixture.componentInstance.origin = 0; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('right-origin-center'); + expect(fixture.componentInstance.tabBody._position).toBe('right-origin-center'); }); it('should be left-origin-center position with positive nonzero origin', () => { @@ -79,7 +79,7 @@ describe('MdTabBody', () => { fixture.componentInstance.origin = 1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('left-origin-center'); + expect(fixture.componentInstance.tabBody._position).toBe('left-origin-center'); }); }); }); @@ -97,21 +97,21 @@ describe('MdTabBody', () => { fixture.componentInstance.position = -1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('left'); + expect(fixture.componentInstance.tabBody._position).toBe('left'); }); it('to be center position with zero position', () => { fixture.componentInstance.position = 0; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('center'); + expect(fixture.componentInstance.tabBody._position).toBe('center'); }); it('to be left position with positive position', () => { fixture.componentInstance.position = 1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('right'); + expect(fixture.componentInstance.tabBody._position).toBe('right'); }); }); @@ -128,21 +128,21 @@ describe('MdTabBody', () => { fixture.componentInstance.position = -1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('right'); + expect(fixture.componentInstance.tabBody._position).toBe('right'); }); it('to be center position with zero position', () => { fixture.componentInstance.position = 0; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('center'); + expect(fixture.componentInstance.tabBody._position).toBe('center'); }); it('to be left position with positive position', () => { fixture.componentInstance.position = 1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._position).toBe('left'); + expect(fixture.componentInstance.tabBody._position).toBe('left'); }); }); @@ -156,16 +156,16 @@ describe('MdTabBody', () => { it('should attach the content when centered and detach when not', fakeAsync(() => { fixture.componentInstance.position = 1; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false); + expect(fixture.componentInstance.tabBody._portalHost.hasAttached()).toBe(false); fixture.componentInstance.position = 0; fixture.detectChanges(); - expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(true); + expect(fixture.componentInstance.tabBody._portalHost.hasAttached()).toBe(true); fixture.componentInstance.position = 1; fixture.detectChanges(); flushMicrotasks(); // Finish animation and let it detach in animation done handler - expect(fixture.componentInstance.mdTabBody._portalHost.hasAttached()).toBe(false); + expect(fixture.componentInstance.tabBody._portalHost.hasAttached()).toBe(false); })); }); @@ -175,7 +175,7 @@ describe('MdTabBody', () => { @Component({ template: ` Tab Body Content - + ` }) class SimpleTabBodyApp { @@ -183,7 +183,7 @@ class SimpleTabBodyApp { position: number; origin: number; - @ViewChild(MdTabBody) mdTabBody: MdTabBody; + @ViewChild(MatTabBody) tabBody: MatTabBody; @ViewChild(TemplateRef) template: TemplateRef; constructor(private _viewContainerRef: ViewContainerRef) { } diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 7af7a6e8593f..0d738582d7a1 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -41,7 +41,7 @@ import {Directionality, Direction} from '@angular/cdk/bidi'; * then left-origin-center or right-origin-center can be used, which will use left or right as its * psuedo-prior state. */ -export type MdTabBodyPositionState = +export type MatTabBodyPositionState = 'left' | 'center' | 'right' | 'left-origin-center' | 'right-origin-center'; /** @@ -50,7 +50,7 @@ export type MdTabBodyPositionState = * set to 1, and a new tab is created and selected at index 2, then the tab body would have an * origin of right because its index was greater than the prior selected index. */ -export type MdTabBodyOriginState = 'left' | 'right'; +export type MatTabBodyOriginState = 'left' | 'right'; /** * Wrapper for the contents of a tab. @@ -58,7 +58,7 @@ export type MdTabBodyOriginState = 'left' | 'right'; */ @Component({ moduleId: module.id, - selector: 'md-tab-body, mat-tab-body', + selector: 'mat-tab-body', templateUrl: 'tab-body.html', styleUrls: ['tab-body.css'], encapsulation: ViewEncapsulation.None, @@ -88,7 +88,7 @@ export type MdTabBodyOriginState = 'left' | 'right'; ]) ] }) -export class MdTabBody implements OnInit, AfterViewChecked { +export class MatTabBody implements OnInit, AfterViewChecked { /** The portal host inside of this container into which the tab body content will be loaded. */ @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective; @@ -102,7 +102,7 @@ export class MdTabBody implements OnInit, AfterViewChecked { @Input('content') _content: TemplatePortal; /** The shifted index position of the tab body, where zero represents the active center tab. */ - _position: MdTabBodyPositionState; + _position: MatTabBodyPositionState; @Input('position') set position(position: number) { if (position < 0) { this._position = this._getLayoutDirection() == 'ltr' ? 'left' : 'right'; @@ -114,7 +114,7 @@ export class MdTabBody implements OnInit, AfterViewChecked { } /** The origin position from which this tab should appear when it is centered into view. */ - _origin: MdTabBodyOriginState; + _origin: MatTabBodyOriginState; /** The origin position from which this tab should appear when it is centered into view. */ @Input('origin') set origin(origin: number) { @@ -175,7 +175,7 @@ export class MdTabBody implements OnInit, AfterViewChecked { } /** Whether the provided position state is considered center, regardless of origin. */ - private _isCenterPosition(position: MdTabBodyPositionState|string): boolean { + private _isCenterPosition(position: MatTabBodyPositionState|string): boolean { return position == 'center' || position == 'left-origin-center' || position == 'right-origin-center'; diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss index 7fdd9a0d57a8..cbd42d7388f0 100644 --- a/src/lib/tabs/tab-group.scss +++ b/src/lib/tabs/tab-group.scss @@ -29,7 +29,7 @@ } } -.mat-tab-group[md-stretch-tabs] .mat-tab-label, +.mat-tab-group[mat-stretch-tabs] .mat-tab-label, .mat-tab-group[mat-stretch-tabs] .mat-tab-label { flex-basis: 0; flex-grow: 1; diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index 651f465319e4..f6c4668c0fb5 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -5,13 +5,13 @@ import {By} from '@angular/platform-browser'; import {ViewportRuler} from '@angular/cdk/scrolling'; import {dispatchFakeEvent, FakeViewportRuler} from '@angular/cdk/testing'; import {Observable} from 'rxjs/Observable'; -import {MdTab, MdTabGroup, MdTabHeaderPosition, MdTabsModule} from './index'; +import {MatTab, MatTabGroup, MatTabHeaderPosition, MatTabsModule} from './index'; -describe('MdTabGroup', () => { +describe('MatTabGroup', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdTabsModule, NoopAnimationsModule], + imports: [MatTabsModule, NoopAnimationsModule], declarations: [ SimpleTabsTestApp, SimpleDynamicTabsTestApp, @@ -91,7 +91,7 @@ describe('MdTabGroup', () => { it('should change tabs based on selectedIndex', fakeAsync(() => { let component = fixture.componentInstance; - let tabComponent = fixture.debugElement.query(By.css('md-tab-group')).componentInstance; + let tabComponent = fixture.debugElement.query(By.css('mat-tab-group')).componentInstance; spyOn(component, 'handleSelection').and.callThrough(); @@ -108,9 +108,9 @@ describe('MdTabGroup', () => { it('should update tab positions when selected index is changed', () => { fixture.detectChanges(); - const component: MdTabGroup = - fixture.debugElement.query(By.css('md-tab-group')).componentInstance; - const tabs: MdTab[] = component._tabs.toArray(); + const component: MatTabGroup = + fixture.debugElement.query(By.css('mat-tab-group')).componentInstance; + const tabs: MatTab[] = component._tabs.toArray(); expect(tabs[0].position).toBeLessThan(0); expect(tabs[1].position).toBe(0); @@ -133,8 +133,8 @@ describe('MdTabGroup', () => { it('should clamp the selected index to the size of the number of tabs', () => { fixture.detectChanges(); - const component: MdTabGroup = - fixture.debugElement.query(By.css('md-tab-group')).componentInstance; + const component: MatTabGroup = + fixture.debugElement.query(By.css('mat-tab-group')).componentInstance; // Set the index to be negative, expect first tab selected fixture.componentInstance.selectedIndex = -1; @@ -246,10 +246,10 @@ describe('MdTabGroup', () => { it('should be able to add a new tab, select it, and have correct origin position', () => { fixture.detectChanges(); - const component: MdTabGroup = - fixture.debugElement.query(By.css('md-tab-group')).componentInstance; + const component: MatTabGroup = + fixture.debugElement.query(By.css('mat-tab-group')).componentInstance; - let tabs: MdTab[] = component._tabs.toArray(); + let tabs: MatTab[] = component._tabs.toArray(); expect(tabs[0].origin).toBe(null); expect(tabs[1].origin).toBe(0); expect(tabs[2].origin).toBe(null); @@ -274,8 +274,8 @@ describe('MdTabGroup', () => { it('should update selected index if the last tab removed while selected', () => { fixture.detectChanges(); - const component: MdTabGroup = - fixture.debugElement.query(By.css('md-tab-group')).componentInstance; + const component: MatTabGroup = + fixture.debugElement.query(By.css('mat-tab-group')).componentInstance; const numberOfTabs = component._tabs.length; fixture.componentInstance.selectedIndex = numberOfTabs - 1; @@ -312,14 +312,14 @@ describe('MdTabGroup', () => { describe('with simple api', () => { let fixture: ComponentFixture; - let tabGroup: MdTabGroup; + let tabGroup: MatTabGroup; beforeEach(() => { fixture = TestBed.createComponent(TabGroupWithSimpleApi); fixture.detectChanges(); tabGroup = - fixture.debugElement.query(By.directive(MdTabGroup)).componentInstance as MdTabGroup; + fixture.debugElement.query(By.directive(MatTabGroup)).componentInstance as MatTabGroup; }); it('should support a tab-group with the simple api', () => { @@ -345,7 +345,7 @@ describe('MdTabGroup', () => { }); it('should support setting the header position', () => { - let tabGroupNode = fixture.debugElement.query(By.css('md-tab-group')).nativeElement; + let tabGroupNode = fixture.debugElement.query(By.css('mat-tab-group')).nativeElement; expect(tabGroupNode.classList).not.toContain('mat-tab-group-inverted-header'); @@ -363,8 +363,8 @@ describe('MdTabGroup', () => { function checkSelectedIndex(expectedIndex: number, fixture: ComponentFixture) { fixture.detectChanges(); - let tabComponent: MdTabGroup = fixture.debugElement - .query(By.css('md-tab-group')).componentInstance; + let tabComponent: MatTabGroup = fixture.debugElement + .query(By.css('mat-tab-group')).componentInstance; expect(tabComponent.selectedIndex).toBe(expectedIndex); let tabLabelElement = fixture.debugElement @@ -386,10 +386,10 @@ describe('MdTabGroup', () => { }); -describe('nested MdTabGroup with enabled animations', () => { +describe('nested MatTabGroup with enabled animations', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdTabsModule, BrowserAnimationsModule], + imports: [MatTabsModule, BrowserAnimationsModule], declarations: [NestedTabs] }); @@ -407,34 +407,34 @@ describe('nested MdTabGroup with enabled animations', () => { @Component({ template: ` - - - Tab One + + Tab One Tab one content - - - Tab Two + + + Tab Two Tab two content - - - Tab Three + + + Tab Three Tab three content - - + + ` }) class SimpleTabsTestApp { - @ViewChildren(MdTab) tabs: QueryList; + @ViewChildren(MatTab) tabs: QueryList; selectedIndex: number = 1; focusEvent: any; selectEvent: any; disableRipple: boolean = false; - headerPosition: MdTabHeaderPosition = 'above'; + headerPosition: MatTabHeaderPosition = 'above'; handleFocus(event: any) { this.focusEvent = event; } @@ -445,15 +445,15 @@ class SimpleTabsTestApp { @Component({ template: ` - - - {{tab.label}} + + {{tab.label}} {{tab.content}} - - + + ` }) class SimpleDynamicTabsTestApp { @@ -475,11 +475,11 @@ class SimpleDynamicTabsTestApp { @Component({ template: ` - - + + {{tab.content}} - - + + ` }) class BindedTabsTestApp { @@ -501,35 +501,35 @@ class BindedTabsTestApp { @Component({ selector: 'test-app', template: ` - - - Tab One + + + Tab One Tab one content - - - Tab Two + + + Tab Two Tab two content - - - Tab Three + + + Tab Three Tab three content - - + + `, }) class DisabledTabsTestApp { - @ViewChildren(MdTab) tabs: QueryList; + @ViewChildren(MatTab) tabs: QueryList; isDisabled = false; } @Component({ template: ` - - - {{ tab.label }} + + + {{ tab.label }} {{ tab.content }} - - + + ` }) class AsyncTabsTestApp { @@ -551,12 +551,12 @@ class AsyncTabsTestApp { @Component({ template: ` - - Pizza, fries - Broccoli, spinach - {{otherContent}} -

    Peanuts

     -     + + Pizza, fries + Broccoli, spinach + {{otherContent}} +

    Peanuts

     +     ` }) class TabGroupWithSimpleApi { @@ -569,16 +569,16 @@ class TabGroupWithSimpleApi { @Component({ selector: 'nested-tabs', template: ` - - Tab one content - + + Tab one content + Tab two content - - Inner content one - Inner content two - - - + + Inner content one + Inner content two + + + `, }) class NestedTabs {} diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index a80bc765b5b6..0d232cc2b3ed 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -7,52 +7,54 @@ */ import { - ViewChild, + AfterContentChecked, + AfterContentInit, + AfterViewChecked, + ChangeDetectionStrategy, + ChangeDetectorRef, Component, + ContentChildren, + ElementRef, + EventEmitter, Input, + OnDestroy, Output, - EventEmitter, QueryList, - ContentChildren, - ElementRef, Renderer2, - ChangeDetectionStrategy, - ChangeDetectorRef, - AfterViewChecked, - AfterContentInit, - AfterContentChecked, - OnDestroy, + ViewChild, ViewEncapsulation, } from '@angular/core'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {Subscription} from 'rxjs/Subscription'; -import {MdTab} from './tab'; +import {MatTab} from './tab'; import {merge} from 'rxjs/observable/merge'; import { - CanDisableRipple, MATERIAL_COMPATIBILITY_MODE, - mixinDisableRipple + CanColor, + CanDisableRipple, + mixinColor, + mixinDisableRipple, + ThemePalette } from '@angular/material/core'; -import {CanColor, mixinColor, ThemePalette} from '@angular/material/core'; /** Used to generate unique ID's for each tab component */ let nextId = 0; /** A simple change event emitted on focus or selection changes. */ -export class MdTabChangeEvent { +export class MatTabChangeEvent { index: number; - tab: MdTab; + tab: MatTab; } /** Possible positions for the tab header. */ -export type MdTabHeaderPosition = 'above' | 'below'; +export type MatTabHeaderPosition = 'above' | 'below'; -// Boilerplate for applying mixins to MdTabGroup. +// Boilerplate for applying mixins to MatTabGroup. /** @docs-private */ -export class MdTabGroupBase { +export class MatTabGroupBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdTabGroupMixinBase = mixinColor(mixinDisableRipple(MdTabGroupBase), 'primary'); +export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBase), 'primary'); /** * Material design tab-group component. Supports basic tab pairs (label + content) and includes @@ -61,7 +63,7 @@ export const _MdTabGroupMixinBase = mixinColor(mixinDisableRipple(MdTabGroupBase */ @Component({ moduleId: module.id, - selector: 'md-tab-group, mat-tab-group', + selector: 'mat-tab-group', templateUrl: 'tab-group.html', styleUrls: ['tab-group.css'], encapsulation: ViewEncapsulation.None, @@ -73,12 +75,11 @@ export const _MdTabGroupMixinBase = mixinColor(mixinDisableRipple(MdTabGroupBase '[class.mat-tab-group-dynamic-height]': 'dynamicHeight', '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"', }, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit, +export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentInit, AfterContentChecked, AfterViewChecked, OnDestroy, CanColor, CanDisableRipple { - @ContentChildren(MdTab) _tabs: QueryList; + @ContentChildren(MatTab) _tabs: QueryList; @ViewChild('tabBodyWrapper') _tabBodyWrapper: ElementRef; @@ -104,7 +105,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit private _dynamicHeight: boolean = false; /** @deprecated */ - @Input('md-dynamic-height') + @Input('mat-dynamic-height') get _dynamicHeightDeprecated(): boolean { return this._dynamicHeight; } set _dynamicHeightDeprecated(value: boolean) { this._dynamicHeight = value; } @@ -115,7 +116,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit private _selectedIndex: number | null = null; /** Position of the tab header. */ - @Input() headerPosition: MdTabHeaderPosition = 'above'; + @Input() headerPosition: MatTabHeaderPosition = 'above'; /** Background color of the tab group. */ @Input() @@ -137,10 +138,11 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit @Output() selectedIndexChange: EventEmitter = new EventEmitter(); /** Event emitted when focus has changed within a tab group. */ - @Output() focusChange: EventEmitter = new EventEmitter(); + @Output() focusChange: EventEmitter = new EventEmitter(); /** Event emitted when the tab selection has changed. */ - @Output() selectChange: EventEmitter = new EventEmitter(true); + @Output() selectChange: EventEmitter = + new EventEmitter(true); private _groupId: number; @@ -175,7 +177,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit } // Setup the position for each tab and optionally setup an origin on the next selected tab. - this._tabs.forEach((tab: MdTab, index: number) => { + this._tabs.forEach((tab: MatTab, index: number) => { tab.position = index - indexToSelect; tab.isActive = index === indexToSelect; @@ -220,8 +222,8 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit this.focusChange.emit(this._createChangeEvent(index)); } - private _createChangeEvent(index: number): MdTabChangeEvent { - const event = new MdTabChangeEvent; + private _createChangeEvent(index: number): MatTabChangeEvent { + const event = new MatTabChangeEvent; event.index = index; if (this._tabs && this._tabs.length) { event.tab = this._tabs.toArray()[index]; @@ -231,7 +233,7 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit /** * Subscribes to changes in the tab labels. This is needed, because the @Input for the label is - * on the MdTab component, whereas the data binding is inside the MdTabGroup. In order for the + * on the MatTab component, whereas the data binding is inside the MatTabGroup. In order for the * binding to be updated, we need to subscribe to changes in it and trigger change detection * manually. */ @@ -249,12 +251,12 @@ export class MdTabGroup extends _MdTabGroupMixinBase implements AfterContentInit /** Returns a unique id for each tab label element */ _getTabLabelId(i: number): string { - return `md-tab-label-${this._groupId}-${i}`; + return `mat-tab-label-${this._groupId}-${i}`; } /** Returns a unique id for each tab content element */ _getTabContentId(i: number): string { - return `md-tab-content-${this._groupId}-${i}`; + return `mat-tab-content-${this._groupId}-${i}`; } /** diff --git a/src/lib/tabs/tab-header.spec.ts b/src/lib/tabs/tab-header.spec.ts index d3a2aceea4e2..19e6f2d67199 100644 --- a/src/lib/tabs/tab-header.spec.ts +++ b/src/lib/tabs/tab-header.spec.ts @@ -9,15 +9,15 @@ import {PortalModule} from '@angular/cdk/portal'; import {ViewportRuler} from '@angular/cdk/scrolling'; import {Direction, Directionality} from '@angular/cdk/bidi'; import {dispatchFakeEvent, dispatchKeyboardEvent, FakeViewportRuler} from '@angular/cdk/testing'; -import {MdTabHeader} from './tab-header'; -import {MdRippleModule} from '@angular/material/core'; -import {MdInkBar} from './ink-bar'; -import {MdTabLabelWrapper} from './tab-label-wrapper'; +import {MatTabHeader} from './tab-header'; +import {MatRippleModule} from '@angular/material/core'; +import {MatInkBar} from './ink-bar'; +import {MatTabLabelWrapper} from './tab-label-wrapper'; import {Subject} from 'rxjs/Subject'; -describe('MdTabHeader', () => { +describe('MatTabHeader', () => { let dir: Direction = 'ltr'; let change = new Subject(); let fixture: ComponentFixture; @@ -26,11 +26,11 @@ describe('MdTabHeader', () => { beforeEach(async(() => { dir = 'ltr'; TestBed.configureTestingModule({ - imports: [CommonModule, PortalModule, MdRippleModule], + imports: [CommonModule, PortalModule, MatRippleModule], declarations: [ - MdTabHeader, - MdInkBar, - MdTabLabelWrapper, + MatTabHeader, + MatInkBar, + MatTabLabelWrapper, SimpleTabHeaderApp, ], providers: [ @@ -52,71 +52,71 @@ describe('MdTabHeader', () => { it('should initialize to the selected index', () => { fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(appComponent.selectedIndex); + expect(appComponent.tabHeader.focusIndex).toBe(appComponent.selectedIndex); }); it('should send focus change event', () => { - appComponent.mdTabHeader.focusIndex = 2; + appComponent.tabHeader.focusIndex = 2; fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(2); + expect(appComponent.tabHeader.focusIndex).toBe(2); }); it('should not set focus a disabled tab', () => { - appComponent.mdTabHeader.focusIndex = 0; + appComponent.tabHeader.focusIndex = 0; fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(0); + expect(appComponent.tabHeader.focusIndex).toBe(0); // Set focus on the disabled tab, but focus should remain 0 - appComponent.mdTabHeader.focusIndex = appComponent.disabledTabIndex; + appComponent.tabHeader.focusIndex = appComponent.disabledTabIndex; fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(0); + expect(appComponent.tabHeader.focusIndex).toBe(0); }); it('should move focus right and skip disabled tabs', () => { - appComponent.mdTabHeader.focusIndex = 0; + appComponent.tabHeader.focusIndex = 0; fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(0); + expect(appComponent.tabHeader.focusIndex).toBe(0); // Move focus right, verify that the disabled tab is 1 and should be skipped expect(appComponent.disabledTabIndex).toBe(1); - appComponent.mdTabHeader._focusNextTab(); + appComponent.tabHeader._focusNextTab(); fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(2); + expect(appComponent.tabHeader.focusIndex).toBe(2); // Move focus right to index 3 - appComponent.mdTabHeader._focusNextTab(); + appComponent.tabHeader._focusNextTab(); fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(3); + expect(appComponent.tabHeader.focusIndex).toBe(3); }); it('should move focus left and skip disabled tabs', () => { - appComponent.mdTabHeader.focusIndex = 3; + appComponent.tabHeader.focusIndex = 3; fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(3); + expect(appComponent.tabHeader.focusIndex).toBe(3); // Move focus left to index 3 - appComponent.mdTabHeader._focusPreviousTab(); + appComponent.tabHeader._focusPreviousTab(); fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(2); + expect(appComponent.tabHeader.focusIndex).toBe(2); // Move focus left, verify that the disabled tab is 1 and should be skipped expect(appComponent.disabledTabIndex).toBe(1); - appComponent.mdTabHeader._focusPreviousTab(); + appComponent.tabHeader._focusPreviousTab(); fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(0); + expect(appComponent.tabHeader.focusIndex).toBe(0); }); it('should support key down events to move and select focus', () => { - appComponent.mdTabHeader.focusIndex = 0; + appComponent.tabHeader.focusIndex = 0; fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(0); + expect(appComponent.tabHeader.focusIndex).toBe(0); - let tabListContainer = appComponent.mdTabHeader._tabListContainer.nativeElement; + let tabListContainer = appComponent.tabHeader._tabListContainer.nativeElement; // Move focus right to 2 dispatchKeyboardEvent(tabListContainer, 'keydown', RIGHT_ARROW); fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(2); + expect(appComponent.tabHeader.focusIndex).toBe(2); // Select the focused index 2 expect(appComponent.selectedIndex).toBe(0); @@ -128,7 +128,7 @@ describe('MdTabHeader', () => { // Move focus right to 0 dispatchKeyboardEvent(tabListContainer, 'keydown', LEFT_ARROW); fixture.detectChanges(); - expect(appComponent.mdTabHeader.focusIndex).toBe(0); + expect(appComponent.tabHeader.focusIndex).toBe(0); // Select the focused 0 using space. expect(appComponent.selectedIndex).toBe(2); @@ -151,37 +151,37 @@ describe('MdTabHeader', () => { it('should show width when tab list width exceeds container', () => { fixture.detectChanges(); - expect(appComponent.mdTabHeader._showPaginationControls).toBe(false); + expect(appComponent.tabHeader._showPaginationControls).toBe(false); // Add enough tabs that it will obviously exceed the width appComponent.addTabsForScrolling(); fixture.detectChanges(); - expect(appComponent.mdTabHeader._showPaginationControls).toBe(true); + expect(appComponent.tabHeader._showPaginationControls).toBe(true); }); it('should scroll to show the focused tab label', () => { appComponent.addTabsForScrolling(); fixture.detectChanges(); - expect(appComponent.mdTabHeader.scrollDistance).toBe(0); + expect(appComponent.tabHeader.scrollDistance).toBe(0); // Focus on the last tab, expect this to be the maximum scroll distance. - appComponent.mdTabHeader.focusIndex = appComponent.tabs.length - 1; + appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1; fixture.detectChanges(); - expect(appComponent.mdTabHeader.scrollDistance) - .toBe(appComponent.mdTabHeader._getMaxScrollDistance()); + expect(appComponent.tabHeader.scrollDistance) + .toBe(appComponent.tabHeader._getMaxScrollDistance()); // Focus on the first tab, expect this to be the maximum scroll distance. - appComponent.mdTabHeader.focusIndex = 0; + appComponent.tabHeader.focusIndex = 0; fixture.detectChanges(); - expect(appComponent.mdTabHeader.scrollDistance).toBe(0); + expect(appComponent.tabHeader.scrollDistance).toBe(0); }); it('should show ripples for pagination buttons', () => { appComponent.addTabsForScrolling(); fixture.detectChanges(); - expect(appComponent.mdTabHeader._showPaginationControls).toBe(true); + expect(appComponent.tabHeader._showPaginationControls).toBe(true); const buttonAfter = fixture.debugElement.query(By.css('.mat-tab-header-pagination-after')); @@ -200,7 +200,7 @@ describe('MdTabHeader', () => { appComponent.disableRipple = true; fixture.detectChanges(); - expect(appComponent.mdTabHeader._showPaginationControls).toBe(true); + expect(appComponent.tabHeader._showPaginationControls).toBe(true); const buttonAfter = fixture.debugElement.query(By.css('.mat-tab-header-pagination-after')); @@ -229,25 +229,25 @@ describe('MdTabHeader', () => { it('should scroll to show the focused tab label', () => { appComponent.addTabsForScrolling(); fixture.detectChanges(); - expect(appComponent.mdTabHeader.scrollDistance).toBe(0); + expect(appComponent.tabHeader.scrollDistance).toBe(0); // Focus on the last tab, expect this to be the maximum scroll distance. - appComponent.mdTabHeader.focusIndex = appComponent.tabs.length - 1; + appComponent.tabHeader.focusIndex = appComponent.tabs.length - 1; fixture.detectChanges(); - expect(appComponent.mdTabHeader.scrollDistance) - .toBe(appComponent.mdTabHeader._getMaxScrollDistance()); + expect(appComponent.tabHeader.scrollDistance) + .toBe(appComponent.tabHeader._getMaxScrollDistance()); // Focus on the first tab, expect this to be the maximum scroll distance. - appComponent.mdTabHeader.focusIndex = 0; + appComponent.tabHeader.focusIndex = 0; fixture.detectChanges(); - expect(appComponent.mdTabHeader.scrollDistance).toBe(0); + expect(appComponent.tabHeader.scrollDistance).toBe(0); }); }); it('should re-align the ink bar when the direction changes', () => { fixture = TestBed.createComponent(SimpleTabHeaderApp); - const inkBar = fixture.componentInstance.mdTabHeader._inkBar; + const inkBar = fixture.componentInstance.tabHeader._inkBar; spyOn(inkBar, 'alignToElement'); fixture.detectChanges(); @@ -262,7 +262,7 @@ describe('MdTabHeader', () => { fixture = TestBed.createComponent(SimpleTabHeaderApp); fixture.detectChanges(); - const inkBar = fixture.componentInstance.mdTabHeader._inkBar; + const inkBar = fixture.componentInstance.tabHeader._inkBar; spyOn(inkBar, 'alignToElement'); @@ -277,7 +277,7 @@ describe('MdTabHeader', () => { it('should update arrows when the window is resized', fakeAsync(() => { fixture = TestBed.createComponent(SimpleTabHeaderApp); - const header = fixture.componentInstance.mdTabHeader; + const header = fixture.componentInstance.tabHeader; spyOn(header, '_checkPaginationEnabled'); @@ -300,16 +300,16 @@ interface Tab { @Component({ template: `
    - -
    {{tab.label}}
    -     +
    `, styles: [` @@ -326,7 +326,7 @@ class SimpleTabHeaderApp { tabs: Tab[] = [{label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}, {label: 'tab one'}]; dir: Direction = 'ltr'; - @ViewChild(MdTabHeader) mdTabHeader: MdTabHeader; + @ViewChild(MatTabHeader) tabHeader: MatTabHeader; constructor() { this.tabs[this.disabledTabIndex].disabled = true; diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 782c20284083..8132ebf6ab3a 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -27,16 +27,13 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; -import { - CanDisableRipple, MATERIAL_COMPATIBILITY_MODE, - mixinDisableRipple -} from '@angular/material/core'; +import {CanDisableRipple, mixinDisableRipple} from '@angular/material/core'; import {fromEvent} from 'rxjs/observable/fromEvent'; import {merge} from 'rxjs/observable/merge'; import {of as observableOf} from 'rxjs/observable/of'; import {Subscription} from 'rxjs/Subscription'; -import {MdInkBar} from './ink-bar'; -import {MdTabLabelWrapper} from './tab-label-wrapper'; +import {MatInkBar} from './ink-bar'; +import {MatTabLabelWrapper} from './tab-label-wrapper'; /** @@ -52,10 +49,10 @@ export type ScrollDirection = 'after' | 'before'; */ const EXAGGERATED_OVERSCROLL = 60; -// Boilerplate for applying mixins to MdTabHeader. +// Boilerplate for applying mixins to MatTabHeader. /** @docs-private */ -export class MdTabHeaderBase {} -export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase); +export class MatTabHeaderBase {} +export const _MatTabHeaderMixinBase = mixinDisableRipple(MatTabHeaderBase); /** * The header of the tab group which displays a list of all the tabs in the tab group. Includes @@ -66,7 +63,7 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase); */ @Component({ moduleId: module.id, - selector: 'md-tab-header, mat-tab-header', + selector: 'mat-tab-header', templateUrl: 'tab-header.html', styleUrls: ['tab-header.css'], inputs: ['disableRipple'], @@ -78,13 +75,12 @@ export const _MdTabHeaderMixinBase = mixinDisableRipple(MdTabHeaderBase); '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls', '[class.mat-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", }, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdTabHeader extends _MdTabHeaderMixinBase +export class MatTabHeader extends _MatTabHeaderMixinBase implements AfterContentChecked, AfterContentInit, OnDestroy, CanDisableRipple { - @ContentChildren(MdTabLabelWrapper) _labelWrappers: QueryList; - @ViewChild(MdInkBar) _inkBar: MdInkBar; + @ContentChildren(MatTabLabelWrapper) _labelWrappers: QueryList; + @ViewChild(MatInkBar) _inkBar: MatInkBar; @ViewChild('tabListContainer') _tabListContainer: ElementRef; @ViewChild('tabList') _tabList: ElementRef; @@ -277,7 +273,7 @@ export class MdTabHeader extends _MdTabHeaderMixinBase */ _moveFocus(offset: number) { if (this._labelWrappers) { - const tabs: MdTabLabelWrapper[] = this._labelWrappers.toArray(); + const tabs: MatTabLabelWrapper[] = this._labelWrappers.toArray(); for (let i = this.focusIndex + offset; i < tabs.length && i >= 0; i += offset) { if (this._isValidIndex(i)) { diff --git a/src/lib/tabs/tab-label-wrapper.ts b/src/lib/tabs/tab-label-wrapper.ts index 6dcc39f556bf..eecb69e12b9b 100644 --- a/src/lib/tabs/tab-label-wrapper.ts +++ b/src/lib/tabs/tab-label-wrapper.ts @@ -9,23 +9,23 @@ import {Directive, ElementRef} from '@angular/core'; import {CanDisable, mixinDisabled} from '@angular/material/core'; -// Boilerplate for applying mixins to MdTabLabelWrapper. +// Boilerplate for applying mixins to MatTabLabelWrapper. /** @docs-private */ -export class MdTabLabelWrapperBase {} -export const _MdTabLabelWrapperMixinBase = mixinDisabled(MdTabLabelWrapperBase); +export class MatTabLabelWrapperBase {} +export const _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase); /** - * Used in the `md-tab-group` view to display tab labels. + * Used in the `mat-tab-group` view to display tab labels. * @docs-private */ @Directive({ - selector: '[mdTabLabelWrapper], [matTabLabelWrapper]', + selector: '[matTabLabelWrapper]', inputs: ['disabled'], host: { '[class.mat-tab-disabled]': 'disabled' } }) -export class MdTabLabelWrapper extends _MdTabLabelWrapperMixinBase implements CanDisable { +export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase implements CanDisable { constructor(public elementRef: ElementRef) { super(); } diff --git a/src/lib/tabs/tab-label.ts b/src/lib/tabs/tab-label.ts index 216feff44efb..6704220f8e08 100644 --- a/src/lib/tabs/tab-label.ts +++ b/src/lib/tabs/tab-label.ts @@ -10,13 +10,13 @@ import {Directive, TemplateRef, ViewContainerRef} from '@angular/core'; import {TemplatePortalDirective} from '@angular/cdk/portal'; /** Workaround for https://github.com/angular/angular/issues/17849 */ -export const _MdTabLabelBaseClass = TemplatePortalDirective; +export const _MatTabLabelBaseClass = TemplatePortalDirective; /** Used to flag tab labels for use with the portal directive */ @Directive({ - selector: '[md-tab-label], [mat-tab-label], [mdTabLabel], [matTabLabel]', + selector: '[mat-tab-label], [matTabLabel]', }) -export class MdTabLabel extends _MdTabLabelBaseClass { +export class MatTabLabel extends _MatTabLabelBaseClass { constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) { super(templateRef, viewContainerRef); } diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts index e38e006ad6a0..19eb376cd0db 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts @@ -5,16 +5,16 @@ import {ViewportRuler} from '@angular/cdk/scrolling'; import {dispatchFakeEvent, dispatchMouseEvent, FakeViewportRuler} from '@angular/cdk/testing'; import {Direction, Directionality} from '@angular/cdk/bidi'; import {Subject} from 'rxjs/Subject'; -import {MdTabNav, MdTabsModule, MdTabLink} from '../index'; +import {MatTabNav, MatTabsModule, MatTabLink} from '../index'; -describe('MdTabNavBar', () => { +describe('MatTabNavBar', () => { let dir: Direction = 'ltr'; let dirChange = new Subject(); beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdTabsModule], + imports: [MatTabsModule], declarations: [ SimpleTabNavBarTestApp, TabLinkWithNgIf, @@ -80,8 +80,8 @@ describe('MdTabNavBar', () => { }); it('should update the disableRipple property on each tab link', () => { - const tabLinkElements = fixture.debugElement.queryAll(By.directive(MdTabLink)) - .map(tabLinkDebug => tabLinkDebug.componentInstance) as MdTabLink[]; + const tabLinkElements = fixture.debugElement.queryAll(By.directive(MatTabLink)) + .map(tabLinkDebug => tabLinkDebug.componentInstance) as MatTabLink[]; expect(tabLinkElements.every(tabLink => !tabLink.disableRipple)) .toBe(true, 'Expected every tab link to have ripples enabled'); @@ -120,7 +120,7 @@ describe('MdTabNavBar', () => { it('should be able to disable ripples on a tab link', () => { const tabLinkDebug = fixture.debugElement.query(By.css('a')); const tabLinkElement = tabLinkDebug.nativeElement; - const tabLinkInstance = tabLinkDebug.injector.get(MdTabLink); + const tabLinkInstance = tabLinkDebug.injector.get(MatTabLink); tabLinkInstance.disableRipple = true; @@ -199,8 +199,8 @@ describe('MdTabNavBar', () => { @Component({ selector: 'test-app', template: ` -
    - + { ` }) class SimpleTabNavBarTestApp { - @ViewChild(MdTabNav) tabNavBar: MdTabNav; + @ViewChild(MatTabNav) tabNavBar: MatTabNav; label = ''; disabled: boolean = false; @@ -223,8 +223,8 @@ class SimpleTabNavBarTestApp { @Component({ template: ` -
    - Link +
    + Link
    ` }) diff --git a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts index 99eb7ecf993f..8ab3170ce8cd 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -33,9 +33,9 @@ import { import { CanColor, CanDisable, - CanDisableRipple, MATERIAL_COMPATIBILITY_MODE, - MD_RIPPLE_GLOBAL_OPTIONS, - MdRipple, + CanDisableRipple, + MAT_RIPPLE_GLOBAL_OPTIONS, + MatRipple, mixinColor, mixinDisabled, mixinDisableRipple, @@ -46,15 +46,15 @@ import {fromEvent} from 'rxjs/observable/fromEvent'; import {merge} from 'rxjs/observable/merge'; import {of as observableOf} from 'rxjs/observable/of'; import {Subject} from 'rxjs/Subject'; -import {MdInkBar} from '../ink-bar'; +import {MatInkBar} from '../ink-bar'; -// Boilerplate for applying mixins to MdTabNav. +// Boilerplate for applying mixins to MatTabNav. /** @docs-private */ -export class MdTabNavBase { +export class MatTabNavBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdTabNavMixinBase = mixinDisableRipple(mixinColor(MdTabNavBase, 'primary')); +export const _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase, 'primary')); /** * Navigation component matching the styles of the tab group header. @@ -62,7 +62,7 @@ export const _MdTabNavMixinBase = mixinDisableRipple(mixinColor(MdTabNavBase, 'p */ @Component({ moduleId: module.id, - selector: '[md-tab-nav-bar], [mat-tab-nav-bar]', + selector: '[mat-tab-nav-bar]', inputs: ['color', 'disableRipple'], templateUrl: 'tab-nav-bar.html', styleUrls: ['tab-nav-bar.css'], @@ -70,9 +70,8 @@ export const _MdTabNavMixinBase = mixinDisableRipple(mixinColor(MdTabNavBase, 'p encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdTabNav extends _MdTabNavMixinBase implements AfterContentInit, CanColor, +export class MatTabNav extends _MatTabNavMixinBase implements AfterContentInit, CanColor, CanDisableRipple, OnDestroy { /** Subject that emits when the component has been destroyed. */ @@ -81,11 +80,11 @@ export class MdTabNav extends _MdTabNavMixinBase implements AfterContentInit, Ca _activeLinkChanged: boolean; _activeLinkElement: ElementRef; - @ViewChild(MdInkBar) _inkBar: MdInkBar; + @ViewChild(MatInkBar) _inkBar: MatInkBar; /** Query list of all tab links of the tab navigation. */ - @ContentChildren(forwardRef(() => MdTabLink), {descendants: true}) - _tabLinks: QueryList; + @ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) + _tabLinks: QueryList; /** Background color of the tab nav. */ @Input() @@ -173,15 +172,15 @@ export class MdTabNav extends _MdTabNavMixinBase implements AfterContentInit, Ca } -// Boilerplate for applying mixins to MdTabLink. -export class MdTabLinkBase {} -export const _MdTabLinkMixinBase = mixinDisabled(MdTabLinkBase); +// Boilerplate for applying mixins to MatTabLink. +export class MatTabLinkBase {} +export const _MatTabLinkMixinBase = mixinDisabled(MatTabLinkBase); /** - * Link inside of a `md-tab-nav-bar`. + * Link inside of a `mat-tab-nav-bar`. */ @Directive({ - selector: '[md-tab-link], [mat-tab-link], [mdTabLink], [matTabLink]', + selector: '[mat-tab-link], [matTabLink]', inputs: ['disabled'], host: { 'class': 'mat-tab-link', @@ -190,7 +189,7 @@ export const _MdTabLinkMixinBase = mixinDisabled(MdTabLinkBase); '[class.mat-tab-disabled]': 'disabled' } }) -export class MdTabLink extends _MdTabLinkMixinBase implements OnDestroy, CanDisable { +export class MatTabLink extends _MatTabLinkMixinBase implements OnDestroy, CanDisable { /** Whether the tab link is active or not. */ private _isActive: boolean = false; @@ -198,7 +197,7 @@ export class MdTabLink extends _MdTabLinkMixinBase implements OnDestroy, CanDisa private _disableRipple: boolean = false; /** Reference to the instance of the ripple for the tab link. */ - private _tabLinkRipple: MdRipple; + private _tabLinkRipple: MatRipple; /** Whether the link is active. */ @Input() @@ -206,7 +205,7 @@ export class MdTabLink extends _MdTabLinkMixinBase implements OnDestroy, CanDisa set active(value: boolean) { this._isActive = value; if (value) { - this._mdTabNavBar.updateActiveLink(this._elementRef); + this._tabNavBar.updateActiveLink(this._elementRef); } } @@ -223,17 +222,17 @@ export class MdTabLink extends _MdTabLinkMixinBase implements OnDestroy, CanDisa return this.disabled ? -1 : 0; } - constructor(private _mdTabNavBar: MdTabNav, + constructor(private _tabNavBar: MatTabNav, private _elementRef: ElementRef, ngZone: NgZone, ruler: ViewportRuler, platform: Platform, - @Optional() @Inject(MD_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions) { + @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalOptions: RippleGlobalOptions) { super(); // Manually create a ripple instance that uses the tab link element as trigger element. // Notice that the lifecycle hooks for the ripple config won't be called anymore. - this._tabLinkRipple = new MdRipple(_elementRef, ngZone, ruler, platform, globalOptions); + this._tabLinkRipple = new MatRipple(_elementRef, ngZone, ruler, platform, globalOptions); } ngOnDestroy() { diff --git a/src/lib/tabs/tab.ts b/src/lib/tabs/tab.ts index 852c9aa84d92..f1a29aa84d3f 100644 --- a/src/lib/tabs/tab.ts +++ b/src/lib/tabs/tab.ts @@ -23,29 +23,29 @@ import { } from '@angular/core'; import {CanDisable, mixinDisabled} from '@angular/material/core'; import {Subject} from 'rxjs/Subject'; -import {MdTabLabel} from './tab-label'; +import {MatTabLabel} from './tab-label'; -// Boilerplate for applying mixins to MdTab. +// Boilerplate for applying mixins to MatTab. /** @docs-private */ -export class MdTabBase {} -export const _MdTabMixinBase = mixinDisabled(MdTabBase); +export class MatTabBase {} +export const _MatTabMixinBase = mixinDisabled(MatTabBase); @Component({ moduleId: module.id, - selector: 'md-tab, mat-tab', + selector: 'mat-tab', templateUrl: 'tab.html', inputs: ['disabled'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, - exportAs: 'mdTab, matTab', + exportAs: 'matTab', }) -export class MdTab extends _MdTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy { - /** Content for the tab label given by . */ - @ContentChild(MdTabLabel) templateLabel: MdTabLabel; +export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy { + /** Content for the tab label given by . */ + @ContentChild(MatTabLabel) templateLabel: MatTabLabel; - /** Template inside the MdTab view that contains an . */ + /** Template inside the MatTab view that contains an . */ @ViewChild(TemplateRef) _content: TemplateRef; /** The plain text label for the tab, used when there is no template label. */ diff --git a/src/lib/tabs/tabs-module.ts b/src/lib/tabs/tabs-module.ts index ee93f03ec4f4..9c0f0e3c514b 100644 --- a/src/lib/tabs/tabs-module.ts +++ b/src/lib/tabs/tabs-module.ts @@ -11,46 +11,46 @@ import {PortalModule} from '@angular/cdk/portal'; import {ScrollDispatchModule, VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MdCommonModule, MdRippleModule} from '@angular/material/core'; -import {MdInkBar} from './ink-bar'; -import {MdTab} from './tab'; -import {MdTabBody} from './tab-body'; -import {MdTabGroup} from './tab-group'; -import {MdTabHeader} from './tab-header'; -import {MdTabLabel} from './tab-label'; -import {MdTabLabelWrapper} from './tab-label-wrapper'; -import {MdTabLink, MdTabNav} from './tab-nav-bar/tab-nav-bar'; +import {MatCommonModule, MatRippleModule} from '@angular/material/core'; +import {MatInkBar} from './ink-bar'; +import {MatTab} from './tab'; +import {MatTabBody} from './tab-body'; +import {MatTabGroup} from './tab-group'; +import {MatTabHeader} from './tab-header'; +import {MatTabLabel} from './tab-label'; +import {MatTabLabelWrapper} from './tab-label-wrapper'; +import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar'; @NgModule({ imports: [ CommonModule, - MdCommonModule, + MatCommonModule, PortalModule, - MdRippleModule, + MatRippleModule, ObserversModule, ScrollDispatchModule, ], // Don't export all components because some are only to be used internally. exports: [ - MdCommonModule, - MdTabGroup, - MdTabLabel, - MdTab, - MdTabNav, - MdTabLink, + MatCommonModule, + MatTabGroup, + MatTabLabel, + MatTab, + MatTabNav, + MatTabLink, ], declarations: [ - MdTabGroup, - MdTabLabel, - MdTab, - MdInkBar, - MdTabLabelWrapper, - MdTabNav, - MdTabLink, - MdTabBody, - MdTabHeader + MatTabGroup, + MatTabLabel, + MatTab, + MatInkBar, + MatTabLabelWrapper, + MatTabNav, + MatTabLink, + MatTabBody, + MatTabHeader ], providers: [VIEWPORT_RULER_PROVIDER], }) -export class MdTabsModule {} +export class MatTabsModule {} diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md index 06070051fe68..44eae40a5ddf 100644 --- a/src/lib/tabs/tabs.md +++ b/src/lib/tabs/tabs.md @@ -20,37 +20,37 @@ the header, usually through keyboard navigation. If a tab's label is only text then the simple tab-group API can be used. ```html - - + +

    Some tab content

    ...

    -     - + +

    Some more tab content

    ...

    -     -     + + ``` -For more complex labels, add a template with the `md-tab-label` directive inside the `md-tab`. +For more complex labels, add a template with the `mat-tab-label` directive inside the `mat-tab`. ```html - - - + + + The best pasta

    Best pasta restaurants

    ...

    -     - - - thumb_down The worst sushi + + + + thumb_down The worst sushi

    Terrible sushi restaurants

    ...

    -     -     + + ``` ### Dynamic Height @@ -60,11 +60,11 @@ change this, set the `dynamicHeight` input to true. The tab body will animate it to the height of the active tab. ### Tabs and navigation -While `` is used to switch between views within a single route, `
    ` +While `` is used to switch between views within a single route, `
    ` provides a tab-like UI for navigating between routes. ```html -
    - + ` element should have a label as well. +`aria-labelledby`. For `MatTabNav`, the `
    ` element should have a label as well. #### Keyboard shortcuts diff --git a/src/lib/toolbar/mat-exports.ts b/src/lib/toolbar/mat-exports.ts deleted file mode 100644 index 3e69041d0ebd..000000000000 --- a/src/lib/toolbar/mat-exports.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import {MdToolbar, MdToolbarBase, MdToolbarRow} from './toolbar'; -import {MdToolbarModule} from './toolbar-module'; - - -export {MdToolbar as MatToolbar}; -export {MdToolbarBase as MatToolbarBase}; -export {MdToolbarModule as MatToolbarModule}; -export {MdToolbarRow as MatToolbarRow}; diff --git a/src/lib/toolbar/public_api.ts b/src/lib/toolbar/public_api.ts index 24b5e4c62462..6a4d6c7635ed 100644 --- a/src/lib/toolbar/public_api.ts +++ b/src/lib/toolbar/public_api.ts @@ -8,4 +8,4 @@ export * from './toolbar-module'; export * from './toolbar'; -export * from './mat-exports'; + diff --git a/src/lib/toolbar/toolbar-module.ts b/src/lib/toolbar/toolbar-module.ts index b4eee3b54a58..b974fd224417 100644 --- a/src/lib/toolbar/toolbar-module.ts +++ b/src/lib/toolbar/toolbar-module.ts @@ -7,13 +7,13 @@ */ import {NgModule} from '@angular/core'; -import {MdCommonModule} from '@angular/material/core'; -import {MdToolbar, MdToolbarRow} from './toolbar'; +import {MatCommonModule} from '@angular/material/core'; +import {MatToolbar, MatToolbarRow} from './toolbar'; @NgModule({ - imports: [MdCommonModule], - exports: [MdToolbar, MdToolbarRow, MdCommonModule], - declarations: [MdToolbar, MdToolbarRow], + imports: [MatCommonModule], + exports: [MatToolbar, MatToolbarRow, MatCommonModule], + declarations: [MatToolbar, MatToolbarRow], }) -export class MdToolbarModule {} +export class MatToolbarModule {} diff --git a/src/lib/toolbar/toolbar.html b/src/lib/toolbar/toolbar.html index 88eed7dbff08..a9f577369010 100644 --- a/src/lib/toolbar/toolbar.html +++ b/src/lib/toolbar/toolbar.html @@ -2,5 +2,5 @@ - +
    diff --git a/src/lib/toolbar/toolbar.md b/src/lib/toolbar/toolbar.md index cfc2879b0c17..c6bebe838470 100644 --- a/src/lib/toolbar/toolbar.md +++ b/src/lib/toolbar/toolbar.md @@ -1,24 +1,24 @@ -`` is a container for headers, titles, or actions. +`` is a container for headers, titles, or actions. ### Multiple rows -Toolbars can have multiple rows using `` elements. Any content outside of an -`` element are automatically placed inside of one at the beginning of the toolbar. +Toolbars can have multiple rows using `` elements. Any content outside of an +`` element are automatically placed inside of one at the beginning of the toolbar. Each toolbar row is a `display: flex` container. ```html - + First Row - + Second Row - + - + Third Row - - + + ``` ### Positioning toolbar content @@ -28,14 +28,14 @@ position the content as it suits their application. A common pattern is to position a title on the left with some actions on the right. This can be easily accomplished with `display: flex`: ```html - + Application Title Right Aligned Text - + ``` ```scss .example-fill-remaining-space { @@ -46,7 +46,7 @@ easily accomplished with `display: flex`: ``` ### Theming -The color of a `` can be changed by using the `color` property. By default, toolbars +The color of a `` can be changed by using the `color` property. By default, toolbars use a neutral background color based on the current theme (light or dark). This can be changed to `'primary'`, `'accent'`, or `'warn'`. diff --git a/src/lib/toolbar/toolbar.spec.ts b/src/lib/toolbar/toolbar.spec.ts index 6e0c6d4da7cd..bfe43e7d0c2c 100644 --- a/src/lib/toolbar/toolbar.spec.ts +++ b/src/lib/toolbar/toolbar.spec.ts @@ -1,10 +1,10 @@ import {Component} from '@angular/core'; import {TestBed, async, ComponentFixture} from '@angular/core/testing'; import {By} from '@angular/platform-browser'; -import {MdToolbarModule} from './index'; +import {MatToolbarModule} from './index'; -describe('MdToolbar', () => { +describe('MatToolbar', () => { let fixture: ComponentFixture; let testComponent: TestApp; @@ -12,7 +12,7 @@ describe('MdToolbar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdToolbarModule], + imports: [MatToolbarModule], declarations: [TestApp], }); @@ -22,7 +22,7 @@ describe('MdToolbar', () => { beforeEach(() => { fixture = TestBed.createComponent(TestApp); testComponent = fixture.debugElement.componentInstance; - toolbarElement = fixture.debugElement.query(By.css('md-toolbar')).nativeElement; + toolbarElement = fixture.debugElement.query(By.css('mat-toolbar')).nativeElement; }); it('should apply class based on color attribute', () => { @@ -51,7 +51,7 @@ describe('MdToolbar', () => { }); -@Component({template: `Test Toolbar`}) +@Component({template: `Test Toolbar`}) class TestApp { toolbarColor: string; } diff --git a/src/lib/toolbar/toolbar.ts b/src/lib/toolbar/toolbar.ts index 42c852af0460..b27331206107 100644 --- a/src/lib/toolbar/toolbar.ts +++ b/src/lib/toolbar/toolbar.ts @@ -7,33 +7,33 @@ */ import { - Component, ChangeDetectionStrategy, - ViewEncapsulation, + Component, Directive, ElementRef, Renderer2, + ViewEncapsulation, } from '@angular/core'; -import {CanColor, MATERIAL_COMPATIBILITY_MODE, mixinColor} from '@angular/material/core'; +import {CanColor, mixinColor} from '@angular/material/core'; @Directive({ - selector: 'md-toolbar-row, mat-toolbar-row', + selector: 'mat-toolbar-row', host: {'class': 'mat-toolbar-row'}, }) -export class MdToolbarRow {} +export class MatToolbarRow {} -// Boilerplate for applying mixins to MdToolbar. +// Boilerplate for applying mixins to MatToolbar. /** @docs-private */ -export class MdToolbarBase { +export class MatToolbarBase { constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {} } -export const _MdToolbarMixinBase = mixinColor(MdToolbarBase); +export const _MatToolbarMixinBase = mixinColor(MatToolbarBase); @Component({ moduleId: module.id, - selector: 'md-toolbar, mat-toolbar', + selector: 'mat-toolbar', templateUrl: 'toolbar.html', styleUrls: ['toolbar.css'], inputs: ['color'], @@ -44,9 +44,8 @@ export const _MdToolbarMixinBase = mixinColor(MdToolbarBase); changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, - viewProviders: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: true}], }) -export class MdToolbar extends _MdToolbarMixinBase implements CanColor { +export class MatToolbar extends _MatToolbarMixinBase implements CanColor { constructor(renderer: Renderer2, elementRef: ElementRef) { super(renderer, elementRef); diff --git a/src/lib/tooltip/mat-exports.ts b/src/lib/tooltip/mat-exports.ts deleted file mode 100644 index 080519017a01..000000000000 --- a/src/lib/tooltip/mat-exports.ts +++ /dev/null @@ -1,23 +0,0 @@ -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - */ - -import { - MD_TOOLTIP_SCROLL_STRATEGY, - MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER, - MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY, - MdTooltip, -} from './tooltip'; -import {MdTooltipModule} from './tooltip-module'; - - -/* tslint:disable:max-line-length */ -export {MdTooltip as MatTooltip}; -export {MdTooltipModule as MatTooltipModule}; -export {MD_TOOLTIP_SCROLL_STRATEGY as MAT_TOOLTIP_SCROLL_STRATEGY}; -export {MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER as MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER}; -export {MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY as MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY}; diff --git a/src/lib/tooltip/public_api.ts b/src/lib/tooltip/public_api.ts index 2de9d7df0b3d..7bb70a658c74 100644 --- a/src/lib/tooltip/public_api.ts +++ b/src/lib/tooltip/public_api.ts @@ -8,4 +8,4 @@ export * from './tooltip-module'; export * from './tooltip'; -export * from './mat-exports'; + diff --git a/src/lib/tooltip/tooltip-module.ts b/src/lib/tooltip/tooltip-module.ts index 3ea824d9d0f9..8c49d490fd41 100644 --- a/src/lib/tooltip/tooltip-module.ts +++ b/src/lib/tooltip/tooltip-module.ts @@ -11,21 +11,21 @@ import {OverlayModule} from '@angular/cdk/overlay'; import {PlatformModule} from '@angular/cdk/platform'; import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MdCommonModule} from '@angular/material/core'; -import {MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER, MdTooltip, TooltipComponent} from './tooltip'; +import {MatCommonModule} from '@angular/material/core'; +import {MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER, MatTooltip, TooltipComponent} from './tooltip'; @NgModule({ imports: [ CommonModule, OverlayModule, - MdCommonModule, + MatCommonModule, PlatformModule, A11yModule, ], - exports: [MdTooltip, TooltipComponent, MdCommonModule], - declarations: [MdTooltip, TooltipComponent], + exports: [MatTooltip, TooltipComponent, MatCommonModule], + declarations: [MatTooltip, TooltipComponent], entryComponents: [TooltipComponent], - providers: [MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER, ARIA_DESCRIBER_PROVIDER], + providers: [MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER, ARIA_DESCRIBER_PROVIDER], }) -export class MdTooltipModule {} +export class MatTooltipModule {} diff --git a/src/lib/tooltip/tooltip.md b/src/lib/tooltip/tooltip.md index 5359617aebcd..d9efd12ad87a 100644 --- a/src/lib/tooltip/tooltip.md +++ b/src/lib/tooltip/tooltip.md @@ -5,7 +5,7 @@ over or longpresses an element. ### Positioning -The tooltip will be displayed below the element but this can be configured using the `mdTooltipPosition` +The tooltip will be displayed below the element but this can be configured using the `matTooltipPosition` input. The tooltip can be displayed above, below, left, or right of the element. By default the position will be below. If the tooltip should switch left/right positions in an RTL layout direction, then @@ -25,7 +25,7 @@ the positions `before` and `after` should be used instead of `left` and `right`, The tooltip is immediately shown when the user's mouse hovers over the element and immediately hides when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through -the inputs `mdTooltipShowDelay` and `mdTooltipHideDelay`. +the inputs `matTooltipShowDelay` and `matTooltipHideDelay`. On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. The longpress behavior requires HammerJS to be loaded on the page. @@ -33,11 +33,11 @@ delay of 1500ms. The longpress behavior requires HammerJS to be loaded on the pa The tooltip can also be shown and hidden through the `show` and `hide` directive methods, which both accept a number in milliseconds to delay before applying the display change. -To turn off the tooltip and prevent it from showing to the user, use the `mdTooltipDisabled` input flag. +To turn off the tooltip and prevent it from showing to the user, use the `matTooltipDisabled` input flag. ### Accessibility -Elements with the `mdTooltip` will add an `aria-describedby` label that provides a reference +Elements with the `matTooltip` will add an `aria-describedby` label that provides a reference to a visually hidden element containing the tooltip's message. This provides screenreaders the information needed to read out the tooltip's contents when the end-user focuses on the element triggering the tooltip. \ No newline at end of file diff --git a/src/lib/tooltip/tooltip.spec.ts b/src/lib/tooltip/tooltip.spec.ts index 1ab5abae667d..26e8f67bf331 100644 --- a/src/lib/tooltip/tooltip.spec.ts +++ b/src/lib/tooltip/tooltip.spec.ts @@ -22,8 +22,8 @@ import {Platform} from '@angular/cdk/platform'; import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing'; import {ESCAPE} from '@angular/cdk/keycodes'; import { - MdTooltip, - MdTooltipModule, + MatTooltip, + MatTooltipModule, SCROLL_THROTTLE_MS, TOOLTIP_PANEL_CLASS, TooltipPosition @@ -32,13 +32,13 @@ import { const initialTooltipMessage = 'initial tooltip message'; -describe('MdTooltip', () => { +describe('MatTooltip', () => { let overlayContainerElement: HTMLElement; let dir: {value: Direction}; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MdTooltipModule, OverlayModule, NoopAnimationsModule], + imports: [MatTooltipModule, OverlayModule, NoopAnimationsModule], declarations: [ BasicTooltipDemo, ScrollableTooltipDemo, @@ -69,14 +69,14 @@ describe('MdTooltip', () => { let fixture: ComponentFixture; let buttonDebugElement: DebugElement; let buttonElement: HTMLButtonElement; - let tooltipDirective: MdTooltip; + let tooltipDirective: MatTooltip; beforeEach(() => { fixture = TestBed.createComponent(BasicTooltipDemo); fixture.detectChanges(); buttonDebugElement = fixture.debugElement.query(By.css('button')); buttonElement = buttonDebugElement.nativeElement; - tooltipDirective = buttonDebugElement.injector.get(MdTooltip); + tooltipDirective = buttonDebugElement.injector.get(MatTooltip); }); it('should show and hide the tooltip', fakeAsync(() => { @@ -273,9 +273,9 @@ describe('MdTooltip', () => { // Make sure classes aren't prematurely added let tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement; expect(tooltipElement.classList).not.toContain('custom-one', - 'Expected to not have the class before enabling mdTooltipClass'); + 'Expected to not have the class before enabling matTooltipClass'); expect(tooltipElement.classList).not.toContain('custom-two', - 'Expected to not have the class before enabling mdTooltipClass'); + 'Expected to not have the class before enabling matTooltipClass'); // Enable the classes via ngClass syntax fixture.componentInstance.showTooltipClass = true; @@ -284,9 +284,9 @@ describe('MdTooltip', () => { // Make sure classes are correctly added tooltipElement = overlayContainerElement.querySelector('.mat-tooltip') as HTMLElement; expect(tooltipElement.classList).toContain('custom-one', - 'Expected to have the class after enabling mdTooltipClass'); + 'Expected to have the class after enabling matTooltipClass'); expect(tooltipElement.classList).toContain('custom-two', - 'Expected to have the class after enabling mdTooltipClass'); + 'Expected to have the class after enabling matTooltipClass'); })); it('should be removed after parent destroyed', fakeAsync(() => { @@ -483,14 +483,14 @@ describe('MdTooltip', () => { let fixture: ComponentFixture; let buttonDebugElement: DebugElement; let buttonElement: HTMLButtonElement; - let tooltipDirective: MdTooltip; + let tooltipDirective: MatTooltip; beforeEach(() => { fixture = TestBed.createComponent(ScrollableTooltipDemo); fixture.detectChanges(); buttonDebugElement = fixture.debugElement.query(By.css('button')); buttonElement = buttonDebugElement.nativeElement; - tooltipDirective = buttonDebugElement.injector.get(MdTooltip); + tooltipDirective = buttonDebugElement.injector.get(MatTooltip); }); it('should hide tooltip if clipped after changing positions', fakeAsync(() => { @@ -524,14 +524,14 @@ describe('MdTooltip', () => { let fixture: ComponentFixture; let buttonDebugElement: DebugElement; let buttonElement: HTMLButtonElement; - let tooltipDirective: MdTooltip; + let tooltipDirective: MatTooltip; beforeEach(() => { fixture = TestBed.createComponent(OnPushTooltipDemo); fixture.detectChanges(); buttonDebugElement = fixture.debugElement.query(By.css('button')); buttonElement = buttonDebugElement.nativeElement; - tooltipDirective = buttonDebugElement.injector.get(MdTooltip); + tooltipDirective = buttonDebugElement.injector.get(MatTooltip); }); it('should show and hide the tooltip', fakeAsync(() => { @@ -582,9 +582,9 @@ describe('MdTooltip', () => { selector: 'app', template: ` ` }) @@ -593,7 +593,7 @@ class BasicTooltipDemo { message: any = initialTooltipMessage; showButton: boolean = true; showTooltipClass = false; - @ViewChild(MdTooltip) tooltip: MdTooltip; + @ViewChild(MatTooltip) tooltip: MatTooltip; } @Component({ @@ -602,8 +602,8 @@ class BasicTooltipDemo {
    ` @@ -629,8 +629,8 @@ class ScrollableTooltipDemo { @Component({ selector: 'app', template: ` - `, changeDetection: ChangeDetectionStrategy.OnPush @@ -645,7 +645,7 @@ class OnPushTooltipDemo { selector: 'app', template: ` `, }) diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index 8fcfabef129f..4c54b6b9cce5 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -56,25 +56,25 @@ export const SCROLL_THROTTLE_MS = 20; export const TOOLTIP_PANEL_CLASS = 'mat-tooltip-panel'; /** Creates an error to be thrown if the user supplied an invalid tooltip position. */ -export function getMdTooltipInvalidPositionError(position: string) { +export function getMatTooltipInvalidPositionError(position: string) { return Error(`Tooltip position "${position}" is invalid.`); } /** Injection token that determines the scroll handling while a tooltip is visible. */ -export const MD_TOOLTIP_SCROLL_STRATEGY = - new InjectionToken<() => ScrollStrategy>('md-tooltip-scroll-strategy'); +export const MAT_TOOLTIP_SCROLL_STRATEGY = + new InjectionToken<() => ScrollStrategy>('mat-tooltip-scroll-strategy'); /** @docs-private */ -export function MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): +export function MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay): () => RepositionScrollStrategy { return () => overlay.scrollStrategies.reposition({ scrollThrottle: SCROLL_THROTTLE_MS }); } /** @docs-private */ -export const MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER = { - provide: MD_TOOLTIP_SCROLL_STRATEGY, +export const MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER = { + provide: MAT_TOOLTIP_SCROLL_STRATEGY, deps: [Overlay], - useFactory: MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY + useFactory: MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER_FACTORY }; /** * Directive that attaches a material design tooltip to the host element. Animates the showing and @@ -83,7 +83,7 @@ export const MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER = { * https://material.google.com/components/tooltips.html */ @Directive({ - selector: '[md-tooltip], [mdTooltip], [mat-tooltip], [matTooltip]', + selector: '[mat-tooltip], [matTooltip]', host: { '(longpress)': 'show()', '(focus)': 'show()', @@ -91,9 +91,9 @@ export const MD_TOOLTIP_SCROLL_STRATEGY_PROVIDER = { '(keydown)': '_handleKeydown($event)', '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')', }, - exportAs: 'mdTooltip, matTooltip', + exportAs: 'matTooltip', }) -export class MdTooltip implements OnDestroy { +export class MatTooltip implements OnDestroy { _overlayRef: OverlayRef | null; _tooltipInstance: TooltipComponent | null; @@ -102,7 +102,7 @@ export class MdTooltip implements OnDestroy { private _tooltipClass: string|string[]|Set|{[key: string]: any}; /** Allows the user to define the position of the tooltip relative to the parent element */ - @Input('mdTooltipPosition') + @Input('matTooltipPosition') get position(): TooltipPosition { return this._position; } set position(value: TooltipPosition) { if (value !== this._position) { @@ -117,7 +117,7 @@ export class MdTooltip implements OnDestroy { } /** Disables the display of the tooltip. */ - @Input('mdTooltipDisabled') + @Input('matTooltipDisabled') get disabled(): boolean { return this._disabled; } set disabled(value) { this._disabled = coerceBooleanProperty(value); @@ -134,15 +134,15 @@ export class MdTooltip implements OnDestroy { set _positionDeprecated(value: TooltipPosition) { this._position = value; } /** The default delay in ms before showing the tooltip after show is called */ - @Input('mdTooltipShowDelay') showDelay = 0; + @Input('matTooltipShowDelay') showDelay = 0; /** The default delay in ms before hiding the tooltip after hide is called */ - @Input('mdTooltipHideDelay') hideDelay = 0; + @Input('matTooltipHideDelay') hideDelay = 0; private _message = ''; /** The message to be displayed in the tooltip */ - @Input('mdTooltip') get message() { return this._message; } + @Input('matTooltip') get message() { return this._message; } set message(value: string) { this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this._message); @@ -153,7 +153,7 @@ export class MdTooltip implements OnDestroy { } /** Classes to be passed to the tooltip. Supports the same syntax as `ngClass`. */ - @Input('mdTooltipClass') + @Input('matTooltipClass') get tooltipClass() { return this._tooltipClass; } set tooltipClass(value: string|string[]|Set|{[key: string]: any}) { this._tooltipClass = value; @@ -162,41 +162,6 @@ export class MdTooltip implements OnDestroy { } } - /** @deprecated */ - @Input('md-tooltip') - get _deprecatedMessage(): string { return this.message; } - set _deprecatedMessage(v: string) { this.message = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matTooltip') - get _matMessage() { return this.message; } - set _matMessage(v) { this.message = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matTooltipPosition') - get _matPosition() { return this.position; } - set _matPosition(v) { this.position = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matTooltipDisabled') - get _matDisabled() { return this.disabled; } - set _matDisabled(v) { this.disabled = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matTooltipHideDelay') - get _matHideDelay() { return this.hideDelay; } - set _matHideDelay(v) { this.hideDelay = v; } - - // Properties with `mat-` prefix for noconflict mode. - @Input('matTooltipShowDelay') - get _matShowDelay() { return this.showDelay; } - set _matShowDelay(v) { this.showDelay = v; } - - // Properties with `mat-` prefix for nonconflict mode. - @Input('matTooltipClass') - get _matClass() { return this.tooltipClass; } - set _matClass(v) { this.tooltipClass = v; } - private _enterListener: Function; private _leaveListener: Function; @@ -209,7 +174,7 @@ export class MdTooltip implements OnDestroy { private _ngZone: NgZone, private _platform: Platform, private _ariaDescriber: AriaDescriber, - @Inject(MD_TOOLTIP_SCROLL_STRATEGY) private _scrollStrategy, + @Inject(MAT_TOOLTIP_SCROLL_STRATEGY) private _scrollStrategy, @Optional() private _dir: Directionality) { // The mouse events shouldn't be bound on iOS devices, because @@ -350,7 +315,7 @@ export class MdTooltip implements OnDestroy { return {originX: 'end', originY: 'center'}; } - throw getMdTooltipInvalidPositionError(this.position); + throw getMatTooltipInvalidPositionError(this.position); } /** Returns the overlay position based on the user's preference */ @@ -376,7 +341,7 @@ export class MdTooltip implements OnDestroy { return {overlayX: 'start', overlayY: 'center'}; } - throw getMdTooltipInvalidPositionError(this.position); + throw getMatTooltipInvalidPositionError(this.position); } /** Updates the tooltip message and repositions the overlay according to the new message length */ @@ -412,7 +377,7 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden'; */ @Component({ moduleId: module.id, - selector: 'md-tooltip-component, mat-tooltip-component', + selector: 'mat-tooltip-component', templateUrl: 'tooltip.html', styleUrls: ['tooltip.css'], encapsulation: ViewEncapsulation.None, @@ -526,7 +491,7 @@ export class TooltipComponent { case 'right': this._transformOrigin = 'left'; break; case 'above': this._transformOrigin = 'bottom'; break; case 'below': this._transformOrigin = 'top'; break; - default: throw getMdTooltipInvalidPositionError(value); + default: throw getMatTooltipInvalidPositionError(value); } } diff --git a/src/material-examples/autocomplete-display/autocomplete-display-example.html b/src/material-examples/autocomplete-display/autocomplete-display-example.html index 176d13dcfbb2..6f7be4623bd0 100644 --- a/src/material-examples/autocomplete-display/autocomplete-display-example.html +++ b/src/material-examples/autocomplete-display/autocomplete-display-example.html @@ -1,10 +1,10 @@
    - - - - + + + + {{ option.name }} - - - + + + diff --git a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html index 13c64139ea30..3e685d80a233 100644 --- a/src/material-examples/autocomplete-filter/autocomplete-filter-example.html +++ b/src/material-examples/autocomplete-filter/autocomplete-filter-example.html @@ -1,10 +1,10 @@
    - - - - + + + + {{ option }} - - - + + + diff --git a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html index 78370e44a246..9b6179e74bc5 100644 --- a/src/material-examples/autocomplete-overview/autocomplete-overview-example.html +++ b/src/material-examples/autocomplete-overview/autocomplete-overview-example.html @@ -1,20 +1,20 @@
    - - - - + + + + {{ state.name }} | Population: {{state.population}} - - - + + +
    - Disable Input? - + diff --git a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html index 3c440f4b319e..57a309431f85 100644 --- a/src/material-examples/autocomplete-simple/autocomplete-simple-example.html +++ b/src/material-examples/autocomplete-simple/autocomplete-simple-example.html @@ -1,10 +1,10 @@
    - - - - + + + + {{ option }} - - - + + + diff --git a/src/material-examples/button-overview/button-overview-example.html b/src/material-examples/button-overview/button-overview-example.html index 56f6fa44fb6b..0dcb901d1d1c 100644 --- a/src/material-examples/button-overview/button-overview-example.html +++ b/src/material-examples/button-overview/button-overview-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html index dd5cd2771788..d6f123c2a561 100644 --- a/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html +++ b/src/material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html @@ -1,15 +1,15 @@ - - - format_align_left - - - format_align_center - - - format_align_right - - - format_align_justify - - + + + format_align_left + + + format_align_center + + + format_align_right + + + format_align_justify + +
    Selected value: {{group.value}}
    diff --git a/src/material-examples/button-toggle-overview/button-toggle-overview-example.html b/src/material-examples/button-toggle-overview/button-toggle-overview-example.html index bb215d5b5425..858458d64280 100644 --- a/src/material-examples/button-toggle-overview/button-toggle-overview-example.html +++ b/src/material-examples/button-toggle-overview/button-toggle-overview-example.html @@ -1 +1 @@ -Toggle me! +Toggle me! diff --git a/src/material-examples/button-types/button-types-example.html b/src/material-examples/button-types/button-types-example.html index 1a9b5b2015a7..2e06c96f7913 100644 --- a/src/material-examples/button-types/button-types-example.html +++ b/src/material-examples/button-types/button-types-example.html @@ -1,64 +1,64 @@

    Basic Buttons

    - - - - - - Link + + + + + + Link

    Raised Buttons

    - - - - - - Link + + + + + + Link

    Icon Buttons

    - - - - -

    Fab Buttons

    - - - - - - + + + + + - Link + Link

    Mini Fab Buttons

    - - - - - - + + + + + - Link + Link
    diff --git a/src/material-examples/card-fancy/card-fancy-example.html b/src/material-examples/card-fancy/card-fancy-example.html index 45211a831f4f..c80c1bbc495c 100644 --- a/src/material-examples/card-fancy/card-fancy-example.html +++ b/src/material-examples/card-fancy/card-fancy-example.html @@ -1,19 +1,19 @@ - - -
    - Shiba Inu - Dog Breed -     - Photo of a Shiba Inu - + + +
    + Shiba Inu + Dog Breed +     + Photo of a Shiba Inu +

    The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally bred for hunting.

    -     - - - - -     + + + + + + diff --git a/src/material-examples/card-overview/card-overview-example.html b/src/material-examples/card-overview/card-overview-example.html index 5e0c2b6dfe13..774531539915 100644 --- a/src/material-examples/card-overview/card-overview-example.html +++ b/src/material-examples/card-overview/card-overview-example.html @@ -1 +1 @@ -Simple card +Simple card diff --git a/src/material-examples/checkbox-configurable/checkbox-configurable-example.html b/src/material-examples/checkbox-configurable/checkbox-configurable-example.html index 7b8fb4c2290e..e39d6e8e1aaf 100644 --- a/src/material-examples/checkbox-configurable/checkbox-configurable-example.html +++ b/src/material-examples/checkbox-configurable/checkbox-configurable-example.html @@ -1,40 +1,40 @@ - - + +

    Checkbox configuration

    - Checked - Indeterminate + Checked + Indeterminate
    - - Start - End - + + Start + End +
    - Disabled + Disabled
    -     -     + + - - + +

    Result

    - I'm a checkbox - +
    -     -     + + diff --git a/src/material-examples/checkbox-overview/checkbox-overview-example.html b/src/material-examples/checkbox-overview/checkbox-overview-example.html index c301bbe5ccc2..b5b049fae683 100644 --- a/src/material-examples/checkbox-overview/checkbox-overview-example.html +++ b/src/material-examples/checkbox-overview/checkbox-overview-example.html @@ -1 +1 @@ -Check me! +Check me! diff --git a/src/material-examples/chips-input/chips-input-example.html b/src/material-examples/chips-input/chips-input-example.html index f80ef3152670..3d118fcbfd30 100644 --- a/src/material-examples/chips-input/chips-input-example.html +++ b/src/material-examples/chips-input/chips-input-example.html @@ -1,14 +1,14 @@ - - - + + {{fruit.name}} - cancel - - - - + cancel + + + + diff --git a/src/material-examples/chips-input/chips-input-example.ts b/src/material-examples/chips-input/chips-input-example.ts index 89adf943c181..934fdcdc83d3 100644 --- a/src/material-examples/chips-input/chips-input-example.ts +++ b/src/material-examples/chips-input/chips-input-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdChipInputEvent} from '@angular/material'; +import {MatChipInputEvent} from '@angular/material'; import {ENTER} from '@angular/cdk/keycodes'; const COMMA = 188; @@ -28,7 +28,7 @@ export class ChipsInputExample { ]; - add(event: MdChipInputEvent): void { + add(event: MatChipInputEvent): void { let input = event.input; let value = event.value; diff --git a/src/material-examples/chips-overview/chips-overview-example.html b/src/material-examples/chips-overview/chips-overview-example.html index bb0410569251..3228bc87b2d3 100644 --- a/src/material-examples/chips-overview/chips-overview-example.html +++ b/src/material-examples/chips-overview/chips-overview-example.html @@ -1,6 +1,6 @@ - - One fish - Two fish - Primary fish - Accent fish - + + One fish + Two fish + Primary fish + Accent fish + diff --git a/src/material-examples/chips-stacked/chips-stacked-example.css b/src/material-examples/chips-stacked/chips-stacked-example.css index dfb2f8c00aa2..3c84f24c152f 100644 --- a/src/material-examples/chips-stacked/chips-stacked-example.css +++ b/src/material-examples/chips-stacked/chips-stacked-example.css @@ -1,3 +1,3 @@ -md-chip { +mat-chip { max-width: 200px; } diff --git a/src/material-examples/chips-stacked/chips-stacked-example.html b/src/material-examples/chips-stacked/chips-stacked-example.html index 27677b1c6e6d..aa429ab3a8a6 100644 --- a/src/material-examples/chips-stacked/chips-stacked-example.html +++ b/src/material-examples/chips-stacked/chips-stacked-example.html @@ -1,7 +1,7 @@ - - + {{chipColor.name}} - - + + diff --git a/src/material-examples/datepicker-api/datepicker-api-example.html b/src/material-examples/datepicker-api/datepicker-api-example.html index a41723d81cbb..453fe29805a5 100644 --- a/src/material-examples/datepicker-api/datepicker-api-example.html +++ b/src/material-examples/datepicker-api/datepicker-api-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/datepicker-filter/datepicker-filter-example.html b/src/material-examples/datepicker-filter/datepicker-filter-example.html index 4fc367dba397..6a44973b048e 100644 --- a/src/material-examples/datepicker-filter/datepicker-filter-example.html +++ b/src/material-examples/datepicker-filter/datepicker-filter-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/datepicker-min-max/datepicker-min-max-example.html b/src/material-examples/datepicker-min-max/datepicker-min-max-example.html index 216fcd260a2c..4ee60cdfdd86 100644 --- a/src/material-examples/datepicker-min-max/datepicker-min-max-example.html +++ b/src/material-examples/datepicker-min-max/datepicker-min-max-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/datepicker-overview/datepicker-overview-example.html b/src/material-examples/datepicker-overview/datepicker-overview-example.html index 41a2ba3c9ca4..f82880547b24 100644 --- a/src/material-examples/datepicker-overview/datepicker-overview-example.html +++ b/src/material-examples/datepicker-overview/datepicker-overview-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/datepicker-start-view/datepicker-start-view-example.html b/src/material-examples/datepicker-start-view/datepicker-start-view-example.html index 0391c9be8ff5..e10afcab6d26 100644 --- a/src/material-examples/datepicker-start-view/datepicker-start-view-example.html +++ b/src/material-examples/datepicker-start-view/datepicker-start-view-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/datepicker-touch/datepicker-touch-example.html b/src/material-examples/datepicker-touch/datepicker-touch-example.html index a9579710205a..7cec1f8e330a 100644 --- a/src/material-examples/datepicker-touch/datepicker-touch-example.html +++ b/src/material-examples/datepicker-touch/datepicker-touch-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/dialog-content/dialog-content-example-dialog.html b/src/material-examples/dialog-content/dialog-content-example-dialog.html index 46c978dae389..2ecde77595ea 100644 --- a/src/material-examples/dialog-content/dialog-content-example-dialog.html +++ b/src/material-examples/dialog-content/dialog-content-example-dialog.html @@ -1,5 +1,5 @@ -

    Install Angular

    - +

    Install Angular

    +

    DEVELOP ACROSS ALL PLATFORMS

    Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.

    @@ -18,8 +18,8 @@

    INCREDIBLE TOOLING

    LOVED BY MILLIONS

    From prototype through global deployment, Angular delivers the productivity and scalable infrastructure that supports Google's largest applications.

    -     - - - - + + + + + diff --git a/src/material-examples/dialog-content/dialog-content-example.html b/src/material-examples/dialog-content/dialog-content-example.html index 176a3c411e7f..cdfc2fb33b2a 100644 --- a/src/material-examples/dialog-content/dialog-content-example.html +++ b/src/material-examples/dialog-content/dialog-content-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/dialog-content/dialog-content-example.ts b/src/material-examples/dialog-content/dialog-content-example.ts index 39b0d453ddf7..8cd5c6e942f1 100644 --- a/src/material-examples/dialog-content/dialog-content-example.ts +++ b/src/material-examples/dialog-content/dialog-content-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import {MatDialog} from '@angular/material'; /** * @title Dialog with header, scrollable content and actions @@ -9,7 +9,7 @@ import {MdDialog} from '@angular/material'; templateUrl: 'dialog-content-example.html', }) export class DialogContentExample { - constructor(public dialog: MdDialog) {} + constructor(public dialog: MatDialog) {} openDialog() { const dialogRef = this.dialog.open(DialogContentExampleDialog, { diff --git a/src/material-examples/dialog-data/dialog-data-example-dialog.html b/src/material-examples/dialog-data/dialog-data-example-dialog.html index aa9b428ef8ce..6d263bacf3c9 100644 --- a/src/material-examples/dialog-data/dialog-data-example-dialog.html +++ b/src/material-examples/dialog-data/dialog-data-example-dialog.html @@ -1,5 +1,5 @@ -

    Favorite Animal

    -
    +

    Favorite Animal

    +
    My favorite animal is:
    • diff --git a/src/material-examples/dialog-data/dialog-data-example.html b/src/material-examples/dialog-data/dialog-data-example.html index 176a3c411e7f..cdfc2fb33b2a 100644 --- a/src/material-examples/dialog-data/dialog-data-example.html +++ b/src/material-examples/dialog-data/dialog-data-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/dialog-data/dialog-data-example.ts b/src/material-examples/dialog-data/dialog-data-example.ts index bdd0f4bc119f..08b00d08de46 100644 --- a/src/material-examples/dialog-data/dialog-data-example.ts +++ b/src/material-examples/dialog-data/dialog-data-example.ts @@ -1,5 +1,5 @@ import {Component, Inject} from '@angular/core'; -import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; +import {MatDialog, MAT_DIALOG_DATA} from '@angular/material'; /** * @title Injecting data when opening a dialog @@ -9,7 +9,7 @@ import {MdDialog, MD_DIALOG_DATA} from '@angular/material'; templateUrl: 'dialog-data-example.html', }) export class DialogDataExample { - constructor(public dialog: MdDialog) {} + constructor(public dialog: MatDialog) {} openDialog() { this.dialog.open(DialogDataExampleDialog, { @@ -25,5 +25,5 @@ export class DialogDataExample { templateUrl: 'dialog-data-example-dialog.html', }) export class DialogDataExampleDialog { - constructor(@Inject(MD_DIALOG_DATA) public data: any) {} + constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} } diff --git a/src/material-examples/dialog-elements/dialog-elements-example-dialog.html b/src/material-examples/dialog-elements/dialog-elements-example-dialog.html index 5238b0eb6c19..1bddf5bfdaa6 100644 --- a/src/material-examples/dialog-elements/dialog-elements-example-dialog.html +++ b/src/material-examples/dialog-elements/dialog-elements-example-dialog.html @@ -1,5 +1,5 @@ -

      Dialog with elements

      -
      This dialog showcases the title, close, content and actions elements.
      -
      - +

      Dialog with elements

      +
      This dialog showcases the title, close, content and actions elements.
      +
      +
      diff --git a/src/material-examples/dialog-elements/dialog-elements-example.html b/src/material-examples/dialog-elements/dialog-elements-example.html index 40637c4bd638..cf2103810fc9 100644 --- a/src/material-examples/dialog-elements/dialog-elements-example.html +++ b/src/material-examples/dialog-elements/dialog-elements-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/dialog-elements/dialog-elements-example.ts b/src/material-examples/dialog-elements/dialog-elements-example.ts index 37f3703e3aa4..b179ee54b54f 100644 --- a/src/material-examples/dialog-elements/dialog-elements-example.ts +++ b/src/material-examples/dialog-elements/dialog-elements-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdDialog} from '@angular/material'; +import {MatDialog} from '@angular/material'; /** * @title Dialog elements @@ -9,7 +9,7 @@ import {MdDialog} from '@angular/material'; templateUrl: 'dialog-elements-example.html', }) export class DialogElementsExample { - constructor(public dialog: MdDialog) { } + constructor(public dialog: MatDialog) { } openDialog() { this.dialog.open(DialogElementsExampleDialog); diff --git a/src/material-examples/dialog-overview/dialog-overview-example-dialog.html b/src/material-examples/dialog-overview/dialog-overview-example-dialog.html index b4214fbf1f9f..fbd80e3c287d 100644 --- a/src/material-examples/dialog-overview/dialog-overview-example-dialog.html +++ b/src/material-examples/dialog-overview/dialog-overview-example-dialog.html @@ -1,11 +1,11 @@ -

      Hi {{data.name}}

      -
      +

      Hi {{data.name}}

      +

      What's your favorite animal?

      - - - + + +
      -
      - - +
      + +
      diff --git a/src/material-examples/dialog-overview/dialog-overview-example.html b/src/material-examples/dialog-overview/dialog-overview-example.html index b6911190f152..00e14854f5ca 100644 --- a/src/material-examples/dialog-overview/dialog-overview-example.html +++ b/src/material-examples/dialog-overview/dialog-overview-example.html @@ -1,11 +1,11 @@
      1. - - - + + +
      2. - +
      3. You chose: {{animal}} diff --git a/src/material-examples/dialog-overview/dialog-overview-example.ts b/src/material-examples/dialog-overview/dialog-overview-example.ts index 5dec934d877e..53f7db3a5529 100644 --- a/src/material-examples/dialog-overview/dialog-overview-example.ts +++ b/src/material-examples/dialog-overview/dialog-overview-example.ts @@ -1,5 +1,5 @@ import {Component, Inject} from '@angular/core'; -import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material'; +import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material'; /** * @title Dialog Overview @@ -13,7 +13,7 @@ export class DialogOverviewExample { animal: string; name: string; - constructor(public dialog: MdDialog) {} + constructor(public dialog: MatDialog) {} openDialog(): void { let dialogRef = this.dialog.open(DialogOverviewExampleDialog, { @@ -36,8 +36,8 @@ export class DialogOverviewExample { export class DialogOverviewExampleDialog { constructor( - public dialogRef: MdDialogRef, - @Inject(MD_DIALOG_DATA) public data: any) { } + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any) { } onNoClick(): void { this.dialogRef.close(); diff --git a/src/material-examples/expansion-overview/expansion-overview-example.html b/src/material-examples/expansion-overview/expansion-overview-example.html index 48c0cc50bf86..9d105bef4d64 100644 --- a/src/material-examples/expansion-overview/expansion-overview-example.html +++ b/src/material-examples/expansion-overview/expansion-overview-example.html @@ -1,18 +1,18 @@ - - - + + + Personal data - - + + Type your name and age - - + + - - - + + + - - - - + + + + diff --git a/src/material-examples/expansion-steps/expansion-steps-example.html b/src/material-examples/expansion-steps/expansion-steps-example.html index e81ede44445c..1a4880c2cdc8 100644 --- a/src/material-examples/expansion-steps/expansion-steps-example.html +++ b/src/material-examples/expansion-steps/expansion-steps-example.html @@ -1,69 +1,69 @@ - - - - + + + + Personal data - - + + Type your name and age - account_circle - - + account_circle + + - - - + + + - - - + + + - - - - + + + + - - - + + + Destination - - + + Type the country name - map - - + map + + - - - + + + - - - - - + + + + + - - - + + + Day of the trip - - + + Inform the date you wish to travel - date_range - - + date_range + + - - - - + + + + - - - - - + + + + + - + diff --git a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.html b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.html index 19c84dd5b853..c79507b49a6f 100644 --- a/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.html +++ b/src/material-examples/grid-list-dynamic/grid-list-dynamic-example.html @@ -1,9 +1,9 @@ - - + {{tile.text}} - - + + diff --git a/src/material-examples/grid-list-overview/grid-list-overview-example.css b/src/material-examples/grid-list-overview/grid-list-overview-example.css index 2598f58f5190..fdb01abc34f0 100644 --- a/src/material-examples/grid-list-overview/grid-list-overview-example.css +++ b/src/material-examples/grid-list-overview/grid-list-overview-example.css @@ -1,3 +1,3 @@ -md-grid-tile { +mat-grid-tile { background: lightblue; } diff --git a/src/material-examples/grid-list-overview/grid-list-overview-example.html b/src/material-examples/grid-list-overview/grid-list-overview-example.html index 6651887f603f..ae338547cedb 100644 --- a/src/material-examples/grid-list-overview/grid-list-overview-example.html +++ b/src/material-examples/grid-list-overview/grid-list-overview-example.html @@ -1,6 +1,6 @@ - - 1 - 2 - 3 - 4 - + + 1 + 2 + 3 + 4 + diff --git a/src/material-examples/icon-overview/icon-overview-example.html b/src/material-examples/icon-overview/icon-overview-example.html index dd46af80f6cb..7afdf57b1631 100644 --- a/src/material-examples/icon-overview/icon-overview-example.html +++ b/src/material-examples/icon-overview/icon-overview-example.html @@ -1 +1 @@ -home +home diff --git a/src/material-examples/icon-svg-example/icon-svg-example.html b/src/material-examples/icon-svg-example/icon-svg-example.html index ac74cf7908dd..ed7e8eb9b50e 100644 --- a/src/material-examples/icon-svg-example/icon-svg-example.html +++ b/src/material-examples/icon-svg-example/icon-svg-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/icon-svg-example/icon-svg-example.ts b/src/material-examples/icon-svg-example/icon-svg-example.ts index 53775feb59fe..c9a4b5f67b38 100644 --- a/src/material-examples/icon-svg-example/icon-svg-example.ts +++ b/src/material-examples/icon-svg-example/icon-svg-example.ts @@ -1,6 +1,6 @@ import {Component} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; -import {MdIconRegistry} from '@angular/material'; +import {MatIconRegistry} from '@angular/material'; /** * @title SVG icons @@ -10,7 +10,7 @@ import {MdIconRegistry} from '@angular/material'; templateUrl: 'icon-svg-example.html', }) export class IconSvgExample { - constructor(iconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { + constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { iconRegistry.addSvgIcon( 'thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg')); diff --git a/src/material-examples/input-clearable/input-clearable-example.html b/src/material-examples/input-clearable/input-clearable-example.html index c8be13f98150..4e1721a0f44d 100644 --- a/src/material-examples/input-clearable/input-clearable-example.html +++ b/src/material-examples/input-clearable/input-clearable-example.html @@ -1,6 +1,6 @@ - - - - + diff --git a/src/material-examples/input-errors/input-errors-example.html b/src/material-examples/input-errors/input-errors-example.html index 4434b6ea941c..c8fbba32201c 100644 --- a/src/material-examples/input-errors/input-errors-example.html +++ b/src/material-examples/input-errors/input-errors-example.html @@ -1,11 +1,11 @@
        - - - + + + Please enter a valid email address - - + + Email is required - - + + diff --git a/src/material-examples/input-form/input-form-example.html b/src/material-examples/input-form/input-form-example.html index f7abf80888be..8cf31e056b62 100644 --- a/src/material-examples/input-form/input-form-example.html +++ b/src/material-examples/input-form/input-form-example.html @@ -1,36 +1,36 @@
        - - - + + +

    - - + +
    - - - - + + + +

    - - - - - - + + + + + +

    - - - + + +
    - - - - - - {{postalCode.value.length}} / 5 - + + + + + + {{postalCode.value.length}} / 5 +
    diff --git a/src/material-examples/input-hint/input-hint-example.html b/src/material-examples/input-hint/input-hint-example.html index f7e36d1ddb1d..b7595cfa636b 100644 --- a/src/material-examples/input-hint/input-hint-example.html +++ b/src/material-examples/input-hint/input-hint-example.html @@ -1,9 +1,9 @@
    - - - Don't disclose personal info - {{message.value.length}} / 256 - + + + Don't disclose personal info + {{message.value.length}} / 256 +
    diff --git a/src/material-examples/input-overview/input-overview-example.html b/src/material-examples/input-overview/input-overview-example.html index cae5b1f0f6c1..c4daebdcc9db 100644 --- a/src/material-examples/input-overview/input-overview-example.html +++ b/src/material-examples/input-overview/input-overview-example.html @@ -1,5 +1,5 @@
    - - - + + +
    diff --git a/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html b/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html index 25485d1fa1c3..7bff7e420fcd 100644 --- a/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html +++ b/src/material-examples/input-prefix-suffix/input-prefix-suffix-example.html @@ -1,9 +1,9 @@
    - - +1   - - mode_edit - + + +1   + + mode_edit +
    diff --git a/src/material-examples/list-overview/list-overview-example.html b/src/material-examples/list-overview/list-overview-example.html index ada715ee0acf..4c59db7aa84e 100644 --- a/src/material-examples/list-overview/list-overview-example.html +++ b/src/material-examples/list-overview/list-overview-example.html @@ -1,5 +1,5 @@ - - Item 1 - Item 2 - Item 3 - + + Item 1 + Item 2 + Item 3 + diff --git a/src/material-examples/list-sections/list-sections-example.html b/src/material-examples/list-sections/list-sections-example.html index 38d20f97eedc..ecb32bb2e8e6 100644 --- a/src/material-examples/list-sections/list-sections-example.html +++ b/src/material-examples/list-sections/list-sections-example.html @@ -1,15 +1,15 @@ - -

    Folders

    - - folder -

    {{folder.name}}

    -

    {{folder.updated | date}}

    -     - -

    Notes

    - - note -

    {{note.name}}

    -

    {{note.updated | date}}

    -     -     + +

    Folders

    + + folder +

    {{folder.name}}

    +

    {{folder.updated | date}}

    +     + +

    Notes

    + + note +

    {{note.name}}

    +

    {{note.updated | date}}

    +     +     diff --git a/src/material-examples/list-selection/list-selection-example.html b/src/material-examples/list-selection/list-selection-example.html index cd1d9f07353c..d068febecc21 100644 --- a/src/material-examples/list-selection/list-selection-example.html +++ b/src/material-examples/list-selection/list-selection-example.html @@ -1,8 +1,8 @@ - - + + {{shoe}} - - + +

    Options selected: {{shoes.selectedOptions.selected.length}} diff --git a/src/material-examples/material-module.ts b/src/material-examples/material-module.ts index 34309d98dbbd..e399634d801f 100644 --- a/src/material-examples/material-module.ts +++ b/src/material-examples/material-module.ts @@ -2,48 +2,48 @@ import {NgModule} from '@angular/core'; import {CdkTableModule} from '@angular/cdk/table'; import { - MdAutocompleteModule, MdButtonModule, MdButtonToggleModule, MdPaginatorModule, - MdCardModule, MdCheckboxModule, MdChipsModule, MdDatepickerModule, - MdDialogModule, MdGridListModule, MdIconModule, MdInputModule, - MdListModule, MdMenuModule, MdProgressBarModule, MdProgressSpinnerModule, - MdRadioModule, MdSelectModule, MdSidenavModule, MdSliderModule, MdSortModule, - MdSlideToggleModule, MdSnackBarModule, MdTableModule, MdTabsModule, MdToolbarModule, - MdTooltipModule, MdFormFieldModule, MdExpansionModule, MdStepperModule + MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatPaginatorModule, + MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, + MatDialogModule, MatGridListModule, MatIconModule, MatInputModule, + MatListModule, MatMenuModule, MatProgressBarModule, MatProgressSpinnerModule, + MatRadioModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSortModule, + MatSlideToggleModule, MatSnackBarModule, MatTableModule, MatTabsModule, MatToolbarModule, + MatTooltipModule, MatFormFieldModule, MatExpansionModule, MatStepperModule } from '@angular/material'; @NgModule({ exports: [ CdkTableModule, - MdAutocompleteModule, - MdButtonModule, - MdButtonToggleModule, - MdCardModule, - MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdSelectModule, - MdSlideToggleModule, - MdSliderModule, - MdSidenavModule, - MdSnackBarModule, - MdStepperModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - MdPaginatorModule, - MdSortModule, - MdTableModule + MatAutocompleteModule, + MatButtonModule, + MatButtonToggleModule, + MatCardModule, + MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatSelectModule, + MatSlideToggleModule, + MatSliderModule, + MatSidenavModule, + MatSnackBarModule, + MatStepperModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatPaginatorModule, + MatSortModule, + MatTableModule ] }) export class ExampleMaterialModule {} diff --git a/src/material-examples/menu-icons/menu-icons-example.html b/src/material-examples/menu-icons/menu-icons-example.html index e14942451644..a5ea164cf8d6 100644 --- a/src/material-examples/menu-icons/menu-icons-example.html +++ b/src/material-examples/menu-icons/menu-icons-example.html @@ -1,17 +1,17 @@ - - - - - - + diff --git a/src/material-examples/menu-overview/menu-overview-example.html b/src/material-examples/menu-overview/menu-overview-example.html index 2b5d246c298e..64f76da72b27 100644 --- a/src/material-examples/menu-overview/menu-overview-example.html +++ b/src/material-examples/menu-overview/menu-overview-example.html @@ -1,5 +1,5 @@ - - - - - + + + + + diff --git a/src/material-examples/nested-menu/nested-menu-example.html b/src/material-examples/nested-menu/nested-menu-example.html index bd972629fb54..a9f430b12445 100644 --- a/src/material-examples/nested-menu/nested-menu-example.html +++ b/src/material-examples/nested-menu/nested-menu-example.html @@ -1,47 +1,47 @@ - + - - - - + + + + - - - - - - - + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - - - + + + + + + + diff --git a/src/material-examples/paginator-configurable/paginator-configurable-example.html b/src/material-examples/paginator-configurable/paginator-configurable-example.html index e1ce734f74fe..665cacfab07c 100644 --- a/src/material-examples/paginator-configurable/paginator-configurable-example.html +++ b/src/material-examples/paginator-configurable/paginator-configurable-example.html @@ -1,24 +1,24 @@ - + List length: - - + + - + Page size: - - - + + + Page size options: - - + - - +

    Page Change Event Properties
    diff --git a/src/material-examples/paginator-configurable/paginator-configurable-example.ts b/src/material-examples/paginator-configurable/paginator-configurable-example.ts index ba3df8db743f..5ee316719e63 100644 --- a/src/material-examples/paginator-configurable/paginator-configurable-example.ts +++ b/src/material-examples/paginator-configurable/paginator-configurable-example.ts @@ -9,12 +9,12 @@ import {PageEvent} from '@angular/material'; templateUrl: 'paginator-configurable-example.html', }) export class PaginatorConfigurableExample { - // MdPaginator Inputs + // MatPaginator Inputs length = 100; pageSize = 10; pageSizeOptions = [5, 10, 25, 100]; - // MdPaginator Output + // MatPaginator Output pageEvent: PageEvent; setPageSizeOptions(setPageSizeOptionsInput: string) { diff --git a/src/material-examples/paginator-overview/paginator-overview-example.html b/src/material-examples/paginator-overview/paginator-overview-example.html index 010a9e5d4e45..9269f3b47380 100644 --- a/src/material-examples/paginator-overview/paginator-overview-example.html +++ b/src/material-examples/paginator-overview/paginator-overview-example.html @@ -1,4 +1,4 @@ - - + diff --git a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html index 93937b77a8b8..bdde8c6126a9 100644 --- a/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html +++ b/src/material-examples/progress-bar-configurable/progress-bar-configurable-example.html @@ -1,63 +1,63 @@ - - + +

    Progress bar configuration

    - - + + Primary - - + + Accent - - + + Warn - - + +
    - - + + Determinate - - + + Indeterminate - - + + Buffer - - + + Query - - + +
    - +
    - +
    -     -     + + - - + +

    Result

    - - +
    -     -     + + diff --git a/src/material-examples/progress-bar-overview/progress-bar-overview-example.html b/src/material-examples/progress-bar-overview/progress-bar-overview-example.html index 8ab16e9cfc13..f6ba0575d4ee 100644 --- a/src/material-examples/progress-bar-overview/progress-bar-overview-example.html +++ b/src/material-examples/progress-bar-overview/progress-bar-overview-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html index 1ba3183acebf..538321c81938 100644 --- a/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html +++ b/src/material-examples/progress-spinner-configurable/progress-spinner-configurable-example.html @@ -1,49 +1,49 @@ - - + +

    Progress spinner configuration

    - - + + Primary - - + + Accent - - + + Warn - - + +
    - - + + Determinate - - + + Indeterminate - - + +
    - +
    -     -     - - + + + +

    Result

    - - -     -     + + + diff --git a/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.html b/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.html index cd768c67385c..34e51f70fc2f 100644 --- a/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.html +++ b/src/material-examples/progress-spinner-overview/progress-spinner-overview-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/radio-ng-model/radio-ng-model-example.html b/src/material-examples/radio-ng-model/radio-ng-model-example.html index 108971b5739a..4dd923173b75 100644 --- a/src/material-examples/radio-ng-model/radio-ng-model-example.html +++ b/src/material-examples/radio-ng-model/radio-ng-model-example.html @@ -1,6 +1,6 @@ - - + + {{season}} - - + +
    Your favorite season is: {{favoriteSeason}}
    diff --git a/src/material-examples/radio-overview/radio-overview-example.html b/src/material-examples/radio-overview/radio-overview-example.html index 4038381cc49e..cadd1b6e8d59 100644 --- a/src/material-examples/radio-overview/radio-overview-example.html +++ b/src/material-examples/radio-overview/radio-overview-example.html @@ -1,4 +1,4 @@ - - Option 1 - Option 2 - + + Option 1 + Option 2 + diff --git a/src/material-examples/select-form/select-form-example.html b/src/material-examples/select-form/select-form-example.html index 31252dd70a66..484c7282bc44 100644 --- a/src/material-examples/select-form/select-form-example.html +++ b/src/material-examples/select-form/select-form-example.html @@ -1,11 +1,11 @@
    - - - + + + {{food.viewValue}} - - - + + +

    Selected value: {{selectedValue}}

    diff --git a/src/material-examples/select-overview/select-overview-example.html b/src/material-examples/select-overview/select-overview-example.html index bf3897383572..f02b07a123ad 100644 --- a/src/material-examples/select-overview/select-overview-example.html +++ b/src/material-examples/select-overview/select-overview-example.html @@ -1,7 +1,7 @@ - - - + + + {{ food.viewValue }} - - - + + + diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.css b/src/material-examples/sidenav-fab/sidenav-fab-example.css index 6d58f0f24b13..80b88561b599 100644 --- a/src/material-examples/sidenav-fab/sidenav-fab-example.css +++ b/src/material-examples/sidenav-fab/sidenav-fab-example.css @@ -4,12 +4,12 @@ border: 1px solid rgba(0, 0, 0, 0.5); } -.example-sidenav-fab-container md-sidenav { +.example-sidenav-fab-container mat-sidenav { max-width: 200px; } .example-sidenav-fab-container .mat-sidenav-content, -.example-sidenav-fab-container md-sidenav { +.example-sidenav-fab-container mat-sidenav { display: flex; overflow: visible; } diff --git a/src/material-examples/sidenav-fab/sidenav-fab-example.html b/src/material-examples/sidenav-fab/sidenav-fab-example.html index f194c09852e2..9053ced258a3 100644 --- a/src/material-examples/sidenav-fab/sidenav-fab-example.html +++ b/src/material-examples/sidenav-fab/sidenav-fab-example.html @@ -1,7 +1,7 @@ - - -
    Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, @@ -14,9 +14,9 @@ tristique vehicula nibh ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien consectetuer.
    -     -
    Lorem ipsum dolor sit amet, pede a libero aenean phasellus, lectus metus sint ut risus, fusce @@ -29,4 +29,4 @@ ipsum vivamus, proin proin. Porta commodo nibh quis libero amet. Taciti dui, sapien consectetuer.
    -     + diff --git a/src/material-examples/sidenav-overview/sidenav-overview-example.html b/src/material-examples/sidenav-overview/sidenav-overview-example.html index 757e4b2d43f2..9069c886c896 100644 --- a/src/material-examples/sidenav-overview/sidenav-overview-example.html +++ b/src/material-examples/sidenav-overview/sidenav-overview-example.html @@ -1,12 +1,12 @@ - - + + Jolly good! - +
    -
    -     + diff --git a/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html b/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html index 88099f4b0254..b7f41c0090c4 100644 --- a/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html +++ b/src/material-examples/slide-toggle-configurable/slide-toggle-configurable-example.html @@ -1,44 +1,44 @@ - - + +

    Slider configuration

    - - + + Primary - - + + Accent - - + + Warn - - + +
    - Checked + Checked
    - Disabled + Disabled
    -     -     + + - - + +

    Result

    - Slide me! - +
    -     -     + + diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css index 8567e7f853bb..aaec1dbc305e 100644 --- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css +++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.css @@ -1,4 +1,4 @@ -.example-form md-slide-toggle { +.example-form mat-slide-toggle { margin: 8px 0; display: block; } diff --git a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html index 0a2b897d22f8..3ce5f440b735 100644 --- a/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html +++ b/src/material-examples/slide-toggle-forms/slide-toggle-forms-example.html @@ -1,25 +1,25 @@

    Slide Toggle using a simple NgModel.

    -Slide Toggle Checked: {{ isChecked }} +Slide Toggle Checked: {{ isChecked }}

    Slide Toggle inside of a Template-driven form

    - Enable Wifi - Accept Terms of Service + Enable Wifi + Accept Terms of Service - +

    Slide Toggle inside of a Reactive form

    - Enable Wifi - Accept Terms of Service + Enable Wifi + Accept Terms of Service

    Form Group Status: {{ formGroup.status}}

    - +
    diff --git a/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.html b/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.html index 6b9586e148fc..d9d6ab193f34 100644 --- a/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.html +++ b/src/material-examples/slide-toggle-overview/slide-toggle-overview-example.html @@ -1 +1 @@ -Slide me! +Slide me! diff --git a/src/material-examples/slider-configurable/slider-configurable-example.html b/src/material-examples/slider-configurable/slider-configurable-example.html index 5eb3214fd0a1..666753cdf4c6 100644 --- a/src/material-examples/slider-configurable/slider-configurable-example.html +++ b/src/material-examples/slider-configurable/slider-configurable-example.html @@ -1,53 +1,53 @@ - - + +

    Slider configuration

    - - - - - - - - - - - - + + + + + + + + + + + +
    - Show ticks - + Show ticks + Auto ticks - - - - + + + +
    - Show thumb label + Show thumb label
    - Vertical - Inverted + Vertical + Inverted
    - Disabled + Disabled
    -     -     + + - - + +

    Result

    - Result [tick-interval]="tickInterval" [value]="value" [vertical]="vertical"> - -     -     + + + diff --git a/src/material-examples/slider-overview/slider-overview-example.css b/src/material-examples/slider-overview/slider-overview-example.css index 8dfe08ccc21d..90bd10ae0222 100644 --- a/src/material-examples/slider-overview/slider-overview-example.css +++ b/src/material-examples/slider-overview/slider-overview-example.css @@ -1,4 +1,4 @@ /** No CSS for this example */ -md-slider { +mat-slider { width: 300px; } diff --git a/src/material-examples/slider-overview/slider-overview-example.html b/src/material-examples/slider-overview/slider-overview-example.html index 9a92c8f867dd..49162f5fe3ec 100644 --- a/src/material-examples/slider-overview/slider-overview-example.html +++ b/src/material-examples/slider-overview/slider-overview-example.html @@ -1 +1 @@ - + diff --git a/src/material-examples/snack-bar-component/snack-bar-component-example.html b/src/material-examples/snack-bar-component/snack-bar-component-example.html index 69fe01bc3dcb..3c8c74b319a9 100644 --- a/src/material-examples/snack-bar-component/snack-bar-component-example.html +++ b/src/material-examples/snack-bar-component/snack-bar-component-example.html @@ -1,3 +1,3 @@ - diff --git a/src/material-examples/snack-bar-component/snack-bar-component-example.ts b/src/material-examples/snack-bar-component/snack-bar-component-example.ts index 8aac00a13153..7c685c53985a 100644 --- a/src/material-examples/snack-bar-component/snack-bar-component-example.ts +++ b/src/material-examples/snack-bar-component/snack-bar-component-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; /** * @title Snack-bar with a custom component @@ -9,7 +9,7 @@ import {MdSnackBar} from '@angular/material'; templateUrl: 'snack-bar-component-example.html', }) export class SnackBarComponentExample { - constructor(public snackBar: MdSnackBar) {} + constructor(public snackBar: MatSnackBar) {} openSnackBar() { this.snackBar.openFromComponent(PizzaPartyComponent, { diff --git a/src/material-examples/snack-bar-overview/snack-bar-overview-example.html b/src/material-examples/snack-bar-overview/snack-bar-overview-example.html index 757612c187f1..67065299a718 100644 --- a/src/material-examples/snack-bar-overview/snack-bar-overview-example.html +++ b/src/material-examples/snack-bar-overview/snack-bar-overview-example.html @@ -1,9 +1,9 @@ - - - + + + - - - + + + - + diff --git a/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts b/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts index 4d1980dc9d47..010634ef1dca 100644 --- a/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts +++ b/src/material-examples/snack-bar-overview/snack-bar-overview-example.ts @@ -1,5 +1,5 @@ import {Component} from '@angular/core'; -import {MdSnackBar} from '@angular/material'; +import {MatSnackBar} from '@angular/material'; /** * @title Basic snack-bar @@ -9,7 +9,7 @@ import {MdSnackBar} from '@angular/material'; templateUrl: 'snack-bar-overview-example.html', }) export class SnackBarOverviewExample { - constructor(public snackBar: MdSnackBar) {} + constructor(public snackBar: MatSnackBar) {} openSnackBar(message: string, action: string) { this.snackBar.open(message, action, { diff --git a/src/material-examples/sort-overview/sort-overview-example.html b/src/material-examples/sort-overview/sort-overview-example.html index 342f38554140..2b970af18c6a 100644 --- a/src/material-examples/sort-overview/sort-overview-example.html +++ b/src/material-examples/sort-overview/sort-overview-example.html @@ -1,10 +1,10 @@ - +
    - - - - - + + + + + diff --git a/src/material-examples/stepper-overview/stepper-overview-example.html b/src/material-examples/stepper-overview/stepper-overview-example.html index adff42f6f8ba..433cabb09cd2 100644 --- a/src/material-examples/stepper-overview/stepper-overview-example.html +++ b/src/material-examples/stepper-overview/stepper-overview-example.html @@ -1,32 +1,32 @@ - - + +
    - Fill out your name - - - + Fill out your name + + +
    - +
    -     - + +
    - Fill out your address - - - + Fill out your address + + +
    - - + +
    -     - - Done + + + Done You are now done.
    - +
    -     -     + + diff --git a/src/material-examples/table-basic/table-basic-example.html b/src/material-examples/table-basic/table-basic-example.html index 66dd020c6d55..35669c521e53 100644 --- a/src/material-examples/table-basic/table-basic-example.html +++ b/src/material-examples/table-basic/table-basic-example.html @@ -1,34 +1,34 @@
    - + - - No. - {{element.position}} + + No. + {{element.position}} - - Name - {{element.name}} + + Name + {{element.name}} - - Weight - {{element.weight}} + + Weight + {{element.weight}} - - Symbol - {{element.symbol}} + + Symbol + {{element.symbol}} - - - + + +
    diff --git a/src/material-examples/table-filtering/table-filtering-example.html b/src/material-examples/table-filtering/table-filtering-example.html index c3d8ca1d9773..0f1f6189d7c9 100644 --- a/src/material-examples/table-filtering/table-filtering-example.html +++ b/src/material-examples/table-filtering/table-filtering-example.html @@ -1,40 +1,40 @@
    - - - + + +
    - + - - ID - {{row.id}} + + ID + {{row.id}} - - Progress - {{row.progress}}% + + Progress + {{row.progress}}% - - Name - {{row.name}} + + Name + {{row.name}} - - Color - {{row.color}} + + Color + {{row.color}} - - - + + +
    diff --git a/src/material-examples/table-http/table-http-example.html b/src/material-examples/table-http/table-http-example.html index b74b898a782c..a176f2f624f3 100644 --- a/src/material-examples/table-http/table-http-example.html +++ b/src/material-examples/table-http/table-http-example.html @@ -1,51 +1,51 @@
    - +
    GitHub's API rate limit has been reached. It will be reset in one minute.
    - + - - # - {{ row.number }} + + # + {{ row.number }} - - Title - {{ row.title }} + + Title + {{ row.title }} - - State - {{ row.state }} + + State + {{ row.state }} - - + Created - - {{ row.created_at | date }} + + {{ row.created_at | date }} - - - + + + - - +
    diff --git a/src/material-examples/table-http/table-http-example.ts b/src/material-examples/table-http/table-http-example.ts index bd3fac7c6bae..1283f2b890a2 100644 --- a/src/material-examples/table-http/table-http-example.ts +++ b/src/material-examples/table-http/table-http-example.ts @@ -1,7 +1,7 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {Http} from '@angular/http'; import {DataSource} from '@angular/cdk/collections'; -import {MdPaginator, MdSort} from '@angular/material'; +import {MatPaginator, MatSort} from '@angular/material'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/merge'; import 'rxjs/add/observable/of'; @@ -23,8 +23,8 @@ export class TableHttpExample implements OnInit { exampleDatabase: ExampleHttpDao | null; dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; constructor(private http: Http) {} @@ -75,8 +75,8 @@ export class ExampleDataSource extends DataSource { isRateLimitReached = false; constructor(private exampleDatabase: ExampleHttpDao, - private paginator: MdPaginator, - private sort: MdSort) { + private paginator: MatPaginator, + private sort: MatSort) { super(); } diff --git a/src/material-examples/table-overview/table-overview-example.html b/src/material-examples/table-overview/table-overview-example.html index 35a12176e456..847ec261256a 100644 --- a/src/material-examples/table-overview/table-overview-example.html +++ b/src/material-examples/table-overview/table-overview-example.html @@ -1,7 +1,7 @@
    - - - + + +
    @@ -12,67 +12,67 @@
    - + - - - + + - - - - + + + - - + + - - ID - {{row.id}} + + ID + {{row.id}} - - Progress - {{row.progress}}% + + Progress + {{row.progress}}% - - Name - {{row.name}} + + Name + {{row.name}} - - Color - {{row.color}} + + Color + {{row.color}} - - + - - + +
    No users found matching filter.
    - - +
    diff --git a/src/material-examples/table-overview/table-overview-example.ts b/src/material-examples/table-overview/table-overview-example.ts index 2fd7d0883e47..b9a3e0f30400 100644 --- a/src/material-examples/table-overview/table-overview-example.ts +++ b/src/material-examples/table-overview/table-overview-example.ts @@ -1,6 +1,6 @@ import {Component, ElementRef, ViewChild} from '@angular/core'; import {DataSource} from '@angular/cdk/collections'; -import {MdPaginator, MdSort} from '@angular/material'; +import {MatPaginator, MatSort} from '@angular/material'; import {SelectionModel} from '@angular/cdk/collections'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; @@ -25,8 +25,8 @@ export class TableOverviewExample { selection = new SelectionModel(true, []); dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; @ViewChild('filter') filter: ElementRef; ngOnInit() { @@ -127,8 +127,8 @@ export class ExampleDataSource extends DataSource { renderedData: UserData[] = []; constructor(private _exampleDatabase: ExampleDatabase, - private _paginator: MdPaginator, - private _sort: MdSort) { + private _paginator: MatPaginator, + private _sort: MatSort) { super(); // Reset to the first page when the user changes the filter. diff --git a/src/material-examples/table-pagination/table-pagination-example.html b/src/material-examples/table-pagination/table-pagination-example.html index 6fa6eaad76b0..97f7d4ac8c17 100644 --- a/src/material-examples/table-pagination/table-pagination-example.html +++ b/src/material-examples/table-pagination/table-pagination-example.html @@ -1,42 +1,42 @@
    - + - - ID - {{row.id}} + + ID + {{row.id}} - - Progress - {{row.progress}}% + + Progress + {{row.progress}}% - - Name - {{row.name}} + + Name + {{row.name}} - - Color - {{row.color}} + + Color + {{row.color}} - - - + + + - - +
    diff --git a/src/material-examples/table-pagination/table-pagination-example.ts b/src/material-examples/table-pagination/table-pagination-example.ts index 1434c8f6acd9..3040bfec59d8 100644 --- a/src/material-examples/table-pagination/table-pagination-example.ts +++ b/src/material-examples/table-pagination/table-pagination-example.ts @@ -1,6 +1,6 @@ import {Component, ViewChild} from '@angular/core'; import {DataSource} from '@angular/cdk/collections'; -import {MdPaginator} from '@angular/material'; +import {MatPaginator} from '@angular/material'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; @@ -20,7 +20,7 @@ export class TablePaginationExample { exampleDatabase = new ExampleDatabase(); dataSource: ExampleDataSource | null; - @ViewChild(MdPaginator) paginator: MdPaginator; + @ViewChild(MatPaginator) paginator: MatPaginator; ngOnInit() { this.dataSource = new ExampleDataSource(this.exampleDatabase, this.paginator); @@ -82,7 +82,7 @@ export class ExampleDatabase { * should be rendered. */ export class ExampleDataSource extends DataSource { - constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MdPaginator) { + constructor(private _exampleDatabase: ExampleDatabase, private _paginator: MatPaginator) { super(); } diff --git a/src/material-examples/table-sorting/table-sorting-example.html b/src/material-examples/table-sorting/table-sorting-example.html index cde414b641d7..ec3ed853501a 100644 --- a/src/material-examples/table-sorting/table-sorting-example.html +++ b/src/material-examples/table-sorting/table-sorting-example.html @@ -1,34 +1,34 @@
    - + - - ID - {{row.id}} + + ID + {{row.id}} - - Progress - {{row.progress}}% + + Progress + {{row.progress}}% - - Name - {{row.name}} + + Name + {{row.name}} - - Color - {{row.color}} + + Color + {{row.color}} - - - + + +
    diff --git a/src/material-examples/table-sorting/table-sorting-example.ts b/src/material-examples/table-sorting/table-sorting-example.ts index 36df176410c0..36c6eea972a6 100644 --- a/src/material-examples/table-sorting/table-sorting-example.ts +++ b/src/material-examples/table-sorting/table-sorting-example.ts @@ -1,6 +1,6 @@ import {Component, ViewChild} from '@angular/core'; import {DataSource} from '@angular/cdk/collections'; -import {MdSort} from '@angular/material'; +import {MatSort} from '@angular/material'; import {BehaviorSubject} from 'rxjs/BehaviorSubject'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/operator/startWith'; @@ -20,7 +20,7 @@ export class TableSortingExample { exampleDatabase = new ExampleDatabase(); dataSource: ExampleDataSource | null; - @ViewChild(MdSort) sort: MdSort; + @ViewChild(MatSort) sort: MatSort; ngOnInit() { this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort); @@ -82,7 +82,7 @@ export class ExampleDatabase { * should be rendered. */ export class ExampleDataSource extends DataSource { - constructor(private _exampleDatabase: ExampleDatabase, private _sort: MdSort) { + constructor(private _exampleDatabase: ExampleDatabase, private _sort: MatSort) { super(); } diff --git a/src/material-examples/tabs-overview/tabs-overview-example.html b/src/material-examples/tabs-overview/tabs-overview-example.html index 173ece5dc477..2883cea104dd 100644 --- a/src/material-examples/tabs-overview/tabs-overview-example.html +++ b/src/material-examples/tabs-overview/tabs-overview-example.html @@ -1,4 +1,4 @@ - - Content 1 - Content 2 - + + Content 1 + Content 2 + diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.html b/src/material-examples/tabs-template-label/tabs-template-label-example.html index 75b5b19dafa0..d35bdb5ae63c 100644 --- a/src/material-examples/tabs-template-label/tabs-template-label-example.html +++ b/src/material-examples/tabs-template-label/tabs-template-label-example.html @@ -1,5 +1,5 @@ - - + +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. @@ -7,9 +7,9 @@ feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
    -     - - + + + ⭐
    @@ -19,11 +19,11 @@ feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
    -     - + + No content - - + +
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus. @@ -38,11 +38,11 @@ feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor, orci enim rutrum enim, vel tempor sapien arcu a tellus.
    -     - + + No content - - + + No content - -     \ No newline at end of file + + \ No newline at end of file diff --git a/src/material-examples/toolbar-multirow/toolbar-multirow-example.html b/src/material-examples/toolbar-multirow/toolbar-multirow-example.html index 9b178a21249f..a0c0e9cfde84 100644 --- a/src/material-examples/toolbar-multirow/toolbar-multirow-example.html +++ b/src/material-examples/toolbar-multirow/toolbar-multirow-example.html @@ -1,16 +1,16 @@ - + Custom Toolbar - + Second Line - verified_user - + verified_user + - + Third Line - favorite - delete - - + favorite + delete + + diff --git a/src/material-examples/toolbar-overview/toolbar-overview-example.html b/src/material-examples/toolbar-overview/toolbar-overview-example.html index bf8cc3998630..05520fda8642 100644 --- a/src/material-examples/toolbar-overview/toolbar-overview-example.html +++ b/src/material-examples/toolbar-overview/toolbar-overview-example.html @@ -1 +1 @@ -My App +My App diff --git a/src/material-examples/tooltip-overview/tooltip-overview-example.html b/src/material-examples/tooltip-overview/tooltip-overview-example.html index 8319a8545846..3a2a27493673 100644 --- a/src/material-examples/tooltip-overview/tooltip-overview-example.html +++ b/src/material-examples/tooltip-overview/tooltip-overview-example.html @@ -1 +1 @@ -I have a tooltip +I have a tooltip diff --git a/src/material-examples/tooltip-position/tooltip-position-example.html b/src/material-examples/tooltip-position/tooltip-position-example.html index 2187a60c71f4..a0fa7759ce21 100644 --- a/src/material-examples/tooltip-position/tooltip-position-example.html +++ b/src/material-examples/tooltip-position/tooltip-position-example.html @@ -1,13 +1,13 @@ -
    +
    Show tooltip - - - Before - After - Above - Below - Left - Right - - + + + Before + After + Above + Below + Left + Right + +
    diff --git a/src/material-moment-adapter/adapter/index.ts b/src/material-moment-adapter/adapter/index.ts index df84c7dabace..300f6e4e323f 100644 --- a/src/material-moment-adapter/adapter/index.ts +++ b/src/material-moment-adapter/adapter/index.ts @@ -11,10 +11,10 @@ import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_LOCALE_PROVIDER, - MD_DATE_FORMATS + MAT_DATE_FORMATS } from '@angular/material'; import {MomentDateAdapter} from './moment-date-adapter'; -import {MD_MOMENT_DATE_FORMATS} from './moment-date-formats'; +import {MAT_MOMENT_DATE_FORMATS} from './moment-date-formats'; export * from './moment-date-adapter'; export * from './moment-date-formats'; @@ -31,6 +31,6 @@ export class MomentDateModule {} @NgModule({ imports: [MomentDateModule], - providers: [{provide: MD_DATE_FORMATS, useValue: MD_MOMENT_DATE_FORMATS}], + providers: [{provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS}], }) -export class MdMomentDateModule {} +export class MatMomentDateModule {} diff --git a/src/material-moment-adapter/adapter/moment-date-formats.ts b/src/material-moment-adapter/adapter/moment-date-formats.ts index 6f4747f0493c..caec58f8a603 100644 --- a/src/material-moment-adapter/adapter/moment-date-formats.ts +++ b/src/material-moment-adapter/adapter/moment-date-formats.ts @@ -6,10 +6,10 @@ * found in the LICENSE file at https://angular.io/license */ -import {MdDateFormats} from '@angular/material'; +import {MatDateFormats} from '@angular/material'; -export const MD_MOMENT_DATE_FORMATS: MdDateFormats = { +export const MAT_MOMENT_DATE_FORMATS: MatDateFormats = { parse: { dateInput: 'l', }, diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index 988a6d2cb34d..6d0d3a6b77f0 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -1,227 +1,227 @@

    Kitchen sink app

    Autocomplete

    - - Grace Hopper - Anita Borg - Ada Lovelace - + + Grace Hopper + Anita Borg + Ada Lovelace +

    Button

    - - - - - + + + + + -Google -Google -Google -Google -Google +Google +Google +Google +Google +Google

    Button toggle

    Single selection

    - - Ketchup - Mustard - Mayo - + + Ketchup + Mustard + Mayo +

    Multi selection

    - - Ketchup - Mustard - Mayo - + + Ketchup + Mustard + Mayo +

    Standalone

    -Hyperspinner enabled +Hyperspinner enabled

    Card

    - + Simple card - + - - Complicated card - Subtitle - + + Complicated card + Subtitle +

    This is some stuff

    And more stuff

    -     - - - - - + + + + + + Hurray - -     + +

    Checkbox

    -With a label -Without a label +With a label +Without a label

    Chips

    - - Barbeque Cheddar - Sea Salt and Vinegar - Manta Ray - + + Barbeque Cheddar + Sea Salt and Vinegar + Manta Ray + - - Tomato - Scallion - Cilantro - + + Tomato + Scallion + Cilantro +

    Datepicker

    - - - - - + + + + +

    Grid list

    - - Fry - Leela - Amy - Bender - + + Fry + Leela + Amy + Bender +

    Icon

    -ligature +ligature

    Input

    - - - $  - .00 - Dolla dolla bills - Recession - + + + $  + .00 + Dolla dolla bills + Recession +

    List

    - - Robot - Android - Cyborg - + + Robot + Android + Cyborg + - - Search - Find - Seek - + + Search + Find + Seek +

    Menu

    - - - - - - + + + + + +

    Progress bar

    - - - - + + + +

    Radio buttons

    Radio group

    - - Charmander - Squirtle - Bulbasaur - + + Charmander + Squirtle + Bulbasaur +

    Standalone radios

    -White -Yellow -Green -Red +White +Yellow +Green +Red

    Select

    - - - Glass - Ceramic - Steel - - + + + Glass + Ceramic + Steel + +

    Sidenav

    - - On the side + + On the side Main content - +

    Slide-toggle

    -With a label -Without a label +With a label +Without a label

    Slider

    - - - + + +

    Tabs

    - - + + The overview - - - + + + API docs The API docs - - + + -
    - Google - Also Google +
    + Google + Also Google

    Paginator

    - - +

    Toolbar

    -Basic toolbar - - Multi row - Toolbar - +Basic toolbar + + Multi row + Toolbar +

    Sort

    -
    Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)Dessert (100g)CaloriesFat (g)Carbs (g)Protein (g)
    +
    - - - - - + + + + + @@ -235,20 +235,20 @@

    Sort

    Tooltip

    - +

    Autosize textarea

    - +

    Expansion Panel

    - - + + This is a panel description. Panel Title - + This is the content text that makes sense here. - Action - + Action +

    CDK Table

    @@ -264,12 +264,12 @@

    CDK Table

    Material Table

    - + - ID - {{row.userId}} + ID + {{row.userId}} - - - + + + diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index a2ae0f71140c..5fdda06149bb 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -3,35 +3,35 @@ import {ServerModule} from '@angular/platform-server'; import {BrowserModule} from '@angular/platform-browser'; import {Observable} from 'rxjs/Observable'; import { - MdAutocompleteModule, - MdButtonModule, - MdCardModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdExpansionModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdSortModule, - MdTableModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, + MatAutocompleteModule, + MatButtonModule, + MatCardModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatExpansionModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatSortModule, + MatTableModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, } from '@angular/material'; import { CdkTableModule, @@ -65,38 +65,38 @@ export class KitchenSink { @NgModule({ imports: [ BrowserModule.withServerTransition({appId: 'kitchen-sink'}), - MdAutocompleteModule, - MdButtonModule, + MatAutocompleteModule, + MatButtonModule, // Button toggle and checkbox can't work due to https://github.com/angular/angular/issues/17050 - // MdButtonToggleModule, - MdCardModule, - // MdCheckboxModule, - MdChipsModule, - MdDatepickerModule, - MdDialogModule, - MdFormFieldModule, - MdGridListModule, - MdIconModule, - MdInputModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdPaginatorModule, - MdProgressBarModule, - MdProgressSpinnerModule, - MdRadioModule, - MdRippleModule, - MdSelectModule, - MdSidenavModule, - MdSliderModule, - MdSlideToggleModule, - MdSnackBarModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - MdExpansionModule, - MdSortModule, - MdTableModule, + // MatButtonToggleModule, + MatCardModule, + // MatCheckboxModule, + MatChipsModule, + MatDatepickerModule, + MatDialogModule, + MatFormFieldModule, + MatGridListModule, + MatIconModule, + MatInputModule, + MatListModule, + MatMenuModule, + MatNativeDateModule, + MatPaginatorModule, + MatProgressBarModule, + MatProgressSpinnerModule, + MatRadioModule, + MatRippleModule, + MatSelectModule, + MatSidenavModule, + MatSliderModule, + MatSlideToggleModule, + MatSnackBarModule, + MatTabsModule, + MatToolbarModule, + MatTooltipModule, + MatExpansionModule, + MatSortModule, + MatTableModule, // CDK Modules CdkTableModule diff --git a/test/protractor.conf.js b/test/protractor.conf.js index 83fa1471839e..64c3c146f66b 100644 --- a/test/protractor.conf.js +++ b/test/protractor.conf.js @@ -25,8 +25,8 @@ const config = { 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)' }, + // Exclude mat-menu elements because those are empty if not active. + { id: 'aria-required-children', selector: '*:not(mat-menu)' }, // Disable color constrast checks since the final colors will vary based on the theme. { id: 'color-contrast', enabled: false }, diff --git a/tools/dashboard/src/app/coverage-chart/coverage-chart.html b/tools/dashboard/src/app/coverage-chart/coverage-chart.html index d566cbd5aea1..8779d008b6d6 100644 --- a/tools/dashboard/src/app/coverage-chart/coverage-chart.html +++ b/tools/dashboard/src/app/coverage-chart/coverage-chart.html @@ -14,4 +14,4 @@ [autoScale]="true"> - + diff --git a/tools/dashboard/src/app/dashboard-app.html b/tools/dashboard/src/app/dashboard-app.html index 59e513cdeb8b..484e468f3011 100644 --- a/tools/dashboard/src/app/dashboard-app.html +++ b/tools/dashboard/src/app/dashboard-app.html @@ -1,21 +1,21 @@ - + Angular Material - Board - +
    - - Payload Size Chart - + + Payload Size Chart + - - + + - - Coverage Reports - + + Coverage Reports + - - + +
    diff --git a/tools/dashboard/src/app/dashboard-module.ts b/tools/dashboard/src/app/dashboard-module.ts index 8d01d9af088a..7f7b55f679ce 100644 --- a/tools/dashboard/src/app/dashboard-module.ts +++ b/tools/dashboard/src/app/dashboard-module.ts @@ -4,7 +4,7 @@ import {AngularFireDatabaseModule} from 'angularfire2/database'; import {NgModule} from '@angular/core'; import {DashboardApp} from './dashboard-app'; import {environment} from '../environments/environment'; -import {MdCardModule, MdProgressSpinnerModule, MdToolbarModule} from '@angular/material'; +import {MatCardModule, MatProgressSpinnerModule, MatToolbarModule} from '@angular/material'; import {NgxChartsModule} from '@swimlane/ngx-charts'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {PayloadChart} from './payload-chart/payload-chart'; @@ -12,9 +12,9 @@ import {CoverageChart} from './coverage-chart/coverage-chart'; @NgModule({ exports: [ - MdCardModule, - MdToolbarModule, - MdProgressSpinnerModule + MatCardModule, + MatToolbarModule, + MatProgressSpinnerModule ] }) export class DashboardMaterialModule {} diff --git a/tools/dashboard/src/app/payload-chart/payload-chart.html b/tools/dashboard/src/app/payload-chart/payload-chart.html index a7b907d9bce3..0583940b4d97 100644 --- a/tools/dashboard/src/app/payload-chart/payload-chart.html +++ b/tools/dashboard/src/app/payload-chart/payload-chart.html @@ -14,4 +14,4 @@ [autoScale]="true"> - + diff --git a/tools/dgeni/processors/categorizer.js b/tools/dgeni/processors/categorizer.js index d10a92f9d00d..b10a947fa900 100644 --- a/tools/dgeni/processors/categorizer.js +++ b/tools/dgeni/processors/categorizer.js @@ -6,7 +6,7 @@ const SELECTOR_BLACKLIST = new Set([ '[portal]', '[portalHost]', - 'textarea[md-autosize]', + 'textarea[mat-autosize]', '[overlay-origin]', '[connected-overlay]', ]); diff --git a/tools/screenshot-test/src/app/nav/nav.component.html b/tools/screenshot-test/src/app/nav/nav.component.html index e7904d4f56ed..fd8bb87e70fe 100644 --- a/tools/screenshot-test/src/app/nav/nav.component.html +++ b/tools/screenshot-test/src/app/nav/nav.component.html @@ -1,6 +1,6 @@ - +
    {{user.email}}
    - - -     + + + diff --git a/tools/screenshot-test/src/app/pixacto.dashboard.module.ts b/tools/screenshot-test/src/app/pixacto.dashboard.module.ts index 3cff5d19cf5d..03e1f733edb9 100644 --- a/tools/screenshot-test/src/app/pixacto.dashboard.module.ts +++ b/tools/screenshot-test/src/app/pixacto.dashboard.module.ts @@ -6,8 +6,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {FirebaseService} from './firebase.service'; import {routing} from './routes'; import { - MdToolbarModule, MdButtonModule, MdCardModule, MdButtonToggleModule, MdIconModule, - MdSnackBarModule, MdTooltipModule + MatToolbarModule, MatButtonModule, MatCardModule, MatButtonToggleModule, MatIconModule, + MatSnackBarModule, MatTooltipModule } from '@angular/material'; import {PixactoDashboardComponent} from './pixacto.dashboard.component'; @@ -17,13 +17,13 @@ import {NavComponent} from './nav/nav.component'; @NgModule({ exports: [ - MdToolbarModule, - MdButtonModule, - MdCardModule, - MdButtonToggleModule, - MdIconModule, - MdTooltipModule, - MdSnackBarModule + MatToolbarModule, + MatButtonModule, + MatCardModule, + MatButtonToggleModule, + MatIconModule, + MatTooltipModule, + MatSnackBarModule ] }) export class PixactoMaterialModule {} diff --git a/tools/screenshot-test/src/app/result/result.component.html b/tools/screenshot-test/src/app/result/result.component.html index cfe3312f2f71..112a188c523d 100644 --- a/tools/screenshot-test/src/app/result/result.component.html +++ b/tools/screenshot-test/src/app/result/result.component.html @@ -1,12 +1,12 @@ - - - - {{collapseIcon}} + + + + {{collapseIcon}} {{testName}} - - {{resultText}} - - + + {{resultText}} + +
    Test image
    @@ -21,19 +21,19 @@
    -     - - - + + + + Diff - - + + Flip - - + + Side by side - - - - -     + + + + + diff --git a/tools/screenshot-test/src/app/viewer/viewer.component.html b/tools/screenshot-test/src/app/viewer/viewer.component.html index 8de5f92b50e0..4e40617ac876 100644 --- a/tools/screenshot-test/src/app/viewer/viewer.component.html +++ b/tools/screenshot-test/src/app/viewer/viewer.component.html @@ -1,18 +1,18 @@
    - +

    - + Pull Request: {{screenshotResultSummary.prNumber}} - + Commit: {{screenshotResultSummary.sha}} - + Travis: {{screenshotResultSummary.travis}}

    - @@ -21,23 +21,23 @@

    - - + + Test images should be the same as golden images. Expand all to verify.

    - - - {{githubIcon}} + + {{githubIcon}} - - refresh + + refresh
    @@ -45,15 +45,15 @@ Once the PR checked in, the golds will be updated automatically.

    - - - - -     + +
    { this._service.prNumber = p['id'];
    NameCaloriesFatCarbsProteinNameCaloriesFatCarbsProtein