From 3eb0681af9e4610d2d10524a89fcbfe592a2e89f Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Tue, 13 Jun 2017 14:16:20 -0700 Subject: [PATCH] feat: add camelCase selectors where they were missing (#4901) --- src/lib/autocomplete/autocomplete.ts | 2 +- src/lib/button-toggle/button-toggle.ts | 6 +-- src/lib/card/card.ts | 42 ++++++++------- src/lib/chips/chip-list.ts | 2 +- src/lib/core/compatibility/compatibility.ts | 52 +++++++++---------- src/lib/core/line/line.ts | 6 +-- src/lib/core/option/option.ts | 2 +- .../pseudo-checkbox/pseudo-checkbox.ts | 2 +- src/lib/datepicker/calendar.ts | 2 +- src/lib/dialog/dialog-container.ts | 2 +- src/lib/dialog/dialog-content-directives.ts | 23 ++++---- src/lib/grid-list/grid-list.ts | 2 +- src/lib/grid-list/grid-tile.ts | 16 ++---- src/lib/icon/icon.ts | 2 +- src/lib/input/autosize.ts | 21 +++----- src/lib/input/input-container.ts | 8 +-- src/lib/list/list.spec.ts | 4 +- src/lib/list/list.ts | 34 ++++-------- src/lib/menu/menu-item.ts | 2 +- src/lib/progress-bar/progress-bar.ts | 2 +- src/lib/progress-spinner/progress-spinner.ts | 6 +-- src/lib/radio/radio.ts | 4 +- src/lib/select/select.ts | 2 +- src/lib/sidenav/sidenav.ts | 4 +- src/lib/snack-bar/simple-snack-bar.ts | 2 +- src/lib/tabs/index.ts | 7 +-- src/lib/tabs/ink-bar.ts | 2 +- src/lib/tabs/tab-body.ts | 2 +- src/lib/tabs/tab-group.ts | 2 +- src/lib/tabs/tab-label.ts | 2 +- src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts | 4 +- src/lib/tabs/tab-nav-bar/tab-nav-bar.ts | 11 ++-- src/lib/toolbar/toolbar.ts | 6 +-- 33 files changed, 130 insertions(+), 156 deletions(-) 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..6847a818c4e1 100644 --- a/src/lib/core/compatibility/compatibility.ts +++ b/src/lib/core/compatibility/compatibility.ts @@ -15,25 +15,25 @@ 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], + [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 +48,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 +72,30 @@ 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], + [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 +110,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 +134,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 ff8cdde921c9..6d1a3f16c385 100644 --- a/src/lib/radio/radio.ts +++ b/src/lib/radio/radio.ts @@ -66,7 +66,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'], }) @@ -307,7 +307,7 @@ export const _MdRadioButtonMixinBase = mixinColor(MdRadioButtonBase, 'accent'); inputs: ['color'], 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,