Skip to content

fix(core): allow for default color and tabindex to be set per instance #20125

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 13, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/material/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
this._options = this._options || {};

if (this._options.color) {
this.color = this._options.color;
this.color = this.defaultColor = this._options.color;
}

this.tabIndex = parseInt(tabIndex) || 0;
Expand Down
12 changes: 12 additions & 0 deletions src/material/core/common-behaviors/color.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,18 @@ describe('MixinColor', () => {
.toContain('mat-accent', 'Expected the default color "mat-accent" to be set.');
});

it('should allow for the default color to change after init', () => {
const classWithColor = mixinColor(TestClass, 'accent');
const instance = new classWithColor();

expect(instance.testElement.classList).toContain('mat-accent');

instance.defaultColor = 'warn';
instance.color = undefined;

expect(instance.testElement.classList).toContain('mat-warn');
});

});

class TestClass {
Expand Down
6 changes: 5 additions & 1 deletion src/material/core/common-behaviors/color.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ import {ElementRef} from '@angular/core';
export interface CanColor {
/** Theme color palette for the component. */
color: ThemePalette;

/** Default color to fall back to if no value is set. */
defaultColor: ThemePalette | undefined;
}

/** @docs-private */
Expand All @@ -31,10 +34,11 @@ export function mixinColor<T extends Constructor<HasElementRef>>(
base: T, defaultColor?: ThemePalette): CanColorCtor & T {
return class extends base {
private _color: ThemePalette;
defaultColor = defaultColor;

get color(): ThemePalette { return this._color; }
set color(value: ThemePalette) {
const colorPalette = value || defaultColor;
const colorPalette = value || this.defaultColor;

if (colorPalette !== this._color) {
if (this._color) {
Expand Down
12 changes: 12 additions & 0 deletions src/material/core/common-behaviors/tabindex.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,18 @@ describe('mixinTabIndex', () => {
.toBe(0, 'Expected tabIndex to still support 0 as value');
});

it('should allow for the default tabIndex to change after init', () => {
const classWithMixin = mixinTabIndex(TestClass, 20);
const instance = new classWithMixin();

expect(instance.tabIndex).toBe(20);

instance.defaultTabIndex = 50;
instance.tabIndex = undefined!;

expect(instance.tabIndex).toBe(50);
});

});

class TestClass {
Expand Down
6 changes: 5 additions & 1 deletion src/material/core/common-behaviors/tabindex.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import {CanDisable} from './disabled';
export interface HasTabIndex {
/** Tabindex of the component. */
tabIndex: number;

/** Tabindex to which to fall back to if no value is set. */
defaultTabIndex: number;
}

/** @docs-private */
Expand All @@ -25,11 +28,12 @@ export function mixinTabIndex<T extends Constructor<CanDisable>>(base: T, defaul
: HasTabIndexCtor & T {
return class extends base {
private _tabIndex: number = defaultTabIndex;
defaultTabIndex = defaultTabIndex;

get tabIndex(): number { return this.disabled ? -1 : this._tabIndex; }
set tabIndex(value: number) {
// If the specified tabIndex value is null or undefined, fall back to the default value.
this._tabIndex = value != null ? coerceNumberProperty(value) : defaultTabIndex;
this._tabIndex = value != null ? coerceNumberProperty(value) : this.defaultTabIndex;
}

constructor(...args: any[]) {
Expand Down
2 changes: 1 addition & 1 deletion src/material/datepicker/datepicker-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export interface MatDatepickerControl<D> {
/** Base class for a datepicker. */
@Directive()
export abstract class MatDatepickerBase<C extends MatDatepickerControl<D>, S,
D = ExtractDateTypeFromSelection<S>> implements OnDestroy, CanColor, OnChanges {
D = ExtractDateTypeFromSelection<S>> implements OnDestroy, OnChanges {
private _scrollStrategy: () => ScrollStrategy;
private _inputStateChanges = Subscription.EMPTY;

Expand Down
2 changes: 2 additions & 0 deletions tools/public_api_guard/material/core.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ export declare const JAN = 0, FEB = 1, MAR = 2, APR = 3, MAY = 4, JUN = 5, JUL =

export interface CanColor {
color: ThemePalette;
defaultColor: ThemePalette | undefined;
}

export declare type CanColorCtor = Constructor<CanColor>;
Expand Down Expand Up @@ -152,6 +153,7 @@ export interface HasInitialized {
export declare type HasInitializedCtor = Constructor<HasInitialized>;

export interface HasTabIndex {
defaultTabIndex: number;
tabIndex: number;
}

Expand Down