Skip to content

Commit 9c5465b

Browse files
devversiondevversion
committed
Updates
1 parent 2f6c16d commit 9c5465b

File tree

11 files changed

+76
-80
lines changed

11 files changed

+76
-80
lines changed

‎src/lib/button/button.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,9 @@ export class MdMiniFabCssMatStyler {}
7373

7474
// Boilerplate for applying mixins to MdButton.
7575
export class MdButtonBase {
76-
_renderer: Renderer2;
77-
_elementRef: ElementRef;
76+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
7877
}
79-
export const _MdButtonMixinBase = mixinColor(mixinDisabled(MdButtonBase), true);
78+
export const _MdButtonMixinBase = mixinColor(mixinDisabled(MdButtonBase));
8079

8180

8281
/**
@@ -112,11 +111,11 @@ export class MdButton extends _MdButtonMixinBase implements OnDestroy, CanDisabl
112111
get disableRipple() { return this._disableRipple; }
113112
set disableRipple(v) { this._disableRipple = coerceBooleanProperty(v); }
114113

115-
constructor(public _renderer: Renderer2,
116-
public _elementRef: ElementRef,
114+
constructor(renderer: Renderer2,
115+
elementRef: ElementRef,
117116
private _platform: Platform,
118117
private _focusOriginMonitor: FocusOriginMonitor) {
119-
super();
118+
super(renderer, elementRef);
120119
this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
121120
}
122121

‎src/lib/checkbox/checkbox.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,9 @@ export class MdCheckboxChange {
5959

6060
// Boilerplate for applying mixins to MdCheckbox.
6161
export class MdCheckboxBase {
62-
_renderer: Renderer2;
63-
_elementRef: ElementRef;
62+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
6463
}
65-
export const _MdCheckboxMixinBase = mixinColor(mixinDisabled(MdCheckboxBase));
64+
export const _MdCheckboxMixinBase = mixinColor(mixinDisabled(MdCheckboxBase), 'accent');
6665

6766

6867
/**
@@ -192,14 +191,11 @@ export class MdCheckbox extends _MdCheckboxMixinBase
192191
/** Reference to the focused state ripple. */
193192
private _focusRipple: RippleRef;
194193

