@proximus/lavender-selectablebox 2.0.0-alpha.1 → 2.0.0-alpha.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.es.js +186 -186
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as
|
|
1
|
+
import { WithExtraAttributes as n, AttributeBreakpointHandlerDelegate as x, gapValues as v, checkName as m, backgroundColorValues as k } from "@proximus/lavender-common";
|
|
2
2
|
const y = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', h = new CSSStyleSheet();
|
|
3
3
|
h.replaceSync(y);
|
|
4
4
|
const A = [
|
|
@@ -16,7 +16,7 @@ const A = [
|
|
|
16
16
|
"flex-end",
|
|
17
17
|
"center",
|
|
18
18
|
"baseline"
|
|
19
|
-
],
|
|
19
|
+
], C = [
|
|
20
20
|
"",
|
|
21
21
|
"default",
|
|
22
22
|
"flex-start",
|
|
@@ -25,13 +25,13 @@ const A = [
|
|
|
25
25
|
"space-between",
|
|
26
26
|
"space-around",
|
|
27
27
|
"space-evenly"
|
|
28
|
-
],
|
|
28
|
+
], $ = ["", "default", "nowrap", "wrap", "wrap-reverse"], S = ["", "visible", "hidden", "scroll", "auto"];
|
|
29
29
|
class c extends n {
|
|
30
30
|
constructor() {
|
|
31
|
-
super(h), this.overflowXAttributeDelegate = new
|
|
31
|
+
super(h), this.overflowXAttributeDelegate = new x(
|
|
32
32
|
this,
|
|
33
33
|
"overflow-x",
|
|
34
|
-
(
|
|
34
|
+
(e) => e,
|
|
35
35
|
"--overflow-x"
|
|
36
36
|
), this.template = `<div class="flex-container">
|
|
37
37
|
<slot></slot>
|
|
@@ -75,14 +75,14 @@ class c extends n {
|
|
|
75
75
|
"overflow-x--desktop"
|
|
76
76
|
];
|
|
77
77
|
}
|
|
78
|
-
attributeChangedCallback(
|
|
79
|
-
switch (
|
|
78
|
+
attributeChangedCallback(e, t, i) {
|
|
79
|
+
switch (e) {
|
|
80
80
|
case "gap":
|
|
81
81
|
case "gap--mobile":
|
|
82
82
|
case "gap--tablet":
|
|
83
83
|
case "gap--laptop":
|
|
84
84
|
case "gap--desktop":
|
|
85
|
-
this.updateFlexProperties(
|
|
85
|
+
this.updateFlexProperties(e, t, i, v);
|
|
86
86
|
break;
|
|
87
87
|
case "justify-content":
|
|
88
88
|
case "justify-content--mobile":
|
|
@@ -90,10 +90,10 @@ class c extends n {
|
|
|
90
90
|
case "justify-content--laptop":
|
|
91
91
|
case "justify-content--desktop":
|
|
92
92
|
this.updateFlexProperties(
|
|
93
|
-
t,
|
|
94
93
|
e,
|
|
94
|
+
t,
|
|
95
95
|
i,
|
|
96
|
-
|
|
96
|
+
C
|
|
97
97
|
);
|
|
98
98
|
break;
|
|
99
99
|
case "align-items":
|
|
@@ -101,245 +101,245 @@ class c extends n {
|
|
|
101
101
|
case "align-items--tablet":
|
|
102
102
|
case "align-items--laptop":
|
|
103
103
|
case "align-items--desktop":
|
|
104
|
-
this.updateFlexProperties(
|
|
104
|
+
this.updateFlexProperties(e, t, i, w);
|
|
105
105
|
break;
|
|
106
106
|
case "wrap":
|
|
107
107
|
case "wrap--mobile":
|
|
108
108
|
case "wrap--tablet":
|
|
109
109
|
case "wrap--laptop":
|
|
110
110
|
case "wrap--desktop":
|
|
111
|
-
this.updateFlexProperties(
|
|
111
|
+
this.updateFlexProperties(e, t, i, $);
|
|
112
112
|
break;
|
|
113
113
|
case "direction":
|
|
114
114
|
case "direction--mobile":
|
|
115
115
|
case "direction--tablet":
|
|
116
116
|
case "direction--laptop":
|
|
117
117
|
case "direction--desktop":
|
|
118
|
-
this.updateFlexProperties(
|
|
118
|
+
this.updateFlexProperties(e, t, i, A);
|
|
119
119
|
break;
|
|
120
120
|
case "overflow-x":
|
|
121
121
|
case "overflow-x--mobile":
|
|
122
122
|
case "overflow-x--tablet":
|
|
123
123
|
case "overflow-x--laptop":
|
|
124
124
|
case "overflow-x--desktop":
|
|
125
|
-
this.updateOverflowX(
|
|
125
|
+
this.updateOverflowX(e, t, i, S);
|
|
126
126
|
break;
|
|
127
127
|
default:
|
|
128
|
-
super.attributeChangedCallback(
|
|
128
|
+
super.attributeChangedCallback(e, t, i);
|
|
129
129
|
break;
|
|
130
130
|
}
|
|
131
131
|
}
|
|
132
|
-
updateOverflowX(
|
|
132
|
+
updateOverflowX(e, t, i, o) {
|
|
133
133
|
if (!m(o, i)) {
|
|
134
|
-
console.error(`${i} is not an allowed ${
|
|
134
|
+
console.error(`${i} is not an allowed ${e} value`);
|
|
135
135
|
return;
|
|
136
136
|
}
|
|
137
137
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
138
|
-
t,
|
|
139
138
|
e,
|
|
139
|
+
t,
|
|
140
140
|
i
|
|
141
141
|
);
|
|
142
142
|
}
|
|
143
|
-
updateFlexProperties(
|
|
143
|
+
updateFlexProperties(e, t, i, o) {
|
|
144
144
|
this.checkName(o, i) || console.error(`${i} is not a valid value for ${o}`);
|
|
145
|
-
const d =
|
|
145
|
+
const d = e.indexOf("--") > -1, s = d ? e.split("--")[0] : e, a = [];
|
|
146
146
|
if (!d)
|
|
147
147
|
this.getAttribute(s + "--mobile") || a.push("mobile"), this.getAttribute(s + "--tablet") || a.push("tablet"), this.getAttribute(s + "--laptop") || a.push("laptop"), this.getAttribute(s + "--desktop") || a.push("desktop"), a.forEach((l) => {
|
|
148
|
-
this.updateStyle(s, l,
|
|
148
|
+
this.updateStyle(s, l, t, o), this.updateStyle(s, l, i, o);
|
|
149
149
|
});
|
|
150
150
|
else {
|
|
151
|
-
const l =
|
|
152
|
-
this.updateStyle(s, l,
|
|
151
|
+
const l = e.split("--")[1];
|
|
152
|
+
this.updateStyle(s, l, t, o), this.updateStyle(s, l, i, o);
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
|
-
updateStyle(
|
|
156
|
-
i && (
|
|
157
|
-
`--flex-${
|
|
158
|
-
`var(--px-spacing-${i}-${
|
|
155
|
+
updateStyle(e, t, i, o) {
|
|
156
|
+
i && (e === "gap" && o && o.includes(i) ? this.$el.style.setProperty(
|
|
157
|
+
`--flex-${e}--${t}-value`,
|
|
158
|
+
`var(--px-spacing-${i}-${t === "laptop" ? "desktop" : t})`
|
|
159
159
|
) : this.$el.style.setProperty(
|
|
160
|
-
`--flex-${
|
|
160
|
+
`--flex-${e}--${t}-value`,
|
|
161
161
|
i
|
|
162
162
|
));
|
|
163
163
|
}
|
|
164
164
|
get direction() {
|
|
165
165
|
return this.getAttribute("direction");
|
|
166
166
|
}
|
|
167
|
-
set direction(
|
|
168
|
-
this.setAttribute("direction",
|
|
167
|
+
set direction(e) {
|
|
168
|
+
this.setAttribute("direction", e);
|
|
169
169
|
}
|
|
170
170
|
get directionMobile() {
|
|
171
171
|
return this.getAttribute("direction--mobile");
|
|
172
172
|
}
|
|
173
|
-
set directionMobile(
|
|
174
|
-
this.setAttribute("direction--mobile",
|
|
173
|
+
set directionMobile(e) {
|
|
174
|
+
this.setAttribute("direction--mobile", e);
|
|
175
175
|
}
|
|
176
176
|
get directionTablet() {
|
|
177
177
|
return this.getAttribute("direction--tablet");
|
|
178
178
|
}
|
|
179
|
-
set directionTablet(
|
|
180
|
-
this.setAttribute("direction--tablet",
|
|
179
|
+
set directionTablet(e) {
|
|
180
|
+
this.setAttribute("direction--tablet", e);
|
|
181
181
|
}
|
|
182
182
|
get directionLaptop() {
|
|
183
183
|
return this.getAttribute("direction--laptop");
|
|
184
184
|
}
|
|
185
|
-
set directionLaptop(
|
|
186
|
-
this.setAttribute("direction--laptop",
|
|
185
|
+
set directionLaptop(e) {
|
|
186
|
+
this.setAttribute("direction--laptop", e);
|
|
187
187
|
}
|
|
188
188
|
get directionDesktop() {
|
|
189
189
|
return this.getAttribute("direction--desktop");
|
|
190
190
|
}
|
|
191
|
-
set directionDesktop(
|
|
192
|
-
this.setAttribute("direction--desktop",
|
|
191
|
+
set directionDesktop(e) {
|
|
192
|
+
this.setAttribute("direction--desktop", e);
|
|
193
193
|
}
|
|
194
194
|
get gap() {
|
|
195
195
|
return this.getAttribute("gap");
|
|
196
196
|
}
|
|
197
|
-
set gap(
|
|
198
|
-
this.setAttribute("gap",
|
|
197
|
+
set gap(e) {
|
|
198
|
+
this.setAttribute("gap", e);
|
|
199
199
|
}
|
|
200
200
|
get gapMobile() {
|
|
201
201
|
return this.getAttribute("gap--mobile");
|
|
202
202
|
}
|
|
203
|
-
set gapMobile(
|
|
204
|
-
this.setAttribute("gap--mobile",
|
|
203
|
+
set gapMobile(e) {
|
|
204
|
+
this.setAttribute("gap--mobile", e);
|
|
205
205
|
}
|
|
206
206
|
get gapTablet() {
|
|
207
207
|
return this.getAttribute("gap--tablet");
|
|
208
208
|
}
|
|
209
|
-
set gapTablet(
|
|
210
|
-
this.setAttribute("gap--tablet",
|
|
209
|
+
set gapTablet(e) {
|
|
210
|
+
this.setAttribute("gap--tablet", e);
|
|
211
211
|
}
|
|
212
212
|
get gapLaptop() {
|
|
213
213
|
return this.getAttribute("gap--laptop");
|
|
214
214
|
}
|
|
215
|
-
set gapLaptop(
|
|
216
|
-
this.setAttribute("gap--laptop",
|
|
215
|
+
set gapLaptop(e) {
|
|
216
|
+
this.setAttribute("gap--laptop", e);
|
|
217
217
|
}
|
|
218
218
|
get gapDesktop() {
|
|
219
219
|
return this.getAttribute("gap--desktop");
|
|
220
220
|
}
|
|
221
|
-
set gapDesktop(
|
|
222
|
-
this.setAttribute("gap--desktop",
|
|
221
|
+
set gapDesktop(e) {
|
|
222
|
+
this.setAttribute("gap--desktop", e);
|
|
223
223
|
}
|
|
224
224
|
get justifyContent() {
|
|
225
225
|
return this.getAttribute("justify-content");
|
|
226
226
|
}
|
|
227
|
-
set justifyContent(
|
|
228
|
-
this.setAttribute("justify-content",
|
|
227
|
+
set justifyContent(e) {
|
|
228
|
+
this.setAttribute("justify-content", e);
|
|
229
229
|
}
|
|
230
230
|
get justifyContentMobile() {
|
|
231
231
|
return this.getAttribute("justify-content--mobile");
|
|
232
232
|
}
|
|
233
|
-
set justifyContentMobile(
|
|
234
|
-
this.setAttribute("justify-content--mobile",
|
|
233
|
+
set justifyContentMobile(e) {
|
|
234
|
+
this.setAttribute("justify-content--mobile", e);
|
|
235
235
|
}
|
|
236
236
|
get justifyContentTablet() {
|
|
237
237
|
return this.getAttribute("justify-content--tablet");
|
|
238
238
|
}
|
|
239
|
-
set justifyContentTablet(
|
|
240
|
-
this.setAttribute("justify-content--tablet",
|
|
239
|
+
set justifyContentTablet(e) {
|
|
240
|
+
this.setAttribute("justify-content--tablet", e);
|
|
241
241
|
}
|
|
242
242
|
get justifyContentLaptop() {
|
|
243
243
|
return this.getAttribute("justify-content--laptop");
|
|
244
244
|
}
|
|
245
|
-
set justifyContentLaptop(
|
|
246
|
-
this.setAttribute("justify-content--laptop",
|
|
245
|
+
set justifyContentLaptop(e) {
|
|
246
|
+
this.setAttribute("justify-content--laptop", e);
|
|
247
247
|
}
|
|
248
248
|
get justifyContentDesktop() {
|
|
249
249
|
return this.getAttribute("justify-content--desktop");
|
|
250
250
|
}
|
|
251
|
-
set justifyContentDesktop(
|
|
252
|
-
this.setAttribute("justify-content--desktop",
|
|
251
|
+
set justifyContentDesktop(e) {
|
|
252
|
+
this.setAttribute("justify-content--desktop", e);
|
|
253
253
|
}
|
|
254
254
|
get alignItems() {
|
|
255
255
|
return this.getAttribute("align-items");
|
|
256
256
|
}
|
|
257
|
-
set alignItems(
|
|
258
|
-
this.setAttribute("align-items",
|
|
257
|
+
set alignItems(e) {
|
|
258
|
+
this.setAttribute("align-items", e);
|
|
259
259
|
}
|
|
260
260
|
get alignItemsMobile() {
|
|
261
261
|
return this.getAttribute("align-items--mobile");
|
|
262
262
|
}
|
|
263
|
-
set alignItemsMobile(
|
|
264
|
-
this.setAttribute("align-items--mobile",
|
|
263
|
+
set alignItemsMobile(e) {
|
|
264
|
+
this.setAttribute("align-items--mobile", e);
|
|
265
265
|
}
|
|
266
266
|
get alignItemsTablet() {
|
|
267
267
|
return this.getAttribute("align-items--tablet");
|
|
268
268
|
}
|
|
269
|
-
set alignItemsTablet(
|
|
270
|
-
this.setAttribute("align-items--tablet",
|
|
269
|
+
set alignItemsTablet(e) {
|
|
270
|
+
this.setAttribute("align-items--tablet", e);
|
|
271
271
|
}
|
|
272
272
|
get alignItemsLaptop() {
|
|
273
273
|
return this.getAttribute("align-items--laptop");
|
|
274
274
|
}
|
|
275
|
-
set alignItemsLaptop(
|
|
276
|
-
this.setAttribute("align-items--laptop",
|
|
275
|
+
set alignItemsLaptop(e) {
|
|
276
|
+
this.setAttribute("align-items--laptop", e);
|
|
277
277
|
}
|
|
278
278
|
get alignItemsDesktop() {
|
|
279
279
|
return this.getAttribute("align-items--desktop");
|
|
280
280
|
}
|
|
281
|
-
set alignItemsDesktop(
|
|
282
|
-
this.setAttribute("align-items--desktop",
|
|
281
|
+
set alignItemsDesktop(e) {
|
|
282
|
+
this.setAttribute("align-items--desktop", e);
|
|
283
283
|
}
|
|
284
284
|
get wrap() {
|
|
285
285
|
return this.getAttribute("wrap");
|
|
286
286
|
}
|
|
287
|
-
set wrap(
|
|
288
|
-
this.setAttribute("wrap",
|
|
287
|
+
set wrap(e) {
|
|
288
|
+
this.setAttribute("wrap", e);
|
|
289
289
|
}
|
|
290
290
|
get wrapMobile() {
|
|
291
291
|
return this.getAttribute("wrap--mobile");
|
|
292
292
|
}
|
|
293
|
-
set wrapMobile(
|
|
294
|
-
this.setAttribute("wrap--mobile",
|
|
293
|
+
set wrapMobile(e) {
|
|
294
|
+
this.setAttribute("wrap--mobile", e);
|
|
295
295
|
}
|
|
296
296
|
get wrapTablet() {
|
|
297
297
|
return this.getAttribute("wrap--tablet");
|
|
298
298
|
}
|
|
299
|
-
set wrapTablet(
|
|
300
|
-
this.setAttribute("wrap--tablet",
|
|
299
|
+
set wrapTablet(e) {
|
|
300
|
+
this.setAttribute("wrap--tablet", e);
|
|
301
301
|
}
|
|
302
302
|
get wrapLaptop() {
|
|
303
303
|
return this.getAttribute("wrap--laptop");
|
|
304
304
|
}
|
|
305
|
-
set wrapLaptop(
|
|
306
|
-
this.setAttribute("wrap--laptop",
|
|
305
|
+
set wrapLaptop(e) {
|
|
306
|
+
this.setAttribute("wrap--laptop", e);
|
|
307
307
|
}
|
|
308
308
|
get wrapDesktop() {
|
|
309
309
|
return this.getAttribute("wrap--desktop");
|
|
310
310
|
}
|
|
311
|
-
set wrapDesktop(
|
|
312
|
-
this.setAttribute("wrap--desktop",
|
|
311
|
+
set wrapDesktop(e) {
|
|
312
|
+
this.setAttribute("wrap--desktop", e);
|
|
313
313
|
}
|
|
314
314
|
get overflowX() {
|
|
315
315
|
return this.getAttribute("overflow-x");
|
|
316
316
|
}
|
|
317
|
-
set overflowX(
|
|
318
|
-
this.setAttribute("overflow-x",
|
|
317
|
+
set overflowX(e) {
|
|
318
|
+
this.setAttribute("overflow-x", e);
|
|
319
319
|
}
|
|
320
320
|
get overflowXMobile() {
|
|
321
321
|
return this.getAttribute("overflow-x--mobile");
|
|
322
322
|
}
|
|
323
|
-
set overflowXMobile(
|
|
324
|
-
this.setAttribute("overflow-x--mobile",
|
|
323
|
+
set overflowXMobile(e) {
|
|
324
|
+
this.setAttribute("overflow-x--mobile", e);
|
|
325
325
|
}
|
|
326
326
|
get overflowXTablet() {
|
|
327
327
|
return this.getAttribute("overflow-x--tablet");
|
|
328
328
|
}
|
|
329
|
-
set overflowXTablet(
|
|
330
|
-
this.setAttribute("overflow-x--tablet",
|
|
329
|
+
set overflowXTablet(e) {
|
|
330
|
+
this.setAttribute("overflow-x--tablet", e);
|
|
331
331
|
}
|
|
332
332
|
get overflowXLaptop() {
|
|
333
333
|
return this.getAttribute("overflow-x--laptop");
|
|
334
334
|
}
|
|
335
|
-
set overflowXLaptop(
|
|
336
|
-
this.setAttribute("overflow-x--laptop",
|
|
335
|
+
set overflowXLaptop(e) {
|
|
336
|
+
this.setAttribute("overflow-x--laptop", e);
|
|
337
337
|
}
|
|
338
338
|
get overflowXDesktop() {
|
|
339
339
|
return this.getAttribute("overflow-x--desktop");
|
|
340
340
|
}
|
|
341
|
-
set overflowXDesktop(
|
|
342
|
-
this.setAttribute("overflow-x--desktop",
|
|
341
|
+
set overflowXDesktop(e) {
|
|
342
|
+
this.setAttribute("overflow-x--desktop", e);
|
|
343
343
|
}
|
|
344
344
|
get $el() {
|
|
345
345
|
return this.shadowRoot.querySelector(".flex-container");
|
|
@@ -371,8 +371,8 @@ class z extends HTMLElement {
|
|
|
371
371
|
static get observedAttributes() {
|
|
372
372
|
return ["grow"];
|
|
373
373
|
}
|
|
374
|
-
attributeChangedCallback(
|
|
375
|
-
|
|
374
|
+
attributeChangedCallback(e, t, i) {
|
|
375
|
+
e === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
376
376
|
}
|
|
377
377
|
connectedCallback() {
|
|
378
378
|
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
@@ -380,14 +380,14 @@ class z extends HTMLElement {
|
|
|
380
380
|
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
381
381
|
}
|
|
382
382
|
disconnectedCallback() {
|
|
383
|
-
var
|
|
384
|
-
(
|
|
383
|
+
var e;
|
|
384
|
+
(e = this.resizeObserver) == null || e.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
|
|
385
385
|
}
|
|
386
386
|
get grow() {
|
|
387
387
|
return this.getAttribute("grow");
|
|
388
388
|
}
|
|
389
|
-
set grow(
|
|
390
|
-
this.setAttribute("grow",
|
|
389
|
+
set grow(e) {
|
|
390
|
+
this.setAttribute("grow", e);
|
|
391
391
|
}
|
|
392
392
|
scheduleRecheck() {
|
|
393
393
|
this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
|
|
@@ -398,8 +398,8 @@ class z extends HTMLElement {
|
|
|
398
398
|
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
399
399
|
}
|
|
400
400
|
handleSizeChange() {
|
|
401
|
-
const
|
|
402
|
-
this.isZeroSized !==
|
|
401
|
+
const e = this.getBoundingClientRect(), t = e.width === 0 && !this.isVertical || e.height === 0 && this.isVertical;
|
|
402
|
+
this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
|
|
403
403
|
}
|
|
404
404
|
updateParticipation() {
|
|
405
405
|
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
@@ -408,9 +408,9 @@ class z extends HTMLElement {
|
|
|
408
408
|
customElements.get("px-spacer") || customElements.define("px-spacer", z);
|
|
409
409
|
const L = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", b = new CSSStyleSheet();
|
|
410
410
|
b.replaceSync(L);
|
|
411
|
-
class
|
|
411
|
+
class D extends n {
|
|
412
412
|
constructor() {
|
|
413
|
-
super(b), this.template = (
|
|
413
|
+
super(b), this.template = (e) => `
|
|
414
414
|
<px-container border-radius="none" padding="none">
|
|
415
415
|
<px-vstack>
|
|
416
416
|
<px-container id="header-container" border-radius="none">
|
|
@@ -447,7 +447,7 @@ class j extends n {
|
|
|
447
447
|
<px-spacer></px-spacer>
|
|
448
448
|
</px-hstack>
|
|
449
449
|
</px-container>
|
|
450
|
-
${
|
|
450
|
+
${e ? ` <px-hstack>
|
|
451
451
|
<px-spacer></px-spacer>
|
|
452
452
|
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
453
453
|
<px-vstack gap="s">
|
|
@@ -563,11 +563,11 @@ class j extends n {
|
|
|
563
563
|
get paddingHorizontal() {
|
|
564
564
|
return this.getAttribute("padding-horizontal");
|
|
565
565
|
}
|
|
566
|
-
set paddingVertical(
|
|
567
|
-
this.setAttribute("padding-vertical",
|
|
566
|
+
set paddingVertical(e) {
|
|
567
|
+
this.setAttribute("padding-vertical", e);
|
|
568
568
|
}
|
|
569
|
-
set paddingHorizontal(
|
|
570
|
-
this.setAttribute("padding-horizontal",
|
|
569
|
+
set paddingHorizontal(e) {
|
|
570
|
+
this.setAttribute("padding-horizontal", e);
|
|
571
571
|
}
|
|
572
572
|
get gap() {
|
|
573
573
|
return this.getAttribute("gap");
|
|
@@ -575,9 +575,9 @@ class j extends n {
|
|
|
575
575
|
connectedCallback() {
|
|
576
576
|
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
577
577
|
}
|
|
578
|
-
attributeChangedCallback(
|
|
579
|
-
if (
|
|
580
|
-
switch (
|
|
578
|
+
attributeChangedCallback(e, t, i) {
|
|
579
|
+
if (t !== i)
|
|
580
|
+
switch (e) {
|
|
581
581
|
case "background-image":
|
|
582
582
|
this.$imageContainer.setAttribute("background-image", i);
|
|
583
583
|
break;
|
|
@@ -597,19 +597,19 @@ class j extends n {
|
|
|
597
597
|
this.handlePaddingHorizontalChange(i);
|
|
598
598
|
break;
|
|
599
599
|
default:
|
|
600
|
-
super.attributeChangedCallback(
|
|
600
|
+
super.attributeChangedCallback(e, t, i);
|
|
601
601
|
}
|
|
602
602
|
}
|
|
603
|
-
handlePaddingVerticalChange(
|
|
604
|
-
this.$headerContainer.setAttribute("padding-top",
|
|
603
|
+
handlePaddingVerticalChange(e) {
|
|
604
|
+
this.$headerContainer.setAttribute("padding-top", e), this.$footerContainer.setAttribute("padding-bottom", e);
|
|
605
605
|
}
|
|
606
|
-
handlePaddingHorizontalChange(
|
|
607
|
-
this.$headerContainer.paddingLeft =
|
|
606
|
+
handlePaddingHorizontalChange(e) {
|
|
607
|
+
this.$headerContainer.paddingLeft = e, this.$headerContainer.paddingRight = e, this.$bodyContainer.paddingLeft = e, this.$bodyContainer.paddingRight = e, this.$contactContainer.paddingLeft = e, this.$contactContainer.paddingRight = e, this.$footerContainer.paddingLeft = e, this.$footerContainer.paddingRight = e, this.$imageContainer.paddingLeft = e, this.$imageContainer.paddingRight = e;
|
|
608
608
|
}
|
|
609
609
|
}
|
|
610
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
611
|
-
const
|
|
612
|
-
p.replaceSync(
|
|
610
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", D);
|
|
611
|
+
const j = ':host{display:block;font-family:var(--px-font-family);font-size:var(--px-font-size-base)}:host *{box-sizing:border-box}.selectable-box{display:flex;flex-direction:column;height:100%}::slotted([slot="media"]){width:100%;height:auto}.info{display:flex;flex-grow:1}.info .info__body{display:flex;flex-direction:column;flex-basis:80%;gap:var(--px-spacing-default-mobile);padding:var(--px-padding-m-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile)}.info .info__body .header .titles{display:flex;flex-direction:column;gap:var(--px-spacing-xs-mobile)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);flex-grow:1}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-body);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-dimmed-default);flex-grow:1}.info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-default)}.info .info__footer{display:flex;align-items:center;padding:var(--px-padding-s-mobile);background:var(--px-color-background-container-default-default);text-align:center}:host([hide-footer]) .info .info__body{flex-basis:auto}:host([hide-footer]) .info__footer{display:none}@media only screen and (min-width: 48em){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-m-tablet)}.info .info__body .header{gap:var(--px-spacing-s-tablet)}.info .info__body .header .titles{gap:var(--px-spacing-xs-tablet)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}.info .info__footer{justify-content:center;padding:var(--px-padding-s-tablet)}}@media only screen and (min-width: 64.0625em){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-m-laptop)}.info .info__body .header{gap:var(--px-spacing-s-laptop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-laptop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}.info .info__footer{padding:var(--px-padding-s-laptop)}}@media only screen and (min-width: 90.0625em){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-m-desktop)}.info .info__body .header{gap:var(--px-spacing-s-desktop)}.info .info__body .header .titles{gap:var(--px-spacing-xs-desktop)}.info .info__body .header .titles ::slotted([slot="title"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__body .header .titles ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-desktop)}.info .info__footer{padding:var(--px-padding-s-desktop)}}:host([inverted]) .info .info__body .header .titles ::slotted([slot="title"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__body .header .titles ::slotted([slot="description"]){color:var(--px-color-text-dimmed-inverted)}:host([inverted]) .info .info__body ::slotted([slot="content"]){color:var(--px-color-text-neutral-inverted)}:host([inverted]) .info .info__footer{background:var(--px-color-background-container-default-inverted)}', p = new CSSStyleSheet();
|
|
612
|
+
p.replaceSync(j);
|
|
613
613
|
class R extends n {
|
|
614
614
|
template() {
|
|
615
615
|
return `
|
|
@@ -641,11 +641,11 @@ class R extends n {
|
|
|
641
641
|
static get observedAttributes() {
|
|
642
642
|
return [...super.observedAttributes, "inverted", "hide-footer"];
|
|
643
643
|
}
|
|
644
|
-
attributeChangedCallback(
|
|
645
|
-
if (
|
|
646
|
-
switch (
|
|
644
|
+
attributeChangedCallback(e, t, i) {
|
|
645
|
+
if (t !== i)
|
|
646
|
+
switch (e) {
|
|
647
647
|
default:
|
|
648
|
-
super.attributeChangedCallback(
|
|
648
|
+
super.attributeChangedCallback(e, t, i);
|
|
649
649
|
break;
|
|
650
650
|
}
|
|
651
651
|
}
|
|
@@ -655,14 +655,14 @@ class R extends n {
|
|
|
655
655
|
get inverted() {
|
|
656
656
|
return this.hasAttribute("inverted");
|
|
657
657
|
}
|
|
658
|
-
set inverted(
|
|
659
|
-
|
|
658
|
+
set inverted(e) {
|
|
659
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
660
660
|
}
|
|
661
661
|
get hideFooter() {
|
|
662
662
|
return this.hasAttribute("hide-footer");
|
|
663
663
|
}
|
|
664
|
-
set hideFooter(
|
|
665
|
-
|
|
664
|
+
set hideFooter(e) {
|
|
665
|
+
e ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
|
|
666
666
|
}
|
|
667
667
|
}
|
|
668
668
|
customElements.get("px-selectable-box") || customElements.define("px-selectable-box", R);
|
|
@@ -690,8 +690,8 @@ class F extends n {
|
|
|
690
690
|
`;
|
|
691
691
|
}
|
|
692
692
|
constructor() {
|
|
693
|
-
var
|
|
694
|
-
super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (
|
|
693
|
+
var e;
|
|
694
|
+
super(g), this.shadowRoot.innerHTML = this.template(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
695
695
|
}
|
|
696
696
|
connectedCallback() {
|
|
697
697
|
this.tabIndex = 0, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
|
|
@@ -709,15 +709,15 @@ class F extends n {
|
|
|
709
709
|
"disabled"
|
|
710
710
|
];
|
|
711
711
|
}
|
|
712
|
-
attributeChangedCallback(
|
|
713
|
-
if (
|
|
714
|
-
switch (
|
|
712
|
+
attributeChangedCallback(e, t, i) {
|
|
713
|
+
if (t !== i)
|
|
714
|
+
switch (e) {
|
|
715
715
|
case "inverted":
|
|
716
716
|
this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$checkbox.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$checkbox.removeAttribute("inverted"));
|
|
717
717
|
break;
|
|
718
718
|
case "name":
|
|
719
719
|
case "value":
|
|
720
|
-
this.$checkbox && this.$checkbox.setAttribute(
|
|
720
|
+
this.$checkbox && this.$checkbox.setAttribute(e, i);
|
|
721
721
|
break;
|
|
722
722
|
case "disabled":
|
|
723
723
|
this.handleDisabledAttributeChange(i !== null);
|
|
@@ -726,7 +726,7 @@ class F extends n {
|
|
|
726
726
|
this.handleCheckedAttributeChange(i);
|
|
727
727
|
break;
|
|
728
728
|
default:
|
|
729
|
-
super.attributeChangedCallback(
|
|
729
|
+
super.attributeChangedCallback(e, t, i);
|
|
730
730
|
break;
|
|
731
731
|
}
|
|
732
732
|
}
|
|
@@ -742,25 +742,25 @@ class F extends n {
|
|
|
742
742
|
setHoverAttribute() {
|
|
743
743
|
this.$checkbox.setAttribute("hover", "");
|
|
744
744
|
}
|
|
745
|
-
setKeypressEvent(
|
|
746
|
-
switch (
|
|
745
|
+
setKeypressEvent(e) {
|
|
746
|
+
switch (e.stopPropagation(), e.preventDefault(), e.code) {
|
|
747
747
|
case "Space":
|
|
748
748
|
this.click();
|
|
749
749
|
break;
|
|
750
750
|
}
|
|
751
751
|
}
|
|
752
|
-
setClickEvent(
|
|
753
|
-
this.checked = !this.checked,
|
|
752
|
+
setClickEvent(e) {
|
|
753
|
+
this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
|
|
754
754
|
}
|
|
755
755
|
toggleFooterVisibility() {
|
|
756
756
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
757
757
|
}
|
|
758
|
-
handleDisabledAttributeChange(
|
|
759
|
-
|
|
758
|
+
handleDisabledAttributeChange(e) {
|
|
759
|
+
e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$checkbox.removeAttribute("disabled"));
|
|
760
760
|
}
|
|
761
|
-
handleCheckedAttributeChange(
|
|
762
|
-
var
|
|
763
|
-
(
|
|
761
|
+
handleCheckedAttributeChange(e) {
|
|
762
|
+
var t;
|
|
763
|
+
(t = this.internals) == null || t.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
|
|
764
764
|
new Event("change", {
|
|
765
765
|
bubbles: !0,
|
|
766
766
|
composed: !0
|
|
@@ -776,13 +776,13 @@ class F extends n {
|
|
|
776
776
|
formResetCallback() {
|
|
777
777
|
this.checked = !1;
|
|
778
778
|
}
|
|
779
|
-
formStateRestoreCallback(
|
|
780
|
-
this.checked =
|
|
779
|
+
formStateRestoreCallback(e) {
|
|
780
|
+
this.checked = e;
|
|
781
781
|
}
|
|
782
782
|
formData() {
|
|
783
783
|
if (this.name) {
|
|
784
|
-
const
|
|
785
|
-
return
|
|
784
|
+
const e = new FormData(), t = this.getAttribute("name");
|
|
785
|
+
return t && (this.checked ? e.set(t, this.value) : e.delete(t)), e;
|
|
786
786
|
}
|
|
787
787
|
}
|
|
788
788
|
get $el() {
|
|
@@ -807,37 +807,37 @@ class F extends n {
|
|
|
807
807
|
get inverted() {
|
|
808
808
|
return this.hasAttribute("inverted");
|
|
809
809
|
}
|
|
810
|
-
set inverted(
|
|
811
|
-
|
|
810
|
+
set inverted(e) {
|
|
811
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
812
812
|
}
|
|
813
813
|
get checked() {
|
|
814
814
|
return this.hasAttribute("checked");
|
|
815
815
|
}
|
|
816
|
-
set checked(
|
|
817
|
-
|
|
816
|
+
set checked(e) {
|
|
817
|
+
e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
|
|
818
818
|
}
|
|
819
819
|
get name() {
|
|
820
820
|
return this.getAttribute("name");
|
|
821
821
|
}
|
|
822
|
-
set name(
|
|
823
|
-
|
|
822
|
+
set name(e) {
|
|
823
|
+
e ? this.setAttribute("name", e) : this.removeAttribute("name");
|
|
824
824
|
}
|
|
825
825
|
get disabled() {
|
|
826
826
|
return this.hasAttribute("disabled");
|
|
827
827
|
}
|
|
828
|
-
set disabled(
|
|
829
|
-
|
|
828
|
+
set disabled(e) {
|
|
829
|
+
e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
830
830
|
}
|
|
831
831
|
get value() {
|
|
832
832
|
return this.getAttribute("value");
|
|
833
833
|
}
|
|
834
|
-
set value(
|
|
835
|
-
|
|
834
|
+
set value(e) {
|
|
835
|
+
e ? this.setAttribute("value", e) : this.removeAttribute("value");
|
|
836
836
|
}
|
|
837
837
|
}
|
|
838
838
|
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", F);
|
|
839
|
-
const
|
|
840
|
-
|
|
839
|
+
const f = new CSSStyleSheet();
|
|
840
|
+
f.replaceSync(u);
|
|
841
841
|
class H extends n {
|
|
842
842
|
template() {
|
|
843
843
|
return `
|
|
@@ -860,12 +860,12 @@ class H extends n {
|
|
|
860
860
|
`;
|
|
861
861
|
}
|
|
862
862
|
constructor() {
|
|
863
|
-
var
|
|
864
|
-
super(
|
|
863
|
+
var e;
|
|
864
|
+
super(f), this.shadowRoot.innerHTML = this.template(), this.internals = (e = this.attachInternals) == null ? void 0 : e.call(this), this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`;
|
|
865
865
|
}
|
|
866
866
|
connectedCallback() {
|
|
867
|
-
var
|
|
868
|
-
this.tabIndex = ((
|
|
867
|
+
var e;
|
|
868
|
+
this.tabIndex = ((e = this.parentElement) == null ? void 0 : e.firstElementChild) === this ? 0 : -1, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
|
|
869
869
|
"slotchange",
|
|
870
870
|
this.toggleFooterVisibility
|
|
871
871
|
), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent), this.hasAttribute("checked") && (this.checked = !0);
|
|
@@ -880,15 +880,15 @@ class H extends n {
|
|
|
880
880
|
"disabled"
|
|
881
881
|
];
|
|
882
882
|
}
|
|
883
|
-
attributeChangedCallback(
|
|
884
|
-
if (
|
|
885
|
-
switch (
|
|
883
|
+
attributeChangedCallback(e, t, i) {
|
|
884
|
+
if (t !== i)
|
|
885
|
+
switch (e) {
|
|
886
886
|
case "inverted":
|
|
887
887
|
this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$radio.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$radio.removeAttribute("inverted"));
|
|
888
888
|
break;
|
|
889
889
|
case "name":
|
|
890
890
|
case "value":
|
|
891
|
-
this.$radio && this.$radio.setAttribute(
|
|
891
|
+
this.$radio && this.$radio.setAttribute(e, i);
|
|
892
892
|
break;
|
|
893
893
|
case "disabled":
|
|
894
894
|
this.handleDisabledAttributeChange(i !== null);
|
|
@@ -897,7 +897,7 @@ class H extends n {
|
|
|
897
897
|
this.handleCheckedAttributeChange(i);
|
|
898
898
|
break;
|
|
899
899
|
default:
|
|
900
|
-
super.attributeChangedCallback(
|
|
900
|
+
super.attributeChangedCallback(e, t, i);
|
|
901
901
|
break;
|
|
902
902
|
}
|
|
903
903
|
}
|
|
@@ -913,25 +913,25 @@ class H extends n {
|
|
|
913
913
|
setHoverAttribute() {
|
|
914
914
|
this.$radio.setAttribute("hover", "");
|
|
915
915
|
}
|
|
916
|
-
setKeypressEvent(
|
|
917
|
-
switch (
|
|
916
|
+
setKeypressEvent(e) {
|
|
917
|
+
switch (e.preventDefault(), e.code) {
|
|
918
918
|
case "Space":
|
|
919
919
|
this.click();
|
|
920
920
|
break;
|
|
921
921
|
}
|
|
922
922
|
}
|
|
923
|
-
setClickEvent(
|
|
924
|
-
this.checked || (this.checked = !0),
|
|
923
|
+
setClickEvent(e) {
|
|
924
|
+
this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
|
|
925
925
|
}
|
|
926
926
|
toggleFooterVisibility() {
|
|
927
927
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
928
928
|
}
|
|
929
|
-
handleDisabledAttributeChange(
|
|
930
|
-
|
|
929
|
+
handleDisabledAttributeChange(e) {
|
|
930
|
+
e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$radio.removeAttribute("disabled"));
|
|
931
931
|
}
|
|
932
|
-
handleCheckedAttributeChange(
|
|
933
|
-
var
|
|
934
|
-
(
|
|
932
|
+
handleCheckedAttributeChange(e) {
|
|
933
|
+
var t;
|
|
934
|
+
(t = this.internals) == null || t.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
|
|
935
935
|
new Event("change", {
|
|
936
936
|
bubbles: !0,
|
|
937
937
|
composed: !0
|
|
@@ -947,13 +947,13 @@ class H extends n {
|
|
|
947
947
|
formResetCallback() {
|
|
948
948
|
this.checked = !1;
|
|
949
949
|
}
|
|
950
|
-
formStateRestoreCallback(
|
|
951
|
-
this.checked =
|
|
950
|
+
formStateRestoreCallback(e) {
|
|
951
|
+
this.checked = e;
|
|
952
952
|
}
|
|
953
953
|
formData() {
|
|
954
954
|
if (this.name) {
|
|
955
|
-
const
|
|
956
|
-
return
|
|
955
|
+
const e = new FormData(), t = this.getAttribute("name");
|
|
956
|
+
return t && (this.checked ? e.set(t, this.value) : e.delete(t)), e;
|
|
957
957
|
}
|
|
958
958
|
}
|
|
959
959
|
get $el() {
|
|
@@ -978,32 +978,32 @@ class H extends n {
|
|
|
978
978
|
get inverted() {
|
|
979
979
|
return this.hasAttribute("inverted");
|
|
980
980
|
}
|
|
981
|
-
set inverted(
|
|
982
|
-
|
|
981
|
+
set inverted(e) {
|
|
982
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
983
983
|
}
|
|
984
984
|
get checked() {
|
|
985
985
|
return this.hasAttribute("checked");
|
|
986
986
|
}
|
|
987
|
-
set checked(
|
|
988
|
-
|
|
987
|
+
set checked(e) {
|
|
988
|
+
e ? this.setAttribute("checked", "") : this.removeAttribute("checked");
|
|
989
989
|
}
|
|
990
990
|
get name() {
|
|
991
991
|
return this.getAttribute("name");
|
|
992
992
|
}
|
|
993
|
-
set name(
|
|
994
|
-
|
|
993
|
+
set name(e) {
|
|
994
|
+
e ? this.setAttribute("name", e) : this.removeAttribute("name");
|
|
995
995
|
}
|
|
996
996
|
get disabled() {
|
|
997
997
|
return this.hasAttribute("disabled");
|
|
998
998
|
}
|
|
999
|
-
set disabled(
|
|
1000
|
-
|
|
999
|
+
set disabled(e) {
|
|
1000
|
+
e ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
1001
1001
|
}
|
|
1002
1002
|
get value() {
|
|
1003
1003
|
return this.getAttribute("value");
|
|
1004
1004
|
}
|
|
1005
|
-
set value(
|
|
1006
|
-
|
|
1005
|
+
set value(e) {
|
|
1006
|
+
e ? this.setAttribute("value", e) : this.removeAttribute("value");
|
|
1007
1007
|
}
|
|
1008
1008
|
}
|
|
1009
1009
|
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", H);
|