diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts index 6a99278a8001..1cbbb8c19f4d 100644 --- a/src/lib/button-toggle/button-toggle.ts +++ b/src/lib/button-toggle/button-toggle.ts @@ -19,7 +19,12 @@ import { } from '@angular/core'; import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms'; import {Observable} from 'rxjs/Observable'; -import {MdUniqueSelectionDispatcher, coerceBooleanProperty} from '../core'; +import { + MdUniqueSelectionDispatcher, + coerceBooleanProperty, + DefaultStyleCompatibilityModeModule, +} from '../core'; + export type ToggleType = 'checkbox' | 'radio'; @@ -436,8 +441,13 @@ export class MdButtonToggle implements OnInit { @NgModule({ - imports: [FormsModule], - exports: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle], + imports: [FormsModule, DefaultStyleCompatibilityModeModule], + exports: [ + MdButtonToggleGroup, + MdButtonToggleGroupMultiple, + MdButtonToggle, + DefaultStyleCompatibilityModeModule, + ], declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle], }) export class MdButtonToggleModule { diff --git a/src/lib/button/button.ts b/src/lib/button/button.ts index 695d2d297293..2303af30afbc 100644 --- a/src/lib/button/button.ts +++ b/src/lib/button/button.ts @@ -10,7 +10,8 @@ import { ModuleWithProviders, } from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MdRippleModule, coerceBooleanProperty} from '../core'; +import {MdRippleModule, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core'; + // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener. // TODO(kara): Convert attribute selectors to classes when attr maps become available @@ -157,8 +158,8 @@ export class MdAnchor extends MdButton { @NgModule({ - imports: [CommonModule, MdRippleModule], - exports: [MdButton, MdAnchor], + imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule], + exports: [MdButton, MdAnchor, DefaultStyleCompatibilityModeModule], declarations: [MdButton, MdAnchor], }) export class MdButtonModule { diff --git a/src/lib/card/card-header.html b/src/lib/card/card-header.html index efaa67b2ac87..772bf0459360 100644 --- a/src/lib/card/card-header.html +++ b/src/lib/card/card-header.html @@ -1,5 +1,6 @@ - +
- +
diff --git a/src/lib/card/card-title-group.html b/src/lib/card/card-title-group.html index 150dd99ce08f..20727c62df78 100644 --- a/src/lib/card/card-title-group.html +++ b/src/lib/card/card-title-group.html @@ -1,5 +1,6 @@
- +
diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts index 2a249ffdce6b..521339fb78c0 100644 --- a/src/lib/card/card.ts +++ b/src/lib/card/card.ts @@ -6,13 +6,14 @@ import { ChangeDetectionStrategy, Directive } from '@angular/core'; +import {DefaultStyleCompatibilityModeModule} from '../core'; /** * Content of a card, needed as it's used as a selector in the API. */ @Directive({ - selector: 'md-card-content' + selector: 'md-card-content, mat-card-content' }) export class MdCardContent {} @@ -20,7 +21,7 @@ export class MdCardContent {} * Title of a card, needed as it's used as a selector in the API. */ @Directive({ - selector: 'md-card-title' + selector: 'md-card-title, mat-card-title' }) export class MdCardTitle {} @@ -28,7 +29,7 @@ export class MdCardTitle {} * Sub-title of a card, needed as it's used as a selector in the API. */ @Directive({ - selector: 'md-card-subtitle' + selector: 'md-card-subtitle, mat-card-subtitle' }) export class MdCardSubtitle {} @@ -36,7 +37,7 @@ export class MdCardSubtitle {} * Action section of a card, needed as it's used as a selector in the API. */ @Directive({ - selector: 'md-card-actions' + selector: 'md-card-actions, mat-card-actions' }) export class MdCardActions {} @@ -44,7 +45,7 @@ export class MdCardActions {} * Footer of a card, needed as it's used as a selector in the API. */ @Directive({ - selector: 'md-card-footer' + selector: 'md-card-footer, mat-card-footer' }) export class MdCardFooter {} @@ -70,7 +71,7 @@ it also provides a number of preset styles for common card sections, including: @Component({ moduleId: module.id, - selector: 'md-card', + selector: 'md-card, mat-card', templateUrl: 'card.html', styleUrls: ['card.css'], encapsulation: ViewEncapsulation.None, @@ -95,7 +96,7 @@ TODO(kara): update link to demo site when it exists @Component({ moduleId: module.id, - selector: 'md-card-header', + selector: 'md-card-header, mat-card-header', templateUrl: 'card-header.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, @@ -115,7 +116,7 @@ TODO(kara): update link to demo site when it exists @Component({ moduleId: module.id, - selector: 'md-card-title-group', + selector: 'md-card-title-group, mat-card-title-group', templateUrl: 'card-title-group.html', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, @@ -124,9 +125,17 @@ export class MdCardTitleGroup {} @NgModule({ + imports: [DefaultStyleCompatibilityModeModule], exports: [ - MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle, - MdCardActions, MdCardFooter + MdCard, + MdCardHeader, + MdCardTitleGroup, + MdCardContent, + MdCardTitle, + MdCardSubtitle, + MdCardActions, + MdCardFooter, + DefaultStyleCompatibilityModeModule, ], declarations: [ MdCard, MdCardHeader, MdCardTitleGroup, MdCardContent, MdCardTitle, MdCardSubtitle, diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 81e64c45fb82..d086326f341c 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -15,7 +15,8 @@ import { import {CommonModule} from '@angular/common'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; import {coerceBooleanProperty} from '../core/coersion/boolean-property'; -import {MdRippleModule} from '../core'; +import {MdRippleModule, DefaultStyleCompatibilityModeModule} from '../core'; + /** * Monotonically increasing integer used to auto-generate unique ids for checkbox components. @@ -62,7 +63,7 @@ export class MdCheckboxChange { */ @Component({ moduleId: module.id, - selector: 'md-checkbox', + selector: 'md-checkbox, mat-checkbox', templateUrl: 'checkbox.html', styleUrls: ['checkbox.css'], host: { @@ -378,8 +379,8 @@ export class MdCheckbox implements ControlValueAccessor { @NgModule({ - imports: [CommonModule, MdRippleModule], - exports: [MdCheckbox], + imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule], + exports: [MdCheckbox, DefaultStyleCompatibilityModeModule], declarations: [MdCheckbox], }) export class MdCheckboxModule { diff --git a/src/lib/core/compatibility/compatibility.spec.ts b/src/lib/core/compatibility/compatibility.spec.ts new file mode 100644 index 000000000000..407bda06d41b --- /dev/null +++ b/src/lib/core/compatibility/compatibility.spec.ts @@ -0,0 +1,55 @@ +import {Component} from '@angular/core'; +import {async, TestBed} from '@angular/core/testing'; +import {MdCheckboxModule} from '../../checkbox/checkbox'; +import {NoConflictStyleCompatibilityMode} from './no-conflict-mode'; + + +describe('Style compatibility', () => { + + 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.forRoot()], + declarations: [ComponentWithMdCheckbox, ComponentWithMatCheckbox], + }); + + TestBed.compileComponents(); + })); + + it('should throw an error when trying to use the "mat-" prefix', () => { + expect(() => { + TestBed.createComponent(ComponentWithMatCheckbox); + }).toThrowError(/The "mat-" prefix cannot be used out of ng-material v1 compatibility mode/); + }); + }); + + describe('in no-conflict mode', () => { + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [MdCheckboxModule.forRoot(), 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', () => { + expect(() => { + TestBed.createComponent(ComponentWithMdCheckbox); + }).toThrowError(/The "md-" prefix cannot be used in ng-material v1 compatibility mode/); + }); + }); +}); + + +@Component({ template: `Hungry` }) +class ComponentWithMdCheckbox { } + +@Component({ template: `Hungry` }) +class ComponentWithMatCheckbox { } diff --git a/src/lib/core/compatibility/default-mode.ts b/src/lib/core/compatibility/default-mode.ts new file mode 100644 index 000000000000..4eb75b4ca4ef --- /dev/null +++ b/src/lib/core/compatibility/default-mode.ts @@ -0,0 +1,79 @@ +import {NgModule, ModuleWithProviders, Directive, OpaqueToken, Inject} from '@angular/core'; + + +export const MATERIAL_COMPATIBILITY_MODE = new OpaqueToken('md-compatibiility-mode'); + +/** Selector that matches all elements that may have style collisions with material1. */ +export const MAT_ELEMENTS_SELECTOR = ` + mat-card, + mat-card-actions, + mat-card-content, + mat-card-footer, + mat-card-header, + mat-card-subtitle, + mat-card-title, + mat-card-title-group, + mat-checkbox, + mat-chip, + mat-dialog-container, + mat-divider, + mat-grid-list, + mat-grid-tile, + mat-grid-tile-footer, + mat-grid-tile-header, + mat-hint, + mat-icon, + mat-ink-bar, + mat-input, + mat-list, + mat-list-item, + mat-menu, + mat-nav-list, + mat-option, + mat-placeholder, + mat-progress-bar, + mat-progress-circle, + mat-radio-button, + mat-radio-group, + mat-select, + mat-sidenav, + mat-slider, + mat-spinner, + mat-tab, + mat-toolbar +`; + +/** Directive that enforces that the `mat-` prefix cannot be used. */ +@Directive({selector: MAT_ELEMENTS_SELECTOR}) +export class MatPrefixEnforcer { + constructor(@Inject(MATERIAL_COMPATIBILITY_MODE) isCompatibilityMode: boolean) { + if (!isCompatibilityMode) { + throw Error('The "mat-" prefix cannot be used out of ng-material v1 compatibility mode.'); + } + } +} + + +/** + * Module that enforces the default "compatibility mode" settings. When this module is loaded + * without NoConflictStyleCompatibilityMode also being imported, it will throw an error if + * there are any uses of the `mat-` prefix. + * + * Because the point of this directive is to *not* be used, it will be tree-shaken away by + * optimizers when not in compatibility mode. + */ +@NgModule({ + declarations: [MatPrefixEnforcer], + exports: [MatPrefixEnforcer], + providers: [{ + provide: MATERIAL_COMPATIBILITY_MODE, useValue: false, + }] +}) +export class DefaultStyleCompatibilityModeModule { + static forRoot(): ModuleWithProviders { + return { + ngModule: DefaultStyleCompatibilityModeModule, + providers: [], + }; + } +} diff --git a/src/lib/core/compatibility/no-conflict-mode.ts b/src/lib/core/compatibility/no-conflict-mode.ts new file mode 100644 index 000000000000..9fd90d233c40 --- /dev/null +++ b/src/lib/core/compatibility/no-conflict-mode.ts @@ -0,0 +1,68 @@ +import {NgModule, ModuleWithProviders, Directive} from '@angular/core'; +import {MATERIAL_COMPATIBILITY_MODE} from './default-mode'; + + +/** Selector that matches all elements that may have style collisions with material1. */ +export const MD_ELEMENTS_SELECTOR = ` + md-card, + md-card-actions, + md-card-content, + md-card-footer, + md-card-header, + md-card-subtitle, + md-card-title, + md-card-title-group, + md-checkbox, + md-chip, + md-dialog-container, + md-divider, + md-grid-list, + md-grid-tile, + md-grid-tile-footer, + md-grid-tile-header, + md-hint, + md-icon, + md-ink-bar, + md-input, + md-list, + md-list-item, + md-menu, + md-nav-list, + md-option, + md-placeholder, + md-progress-bar, + md-progress-circle, + md-radio-button, + md-radio-group, + md-select, + md-sidenav, + md-slider, + md-spinner, + md-tab, + md-toolbar +`; + +/** Directive that enforces that the `md-` prefix cannot be used. */ +@Directive({selector: MD_ELEMENTS_SELECTOR}) +export class MdPrefixEnforcer { + constructor() { + throw Error('The "md-" prefix cannot be used in ng-material v1 compatibility mode.'); + } +} + + +@NgModule({ + declarations: [MdPrefixEnforcer], + exports: [MdPrefixEnforcer], + providers: [{ + provide: MATERIAL_COMPATIBILITY_MODE, useValue: true, + }], +}) +export class NoConflictStyleCompatibilityMode { + static forRoot(): ModuleWithProviders { + return { + ngModule: NoConflictStyleCompatibilityMode, + providers: [], + }; + } +} diff --git a/src/lib/core/compatibility/style-compatibility.ts b/src/lib/core/compatibility/style-compatibility.ts deleted file mode 100644 index cd19d6a8db33..000000000000 --- a/src/lib/core/compatibility/style-compatibility.ts +++ /dev/null @@ -1,75 +0,0 @@ -import {NgModule, ModuleWithProviders, Directive, Renderer, ElementRef} from '@angular/core'; - - -/** Selector that matches all elements that may have style collisions with material1. */ -export const ELEMENTS_SELECTOR = ` - md-card, - md-card-actions, - md-card-content, - md-card-footer, - md-card-header, - md-card-subtitle, - md-card-title, - md-card-title-group, - md-checkbox, - md-dialog-container, - md-divider, - md-grid-list, - md-grid-tile, - md-grid-tile-footer, - md-grid-tile-header, - md-hint, - md-icon, - md-ink-bar, - md-input, - md-list, - md-list-item, - md-menu, - md-nav-list, - md-option, - md-placeholder, - md-progress-bar, - md-progress-circle, - md-radio-button, - md-radio-group, - md-select, - md-sidenav, - md-slider, - md-spinner, - md-tab, - md-toolbar -`; - -/** - * Directive to apply to all material2 components that use the same element name as a - * component in material2. It does two things: - * 1) Adds the css class "md2" to the host element so that material1 can use this class with a - * :not() in order to avoid affecting material2 elements. - * 2) Adds a css class to the element that is identical to the element's tag. E.g., the element - * `` would be given a css class `md-card`. This is done so that material2 can style - * only these classes instead of defining element rules that would affect material1 components. - */ -@Directive({ - selector: ELEMENTS_SELECTOR, -}) -export class StyleCompatibility { - constructor(renderer: Renderer, elementRef: ElementRef) { - const element = elementRef.nativeElement as Node; - renderer.setElementClass(element, 'md2', true); - renderer.setElementClass(element, element.nodeName.toLowerCase(), true); - } -} - - -@NgModule({ - declarations: [StyleCompatibility], - exports: [StyleCompatibility], -}) -export class StyleCompatibilityModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: StyleCompatibilityModule, - providers: [], - }; - } -} diff --git a/src/lib/core/core.ts b/src/lib/core/core.ts index 79e84e73c769..e5127292671d 100644 --- a/src/lib/core/core.ts +++ b/src/lib/core/core.ts @@ -83,7 +83,7 @@ export {ComponentType} from './overlay/generic-component-type'; // Keybindings export * from './keyboard/keycodes'; -export * from './compatibility/style-compatibility'; +export * from './compatibility/default-mode'; // Animation export * from './animation/animation'; @@ -92,6 +92,10 @@ export * from './animation/animation'; export {coerceBooleanProperty} from './coersion/boolean-property'; export {coerceNumberProperty} from './coersion/number-property'; +// Compatibility +export {DefaultStyleCompatibilityModeModule} from './compatibility/default-mode'; +export {NoConflictStyleCompatibilityMode} from './compatibility/no-conflict-mode'; + @NgModule({ imports: [MdLineModule, RtlModule, MdRippleModule, PortalModule, OverlayModule, A11yModule], diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts index 8438bb370a5f..234a0cbda217 100644 --- a/src/lib/core/line/line.ts +++ b/src/lib/core/line/line.ts @@ -5,13 +5,15 @@ import { ElementRef, QueryList } from '@angular/core'; +import {DefaultStyleCompatibilityModeModule} from '../compatibility/default-mode'; + /** * 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 * counted by checking the query list's length. */ -@Directive({ selector: '[md-line]' }) +@Directive({ selector: '[md-line], [mat-line]' }) export class MdLine {} /* Helper that takes a query list of lines and sets the correct class on the host */ @@ -47,7 +49,8 @@ export class MdLineSetter { } @NgModule({ - exports: [MdLine], + imports: [DefaultStyleCompatibilityModeModule], + exports: [MdLine, DefaultStyleCompatibilityModeModule], declarations: [MdLine], }) export class MdLineModule { } diff --git a/src/lib/core/ripple/ripple.ts b/src/lib/core/ripple/ripple.ts index 31d1e7b07731..3849a67b18df 100644 --- a/src/lib/core/ripple/ripple.ts +++ b/src/lib/core/ripple/ripple.ts @@ -15,10 +15,11 @@ import { ForegroundRipple, ForegroundRippleState, } from './ripple-renderer'; +import {DefaultStyleCompatibilityModeModule} from '../compatibility/default-mode'; @Directive({ - selector: '[md-ripple]', + selector: '[md-ripple], [mat-ripple]', }) export class MdRipple implements OnInit, OnDestroy, OnChanges { /** @@ -178,7 +179,8 @@ export class MdRipple implements OnInit, OnDestroy, OnChanges { @NgModule({ - exports: [MdRipple], + imports: [DefaultStyleCompatibilityModeModule], + exports: [MdRipple, DefaultStyleCompatibilityModeModule], declarations: [MdRipple], }) export class MdRippleModule { diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts index adf1ffb1a9b0..aaaffb98436f 100644 --- a/src/lib/dialog/dialog-container.ts +++ b/src/lib/dialog/dialog-container.ts @@ -19,7 +19,7 @@ import 'rxjs/add/operator/first'; */ @Component({ moduleId: module.id, - selector: 'md-dialog-container', + selector: 'md-dialog-container, mat-dialog-container', templateUrl: 'dialog-container.html', styleUrls: ['dialog-container.css'], host: { diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts index 24cb25b8533f..b2d75f84c819 100644 --- a/src/lib/dialog/dialog.ts +++ b/src/lib/dialog/dialog.ts @@ -7,13 +7,16 @@ import { OverlayState, ComponentPortal, OVERLAY_PROVIDERS, + ComponentType, + A11yModule, + InteractivityChecker, + MdPlatform, + DefaultStyleCompatibilityModeModule, } from '../core'; -import {ComponentType} from '../core'; import {MdDialogConfig} from './dialog-config'; import {MdDialogRef} from './dialog-ref'; import {DialogInjector} from './dialog-injector'; import {MdDialogContainer} from './dialog-container'; -import {A11yModule, InteractivityChecker, MdPlatform} from '../core'; import {extendObject} from '../core/util/object-extend'; export {MdDialogConfig} from './dialog-config'; export {MdDialogRef} from './dialog-ref'; @@ -151,8 +154,8 @@ function _applyConfigDefaults(dialogConfig: MdDialogConfig): MdDialogConfig { @NgModule({ - imports: [OverlayModule, PortalModule, A11yModule], - exports: [MdDialogContainer], + imports: [OverlayModule, PortalModule, A11yModule, DefaultStyleCompatibilityModeModule], + exports: [MdDialogContainer, DefaultStyleCompatibilityModeModule], declarations: [MdDialogContainer], entryComponents: [MdDialogContainer], }) diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts index 7b9ba5a8c18d..94d3ae9ce365 100644 --- a/src/lib/grid-list/grid-list.ts +++ b/src/lib/grid-list/grid-list.ts @@ -10,19 +10,18 @@ import { QueryList, Renderer, ElementRef, - Optional + Optional, } from '@angular/core'; import {MdGridTile, MdGridTileText} from './grid-tile'; import {TileCoordinator} from './tile-coordinator'; -import { - TileStyler, - FitTileStyler, - RatioTileStyler, - FixedTileStyler -} from './tile-styler'; +import {TileStyler, FitTileStyler, RatioTileStyler, FixedTileStyler} from './tile-styler'; import {MdGridListColsError} from './grid-list-errors'; -import {Dir, MdLineModule} from '../core'; -import {coerceToString, coerceToNumber} from './grid-list-measure'; +import {Dir, MdLineModule, DefaultStyleCompatibilityModeModule} from '../core'; +import { + coerceToString, + coerceToNumber, +} from './grid-list-measure'; + // TODO(kara): Conditional (responsive) column count / row size. // TODO(kara): Re-layout on window resize / media change (debounced). @@ -32,7 +31,7 @@ const MD_FIT_MODE = 'fit'; @Component({ moduleId: module.id, - selector: 'md-grid-list', + selector: 'md-grid-list, mat-grid-list', templateUrl: 'grid-list.html', styleUrls: ['grid-list.css'], encapsulation: ViewEncapsulation.None, @@ -153,8 +152,14 @@ export class MdGridList implements OnInit, AfterContentChecked { @NgModule({ - imports: [MdLineModule], - exports: [MdGridList, MdGridTile, MdGridTileText, MdLineModule], + imports: [MdLineModule, DefaultStyleCompatibilityModeModule], + exports: [ + MdGridList, + MdGridTile, + MdGridTileText, + MdLineModule, + DefaultStyleCompatibilityModeModule, + ], declarations: [MdGridList, MdGridTile, MdGridTileText], }) export class MdGridListModule { diff --git a/src/lib/grid-list/grid-tile-text.html b/src/lib/grid-list/grid-tile-text.html index 9946619e7f13..5fa150452ae2 100644 --- a/src/lib/grid-list/grid-tile-text.html +++ b/src/lib/grid-list/grid-tile-text.html @@ -1,3 +1,3 @@ - -
- \ No newline at end of file + +
+ diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts index f6d2a26bffd4..9c4038856ed5 100644 --- a/src/lib/grid-list/grid-tile.ts +++ b/src/lib/grid-list/grid-tile.ts @@ -13,7 +13,7 @@ import {coerceToNumber} from './grid-list-measure'; @Component({ moduleId: module.id, - selector: 'md-grid-tile', + selector: 'md-grid-tile, mat-grid-tile', host: { 'role': 'listitem' }, templateUrl: 'grid-tile.html', styleUrls: ['grid-list.css'], @@ -55,7 +55,7 @@ export class MdGridTile { @Component({ moduleId: module.id, - selector: 'md-grid-tile-header, md-grid-tile-footer', + selector: 'md-grid-tile-header, mat-grid-tile-header, md-grid-tile-footer, mat-grid-tile-footer', templateUrl: 'grid-tile-text.html' }) export class MdGridTileText implements AfterContentInit { diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts index 17ef7f6801ed..25a486e8bbe8 100644 --- a/src/lib/icon/icon.ts +++ b/src/lib/icon/icon.ts @@ -1,23 +1,22 @@ import { - NgModule, - ModuleWithProviders, - ChangeDetectionStrategy, - Component, - ElementRef, - Input, - OnChanges, - OnInit, - Renderer, - SimpleChange, - ViewEncapsulation, - AfterViewChecked + NgModule, + ModuleWithProviders, + ChangeDetectionStrategy, + Component, + ElementRef, + Input, + OnChanges, + OnInit, + Renderer, + SimpleChange, + ViewEncapsulation, + AfterViewChecked, } from '@angular/core'; import {HttpModule} from '@angular/http'; -import {MdError} from '../core'; +import {MdError, DefaultStyleCompatibilityModeModule} from '../core'; import {MdIconRegistry} from './icon-registry'; export {MdIconRegistry} from './icon-registry'; - /** Exception thrown when an invalid icon name is passed to an md-icon component. */ export class MdIconInvalidNameError extends MdError { constructor(iconName: string) { @@ -61,7 +60,7 @@ export class MdIconInvalidNameError extends MdError { @Component({ moduleId: module.id, template: '', - selector: 'md-icon', + selector: 'md-icon, mat-icon', styleUrls: ['icon.css'], host: { 'role': 'img', @@ -251,8 +250,8 @@ export class MdIcon implements OnChanges, OnInit, AfterViewChecked { @NgModule({ - imports: [HttpModule], - exports: [MdIcon], + imports: [HttpModule, DefaultStyleCompatibilityModeModule], + exports: [MdIcon, DefaultStyleCompatibilityModeModule], declarations: [MdIcon], }) export class MdIconModule { diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts index 458ce88dc855..e6e81762ceee 100644 --- a/src/lib/input/autosize.ts +++ b/src/lib/input/autosize.ts @@ -5,7 +5,7 @@ import {Directive, ElementRef, Input, OnInit} from '@angular/core'; * Directive to automatically resize a textarea to fit its content. */ @Directive({ - selector: 'textarea[md-autosize]', + selector: 'textarea[md-autosize], textarea[mat-autosize]', host: { '(input)': 'resizeToFitContent()', '[style.min-height]': '_minHeight', diff --git a/src/lib/list/list-item.html b/src/lib/list/list-item.html index 180eaabda56f..e58312cbc9a8 100644 --- a/src/lib/list/list-item.html +++ b/src/lib/list/list-item.html @@ -1,5 +1,6 @@
- -
+ +
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts index 755b40ed0721..997f3e531b94 100644 --- a/src/lib/list/list.ts +++ b/src/lib/list/list.ts @@ -11,16 +11,16 @@ import { NgModule, ModuleWithProviders, } from '@angular/core'; -import {MdLine, MdLineSetter, MdLineModule} from '../core'; +import {MdLine, MdLineSetter, MdLineModule, DefaultStyleCompatibilityModeModule} from '../core'; @Directive({ - selector: 'md-divider' + selector: 'md-divider, mat-divider' }) export class MdListDivider {} @Component({ moduleId: module.id, - selector: 'md-list, md-nav-list', + selector: 'md-list, mat-list, md-nav-list, mat-nav-list', host: {'role': 'list'}, template: '', styleUrls: ['list.css'], @@ -29,12 +29,12 @@ export class MdListDivider {} export class MdList {} /* Need directive for a ContentChild query in list-item */ -@Directive({ selector: '[md-list-avatar]' }) +@Directive({ selector: '[md-list-avatar], [mat-list-avatar]' }) export class MdListAvatar {} @Component({ moduleId: module.id, - selector: 'md-list-item, a[md-list-item]', + selector: 'md-list-item, mat-list-item, a[md-list-item], a[mat-list-item]', host: { 'role': 'listitem', '(focus)': '_handleFocus()', @@ -73,8 +73,15 @@ export class MdListItem implements AfterContentInit { @NgModule({ - imports: [MdLineModule], - exports: [MdList, MdListItem, MdListDivider, MdListAvatar, MdLineModule], + imports: [MdLineModule, DefaultStyleCompatibilityModeModule], + exports: [ + MdList, + MdListItem, + MdListDivider, + MdListAvatar, + MdLineModule, + DefaultStyleCompatibilityModeModule, + ], declarations: [MdList, MdListItem, MdListDivider, MdListAvatar], }) export class MdListModule { diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts index 6ef46f2f92f0..a1c82da373c4 100644 --- a/src/lib/menu/menu-directive.ts +++ b/src/lib/menu/menu-directive.ts @@ -24,7 +24,7 @@ import {transformMenu, fadeInItems} from './menu-animations'; @Component({ moduleId: module.id, - selector: 'md-menu', + selector: 'md-menu, mat-menu', host: {'role': 'menu'}, templateUrl: 'menu.html', styleUrls: ['menu.css'], diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts index a3f7b53d16b5..9bdd0d6e00f9 100644 --- a/src/lib/menu/menu-item.ts +++ b/src/lib/menu/menu-item.ts @@ -7,7 +7,7 @@ import {MdFocusable} from '../core/a11y/list-key-manager'; */ @Component({ moduleId: module.id, - selector: '[md-menu-item]', + selector: '[md-menu-item], [mat-menu-item]', host: { 'role': 'menuitem', '(click)': '_checkDisabled($event)', diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index 93a9b75ce7fd..0fb6b54fd9c6 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -32,7 +32,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions'; * responsible for toggling the display of the provided menu instance. */ @Directive({ - selector: '[md-menu-trigger-for]', + selector: '[md-menu-trigger-for], [mat-menu-trigger-for]', host: { 'aria-haspopup': 'true', '(mousedown)': '_handleMousedown($event)', diff --git a/src/lib/menu/menu.ts b/src/lib/menu/menu.ts index e1c32b782817..fa2ed66c9ecb 100644 --- a/src/lib/menu/menu.ts +++ b/src/lib/menu/menu.ts @@ -1,6 +1,6 @@ import {NgModule, ModuleWithProviders} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {OverlayModule, OVERLAY_PROVIDERS} from '../core'; +import {OverlayModule, OVERLAY_PROVIDERS, DefaultStyleCompatibilityModeModule} from '../core'; import {MdMenu} from './menu-directive'; import {MdMenuItem} from './menu-item'; import {MdMenuTrigger} from './menu-trigger'; @@ -13,8 +13,8 @@ export {MenuPositionX, MenuPositionY} from './menu-positions'; @NgModule({ - imports: [OverlayModule, CommonModule, MdRippleModule], - exports: [MdMenu, MdMenuItem, MdMenuTrigger], + imports: [OverlayModule, CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule], + exports: [MdMenu, MdMenuItem, MdMenuTrigger, DefaultStyleCompatibilityModeModule], declarations: [MdMenu, MdMenuItem, MdMenuTrigger], }) export class MdMenuModule { diff --git a/src/lib/module.ts b/src/lib/module.ts index 598f6f9b9277..d6fe058809fc 100644 --- a/src/lib/module.ts +++ b/src/lib/module.ts @@ -7,7 +7,7 @@ import { OverlayModule, A11yModule, ProjectionModule, - StyleCompatibilityModule, + DefaultStyleCompatibilityModeModule, } from './core/index'; import {MdButtonToggleModule} from './button-toggle/index'; @@ -65,7 +65,7 @@ const MATERIAL_MODULES = [ A11yModule, PlatformModule, ProjectionModule, - StyleCompatibilityModule, + DefaultStyleCompatibilityModeModule, ]; @NgModule({ @@ -101,7 +101,7 @@ const MATERIAL_MODULES = [ MdTooltipModule.forRoot(), PlatformModule.forRoot(), OverlayModule.forRoot(), - StyleCompatibilityModule.forRoot(), + DefaultStyleCompatibilityModeModule.forRoot(), ], exports: MATERIAL_MODULES, }) diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts index e06213314421..b989476b0e59 100644 --- a/src/lib/progress-bar/progress-bar.ts +++ b/src/lib/progress-bar/progress-bar.ts @@ -7,6 +7,7 @@ import { Input, } from '@angular/core'; import {CommonModule} from '@angular/common'; +import {DefaultStyleCompatibilityModeModule} from '../core/compatibility/default-mode'; // TODO(josephperrott): Benchpress tests. // TODO(josephperrott): Add ARIA attributes for progressbar "for". @@ -17,7 +18,7 @@ import {CommonModule} from '@angular/common'; */ @Component({ moduleId: module.id, - selector: 'md-progress-bar', + selector: 'md-progress-bar, mat-progress-bar', host: { 'role': 'progressbar', 'aria-valuemin': '0', @@ -89,8 +90,8 @@ function clamp(v: number, min = 0, max = 100) { @NgModule({ - imports: [CommonModule], - exports: [MdProgressBar], + imports: [CommonModule, DefaultStyleCompatibilityModeModule], + exports: [MdProgressBar, DefaultStyleCompatibilityModeModule], declarations: [MdProgressBar], }) export class MdProgressBarModule { diff --git a/src/lib/progress-circle/progress-circle.ts b/src/lib/progress-circle/progress-circle.ts index 048cf4c5ea77..2152cc23e371 100644 --- a/src/lib/progress-circle/progress-circle.ts +++ b/src/lib/progress-circle/progress-circle.ts @@ -10,6 +10,8 @@ import { ElementRef, NgZone } from '@angular/core'; +import {DefaultStyleCompatibilityModeModule} from '../core'; + // TODO(josephperrott): Benchpress tests. @@ -37,7 +39,7 @@ type EasingFn = (currentTime: number, startValue: number, */ @Component({ moduleId: module.id, - selector: 'md-progress-circle', + selector: 'md-progress-circle, mat-progress-circle', host: { 'role': 'progressbar', '[attr.aria-valuemin]': '_ariaValueMin', @@ -236,7 +238,7 @@ export class MdProgressCircle implements OnDestroy { */ @Component({ moduleId: module.id, - selector: 'md-spinner', + selector: 'md-spinner, mat-spinner', host: { 'role': 'progressbar', 'mode': 'indeterminate', @@ -334,7 +336,8 @@ function getSvgArc(currentValue: number, rotation: number) { @NgModule({ - exports: [MdProgressCircle, MdSpinner], + imports: [DefaultStyleCompatibilityModeModule], + exports: [MdProgressCircle, MdSpinner, DefaultStyleCompatibilityModeModule], declarations: [MdProgressCircle, MdSpinner], }) export class MdProgressCircleModule { diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts index 04d43c9a654b..6d32e6c37239 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -18,15 +18,15 @@ import { ViewChild, } from '@angular/core'; import {CommonModule} from '@angular/common'; +import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms'; import { - NG_VALUE_ACCESSOR, - ControlValueAccessor -} from '@angular/forms'; -import {MdRippleModule, MdUniqueSelectionDispatcher} from '../core'; + MdRippleModule, + MdUniqueSelectionDispatcher, + DefaultStyleCompatibilityModeModule, +} from '../core'; import {coerceBooleanProperty} from '../core/coersion/boolean-property'; - /** * Provider Expression that allows md-radio-group to register as a ControlValueAccessor. This * allows it to support [(ngModel)] and ngControl. @@ -54,7 +54,7 @@ export class MdRadioChange { } @Directive({ - selector: 'md-radio-group', + selector: 'md-radio-group, mat-radio-group', providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR], host: { 'role': 'radiogroup', @@ -241,7 +241,7 @@ export class MdRadioGroup implements AfterContentInit, ControlValueAccessor { @Component({ moduleId: module.id, - selector: 'md-radio-button', + selector: 'md-radio-button, mat-radio-button', templateUrl: 'radio.html', styleUrls: ['radio.css'], encapsulation: ViewEncapsulation.None @@ -468,8 +468,8 @@ export class MdRadioButton implements OnInit { @NgModule({ - imports: [CommonModule, MdRippleModule], - exports: [MdRadioGroup, MdRadioButton], + imports: [CommonModule, MdRippleModule, DefaultStyleCompatibilityModeModule], + exports: [MdRadioGroup, MdRadioButton, DefaultStyleCompatibilityModeModule], declarations: [MdRadioGroup, MdRadioButton], }) export class MdRadioModule { diff --git a/src/lib/select/index.ts b/src/lib/select/index.ts index 286da03f8fd0..4ef91c1fe64f 100644 --- a/src/lib/select/index.ts +++ b/src/lib/select/index.ts @@ -2,21 +2,25 @@ import {NgModule, ModuleWithProviders} from '@angular/core'; import {CommonModule} from '@angular/common'; import {MdSelect} from './select'; import {MdOption} from './option'; -import {OverlayModule} from '../core/overlay/overlay-directives'; -import {MdRippleModule} from '../core/ripple/ripple'; -import {OVERLAY_PROVIDERS} from '../core/overlay/overlay'; +import { + DefaultStyleCompatibilityModeModule, + OVERLAY_PROVIDERS, + MdRippleModule, + OverlayModule, +} from '../core'; export * from './select'; + @NgModule({ - imports: [CommonModule, OverlayModule, MdRippleModule], - exports: [MdSelect, MdOption], - declarations: [MdSelect, MdOption], + imports: [CommonModule, OverlayModule, MdRippleModule, DefaultStyleCompatibilityModeModule], + exports: [MdSelect, MdOption, DefaultStyleCompatibilityModeModule], + declarations: [MdSelect, MdOption], }) export class MdSelectModule { - static forRoot(): ModuleWithProviders { - return { - ngModule: MdSelectModule, - providers: [OVERLAY_PROVIDERS] - }; - } + static forRoot(): ModuleWithProviders { + return { + ngModule: MdSelectModule, + providers: [OVERLAY_PROVIDERS] + }; + } } diff --git a/src/lib/select/option.ts b/src/lib/select/option.ts index b629daca62b3..f45f6da0fc57 100644 --- a/src/lib/select/option.ts +++ b/src/lib/select/option.ts @@ -18,7 +18,7 @@ let _uniqueIdCounter = 0; @Component({ moduleId: module.id, - selector: 'md-option', + selector: 'md-option, mat-option', host: { 'role': 'option', '[attr.tabindex]': '_getTabIndex()', diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 90af646afe68..6fbc9384f989 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -26,7 +26,7 @@ import {ConnectedOverlayPositionChange} from '../core/overlay/position/connected @Component({ moduleId: module.id, - selector: 'md-select', + selector: 'md-select, mat-select', templateUrl: 'select.html', styleUrls: ['select.css'], encapsulation: ViewEncapsulation.None, diff --git a/src/lib/sidenav/sidenav.html b/src/lib/sidenav/sidenav.html index 2e278d672083..652ebf250c62 100644 --- a/src/lib/sidenav/sidenav.html +++ b/src/lib/sidenav/sidenav.html @@ -1,7 +1,7 @@
- +
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts index 87cd4bc4c429..8398f6892320 100644 --- a/src/lib/sidenav/sidenav.ts +++ b/src/lib/sidenav/sidenav.ts @@ -1,21 +1,21 @@ import { - NgModule, - ModuleWithProviders, - AfterContentInit, - Component, - ContentChildren, - ElementRef, - Input, - Optional, - Output, - QueryList, - ChangeDetectionStrategy, - EventEmitter, - Renderer, - ViewEncapsulation, + NgModule, + ModuleWithProviders, + AfterContentInit, + Component, + ContentChildren, + ElementRef, + Input, + Optional, + Output, + QueryList, + ChangeDetectionStrategy, + EventEmitter, + Renderer, + ViewEncapsulation, } from '@angular/core'; import {CommonModule} from '@angular/common'; -import {Dir, MdError, coerceBooleanProperty} from '../core'; +import {Dir, MdError, coerceBooleanProperty, DefaultStyleCompatibilityModeModule} from '../core'; /** Exception thrown when two MdSidenav are matching the same side. */ @@ -41,7 +41,7 @@ export class MdSidenavToggleResult { */ @Component({ moduleId: module.id, - selector: 'md-sidenav', + selector: 'md-sidenav, mat-sidenav', template: '', host: { '(transitionend)': '_onTransitionEnd($event)', @@ -259,7 +259,7 @@ export class MdSidenav implements AfterContentInit { */ @Component({ moduleId: module.id, - selector: 'md-sidenav-layout', + selector: 'md-sidenav-layout, mat-sidenav-layout', // Do not use ChangeDetectionStrategy.OnPush. It does not work for this component because // technically it is a sibling of MdSidenav (on the content tree) and isn't updated when MdSidenav // changes its state. @@ -456,8 +456,8 @@ export class MdSidenavLayout implements AfterContentInit { @NgModule({ - imports: [CommonModule], - exports: [MdSidenavLayout, MdSidenav], + imports: [CommonModule, DefaultStyleCompatibilityModeModule], + exports: [MdSidenavLayout, MdSidenav, DefaultStyleCompatibilityModeModule], declarations: [MdSidenavLayout, MdSidenav], }) export class MdSidenavModule { diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 3afd6ea04bf0..1a4b57082e90 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -15,7 +15,12 @@ import { } from '@angular/core'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; import {FormsModule, ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; -import {applyCssTransform, coerceBooleanProperty, MdGestureConfig} from '../core'; +import { + applyCssTransform, + coerceBooleanProperty, + MdGestureConfig, + DefaultStyleCompatibilityModeModule, +} from '../core'; import {Observable} from 'rxjs/Observable'; @@ -36,7 +41,7 @@ let nextId = 0; @Component({ moduleId: module.id, - selector: 'md-slide-toggle', + selector: 'md-slide-toggle, mat-slide-toggle', host: { '[class.md-checked]': 'checked', '[class.md-disabled]': 'disabled', @@ -330,8 +335,8 @@ class SlideToggleRenderer { @NgModule({ - imports: [FormsModule], - exports: [MdSlideToggle], + imports: [FormsModule, DefaultStyleCompatibilityModeModule], + exports: [MdSlideToggle, DefaultStyleCompatibilityModeModule], declarations: [MdSlideToggle], }) export class MdSlideToggleModule { diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index e44638151165..103a6b455d56 100644 --- a/src/lib/slider/slider.ts +++ b/src/lib/slider/slider.ts @@ -12,7 +12,12 @@ import { } from '@angular/core'; import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms'; import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser'; -import {MdGestureConfig, coerceBooleanProperty, coerceNumberProperty} from '../core'; +import { + MdGestureConfig, + coerceBooleanProperty, + coerceNumberProperty, + DefaultStyleCompatibilityModeModule, +} from '../core'; import {Input as HammerInput} from 'hammerjs'; import {Dir} from '../core/rtl/dir'; import {CommonModule} from '@angular/common'; @@ -24,9 +29,10 @@ import { LEFT_ARROW, UP_ARROW, RIGHT_ARROW, - DOWN_ARROW + DOWN_ARROW, } from '../core/keyboard/keycodes'; + /** * Visually, a 30px separation between tick marks looks best. This is very subjective but it is * the default separation we chose. @@ -51,7 +57,7 @@ export class MdSliderChange { @Component({ moduleId: module.id, - selector: 'md-slider', + selector: 'md-slider, mat-slider', providers: [MD_SLIDER_VALUE_ACCESSOR], host: { '(blur)': '_onBlur()', @@ -475,8 +481,8 @@ export class SliderRenderer { @NgModule({ - imports: [CommonModule, FormsModule], - exports: [MdSlider], + imports: [CommonModule, FormsModule, DefaultStyleCompatibilityModeModule], + exports: [MdSlider, DefaultStyleCompatibilityModeModule], declarations: [MdSlider], providers: [ {provide: HAMMER_GESTURE_CONFIG, useClass: MdGestureConfig}, diff --git a/src/lib/snack-bar/snack-bar.ts b/src/lib/snack-bar/snack-bar.ts index db823a81f9d1..db35c6ba34ee 100644 --- a/src/lib/snack-bar/snack-bar.ts +++ b/src/lib/snack-bar/snack-bar.ts @@ -14,6 +14,7 @@ import { PortalModule, OVERLAY_PROVIDERS, MdLiveAnnouncer, + DefaultStyleCompatibilityModeModule, } from '../core'; import {CommonModule} from '@angular/common'; import {MdSnackBarConfig} from './snack-bar-config'; @@ -138,8 +139,8 @@ function _applyConfigDefaults(config: MdSnackBarConfig): MdSnackBarConfig { @NgModule({ - imports: [OverlayModule, PortalModule, CommonModule], - exports: [MdSnackBarContainer], + imports: [OverlayModule, PortalModule, CommonModule, DefaultStyleCompatibilityModeModule], + exports: [MdSnackBarContainer, DefaultStyleCompatibilityModeModule], declarations: [MdSnackBarContainer, SimpleSnackBar], entryComponents: [MdSnackBarContainer, SimpleSnackBar], }) diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts index 695116dbd0f5..e90956e2c5d1 100644 --- a/src/lib/tabs/ink-bar.ts +++ b/src/lib/tabs/ink-bar.ts @@ -3,7 +3,7 @@ import {Directive, Renderer, ElementRef} from '@angular/core'; /** The ink-bar is used to display and animate the line underneath the current active tab label. */ @Directive({ - selector: 'md-ink-bar', + selector: 'md-ink-bar, mat-ink-bar', }) export class MdInkBar { constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} diff --git a/src/lib/tabs/tab-label-wrapper.ts b/src/lib/tabs/tab-label-wrapper.ts index 2ff949579de5..0e1cd8e28b10 100644 --- a/src/lib/tabs/tab-label-wrapper.ts +++ b/src/lib/tabs/tab-label-wrapper.ts @@ -3,7 +3,7 @@ import {Directive, ElementRef} from '@angular/core'; /** Used in the `md-tab-group` view to display tab labels */ @Directive({ - selector: '[md-tab-label-wrapper]' + selector: '[md-tab-label-wrapper], [mat-tab-label-wrapper]' }) export class MdTabLabelWrapper { constructor(public elementRef: ElementRef) {} diff --git a/src/lib/tabs/tab-label.ts b/src/lib/tabs/tab-label.ts index 99603975d587..5b2efe2da2a0 100644 --- a/src/lib/tabs/tab-label.ts +++ b/src/lib/tabs/tab-label.ts @@ -3,7 +3,7 @@ import {TemplatePortalDirective} from '../core'; /** Used to flag tab labels for use with the portal directive */ @Directive({ - selector: '[md-tab-label]', + selector: '[md-tab-label], [mat-tab-label]', }) export class MdTabLabel extends TemplatePortalDirective { constructor(templateRef: TemplateRef, viewContainerRef: ViewContainerRef) { 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 365336b5c54d..9fcc8393c9c1 100644 --- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts @@ -17,7 +17,7 @@ import {MdRipple} from '../../core/ripple/ripple'; */ @Component({ moduleId: module.id, - selector: '[md-tab-nav-bar]', + selector: '[md-tab-nav-bar], [mat-tab-nav-bar]', templateUrl: 'tab-nav-bar.html', styleUrls: ['tab-nav-bar.css'], encapsulation: ViewEncapsulation.None, @@ -32,7 +32,7 @@ export class MdTabNavBar { } @Directive({ - selector: '[md-tab-link]', + selector: '[md-tab-link], [mat-tab-link]', }) export class MdTabLink { private _isActive: boolean = false; @@ -57,7 +57,7 @@ export class MdTabLink { * adds the ripple behavior to nav bar labels. */ @Directive({ - selector: '[md-tab-link]', + selector: '[md-tab-link], [mat-tab-link]', }) export class MdTabLinkRipple extends MdRipple implements OnDestroy { constructor(private _element: ElementRef) { diff --git a/src/lib/toolbar/toolbar.html b/src/lib/toolbar/toolbar.html index 9a0b3df0b388..ee722c3b0291 100644 --- a/src/lib/toolbar/toolbar.html +++ b/src/lib/toolbar/toolbar.html @@ -2,5 +2,5 @@ - -
\ No newline at end of file + + diff --git a/src/lib/toolbar/toolbar.ts b/src/lib/toolbar/toolbar.ts index 1315ee0ce285..86684777cd93 100644 --- a/src/lib/toolbar/toolbar.ts +++ b/src/lib/toolbar/toolbar.ts @@ -9,15 +9,17 @@ import { ElementRef, Renderer } from '@angular/core'; +import {DefaultStyleCompatibilityModeModule} from '../core'; + @Directive({ - selector: 'md-toolbar-row' + selector: 'md-toolbar-row, mat-toolbar-row' }) export class MdToolbarRow {} @Component({ moduleId: module.id, - selector: 'md-toolbar', + selector: 'md-toolbar, mat-toolbar', templateUrl: 'toolbar.html', styleUrls: ['toolbar.css'], changeDetection: ChangeDetectionStrategy.OnPush, @@ -54,7 +56,8 @@ export class MdToolbar { @NgModule({ - exports: [MdToolbar, MdToolbarRow], + imports: [DefaultStyleCompatibilityModeModule], + exports: [MdToolbar, MdToolbarRow, DefaultStyleCompatibilityModeModule], declarations: [MdToolbar, MdToolbarRow], }) export class MdToolbarModule { diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts index c08dc93a3a7f..a9621d78840f 100644 --- a/src/lib/tooltip/tooltip.ts +++ b/src/lib/tooltip/tooltip.ts @@ -23,10 +23,12 @@ import { OverlayConnectionPosition, OriginConnectionPosition, OVERLAY_PROVIDERS, + DefaultStyleCompatibilityModeModule, } from '../core'; import {Observable} from 'rxjs/Observable'; import {Subject} from 'rxjs/Subject'; + export type TooltipPosition = 'before' | 'after' | 'above' | 'below'; /** Time in ms to delay before changing the tooltip visibility to hidden */ @@ -39,7 +41,7 @@ export const TOUCHEND_HIDE_DELAY = 1500; * https://material.google.com/components/tooltips.html */ @Directive({ - selector: '[md-tooltip]', + selector: '[md-tooltip], [mat-tooltip]', host: { '(longpress)': 'show()', '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')', @@ -189,7 +191,7 @@ export type TooltipVisibility = 'visible' | 'hidden'; @Component({ moduleId: module.id, - selector: 'md-tooltip-component', + selector: 'md-tooltip-component, mat-tooltip-component', templateUrl: 'tooltip.html', styleUrls: ['tooltip.css'], animations: [ @@ -288,8 +290,8 @@ export class TooltipComponent { @NgModule({ - imports: [OverlayModule], - exports: [MdTooltip, TooltipComponent], + imports: [OverlayModule, DefaultStyleCompatibilityModeModule], + exports: [MdTooltip, TooltipComponent, DefaultStyleCompatibilityModeModule], declarations: [MdTooltip, TooltipComponent], entryComponents: [TooltipComponent], })