diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts index 00122a70363e..7038678a2c7f 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -19,12 +19,15 @@ export const MAT_ELEMENTS_SELECTOR = ` [mat-dialog-title], [mat-fab], [mat-icon-button], + [mat-menu-trigger-for], [mat-mini-fab], [mat-raised-button], [mat-tab-label], [mat-tab-link], [mat-tab-nav-bar], + [matTooltip], mat-autocomplete, + mat-button-toggle, mat-button-toggle-group, mat-button-toggle, mat-card, @@ -56,6 +59,7 @@ export const MAT_ELEMENTS_SELECTOR = ` mat-placeholder, mat-progress-bar, mat-progress-circle, + mat-pseudo-checkbox, mat-radio-button, mat-radio-group, mat-select, @@ -64,9 +68,10 @@ export const MAT_ELEMENTS_SELECTOR = ` mat-slider, mat-spinner, mat-tab, + mat-tab-body, + mat-tab-header, mat-tab-group, - mat-toolbar, - matTooltip`; + mat-toolbar`; /** Selector that matches all elements that may have style collisions with AngularJS Material. */ export const MD_ELEMENTS_SELECTOR = ` @@ -77,12 +82,15 @@ export const MD_ELEMENTS_SELECTOR = ` [md-dialog-title], [md-fab], [md-icon-button], + [md-menu-trigger-for], [md-mini-fab], [md-raised-button], [md-tab-label], [md-tab-link], [md-tab-nav-bar], + [mdTooltip], md-autocomplete, + md-button-toggle, md-button-toggle-group, md-button-toggle, md-card, @@ -114,6 +122,7 @@ export const MD_ELEMENTS_SELECTOR = ` md-placeholder, md-progress-bar, md-progress-circle, + md-pseudo-checkbox, md-radio-button, md-radio-group, md-select, @@ -122,9 +131,10 @@ export const MD_ELEMENTS_SELECTOR = ` md-slider, md-spinner, md-tab, + md-tab-body, + md-tab-header, md-tab-group, - md-toolbar, - mdTooltip`; + md-toolbar`; /** Directive that enforces that the `mat-` prefix cannot be used. */ @Directive({selector: MAT_ELEMENTS_SELECTOR}) diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts index fbb47a5f39b6..d98bcf1b55c6 100644 --- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts +++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts @@ -22,7 +22,7 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; @Component({ moduleId: module.id, encapsulation: ViewEncapsulation.None, - selector: 'md-pseudo-checkbox', + selector: 'md-pseudo-checkbox, mat-pseudo-checkbox', styleUrls: ['pseudo-checkbox.css'], template: '', host: { diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html index 56654847cf6e..13f341072051 100644 --- a/src/lib/input/input-container.html +++ b/src/lib/input/input-container.html @@ -1,6 +1,9 @@
-
+
+ + +
@@ -13,13 +16,16 @@ [class.mat-accent]="dividerColor == 'accent'" [class.mat-warn]="dividerColor == 'warn'" *ngIf="_hasPlaceholder()"> - + {{_mdInputChild.placeholder}} *
-
+
+ + +
{{hintLabel}}
- +
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts index d295603a2a58..aac7d0bd034f 100644 --- a/src/lib/menu/menu-trigger.ts +++ b/src/lib/menu/menu-trigger.ts @@ -30,9 +30,11 @@ import {MenuPositionX, MenuPositionY} from './menu-positions'; /** * This directive is intended to be used in conjunction with an md-menu tag. It is * responsible for toggling the display of the provided menu instance. + * TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors */ @Directive({ - selector: '[md-menu-trigger-for], [mat-menu-trigger-for], [mdMenuTriggerFor]', + selector: `[md-menu-trigger-for], [mat-menu-trigger-for], + [mdMenuTriggerFor], [matMenuTriggerFor]`, host: { 'aria-haspopup': 'true', '(mousedown)': '_handleMousedown($event)', @@ -53,8 +55,18 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy { /** @deprecated */ @Input('md-menu-trigger-for') - get _deprecatedMenuTriggerFor(): MdMenuPanel { return this.menu; } - set _deprecatedMenuTriggerFor(v: MdMenuPanel) { this.menu = v; } + 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 { return this.menu; } + set _matMenuTriggerFor(v: MdMenuPanel) { this.menu = v; } /** References the menu instance that the trigger is associated with. */ @Input('mdMenuTriggerFor') menu: MdMenuPanel; diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index a15c79201e35..b3afc9772b4c 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -46,7 +46,7 @@ export type MdTabBodyOriginState = 'left' | 'right'; */ @Component({ moduleId: module.id, - selector: 'md-tab-body', + selector: 'md-tab-body, mat-tab-body', templateUrl: 'tab-body.html', host: { '[class.mat-tab-body]': 'true', diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index e85922ad7662..8717273b6f87 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -50,7 +50,7 @@ export type MdTabHeaderPosition = 'above' | 'below'; */ @Component({ moduleId: module.id, - selector: 'md-tab-group', + selector: 'md-tab-group, mat-tab-group', templateUrl: 'tab-group.html', styleUrls: ['tab-group.css'], host: { diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts index 3c118ca9e20b..46724d7aacf5 100644 --- a/src/lib/tabs/tab-header.ts +++ b/src/lib/tabs/tab-header.ts @@ -40,7 +40,7 @@ const EXAGGERATED_OVERSCROLL = 60; */ @Component({ moduleId: module.id, - selector: 'md-tab-header', + selector: 'md-tab-header, mat-tab-header', templateUrl: 'tab-header.html', styleUrls: ['tab-header.css'], encapsulation: ViewEncapsulation.None,