-
Notifications
You must be signed in to change notification settings - Fork 2
/
switch.ts
95 lines (87 loc) · 2.99 KB
/
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
83
84
85
86
87
88
89
90
91
92
93
94
95
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { live } from 'lit/directives/live.js';
import { themes } from '../../theming/theming-decorator.js';
import { registerComponent } from '../common/definitions/register.js';
import { createCounter, partNameMap } from '../common/util.js';
import { IgcCheckboxBaseComponent } from './checkbox-base.js';
import { styles as shared } from './themes/shared/switch/switch.common.css.js';
import { all } from './themes/switch-themes.js';
import { styles } from './themes/switch.base.css.js';
/**
* Similar to a checkbox, a switch controls the state of a single setting on or off.
*
* @element igc-switch
*
* @slot - The switch label.
*
* @fires igcChange - Emitted when the control's checked state changes.
* @fires igcFocus - Emitted when the control gains focus.
* @fires igcBlur - Emitted when the control loses focus.
*
* @csspart base - The base wrapper of the switch.
* @csspart control - The switch control.
* @csspart thumb - The position indicator of the switch.
* @csspart label - The switch label.
*/
@themes(all)
export default class IgcSwitchComponent extends IgcCheckboxBaseComponent {
public static readonly tagName = 'igc-switch';
public static styles = [styles, shared];
/* blazorSuppress */
public static register() {
registerComponent(IgcSwitchComponent);
}
private static readonly increment = createCounter();
private inputId = `switch-${IgcSwitchComponent.increment()}`;
private labelId = `switch-label-${this.inputId}`;
protected override render() {
const labelledBy = this.getAttribute('aria-labelledby');
return html`
<label
part=${partNameMap({ base: true, checked: this.checked })}
for=${this.inputId}
@pointerdown=${this.handleMouseDown}
>
<input
id=${this.inputId}
type="checkbox"
name=${ifDefined(this.name)}
value=${ifDefined(this.value)}
.required=${this.required}
.disabled=${this.disabled}
.checked=${live(this.checked)}
aria-checked=${this.checked ? 'true' : 'false'}
aria-disabled=${this.disabled ? 'true' : 'false'}
aria-labelledby=${labelledBy ? labelledBy : this.labelId}
@click=${this.handleClick}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
/>
<span
part=${partNameMap({
control: true,
checked: this.checked,
focused: this.focused,
})}
>
<span
part=${partNameMap({ thumb: true, checked: this.checked })}
></span>
</span>
<span
.hidden=${this.hideLabel}
part=${partNameMap({ label: true, checked: this.checked })}
id=${this.labelId}
>
<slot @slotchange=${this.handleSlotChange}></slot>
</span>
</label>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
'igc-switch': IgcSwitchComponent;
}
}