Skip to content
This repository was archived by the owner on Oct 7, 2020. It is now read-only.

Commit ec0393e

Browse files
trimoxtrimox
authored
fix: Should use directive configurations + clean-up (#1295)
Final push for v0.39.0 release!
1 parent a638359 commit ec0393e

File tree

20 files changed

+89
-120
lines changed

20 files changed

+89
-120
lines changed

‎packages/button/button.ts

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@ import {
44
Component,
55
ContentChild,
66
ElementRef,
7-
HostBinding,
8-
HostListener,
97
Input,
8+
NgZone,
109
OnDestroy,
1110
ViewEncapsulation
1211
} from '@angular/core';
12+
import { fromEvent, Subject } from 'rxjs';
13+
import { takeUntil } from 'rxjs/operators';
14+
1315
import { toBoolean } from '@angular-mdc/web/common';
1416
import { MdcRipple } from '@angular-mdc/web/ripple';
1517
import { MdcIcon } from '@angular-mdc/web/icon';
@@ -18,12 +20,25 @@ import { MdcIcon } from '@angular-mdc/web/icon';
1820
moduleId: module.id,
1921
exportAs: 'mdcButton',
2022
selector: 'button[mdc-button], a[mdc-button]',
23+
host: {
24+
'[tabIndex]': 'disabled ? -1 : 0',
25+
'class': 'mdc-button',
26+
'[class.ng-mdc-button--primary]': 'primary',
27+
'[class.ng-mdc-button--secondary]': 'secondary',
28+
'[class.mdc-button--raised]': 'raised',
29+
'[class.mdc-button--dense]': 'dense',
30+
'[class.mdc-button--unelevated]': 'unelevated',
31+
'[class.mdc-button--outlined]': 'outlined'
32+
},
2133
template: '<ng-content></ng-content>',
2234
providers: [MdcRipple],
2335
encapsulation: ViewEncapsulation.None,
2436
changeDetection: ChangeDetectionStrategy.OnPush
2537
})
2638
export class MdcButton implements AfterContentInit, OnDestroy {
39+
/** Emits whenever the component is destroyed. */
40+
private _destroy = new Subject<void>();
41+
2742
@Input()
2843
get raised(): boolean { return this._raised; }
2944
set raised(value: boolean) {
@@ -80,42 +95,25 @@ export class MdcButton implements AfterContentInit, OnDestroy {
8095
}
8196
protected _disabled: boolean = false;
8297

83-
@HostBinding('tabindex') get tabindex(): number {
84-
return this.disabled ? -1 : 0;
85-
}
86-
@HostBinding('class.mdc-button') isHostClass = true;
87-
@HostBinding('class.mdc-button--raised') get classRaised(): string {
88-
return this.raised ? 'mdc-button--raised' : '';
89-
}
90-
@HostBinding('class.ng-mdc-button--primary') get classPrimary(): string {
91-
return this.primary ? 'ng-mdc-button--primary' : '';
92-
}
93-
@HostBinding('class.ng-mdc-button--secondary') get classSecondary(): string {
94-
return this.secondary ? 'ng-mdc-button--secondary' : '';
95-
}
96-
@HostBinding('class.mdc-button--dense') get classDense(): string {
97-
return this.dense ? 'mdc-button--dense' : '';
98-
}
99-
@HostBinding('class.mdc-button--unelevated') get classUnelevated(): string {
100-
return this.unelevated ? 'mdc-button--unelevated' : '';
101-
}
102-
@HostBinding('class.mdc-button--outlined') get classOutlined(): string {
103-
return this.outlined ? 'mdc-button--outlined' : '';
104-
}
105-
@HostListener('click', ['$event']) onclick(evt: Event) {
106-
this._onClick(evt);
107-
}
10898
@ContentChild(MdcIcon) buttonIcon: MdcIcon;
10999

110100
constructor(
101+
protected _ngZone: NgZone,
111102
protected _elementRef: ElementRef,
112103
protected _ripple: MdcRipple) { }
113104

114105
ngAfterContentInit(): void {
115106
this._ripple.attachTo(this.getHostElement());
107+
108+
this._ngZone.runOutsideAngular(() =>
109+
fromEvent<MouseEvent>(this.getHostElement(), 'click').pipe(takeUntil(this._destroy))
110+
.subscribe((evt) => this._ngZone.run(() => this._onClick(evt))));
116111
}
117112

118113
ngOnDestroy(): void {
114+
this._destroy.next();
115+
this._destroy.complete();
116+
119117
this._ripple.destroy();
120118
}
121119

‎packages/checkbox/checkbox.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,8 @@ export class MdcCheckbox implements AfterViewInit, ControlValueAccessor, OnDestr
308308
}
309309

310310
private _loadListeners(): void {
311+
if (!this._platform.isBrowser) { return; }
312+
311313
this._ngZone.runOutsideAngular(() =>
312314
fromEvent(window, getCorrectEventName(window, 'animationend'))
313315
.pipe(takeUntil(this._destroy))

‎packages/dialog/dialog-directives.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,16 @@ export class MdcDialogFooter {
7373

7474
@Directive({
7575
selector: 'button[mdc-dialog-button], a[mdc-dialog-button]',
76+
host: {
77+
'[tabIndex]': 'disabled ? -1 : 0',
78+
'class': 'mdc-button',
79+
'[class.ng-mdc-button--primary]': 'primary',
80+
'[class.ng-mdc-button--secondary]': 'secondary',
81+
'[class.mdc-button--raised]': 'raised',
82+
'[class.mdc-button--dense]': 'dense',
83+
'[class.mdc-button--unelevated]': 'unelevated',
84+
'[class.mdc-button--outlined]': 'outlined'
85+
},
7686
providers: [MdcRipple]
7787
})
7888
export class MdcDialogButton extends MdcButton {

‎packages/elevation/elevation-module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import { MdcElevation } from './elevation';
44

55
@NgModule({
66
exports: [MdcElevation],
7-
declarations: [MdcElevation],
7+
declarations: [MdcElevation]
88
})
99
export class MdcElevationModule { }

‎packages/form-field/form-field.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Component,
66
ContentChild,
77
ElementRef,
8-
HostBinding,
98
Input,
109
OnDestroy,
1110
ViewEncapsulation
@@ -20,6 +19,10 @@ import { MDCFormFieldFoundation } from '@material/form-field';
2019
moduleId: module.id,
2120
selector: 'mdc-form-field',
2221
exportAs: 'mdcFormField',
22+
host: {
23+
'class': 'mdc-form-field',
24+
'[class.mdc-form-field--align-end]': 'alignEnd'
25+
},
2326
template: '<ng-content></ng-content>',
2427
encapsulation: ViewEncapsulation.None,
2528
changeDetection: ChangeDetectionStrategy.OnPush
@@ -34,11 +37,6 @@ export class MdcFormField implements AfterContentInit, OnDestroy {
3437
}
3538
private _alignEnd: boolean;
3639

37-
@HostBinding('class.mdc-form-field') isHostClass = true;
38-
@HostBinding('class.mdc-form-field--align-end') get classAlignEnd(): string {
39-
return this.alignEnd ? 'mdc-form-field--align-end' : '';
40-
}
41-
4240
@ContentChild(MdcFormFieldControl) input: MdcFormFieldControl<any>;
4341

4442
private _mdcAdapter: MDCFormFieldAdapter = {

‎packages/icon/icon.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
ChangeDetectorRef,
55
Component,
66
ElementRef,
7-
HostBinding,
87
Input,
98
OnInit,
109
Renderer2,
@@ -15,8 +14,11 @@ import { toBoolean } from '@angular-mdc/web/common';
1514
@Component({
1615
moduleId: module.id,
1716
selector: 'mdc-icon, [mdcIcon]',
18-
template: '<ng-content></ng-content>',
1917
exportAs: 'mdcIcon',
18+
host: {
19+
'class': 'ng-mdc-icon'
20+
},
21+
template: '<ng-content></ng-content>',
2022
encapsulation: ViewEncapsulation.None,
2123
changeDetection: ChangeDetectionStrategy.OnPush
2224
})
@@ -72,8 +74,6 @@ export class MdcIcon implements OnInit {
7274
}
7375
protected _clickable: boolean;
7476

75-
@HostBinding('class.ng-mdc-icon') isHostClass = true;
76-
7777
public foundation: any;
7878

7979
constructor(

‎packages/line-ripple/line-ripple-module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ import { MdcLineRipple } from './line-ripple';
44

55
@NgModule({
66
exports: [MdcLineRipple],
7-
declarations: [MdcLineRipple],
7+
declarations: [MdcLineRipple]
88
})
99
export class MdcLineRippleModule { }

‎packages/line-ripple/line-ripple.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import {
22
Directive,
33
ElementRef,
4-
HostBinding,
54
OnDestroy,
65
OnInit
76
} from '@angular/core';
@@ -10,11 +9,12 @@ import { MDCLineRippleAdapter } from '@material/line-ripple/adapter';
109
import { MDCLineRippleFoundation } from '@material/line-ripple';
1110

1211
@Directive({
13-
selector: '[mdcLineRipple], mdc-line-ripple'
12+
selector: '[mdcLineRipple], mdc-line-ripple',
13+
host: {
14+
'class': 'mdc-line-ripple'
15+
}
1416
})
1517
export class MdcLineRipple implements OnInit, OnDestroy {
16-
@HostBinding('class.mdc-line-ripple') isHostClass = true;
17-
1818
private _mdcAdapter: MDCLineRippleAdapter = {
1919
addClass: (className: string) => this._getHostElement().classList.add(className),
2020
removeClass: (className: string) => this._getHostElement().classList.remove(className),

‎packages/material-components-web/extend/mdc-fab.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@
1515
position: fixed;
1616
bottom: 1rem;
1717
left: 1rem;
18+
z-index: 6;
1819
}
1920

2021
@media (min-width: 1024px) {
2122
.mdc-fab--bottom-left {
2223
bottom: 1.5rem;
2324
left: 1.5rem;
25+
z-index: 6;
2426
}
2527
}

‎packages/material-components-web/extend/mdc-grid-list.scss

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎packages/material-components-web/extend/mdc-icon.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
.ng-mdc-icon--clickable,
22
a.ng-mdc-icon {
3-
text-decoration: none;
4-
53
outline: none;
4+
text-decoration: none;
65
-webkit-user-select: none;
76
-moz-user-select: none;
87
-ms-user-select: none;

‎packages/material-components-web/extend/mdc-menu.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
.mdc-menu-anchor {
2-
display: inline-flex;
1+
.mdc-menu-surface--anchor {
2+
display: inline-block;
33
}

‎packages/material-components-web/material.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@import "extend/mdc-button";
33
@import "extend/mdc-chips";
44
@import "extend/mdc-fab";
5-
@import "extend/mdc-grid-list";
65
@import "extend/mdc-icon";
76
@import "extend/mdc-image-list";
87
@import "extend/mdc-linear-progress";

‎packages/radio/radio.ts

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
ElementRef,
77
EventEmitter,
88
forwardRef,
9-
HostBinding,
109
Input,
1110
OnDestroy,
1211
Output,
@@ -47,6 +46,7 @@ export class MdcRadioChange {
4746
selector: 'mdc-radio',
4847
host: {
4948
'[id]': 'id',
49+
'class': 'mdc-radio'
5050
},
5151
template:
5252
`
@@ -111,7 +111,6 @@ export class MdcRadio implements AfterViewInit, OnDestroy, MdcFormFieldControl<a
111111
private _disabled: boolean = false;
112112

113113
@Output() readonly change: EventEmitter<MdcRadioChange> = new EventEmitter<MdcRadioChange>();
114-
@HostBinding('class.mdc-radio') isHostClass = true;
115114
@ViewChild('inputEl') inputEl: ElementRef;
116115

117116
private _mdcAdapter: MDCRadioAdapter = {
@@ -182,17 +181,17 @@ export class MdcRadio implements AfterViewInit, OnDestroy, MdcFormFieldControl<a
182181

183182
setDisabledState(disabled: boolean): void {
184183
this._disabled = toBoolean(disabled);
185-
this._foundation.setDisabled(disabled);
184+
this._foundation.setDisabled(this._disabled);
186185
this._changeDetectorRef.markForCheck();
187186
}
188187

189188
setChecked(checked: boolean): void {
190189
this._checked = toBoolean(checked);
191-
if (checked) {
190+
if (this._checked) {
192191
this._onChange(this.checked);
193192
}
194193

195-
if (checked || checked == null) {
194+
if (!checked == null) {
196195
this.change.emit(new MdcRadioChange(this, this.getValue(), this.checked));
197196
}
198197

‎packages/select/select.ts

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
ElementRef,
88
EventEmitter,
99
forwardRef,
10-
HostBinding,
1110
Input,
1211
OnDestroy,
1312
Optional,
@@ -57,7 +56,10 @@ let nextUniqueId = 0;
5756
exportAs: 'mdcSelect',
5857
host: {
5958
'[id]': 'id',
59+
'[tabIndex]': 'tabIndex',
6060
'class': 'mdc-select',
61+
'[class.mdc-select--box]': 'box',
62+
'[class.mdc-select--outlined]': 'outlined'
6163
},
6264
template: `
6365
<select #input
@@ -164,14 +166,6 @@ export class MdcSelect implements AfterContentInit, ControlValueAccessor, OnDest
164166
*/
165167
@Output() readonly valueChange: EventEmitter<{ index: number, value: any }> = new EventEmitter<any>();
166168

167-
@HostBinding('tabindex') tabIndex: number = 0;
168-
@HostBinding('class.mdc-select--box') get classBox(): string {
169-
return this.box ? 'mdc-select--box' : '';
170-
}
171-
@HostBinding('class.mdc-select--outlined') get classOutlined(): string {
172-
return this.outlined ? 'mdc-select--outlined' : '';
173-
}
174-
175169
@ViewChild(MdcFloatingLabel) _selectLabel: MdcFloatingLabel;
176170
@ViewChild(MdcLineRipple) _lineRipple: MdcLineRipple;
177171
@ViewChild('input') inputEl: ElementRef;
@@ -195,7 +189,7 @@ export class MdcSelect implements AfterContentInit, ControlValueAccessor, OnDest
195189
private _mdcAdapter: MDCSelectAdapter = {
196190
addClass: (className: string) => this._getHostElement().classList.add(className),
197191
removeClass: (className: string) => this._getHostElement().classList.remove(className),
198-
hasClass: (className) => this._getHostElement().classList.contains(className),
192+
hasClass: (className: string) => this._getHostElement().classList.contains(className),
199193
floatLabel: (shouldFloat: boolean) => this._selectLabel.float(shouldFloat),
200194
activateBottomLine: () => {
201195
if (this._lineRipple) {

‎packages/switch/switch-module.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ import { MdcSwitch } from './switch';
99
MdcFormFieldModule,
1010
MdcSwitch
1111
],
12-
declarations: [MdcSwitch],
12+
declarations: [MdcSwitch]
1313
})
1414
export class MdcSwitchModule { }

0 commit comments

Comments
 (0)