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

Commit 257cb04

Browse files
trimoxtrimox
committed
feat(elevation): Add MDC Elevation using [mdc-elevation]="#" directive.
BREAKING CHANGE: Removed depreciated mdc-elevation-z# directives. Please update your code accordingly.
1 parent 1965a3a commit 257cb04

File tree

3 files changed

+34
-215
lines changed

3 files changed

+34
-215
lines changed

‎src/lib/common/number-property.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function toNumber(value: any, fallbackValue = 0) {
2+
return isNaN(parseFloat(value as any)) || isNaN(Number(value)) ? fallbackValue : Number(value);
3+
}

‎src/lib/elevation/elevation.directive.ts‎

Lines changed: 29 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import {
22
Directive,
3+
ElementRef,
34
HostBinding,
5+
Input,
6+
OnChanges,
7+
Renderer2,
8+
SimpleChange,
49
} from '@angular/core';
10+
import { toNumber } from '../common/number-property';
511

612
const MDC_ELEVATION_STYLES = require('@material/elevation/mdc-elevation.scss');
713

@@ -12,177 +18,35 @@ export class ElevationTransition {
1218
@HostBinding('class.mdc-elevation-transition') className: string = 'mdc-elevation-transition';
1319
}
1420

15-
@Directive({
16-
selector: '[mdc-elevation-z0]'
17-
})
18-
export class Elevation0Directive {
19-
@HostBinding('class.mdc-elevation--z0') className: string = 'mdc-elevation--z0';
20-
}
21-
22-
@Directive({
23-
selector: '[mdc-elevation-z1]'
24-
})
25-
export class Elevation1Directive {
26-
@HostBinding('class.mdc-elevation--z1') className: string = 'mdc-elevation--z1';
27-
}
28-
29-
@Directive({
30-
selector: '[mdc-elevation-z2]'
31-
})
32-
export class Elevation2Directive {
33-
@HostBinding('class.mdc-elevation--z2') className: string = 'mdc-elevation--z2';
34-
}
35-
36-
@Directive({
37-
selector: '[mdc-elevation-z3]'
38-
})
39-
export class Elevation3Directive {
40-
@HostBinding('class.mdc-elevation--z3') className: string = 'mdc-elevation--z3';
41-
}
42-
43-
@Directive({
44-
selector: '[mdc-elevation-z4]'
45-
})
46-
export class Elevation4Directive {
47-
@HostBinding('class.mdc-elevation--z4') className: string = 'mdc-elevation--z4';
48-
}
49-
50-
@Directive({
51-
selector: '[mdc-elevation-z5]'
52-
})
53-
export class Elevation5Directive {
54-
@HostBinding('class.mdc-elevation--z5') className: string = 'mdc-elevation--z5';
55-
}
56-
57-
@Directive({
58-
selector: '[mdc-elevation-z6]'
59-
})
60-
export class Elevation6Directive {
61-
@HostBinding('class.mdc-elevation--z6') className: string = 'mdc-elevation--z6';
62-
}
63-
64-
@Directive({
65-
selector: '[mdc-elevation-z7]'
66-
})
67-
export class Elevation7Directive {
68-
@HostBinding('class.mdc-elevation--z7') className: string = 'mdc-elevation--z7';
69-
}
70-
71-
@Directive({
72-
selector: '[mdc-elevation-z8]'
73-
})
74-
export class Elevation8Directive {
75-
@HostBinding('class.mdc-elevation--z8') className: string = 'mdc-elevation--z8';
76-
}
77-
78-
@Directive({
79-
selector: '[mdc-elevation-z9]'
80-
})
81-
export class Elevation9Directive {
82-
@HostBinding('class.mdc-elevation--z9') className: string = 'mdc-elevation--z9';
83-
}
84-
85-
@Directive({
86-
selector: '[mdc-elevation-z10]'
87-
})
88-
export class Elevation10Directive {
89-
@HostBinding('class.mdc-elevation--z10') className: string = 'mdc-elevation--z10';
90-
}
91-
92-
@Directive({
93-
selector: '[mdc-elevation-z11]'
94-
})
95-
export class Elevation11Directive {
96-
@HostBinding('class.mdc-elevation--z11') className: string = 'mdc-elevation--z11';
97-
}
21+
const MDC_ELEVATION_VALUES = Array.from(Array(25), (x, i) => i);
9822

