diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts
index 520a0aa33329..994b0c9a8ee0 100644
--- a/src/lib/autocomplete/autocomplete.ts
+++ b/src/lib/autocomplete/autocomplete.ts
@@ -29,7 +29,7 @@ export type AutocompletePositionY = 'above' | 'below';
encapsulation: ViewEncapsulation.None,
exportAs: 'mdAutocomplete',
host: {
- '[class.mat-autocomplete]': 'true'
+ 'class': 'mat-autocomplete'
}
})
export class MdAutocomplete implements AfterContentInit {
diff --git a/src/lib/button-toggle/button-toggle.ts b/src/lib/button-toggle/button-toggle.ts
index a1f7ba503a38..83ca6af3ad7e 100644
--- a/src/lib/button-toggle/button-toggle.ts
+++ b/src/lib/button-toggle/button-toggle.ts
@@ -51,8 +51,8 @@ export class MdButtonToggleChange {
selector: 'md-button-toggle-group:not([multiple]), mat-button-toggle-group:not([multiple])',
providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
host: {
- '[class.mat-button-toggle-group]': 'true',
'role': 'radiogroup',
+ 'class': 'mat-button-toggle-group',
'[class.mat-button-toggle-vertical]': 'vertical'
},
exportAs: 'mdButtonToggleGroup',
@@ -238,7 +238,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
selector: 'md-button-toggle-group[multiple], mat-button-toggle-group[multiple]',
exportAs: 'mdButtonToggleGroup',
host: {
- '[class.mat-button-toggle-group]': 'true',
+ 'class': 'mat-button-toggle-group',
'[class.mat-button-toggle-vertical]': 'vertical'
}
})
@@ -278,7 +278,7 @@ export class MdButtonToggleGroupMultiple {
styleUrls: ['button-toggle.css'],
encapsulation: ViewEncapsulation.None,
host: {
- '[class.mat-button-toggle]': 'true'
+ 'class': 'mat-button-toggle'
}
})
export class MdButtonToggle implements OnInit {
diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts
index cd8c062761af..98b8a2d3e346 100644
--- a/src/lib/card/card.ts
+++ b/src/lib/card/card.ts
@@ -21,8 +21,11 @@ export class MdCardContent {}
* @docs-private
*/
@Directive({
- selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title]',
- host: {'class': 'mat-card-title'}
+ selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title],' +
+ '[mdCardTitle], [matCardTitle]',
+ host: {
+ 'class': 'mat-card-title '
+ }
})
export class MdCardTitle {}
@@ -31,8 +34,11 @@ export class MdCardTitle {}
* @docs-private
*/
@Directive({
- selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle]',
- host: {'class': 'mat-card-subtitle'}
+ selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle],' +
+ '[mdCardSubtitle], [matCardSubtitle]',
+ host: {
+ 'class': 'mat-card-subtitle '
+ }
})
export class MdCardSubtitle {}
@@ -61,47 +67,47 @@ export class MdCardFooter {}
* @docs-private
*/
@Directive({
- selector: '[md-card-sm-image], [mat-card-sm-image]',
- host: {'class': 'mat-card-sm-image'}
+ selector: '[md-card-image], [mat-card-image], [mdCardImage], [matCardImage]',
+ host: {'class': 'mat-card-image'}
})
-export class MdCardSmImage {}
+export class MdCardImage {}
/**
* Image used in a card, needed to add the mat- CSS styling.
* @docs-private
*/
@Directive({
- selector: '[md-card-md-image], [mat-card-md-image]',
- host: {'class': 'mat-card-md-image'}
+ selector: '[md-card-sm-image], [mat-card-sm-image], [mdCardImageSmall], [matCardImageSmall]',
+ host: {'class': 'mat-card-sm-image'}
})
-export class MdCardMdImage {}
+export class MdCardSmImage {}
/**
* Image used in a card, needed to add the mat- CSS styling.
* @docs-private
*/
@Directive({
- selector: '[md-card-lg-image], [mat-card-lg-image]',
- host: {'class': 'mat-card-lg-image'}
+ selector: '[md-card-md-image], [mat-card-md-image], [mdCardImageMedium], [matCardImageMedium]',
+ host: {'class': 'mat-card-md-image'}
})
-export class MdCardLgImage {}
+export class MdCardMdImage {}
/**
* Image used in a card, needed to add the mat- CSS styling.
* @docs-private
*/
@Directive({
- selector: '[md-card-image], [mat-card-image]',
- host: {'class': 'mat-card-image'}
+ selector: '[md-card-lg-image], [mat-card-lg-image], [mdCardImageLarge], [matCardImageLarge]',
+ host: {'class': 'mat-card-lg-image'}
})
-export class MdCardImage {}
+export class MdCardLgImage {}
/**
* 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]',
+ selector: '[md-card-xl-image], [mat-card-xl-image], [mdCardImageXLarge], [matCardImageXLarge]',
host: {'class': 'mat-card-xl-image'}
})
export class MdCardXlImage {}
@@ -111,7 +117,7 @@ export class MdCardXlImage {}
* @docs-private
*/
@Directive({
- selector: '[md-card-avatar], [mat-card-avatar]',
+ selector: '[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]',
host: {'class': 'mat-card-avatar'}
})
export class MdCardAvatar {}
diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts
index 23b3099de268..2c34195226c9 100644
--- a/src/lib/chips/chip-list.ts
+++ b/src/lib/chips/chip-list.ts
@@ -33,7 +33,7 @@ import {Subscription} from 'rxjs/Subscription';
// Properties
'[attr.tabindex]': '_tabIndex',
'role': 'listbox',
- '[class.mat-chip-list]': 'true',
+ 'class': 'mat-chip-list',
// Events
'(focus)': 'focus()',
diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts
index 0e71e122e279..a04c1d51e4a4 100644
--- a/src/lib/core/compatibility/compatibility.ts
+++ b/src/lib/core/compatibility/compatibility.ts
@@ -15,25 +15,26 @@ export function getMdCompatibilityInvalidPrefixError(prefix: string, nodeName: s
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
export const MAT_ELEMENTS_SELECTOR = `
[mat-button],
- [mat-card-subtitle],
- [mat-card-title],
- [mat-dialog-actions],
- [mat-dialog-close],
- [mat-dialog-content],
- [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],
+ [matCardSubtitle],
+ [matCardTitle],
+ [matDialogActions],
+ [matDialogClose],
+ [matDialogContent],
+ [matDialogTitle],
+ [matLine],
+ [matMenuTriggerFor],
+ [matTabLabel],
+ [matTabLink],
+ [matTabNav],
[matTooltip],
mat-autocomplete,
mat-button-toggle,
- mat-button-toggle-group,
mat-button-toggle,
+ mat-button-toggle-group,
mat-card,
mat-card-actions,
mat-card-content,
@@ -48,6 +49,7 @@ export const MAT_ELEMENTS_SELECTOR = `
mat-dialog-container,
mat-dialog-content,
mat-divider,
+ mat-error,
mat-grid-list,
mat-grid-tile,
mat-grid-tile-footer,
@@ -71,31 +73,31 @@ export const MAT_ELEMENTS_SELECTOR = `
mat-spinner,
mat-tab,
mat-tab-group,
- mat-toolbar,
- mat-error`;
+ mat-toolbar`;
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
export const MD_ELEMENTS_SELECTOR = `
[md-button],
- [md-card-subtitle],
- [md-card-title],
- [md-dialog-actions],
- [md-dialog-close],
- [md-dialog-content],
- [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],
+ [mdCardSubtitle],
+ [mdCardTitle],
+ [mdDialogActions],
+ [mdDialogClose],
+ [mdDialogContent],
+ [mdDialogTitle],
+ [mdLine],
+ [mdMenuTriggerFor],
+ [mdTabLabel],
+ [mdTabLink],
+ [mdTabNav],
[mdTooltip],
md-autocomplete,
md-button-toggle,
- md-button-toggle-group,
md-button-toggle,
+ md-button-toggle-group,
md-card,
md-card-actions,
md-card-content,
@@ -110,6 +112,7 @@ export const MD_ELEMENTS_SELECTOR = `
md-dialog-container,
md-dialog-content,
md-divider,
+ md-error,
md-grid-list,
md-grid-tile,
md-grid-tile-footer,
@@ -133,8 +136,7 @@ export const MD_ELEMENTS_SELECTOR = `
md-spinner,
md-tab,
md-tab-group,
- md-toolbar,
- md-error`;
+ md-toolbar`;
/** Directive that enforces that the `mat-` prefix cannot be used. */
@Directive({selector: MAT_ELEMENTS_SELECTOR})
diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts
index 5527882af6e8..9ba6624b9cb9 100644
--- a/src/lib/core/line/line.ts
+++ b/src/lib/core/line/line.ts
@@ -14,10 +14,8 @@ import {MdCommonModule} from '../common-behaviors/common-module';
* counted by checking the query list's length.
*/
@Directive({
- selector: '[md-line], [mat-line]',
- host: {
- '[class.mat-line]': 'true'
- }
+ selector: '[md-line], [mat-line], [mdLine], [matLine]',
+ host: {'class': 'mat-line'}
})
export class MdLine {}
diff --git a/src/lib/core/option/option.ts b/src/lib/core/option/option.ts
index 3ad394fdc659..21cab9f941b6 100644
--- a/src/lib/core/option/option.ts
+++ b/src/lib/core/option/option.ts
@@ -44,7 +44,7 @@ export class MdOptionSelectionChange {
'[class.mat-option-disabled]': 'disabled',
'(click)': '_selectViaInteraction()',
'(keydown)': '_handleKeydown($event)',
- '[class.mat-option]': 'true',
+ 'class': 'mat-option',
},
templateUrl: 'option.html',
encapsulation: ViewEncapsulation.None
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
index ced221138036..11bbea9d20de 100644
--- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
+++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
@@ -36,7 +36,7 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
inputs: ['color'],
template: '',
host: {
- '[class.mat-pseudo-checkbox]': 'true',
+ 'class': 'mat-pseudo-checkbox',
'[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
'[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
'[class.mat-pseudo-checkbox-disabled]': 'disabled',
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
index faff96fec542..2f4d48b989e2 100644
--- a/src/lib/datepicker/calendar.ts
+++ b/src/lib/datepicker/calendar.ts
@@ -39,7 +39,7 @@ import {MATERIAL_COMPATIBILITY_MODE} from '../core';
templateUrl: 'calendar.html',
styleUrls: ['calendar.css'],
host: {
- '[class.mat-calendar]': 'true',
+ 'class': 'mat-calendar',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/lib/dialog/dialog-container.ts b/src/lib/dialog/dialog-container.ts
index e131df85e583..a6db1e8fd40b 100644
--- a/src/lib/dialog/dialog-container.ts
+++ b/src/lib/dialog/dialog-container.ts
@@ -56,7 +56,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
])
],
host: {
- '[class.mat-dialog-container]': 'true',
+ 'class': 'mat-dialog-container',
'[attr.role]': '_config?.role',
'[@slideDialog]': '_state',
'(@slideDialog.done)': '_onAnimationDone($event)',
diff --git a/src/lib/dialog/dialog-content-directives.ts b/src/lib/dialog/dialog-content-directives.ts
index bfeaf596f6f7..de8769ca7241 100644
--- a/src/lib/dialog/dialog-content-directives.ts
+++ b/src/lib/dialog/dialog-content-directives.ts
@@ -6,7 +6,8 @@ import {MdDialogRef} from './dialog-ref';
* Button that will close the current dialog.
*/
@Directive({
- selector: 'button[md-dialog-close], button[mat-dialog-close]',
+ selector: 'button[md-dialog-close], button[mat-dialog-close],' +
+ 'button[mdDialogClose], button[matDialogClose]',
host: {
'(click)': 'dialogRef.close(dialogResult)',
'[attr.aria-label]': 'ariaLabel',
@@ -30,10 +31,8 @@ export class MdDialogClose {
* Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
*/
@Directive({
- selector: '[md-dialog-title], [mat-dialog-title]',
- host: {
- '[class.mat-dialog-title]': 'true'
- }
+ selector: '[md-dialog-title], [mat-dialog-title], [mdDialogTitle], [matDialogTitle]',
+ host: {'class': 'mat-dialog-title'},
})
export class MdDialogTitle { }
@@ -42,10 +41,9 @@ export class MdDialogTitle { }
* Scrollable content container of a dialog.
*/
@Directive({
- selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content',
- host: {
- '[class.mat-dialog-content]': 'true'
- }
+ selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content,' +
+ '[mdDialogContent], [matDialogContent]',
+ host: {'class': 'mat-dialog-content'}
})
export class MdDialogContent { }
@@ -55,9 +53,8 @@ export class MdDialogContent { }
* Stays fixed to the bottom when scrolling.
*/
@Directive({
- selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions',
- host: {
- '[class.mat-dialog-actions]': 'true'
- }
+ selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions,' +
+ '[mdDialogActions], [matDialogActions]',
+ host: {'class': 'mat-dialog-actions'}
})
export class MdDialogActions { }
diff --git a/src/lib/grid-list/grid-list.ts b/src/lib/grid-list/grid-list.ts
index 4afb0f83bdc3..b3eb4699bbb2 100644
--- a/src/lib/grid-list/grid-list.ts
+++ b/src/lib/grid-list/grid-list.ts
@@ -33,7 +33,7 @@ const MD_FIT_MODE = 'fit';
styleUrls: ['grid-list.css'],
host: {
'role': 'list',
- '[class.mat-grid-list]': 'true',
+ 'class': 'mat-grid-list',
},
encapsulation: ViewEncapsulation.None,
})
diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts
index b40b8f14bb3e..4a609d833a06 100644
--- a/src/lib/grid-list/grid-tile.ts
+++ b/src/lib/grid-list/grid-tile.ts
@@ -16,7 +16,7 @@ import {coerceToNumber} from './grid-list-measure';
selector: 'md-grid-tile, mat-grid-tile',
host: {
'role': 'listitem',
- '[class.mat-grid-tile]': 'true',
+ 'class': 'mat-grid-tile',
},
templateUrl: 'grid-tile.html',
styleUrls: ['grid-list.css'],
@@ -72,10 +72,8 @@ export class MdGridTileText implements AfterContentInit {
* @docs-private
*/
@Directive({
- selector: '[md-grid-avatar], [mat-grid-avatar]',
- host: {
- '[class.mat-grid-avatar]': 'true'
- }
+ selector: '[md-grid-avatar], [mat-grid-avatar], [mdGridAvatar], [matGridAvatar]',
+ host: {'class': 'mat-grid-avatar'}
})
export class MdGridAvatarCssMatStyler {}
@@ -85,9 +83,7 @@ export class MdGridAvatarCssMatStyler {}
*/
@Directive({
selector: 'md-grid-tile-header, mat-grid-tile-header',
- host: {
- '[class.mat-grid-tile-header]': 'true'
- }
+ host: {'class': 'mat-grid-tile-header'}
})
export class MdGridTileHeaderCssMatStyler {}
@@ -97,8 +93,6 @@ export class MdGridTileHeaderCssMatStyler {}
*/
@Directive({
selector: 'md-grid-tile-footer, mat-grid-tile-footer',
- host: {
- '[class.mat-grid-tile-footer]': 'true'
- }
+ host: {'class': 'mat-grid-tile-footer'}
})
export class MdGridTileFooterCssMatStyler {}
diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index 79a4eb9eb6aa..ad7f403da86f 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -62,7 +62,7 @@ export const _MdIconMixinBase = mixinColor(MdIconBase);
inputs: ['color'],
host: {
'role': 'img',
- 'class': 'mat-icon'
+ 'class': 'mat-icon',
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/lib/input/autosize.ts b/src/lib/input/autosize.ts
index 4d737a5fea23..14a4f67f434e 100644
--- a/src/lib/input/autosize.ts
+++ b/src/lib/input/autosize.ts
@@ -19,8 +19,7 @@ export class MdTextareaAutosize implements AfterViewInit {
private _minRows: number;
private _maxRows: number;
- /** @deprecated Use mdAutosizeMinRows */
- @Input()
+ @Input('mdAutosizeMinRows')
get minRows() { return this._minRows; }
set minRows(value: number) {
@@ -28,24 +27,20 @@ export class MdTextareaAutosize implements AfterViewInit {
this._setMinHeight();
}
- /** @deprecated Use mdAutosizeMaxRows */
- @Input()
+ @Input('mdAutosizeMaxRows')
get maxRows() { return this._maxRows; }
-
set maxRows(value: number) {
this._maxRows = value;
this._setMaxHeight();
}
- /** Minimum number of rows for this textarea. */
- @Input()
- get mdAutosizeMinRows(): number { return this.minRows; }
- set mdAutosizeMinRows(value: number) { this.minRows = value; }
+ @Input('matAutosizeMaxRows')
+ get _matAutosizeMinRows() { return this.minRows; }
+ set _matAutosizeMinRows(v) { this.minRows = v; }
- /** Maximum number of rows for this textarea. */
- @Input()
- get mdAutosizeMaxRows(): number { return this.maxRows; }
- set mdAutosizeMaxRows(value: number) { this.maxRows = value; }
+ @Input('matAutosizeMaxRows')
+ get _matAutosizeMaxRows() { return this.maxRows; }
+ set _matAutosizeMaxRows(v) { this.maxRows = v; }
/** Cached height of a textarea with a single row. */
private _cachedLineHeight: number;
diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts
index 85bc55c66a1c..0fd64f02646f 100644
--- a/src/lib/input/input-container.ts
+++ b/src/lib/input/input-container.ts
@@ -66,7 +66,7 @@ export class MdPlaceholder {}
@Directive({
selector: 'md-hint, mat-hint',
host: {
- '[class.mat-hint]': 'true',
+ 'class': 'mat-hint',
'[class.mat-right]': 'align == "end"',
'[attr.id]': 'id',
}
@@ -83,7 +83,7 @@ export class MdHint {
@Directive({
selector: 'md-error, mat-error',
host: {
- '[class.mat-input-error]': 'true'
+ 'class': 'mat-input-error'
}
})
export class MdErrorDirective { }
@@ -106,7 +106,7 @@ export class MdSuffix {}
@Directive({
selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
host: {
- '[class.mat-input-element]': 'true',
+ 'class': 'mat-input-element',
// Native input properties that are overwritten by Angular inputs need to be synced with
// the native input element. Otherwise property bindings for those don't work.
'[id]': 'id',
@@ -298,7 +298,7 @@ export class MdInputDirective {
host: {
// Remove align attribute to prevent it from interfering with layout.
'[attr.align]': 'null',
- '[class.mat-input-container]': 'true',
+ 'class': 'mat-input-container',
'[class.mat-input-invalid]': '_mdInputChild._isErrorState()',
'[class.mat-focused]': '_mdInputChild.focused',
'[class.ng-untouched]': '_shouldForward("untouched")',
diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
index 5bc594c0b38d..832afc7bf391 100644
--- a/src/lib/list/list.spec.ts
+++ b/src/lib/list/list.spec.ts
@@ -100,7 +100,9 @@ describe('MdList', () => {
fixture.detectChanges();
let listItem = fixture.debugElement.children[0].query(By.css('md-list-item'));
- expect(listItem.nativeElement.className).toBe('mat-2-line 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');
fixture.debugElement.componentInstance.showThirdLine = true;
fixture.detectChanges();
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index cea35de9e0b4..dcc7a77d16fc 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -25,9 +25,7 @@ export class MdListDivider {}
@Component({
moduleId: module.id,
selector: 'md-list, mat-list, md-nav-list, mat-nav-list',
- host: {
- 'role': 'list'
- },
+ host: {'role': 'list'},
template: '',
styleUrls: ['list.css'],
encapsulation: ViewEncapsulation.None
@@ -50,9 +48,7 @@ export class MdList {
*/
@Directive({
selector: 'md-list, mat-list',
- host: {
- '[class.mat-list]': 'true'
- }
+ host: {'class': 'mat-list'}
})
export class MdListCssMatStyler {}
@@ -62,9 +58,7 @@ export class MdListCssMatStyler {}
*/
@Directive({
selector: 'md-nav-list, mat-nav-list',
- host: {
- '[class.mat-nav-list]': 'true'
- }
+ host: {'class': 'mat-nav-list'}
})
export class MdNavListCssMatStyler {}
@@ -74,9 +68,7 @@ export class MdNavListCssMatStyler {}
*/
@Directive({
selector: 'md-divider, mat-divider',
- host: {
- '[class.mat-divider]': 'true'
- }
+ host: {'class': 'mat-divider'}
})
export class MdDividerCssMatStyler {}
@@ -85,10 +77,8 @@ export class MdDividerCssMatStyler {}
* @docs-private
*/
@Directive({
- selector: '[md-list-avatar], [mat-list-avatar]',
- host: {
- '[class.mat-list-avatar]': 'true'
- }
+ selector: '[md-list-avatar], [mat-list-avatar], [mdListAvatar], [matListAvatar]',
+ host: {'class': 'mat-list-avatar'}
})
export class MdListAvatarCssMatStyler {}
@@ -97,10 +87,8 @@ export class MdListAvatarCssMatStyler {}
* @docs-private
*/
@Directive({
- selector: '[md-list-icon], [mat-list-icon]',
- host: {
- '[class.mat-list-icon]': 'true'
- }
+ selector: '[md-list-icon], [mat-list-icon], [mdListIcon], [matListIcon]',
+ host: {'class': 'mat-list-icon'}
})
export class MdListIconCssMatStyler {}
@@ -110,9 +98,7 @@ export class MdListIconCssMatStyler {}
*/
@Directive({
selector: '[md-subheader], [mat-subheader]',
- host: {
- '[class.mat-subheader]': 'true'
- }
+ host: {'class': 'mat-subheader'}
})
export class MdListSubheaderCssMatStyler {}
@@ -121,9 +107,9 @@ export class MdListSubheaderCssMatStyler {}
selector: 'md-list-item, mat-list-item, a[md-list-item], a[mat-list-item]',
host: {
'role': 'listitem',
+ 'class': 'mat-list-item',
'(focus)': '_handleFocus()',
'(blur)': '_handleBlur()',
- '[class.mat-list-item]': 'true',
},
templateUrl: 'list-item.html',
encapsulation: ViewEncapsulation.None
diff --git a/src/lib/menu/menu-item.ts b/src/lib/menu/menu-item.ts
index 1f453302bf81..273019f46662 100644
--- a/src/lib/menu/menu-item.ts
+++ b/src/lib/menu/menu-item.ts
@@ -11,7 +11,7 @@ import {coerceBooleanProperty} from '../core/coercion/boolean-property';
selector: '[md-menu-item], [mat-menu-item]',
host: {
'role': 'menuitem',
- '[class.mat-menu-item]': 'true',
+ 'class': 'mat-menu-item',
'[attr.tabindex]': '_getTabIndex()',
'[attr.aria-disabled]': 'disabled.toString()',
'[attr.disabled]': '_getDisabledAttr()',
diff --git a/src/lib/progress-bar/progress-bar.ts b/src/lib/progress-bar/progress-bar.ts
index a5dc0184b1e9..5f4bf5320b04 100644
--- a/src/lib/progress-bar/progress-bar.ts
+++ b/src/lib/progress-bar/progress-bar.ts
@@ -22,7 +22,7 @@ import {
'[class.mat-primary]': 'color == "primary"',
'[class.mat-accent]': 'color == "accent"',
'[class.mat-warn]': 'color == "warn"',
- '[class.mat-progress-bar]': 'true',
+ 'class': 'mat-progress-bar',
},
templateUrl: 'progress-bar.html',
styleUrls: ['progress-bar.css'],
diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts
index b9265e2e5079..c28e034c2888 100644
--- a/src/lib/progress-spinner/progress-spinner.ts
+++ b/src/lib/progress-spinner/progress-spinner.ts
@@ -44,9 +44,7 @@ type EasingFn = (currentTime: number, startValue: number,
*/
@Directive({
selector: 'md-progress-spinner, mat-progress-spinner',
- host: {
- '[class.mat-progress-spinner]': 'true'
- }
+ host: {'class': 'mat-progress-spinner'}
})
export class MdProgressSpinnerCssMatStyler {}
@@ -270,7 +268,7 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
host: {
'role': 'progressbar',
'mode': 'indeterminate',
- '[class.mat-spinner]': 'true',
+ 'class': 'mat-spinner',
},
inputs: ['color'],
templateUrl: 'progress-spinner.html',
diff --git a/src/lib/radio/radio.ts b/src/lib/radio/radio.ts
index 191be67bb80b..4bc22455ef10 100644
--- a/src/lib/radio/radio.ts
+++ b/src/lib/radio/radio.ts
@@ -65,7 +65,7 @@ export const _MdRadioGroupMixinBase = mixinDisabled(MdRadioGroupBase);
providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
host: {
'role': 'radiogroup',
- '[class.mat-radio-group]': 'true',
+ 'class': 'mat-radio-group',
},
inputs: ['disabled'],
})
@@ -297,7 +297,7 @@ export class MdRadioGroup extends _MdRadioGroupMixinBase
styleUrls: ['radio.css'],
encapsulation: ViewEncapsulation.None,
host: {
- '[class.mat-radio-button]': 'true',
+ 'class': 'mat-radio-button',
'[class.mat-radio-checked]': 'checked',
'[class.mat-radio-disabled]': 'disabled',
'[attr.id]': 'id',
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 84a70f1e6a45..d9a7eb643105 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -125,7 +125,7 @@ export const _MdSelectMixinBase = mixinColor(MdSelectBase, 'primary');
'[attr.aria-invalid]': '_control?.invalid || "false"',
'[attr.aria-owns]': '_optionIds',
'[class.mat-select-disabled]': 'disabled',
- '[class.mat-select]': 'true',
+ 'class': 'mat-select',
'(keydown)': '_handleClosedKeydown($event)',
'(blur)': '_onBlur()',
},
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index f6d31da57076..8dd8116e9377 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -46,7 +46,7 @@ export class MdSidenavToggleResult {
// TODO(mmalerba): move template to separate file.
templateUrl: 'sidenav.html',
host: {
- '[class.mat-sidenav]': 'true',
+ 'class': 'mat-sidenav',
'(transitionend)': '_onTransitionEnd($event)',
'(keydown)': 'handleKeydown($event)',
// must prevent the browser from aligning text based on value
@@ -324,7 +324,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
'sidenav-transitions.css',
],
host: {
- '[class.mat-sidenav-container]': 'true',
+ 'class': 'mat-sidenav-container',
'[class.mat-sidenav-transition]': '_enableTransitions',
},
encapsulation: ViewEncapsulation.None,
diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts
index 37e8c4cd1616..6c2ba029c0bd 100644
--- a/src/lib/snack-bar/simple-snack-bar.ts
+++ b/src/lib/snack-bar/simple-snack-bar.ts
@@ -13,7 +13,7 @@ import {MdSnackBarRef} from './snack-bar-ref';
styleUrls: ['simple-snack-bar.css'],
encapsulation: ViewEncapsulation.None,
host: {
- '[class.mat-simple-snackbar]': 'true',
+ 'class': 'mat-simple-snackbar',
}
})
export class SimpleSnackBar {
diff --git a/src/lib/tabs/index.ts b/src/lib/tabs/index.ts
index 68b85419a5e3..a0b6b59b003b 100644
--- a/src/lib/tabs/index.ts
+++ b/src/lib/tabs/index.ts
@@ -7,7 +7,7 @@ import {MdTab} from './tab';
import {MdTabGroup} from './tab-group';
import {MdTabLabel} from './tab-label';
import {MdTabLabelWrapper} from './tab-label-wrapper';
-import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
+import {MdTabNav, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
import {MdInkBar} from './ink-bar';
import {MdTabBody} from './tab-body';
import {VIEWPORT_RULER_PROVIDER} from '../core/overlay/position/viewport-ruler';
@@ -28,7 +28,7 @@ import {ScrollDispatchModule} from '../core/overlay/scroll/index';
MdTabGroup,
MdTabLabel,
MdTab,
- MdTabNavBar,
+ MdTabNav,
MdTabLink,
MdTabLinkRipple
],
@@ -38,7 +38,7 @@ import {ScrollDispatchModule} from '../core/overlay/scroll/index';
MdTab,
MdInkBar,
MdTabLabelWrapper,
- MdTabNavBar,
+ MdTabNav,
MdTabLink,
MdTabBody,
MdTabLinkRipple,
@@ -56,3 +56,4 @@ 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';
diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts
index 22705277ab57..9418e15f9713 100644
--- a/src/lib/tabs/ink-bar.ts
+++ b/src/lib/tabs/ink-bar.ts
@@ -8,7 +8,7 @@ import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core';
@Directive({
selector: 'md-ink-bar, mat-ink-bar',
host: {
- '[class.mat-ink-bar]': 'true',
+ 'class': 'mat-ink-bar',
},
})
export class MdInkBar {
diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
index 77e78a2baa75..debf68e2665e 100644
--- a/src/lib/tabs/tab-body.ts
+++ b/src/lib/tabs/tab-body.ts
@@ -53,7 +53,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
styleUrls: ['tab-body.css'],
encapsulation: ViewEncapsulation.None,
host: {
- '[class.mat-tab-body]': 'true',
+ 'class': 'mat-tab-body',
},
animations: [
trigger('translateTab', [
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
index e8102f199711..fbe3745bb277 100644
--- a/src/lib/tabs/tab-group.ts
+++ b/src/lib/tabs/tab-group.ts
@@ -38,7 +38,7 @@ export type MdTabHeaderPosition = 'above' | 'below';
templateUrl: 'tab-group.html',
styleUrls: ['tab-group.css'],
host: {
- '[class.mat-tab-group]': 'true',
+ 'class': 'mat-tab-group',
'[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
'[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
}
diff --git a/src/lib/tabs/tab-label.ts b/src/lib/tabs/tab-label.ts
index 5b2efe2da2a0..67eda41d9c6d 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], [mat-tab-label]',
+ selector: '[md-tab-label], [mat-tab-label], [mdTabLabel], [matTabLabel]',
})
export class MdTabLabel extends TemplatePortalDirective {
constructor(templateRef: TemplateRef, viewContainerRef: 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 275d2b6df663..fbd96fc1d269 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
@@ -1,6 +1,6 @@
import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
import {MdTabsModule} from '../index';
-import {MdTabNavBar} from './tab-nav-bar';
+import {MdTabNav} from './tab-nav-bar';
import {Component, ViewChild} from '@angular/core';
import {By} from '@angular/platform-browser';
import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
@@ -131,7 +131,7 @@ describe('MdTabNavBar', () => {
`
})
class SimpleTabNavBarTestApp {
- @ViewChild(MdTabNavBar) tabNavBar: MdTabNavBar;
+ @ViewChild(MdTabNav) tabNavBar: MdTabNav;
label = '';
tabs = [0, 1, 2];
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 2ec833080d67..b74e33f729fc 100644
--- a/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/lib/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -28,13 +28,13 @@ import {Subject} from 'rxjs/Subject';
*/
@Component({
moduleId: module.id,
- selector: '[md-tab-nav-bar], [mat-tab-nav-bar]',
+ selector: '[md-tab-nav-bar], [mat-tab-nav-bar], [mdTabNav], [matTabNav]',
templateUrl: 'tab-nav-bar.html',
styleUrls: ['tab-nav-bar.css'],
host: {'class': 'mat-tab-nav-bar'},
encapsulation: ViewEncapsulation.None,
})
-export class MdTabNavBar implements AfterContentInit, OnDestroy {
+export class MdTabNav implements AfterContentInit, OnDestroy {
/** Subject that emits when the component has been destroyed. */
private _onDestroy = new Subject();
@@ -88,7 +88,7 @@ export class MdTabNavBar implements AfterContentInit, OnDestroy {
* Link inside of a `md-tab-nav-bar`.
*/
@Directive({
- selector: '[md-tab-link], [mat-tab-link]',
+ selector: '[md-tab-link], [mat-tab-link], [mdTabLink], [matTabLink]',
host: {'class': 'mat-tab-link'}
})
export class MdTabLink {
@@ -104,7 +104,7 @@ export class MdTabLink {
}
}
- constructor(private _mdTabNavBar: MdTabNavBar, private _elementRef: ElementRef) {}
+ constructor(private _mdTabNavBar: MdTabNav, private _elementRef: ElementRef) {}
}
/**
@@ -112,8 +112,7 @@ export class MdTabLink {
* adds the ripple behavior to nav bar labels.
*/
@Directive({
- selector: '[md-tab-link], [mat-tab-link]',
- host: {'class': 'mat-tab-link'},
+ selector: '[md-tab-link], [mat-tab-link], [mdTabLink], [matTabLink]',
})
export class MdTabLinkRipple extends MdRipple {
constructor(
diff --git a/src/lib/toolbar/toolbar.ts b/src/lib/toolbar/toolbar.ts
index 87d0f85be9b8..eae0b087d167 100644
--- a/src/lib/toolbar/toolbar.ts
+++ b/src/lib/toolbar/toolbar.ts
@@ -11,9 +11,7 @@ import {CanColor, mixinColor} from '../core/common-behaviors/color';
@Directive({
selector: 'md-toolbar-row, mat-toolbar-row',
- host: {
- '[class.mat-toolbar-row]': 'true',
- },
+ host: {'class': 'mat-toolbar-row'},
})
export class MdToolbarRow {}
@@ -31,7 +29,7 @@ export const _MdToolbarMixinBase = mixinColor(MdToolbarBase);
styleUrls: ['toolbar.css'],
inputs: ['color'],
host: {
- '[class.mat-toolbar]': 'true',
+ 'class': 'mat-toolbar',
'role': 'toolbar'
},
changeDetection: ChangeDetectionStrategy.OnPush,