-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
mdc-switch.ts
82 lines (73 loc) · 2.24 KB
/
mdc-switch.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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
import { MdcComponent } from '@aurelia-mdc-web/base';
import { MDCSwitchState, MDCSwitchRenderAdapter, MDCSwitchRenderFoundation } from '@material/switch';
import { inject, useView, PLATFORM, customElement } from 'aurelia-framework';
import { MDCRippleCapableSurface } from '@material/ripple';
let switchId = 0;
@inject(Element)
@useView(PLATFORM.moduleName('./mdc-switch.html'))
@customElement('mdc-switch')
export class MdcSwitch extends MdcComponent<MDCSwitchRenderFoundation> implements MDCSwitchState, MDCRippleCapableSurface {
constructor(public root: IMdcSwitchElement) {
super(root);
defineMdcSwitchElementApis(this.root);
this.root.id = `mdc-switch-${++switchId}`;
}
disabled: boolean;
selected: boolean;
processing: boolean;
override initialSyncWithDOM() {
if (this.selected) {
this.root.classList.add('mdc-switch--selected');
this.root.setAttribute('aria-checked', 'true');
}
this.foundation?.initFromDOM();
}
getDefaultFoundation() {
return new MDCSwitchRenderFoundation(this.createAdapter());
}
protected createAdapter(): MDCSwitchRenderAdapter {
return {
addClass: className => {
this.root.classList.add(className);
},
hasClass: className => this.root.classList.contains(className),
isDisabled: () => this.root.disabled,
removeClass: className => {
this.root.classList.remove(className);
},
setAriaChecked: ariaChecked =>
this.root.setAttribute('aria-checked', ariaChecked),
setDisabled: disabled => {
this.root.disabled = disabled;
},
state: this,
};
}
handleClick() {
this.foundation?.handleClick();
this.emit('change', {}, true);
}
}
/** @hidden */
export interface IMdcSwitchElement extends HTMLButtonElement {
checked: boolean;
indeterminate: boolean;
au: {
controller: {
viewModel: MdcSwitch;
};
};
}
function defineMdcSwitchElementApis(element: HTMLElement) {
Object.defineProperties(element, {
selected: {
get(this: IMdcSwitchElement) {
return this.au.controller.viewModel.selected;
},
set(this: IMdcSwitchElement, value: boolean) {
this.au.controller.viewModel.selected = value;
},
configurable: true
}
});
}