/
SegmentedButton.js
129 lines (98 loc) · 2.72 KB
/
SegmentedButton.js
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import './Icon.js';
import Button from './Button.js';
/* https://m3.material.io/components/segmented-buttons/specs */
export default Button
.extend()
.observe({
type: { empty: 'radio' },
innerSegmentedButton: 'boolean',
})
.set({
outlined: true,
focusableOnDisabled: true,
})
.recompose(({ html, inline, refs: { icon, outline, control, slot, state } }) => {
slot.before(html`
<div id=icons>
${icon}
<mdw-icon selected={checked} id=check-icon aria-hidden=true icon=check variation=filled></mdw-icon>
</div>
`);
icon.removeAttribute('mdw-if');
icon.setAttribute('has-icon', '{hasIcon}');
icon.setAttribute('selected', '{checked}');
outline.setAttribute('selected', '{checked}');
outline.setAttribute('inner-segmented-button', '{innerSegmentedButton}');
outline.setAttribute('shape-start', '{shapeStart}');
outline.setAttribute('shape-end', '{shapeEnd}');
control.setAttribute('role', 'option');
control.setAttribute('aria-checked', inline(
({ type, checked }) => (type === 'checkbox' ? `${(!!checked)}` : null),
));
control.setAttribute('aria-selected', inline(
({ type, checked }) => (type === 'checkbox' ? null : `${!!checked}`),
));
state.setAttribute('state-disabled', 'focus');
})
.css`
:host {
--mdw-shape__size: var(--mdw-shape__full);
--mdw-ink: var(--mdw-color__on-surface);
gap: 8px;
min-inline-size: 24px;
padding-inline-start: max(12px, calc(16px + (var(--mdw-density) * 2px)));
padding-inline-end: max(20px, calc(24px + (var(--mdw-density) * 2px)));
color: rgb(var(--mdw-ink));
}
:host([inner-segmented-button]) {
--mdw-shape__size: 0px;
}
#outline {
inset-inline-end: -1px;
z-index: -1;
}
#outline[shape-end] {
inset-inline-end: 0;
}
#outline[selected] {
background-color: rgb(var(--mdw-bg));
}
#icons {
position: relative;
display: inline-flex;
}
#icon {
box-sizing: border-box;
inline-size: 0;
opacity: 1;
}
#icon[has-icon] {
inline-size: 18px;
opacity: 1;
}
#icon[selected] {
inline-size: 18px;
opacity: 0;
}
#check-icon {
position: absolute;
inset: 0;
display: block;
overflow: visible;
block-size: 100%;
margin: 0;
opacity: 0;
font-size: 18px;
}
#check-icon[selected] {
opacity: 1;
font-size: 18px;
}
#icon[disabled] {
color: rgba(var(--mdw-color__on-surface), 0.38);
}
#outline[disabled][selected] {
background-color: rgba(var(--mdw-color__on-surface), 0.12);
}
`
.autoRegister('mdw-segmented-button');