195-
constructor(public _renderer: Renderer2,
196-
public _elementRef: ElementRef,
194+
constructor(renderer: Renderer2,
195+
elementRef: ElementRef,
197196
private _changeDetectorRef: ChangeDetectorRef,
198197
private _focusOriginMonitor: FocusOriginMonitor) {
199-
super();
200-
201-
// By default the checkbox uses the accent color for styling.
202-
this.color = 'accent';
198+
super(renderer, elementRef);
203199
}
204200

205201
ngAfterViewInit() {

‎src/lib/chips/chip.ts

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,9 @@ export interface MdChipEvent {
1919

2020
// Boilerplate for applying mixins to MdChip.
2121
export class MdChipBase {
22-
_renderer: Renderer2;
23-
_elementRef: ElementRef;
22+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
2423
}
25-
export const _MdChipMixinBase = mixinColor(MdChipBase);
24+
export const _MdChipMixinBase = mixinColor(MdChipBase, 'primary');
2625

2726

2827
/**
@@ -65,10 +64,8 @@ export class MdChip extends _MdChipMixinBase implements Focusable, OnInit, OnDes
6564
/** Emitted when the chip is destroyed. */
6665
@Output() destroy = new EventEmitter<MdChipEvent>();
6766

68-
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {
69-
super();
70-
// By default the chip component uses the primary color palette.
71-
this.color = 'primary';
67+
constructor(renderer: Renderer2, elementRef: ElementRef) {
68+
super(renderer, elementRef);
7269
}
7370

7471
ngOnInit(): void {

‎src/lib/core/common-behaviors/color.spec.ts

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ describe('MixinColor', () => {
3636
.toContain('mat-accent', 'Expected the element to have the "mat-accent" class set');
3737
});
3838

39-
it('should allow updating the color to an empty value', () => {
40-
const classWithColor = mixinColor(TestClass, true);
39+
it('should allow having no color set', () => {
40+
const classWithColor = mixinColor(TestClass);
4141
const instance = new classWithColor();
4242

4343
expect(instance.testElement.classList.length)
@@ -51,7 +51,21 @@ describe('MixinColor', () => {
5151
instance.color = null;
5252

5353
expect(instance.testElement.classList.length)
54-
.toBe(0, 'Expected the element to not have any classes after the color has been set to null');
54+
.toBe(0, 'Expected the element to have no color class set.');
55+
});
56+
57+
it('should allow having a default color if specified', () => {
58+
const classWithColor = mixinColor(TestClass, 'accent');
59+
const instance = new classWithColor();
60+
61+
62+
expect(instance.testElement.classList)
63+
.toContain('mat-accent', 'Expected the element to have the "mat-accent" class by default.');
64+
65+
instance.color = null;
66+
67+
expect(instance.testElement.classList)
68+
.toContain('mat-accent', 'Expected the default color "mat-accent" to be set.');
5569
});
5670

5771
});

‎src/lib/core/common-behaviors/color.ts

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,32 +16,33 @@ export interface HasRenderer {
1616
export type ThemePalette = 'primary' | 'accent' | 'warn' | null;
1717

1818
/** Mixin to augment a directive with a `color` property. */
19-
export function mixinColor<T extends Constructor<HasRenderer>>(base: T, allowNoColor = false)
19+
export function mixinColor<T extends Constructor<HasRenderer>>(base: T, defaultColor?: ThemePalette)
2020
: Constructor<CanColor> & T {
2121
return class extends base {
22-
private _color: ThemePalette = undefined;
23-
24-
constructor(...args: any[]) { super(...args); }
22+
private _color: ThemePalette = null;
2523

2624
get color(): ThemePalette { return this._color; }
2725
set color(value: ThemePalette) {
28-
if (value || allowNoColor && !value) {
29-
this._setColorClass(this._color, false);
30-
this._setColorClass(value, true);
31-
this._color = value;
32-
}
33-
}
26+
const colorPalette = value || defaultColor;
3427

35-
/** Method that changes the color classes on the host element. */
36-
private _setColorClass(colorName: string, isAdd: boolean) {
37-
if (colorName) {
38-
if (isAdd) {
39-
this._renderer.addClass(this._elementRef.nativeElement, `mat-${colorName}`);
40-
} else {
41-
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${colorName}`);
28+
if (colorPalette !== this._color) {
29+
if (this._color) {
30+
this._renderer.removeClass(this._elementRef.nativeElement, `mat-${this._color}`);
31+
}
32+
if (colorPalette) {
33+
this._renderer.addClass(this._elementRef.nativeElement, `mat-${colorPalette}`);
4234
}
35+
36+
this._color = colorPalette;
4337
}
4438
}
39+
40+
constructor(...args: any[]) {
41+
super(...args);
42+
43+
// Set the default color that can be specified from the mixin.
44+
this.color = defaultColor;
45+
}
4546
};
4647
}
4748

‎src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,9 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
1212

1313
// Boilerplate for applying mixins to MdChip.
1414
export class MdPseudoCheckboxBase {
15-
_renderer: Renderer2;
16-
_elementRef: ElementRef;
15+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
1716
}
18-
export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase);
17+
export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
1918

2019

2120
/**
@@ -50,8 +49,7 @@ export class MdPseudoCheckbox extends _MdPseudoCheckboxBase implements CanColor
5049
/** Whether the checkbox is disabled. */
5150
@Input() disabled: boolean = false;
5251

53-
constructor(public _elementRef: ElementRef, public _renderer: Renderer2) {
54-
super();
55-
this.color = 'accent';
52+
constructor(elementRef: ElementRef, renderer: Renderer2) {
53+
super(renderer, elementRef);
5654
}
5755
}

‎src/lib/icon/icon.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,9 @@ import {CanColor, mixinColor} from '../core/common-behaviors/color';
1616

1717
// Boilerplate for applying mixins to MdIcon.
1818
export class MdIconBase {
19-
_renderer: Renderer2;
20-
_elementRef: ElementRef;
19+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
2120
}
22-
export const _MdIconMixinBase = mixinColor(MdIconBase, true);
21+
export const _MdIconMixinBase = mixinColor(MdIconBase);
2322

2423

2524
/**
@@ -91,9 +90,9 @@ export class MdIcon extends _MdIconMixinBase implements OnChanges, OnInit, After
9190
private _previousAriaLabel: string;
9291

9392
constructor(private _mdIconRegistry: MdIconRegistry,
94-
public _renderer: Renderer2,
95-
public _elementRef: ElementRef) {
96-
super();
93+
renderer: Renderer2,
94+
elementRef: ElementRef) {
95+
super(renderer, elementRef);
9796
}
9897

9998
/**

‎src/lib/progress-spinner/progress-spinner.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,9 @@ export class MdProgressSpinnerCssMatStyler {}
5252

5353
// Boilerplate for applying mixins to MdProgressSpinner.
5454
export class MdProgressSpinnerBase {
55-
_renderer: Renderer2;
56-
_elementRef: ElementRef;
55+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
5756
}
58-
export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase);
57+
export const _MdProgressSpinnerMixinBase = mixinColor(MdProgressSpinnerBase, 'primary');
5958

6059
/**
6160
* <md-progress-spinner> component.
@@ -160,13 +159,10 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
160159
}
161160
}
162161

163-
constructor(public _renderer: Renderer2,
164-
public _elementRef: ElementRef,
162+
constructor(renderer: Renderer2,
163+
elementRef: ElementRef,
165164
private _ngZone: NgZone) {
166-
super();
167-
168-
// By default the progress-spinner component uses the primary color palette.
169-
this.color = 'primary';
165+
super(renderer, elementRef);
170166
}
171167

172168

‎src/lib/select/select.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,9 @@ export type MdSelectFloatPlaceholderType = 'always' | 'never' | 'auto';
9999

100100
// Boilerplate for applying mixins to MdSelect.
101101
export class MdSelectBase {
102-
_renderer: Renderer2;
103-
_elementRef: ElementRef;
102+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
104103
}
105-
export const _MdSelectMixinBase = mixinColor(MdSelectBase);
104+
export const _MdSelectMixinBase = mixinColor(MdSelectBase, 'primary');
106105

107106

108107
@Component({
@@ -313,19 +312,18 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
313312

314313
constructor(private _viewportRuler: ViewportRuler,
315314
private _changeDetectorRef: ChangeDetectorRef,
316-
public _renderer: Renderer2,
317-
public _elementRef: ElementRef,
315+
renderer: Renderer2,
316+
elementRef: ElementRef,
318317
@Optional() private _dir: Dir,
319318
@Self() @Optional() public _control: NgControl,
320319
@Attribute('tabindex') tabIndex: string) {
321-
super();
320+
super(renderer, elementRef);
322321

323322
if (this._control) {
324323
this._control.valueAccessor = this;
325324
}
326325

327326
this._tabIndex = parseInt(tabIndex) || 0;
328-
this.color = 'primary';
329327
}
330328

331329
ngOnInit() {

‎src/lib/slide-toggle/slide-toggle.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,9 @@ let nextId = 0;
4646

4747
// Boilerplate for applying mixins to MdSlideToggle.
4848
export class MdSlideToggleBase {
49-
_renderer: Renderer2;
50-
_elementRef: ElementRef;
49+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
5150
}
52-
export const _MdSlideToggleMixinBase = mixinColor(mixinDisabled(MdSlideToggleBase));
51+
export const _MdSlideToggleMixinBase = mixinColor(mixinDisabled(MdSlideToggleBase), 'accent');
5352

5453
/** Represents a slidable "switch" toggle that can be moved between on and off. */
5554
@Component({
@@ -123,11 +122,11 @@ export class MdSlideToggle extends _MdSlideToggleMixinBase
123122
/** Reference to the ripple directive on the thumb container. */
124123
@ViewChild(MdRipple) _ripple: MdRipple;
125124

126-
constructor(public _elementRef: ElementRef,
127-
public _renderer: Renderer2,
125+
constructor(elementRef: ElementRef,
126+
renderer: Renderer2,
128127
private _focusOriginMonitor: FocusOriginMonitor,
129128
private _changeDetectorRef: ChangeDetectorRef) {
130-
super();
129+
super(renderer, elementRef);
131130
}
132131

133132
ngAfterContentInit() {

‎src/lib/toolbar/toolbar.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ export class MdToolbarRow {}
1919

2020
// Boilerplate for applying mixins to MdToolbar.
2121
export class MdToolbarBase {
22-
_renderer: Renderer2;
23-
_elementRef: ElementRef;
22+
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
2423
}
2524
export const _MdToolbarMixinBase = mixinColor(MdToolbarBase);
2625

@@ -40,8 +39,8 @@ export const _MdToolbarMixinBase = mixinColor(MdToolbarBase);
4039
})
4140
export class MdToolbar extends _MdToolbarMixinBase implements CanColor {
4241

43-
constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {
44-
super();
42+
constructor(renderer: Renderer2, elementRef: ElementRef) {
43+
super(renderer, elementRef);
4544
}
4645

4746
}

0 commit comments

Comments
 (0)