9923
@Directive({
100-
selector: '[mdc-elevation-z12]'
24+
selector: '[mdc-elevation]'
10125
})
102-
export class Elevation12Directive {
103-
@HostBinding('class.mdc-elevation--z12') className: string = 'mdc-elevation--z12';
104-
}
26+
export class ElevationDirective implements OnChanges {
27+
private nativeEl: ElementRef;
28+
private _mdcElevation: number = 0;
10529

106-
@Directive({
107-
selector: '[mdc-elevation-z13]'
108-
})
109-
export class Elevation13Directive {
110-
@HostBinding('class.mdc-elevation--z13') className: string = 'mdc-elevation--z13';
111-
}
30+
@Input('mdc-elevation')
31+
get mdcElevation() { return this._mdcElevation; }
32+
set mdcElevation(value: number) {
33+
this._mdcElevation = toNumber(value);
34+
}
11235

113-
@Directive({
114-
selector: '[mdc-elevation-z14]'
115-
})
116-
export class Elevation14Directive {
117-
@HostBinding('class.mdc-elevation--z14') className: string = 'mdc-elevation--z14';
118-
}
36+
constructor(private _renderer: Renderer2, private _root: ElementRef) {
37+
this.nativeEl = this._root.nativeElement;
38+
}
11939

120-
@Directive({
121-
selector: '[mdc-elevation-z15]'
122-
})
123-
export class Elevation15Directive {
124-
@HostBinding('class.mdc-elevation--z15') className: string = 'mdc-elevation--z15';
125-
}
40+
public ngOnChanges(changes: { [key: string]: SimpleChange }) {
41+
let change = changes['mdcElevation'];
12642

127-
@Directive({
128-
selector: '[mdc-elevation-z16]'
129-
})
130-
export class Elevation16Directive {
131-
@HostBinding('class.mdc-elevation--z16') className: string = 'mdc-elevation--z16';
132-
}
133-
134-
@Directive({
135-
selector: '[mdc-elevation-z17]'
136-
})
137-
export class Elevation17Directive {
138-
@HostBinding('class.mdc-elevation--z17') className: string = 'mdc-elevation--z17';
139-
}
140-
141-
@Directive({
142-
selector: '[mdc-elevation-z18]'
143-
})
144-
export class Elevation18Directive {
145-
@HostBinding('class.mdc-elevation--z18') className: string = 'mdc-elevation--z18';
146-
}
43+
if (MDC_ELEVATION_VALUES.indexOf(Number(this.mdcElevation)) === -1) {
44+
throw new Error(`Valid mdc-elevation values are 0 through 24`);
45+
}
14746

148-
@Directive({
149-
selector: '[mdc-elevation-z19]'
150-
})
151-
export class Elevation19Directive {
152-
@HostBinding('class.mdc-elevation--z19') className: string = 'mdc-elevation--z19';
153-
}
154-
155-
@Directive({
156-
selector: '[mdc-elevation-z20]'
157-
})
158-
export class Elevation20Directive {
159-
@HostBinding('class.mdc-elevation--z20') className: string = 'mdc-elevation--z20';
160-
}
161-
162-
@Directive({
163-
selector: '[mdc-elevation-z21]'
164-
})
165-
export class Elevation21Directive {
166-
@HostBinding('class.mdc-elevation--z21') className: string = 'mdc-elevation--z21';
167-
}
168-
169-
@Directive({
170-
selector: '[mdc-elevation-z22]'
171-
})
172-
export class Elevation22Directive {
173-
@HostBinding('class.mdc-elevation--z22') className: string = 'mdc-elevation--z22';
174-
}
175-
176-
@Directive({
177-
selector: '[mdc-elevation-z23]'
178-
})
179-
export class Elevation23Directive {
180-
@HostBinding('class.mdc-elevation--z23') className: string = 'mdc-elevation--z23';
181-
}
182-
183-
@Directive({
184-
selector: '[mdc-elevation-z24]'
185-
})
186-
export class Elevation24Directive {
187-
@HostBinding('class.mdc-elevation--z24') className: string = 'mdc-elevation--z24';
47+
if (!change.isFirstChange()) {
48+
this._renderer.removeClass(this.nativeEl, `mdc-elevation--z${change.previousValue}`);
49+
}
50+
this._renderer.addClass(this.nativeEl, `mdc-elevation--z${change.currentValue}`);
51+
}
18852
}

‎src/lib/elevation/index.ts‎

Lines changed: 2 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,12 @@ import { NgModule } from '@angular/core';
22

33
import {
44
ElevationTransition,
5-
Elevation0Directive,
6-
Elevation1Directive,
7-
Elevation2Directive,
8-
Elevation3Directive,
9-
Elevation4Directive,
10-
Elevation5Directive,
11-
Elevation6Directive,
12-
Elevation7Directive,
13-
Elevation8Directive,
14-
Elevation9Directive,
15-
Elevation10Directive,
16-
Elevation11Directive,
17-
Elevation12Directive,
18-
Elevation13Directive,
19-
Elevation14Directive,
20-
Elevation15Directive,
21-
Elevation16Directive,
22-
Elevation17Directive,
23-
Elevation18Directive,
24-
Elevation19Directive,
25-
Elevation20Directive,
26-
Elevation21Directive,
27-
Elevation22Directive,
28-
Elevation23Directive,
29-
Elevation24Directive
5+
ElevationDirective
306
} from './elevation.directive';
317

328
const ELEVATION_DIRECTIVES = [
339
ElevationTransition,
34-
Elevation0Directive,
35-
Elevation1Directive,
36-
Elevation2Directive,
37-
Elevation3Directive,
38-
Elevation4Directive,
39-
Elevation5Directive,
40-
Elevation6Directive,
41-
Elevation7Directive,
42-
Elevation8Directive,
43-
Elevation9Directive,
44-
Elevation10Directive,
45-
Elevation11Directive,
46-
Elevation12Directive,
47-
Elevation13Directive,
48-
Elevation14Directive,
49-
Elevation15Directive,
50-
Elevation16Directive,
51-
Elevation17Directive,
52-
Elevation18Directive,
53-
Elevation19Directive,
54-
Elevation20Directive,
55-
Elevation21Directive,
56-
Elevation22Directive,
57-
Elevation23Directive,
58-
Elevation24Directive
10+
ElevationDirective
5911
];
6012

6113
@NgModule({

0 commit comments

Comments
 (0)