This repository has been archived by the owner on Oct 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 87
/
notched-outline.ts
65 lines (58 loc) · 2.15 KB
/
notched-outline.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import {
ChangeDetectionStrategy,
Component,
ElementRef,
Input,
ViewChild,
ViewEncapsulation
} from '@angular/core';
import {MDCComponent} from '@angular-mdc/web/base';
import {MdcFloatingLabel} from '@angular-mdc/web/floating-label';
import {MDCNotchedOutlineFoundation, MDCNotchedOutlineAdapter} from '@material/notched-outline';
@Component({
moduleId: module.id,
selector: '[mdcNotchedOutline], mdc-notched-outline',
exportAs: 'mdcNotchedOutline',
host: {
'class': 'mdc-notched-outline',
'[class.mdc-notched-outline--upgraded]': 'label',
'[class.mdc-notched-outline--no-label]': '!label'
},
template: `
<div class="mdc-notched-outline__leading"></div>
<div #notch class="mdc-notched-outline__notch">
<label mdcFloatingLabel [for]="for">{{label}}</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class MdcNotchedOutline extends MDCComponent<MDCNotchedOutlineFoundation> {
@Input() label?: string;
@Input() for?: string;
@ViewChild('notch', {static: false}) _notchElement!: ElementRef<HTMLElement>;
@ViewChild(MdcFloatingLabel, {static: false}) floatingLabel!: MdcFloatingLabel;
getDefaultFoundation() {
const adapter: MDCNotchedOutlineAdapter = {
addClass: (className: string) => this.elementRef.nativeElement.classList.add(className),
removeClass: (className: string) =>
this.elementRef.nativeElement.classList.remove(className),
setNotchWidthProperty: (width: number) =>
this._notchElement.nativeElement.style.setProperty('width', `${width}px`),
removeNotchWidthProperty: () => this._notchElement.nativeElement.style.removeProperty('width')
};
return new MDCNotchedOutlineFoundation(adapter);
}
constructor(public elementRef: ElementRef<HTMLElement>) {
super(elementRef);
}
/** Updates classes and styles to open the notch to the specified width. */
notch(notchWidth: number): void {
this._foundation.notch(notchWidth);
}
/** Updates classes and styles to close the notch. */
closeNotch(): void {
this._foundation.closeNotch();
}
}