@proximus/lavender-selectablebox 2.0.0-alpha.11 → 2.0.0-alpha.111
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/clickEventGuards.d.ts +1 -0
- package/dist/index.es.js +255 -231
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function shouldIgnoreSelectableBoxClick(event: MouseEvent, host: HTMLElement, ignoredTags?: string[]): boolean;
|
package/dist/index.es.js
CHANGED
|
@@ -1,37 +1,41 @@
|
|
|
1
|
-
import { WithExtraAttributes as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
const
|
|
1
|
+
import { WithExtraAttributes as c, AttributeBreakpointHandlerDelegate as m, gapValues as k, checkName as y, log as h, backgroundColorValues as A } from "@proximus/lavender-common";
|
|
2
|
+
const w = ':host{display:block}:host ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-mobile) - var(--host-gap--mobile))}: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 screen and (max-width: 47.938rem){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 48rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-tablet) - var(--host-gap--tablet))}: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 screen and (min-width: 48rem) and (max-width: 64rem){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media screen and (min-width: 64.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-laptop) - var(--host-gap--laptop))}: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 screen and (min-width: 64.0625rem) and (max-width: 90rem){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media screen and (min-width: 90.0625rem){.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 ::slotted(px-h1[auto-spacing]),:host ::slotted(px-h2[auto-spacing]),:host ::slotted(px-h3[auto-spacing]),:host ::slotted(px-h4[auto-spacing]),:host ::slotted(px-h5[auto-spacing]),:host ::slotted(px-h6[auto-spacing]){margin-bottom:calc(var(--px-spacing-heading-to-content-desktop) - var(--host-gap--desktop))}: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))}}', b = new CSSStyleSheet();
|
|
3
|
+
b.replaceSync(w);
|
|
4
|
+
const C = [
|
|
5
5
|
"",
|
|
6
6
|
"default",
|
|
7
7
|
"row",
|
|
8
8
|
"row-reverse",
|
|
9
9
|
"column",
|
|
10
10
|
"column-reverse"
|
|
11
|
-
],
|
|
11
|
+
], $ = [
|
|
12
12
|
"",
|
|
13
13
|
"default",
|
|
14
14
|
"stretch",
|
|
15
15
|
"flex-start",
|
|
16
|
+
"start",
|
|
16
17
|
"flex-end",
|
|
18
|
+
"end",
|
|
17
19
|
"center",
|
|
18
20
|
"baseline"
|
|
19
|
-
],
|
|
21
|
+
], S = [
|
|
20
22
|
"",
|
|
21
23
|
"default",
|
|
22
24
|
"flex-start",
|
|
25
|
+
"start",
|
|
23
26
|
"flex-end",
|
|
27
|
+
"end",
|
|
24
28
|
"center",
|
|
25
29
|
"space-between",
|
|
26
30
|
"space-around",
|
|
27
31
|
"space-evenly"
|
|
28
|
-
],
|
|
29
|
-
class
|
|
32
|
+
], _ = ["", "default", "nowrap", "wrap", "wrap-reverse"], E = ["", "visible", "hidden", "scroll", "auto"];
|
|
33
|
+
class d extends c {
|
|
30
34
|
constructor() {
|
|
31
|
-
super(
|
|
35
|
+
super(b), this.overflowXAttributeDelegate = new m(
|
|
32
36
|
this,
|
|
33
37
|
"overflow-x",
|
|
34
|
-
(
|
|
38
|
+
(t) => t,
|
|
35
39
|
"--overflow-x"
|
|
36
40
|
), this.template = `<div class="flex-container">
|
|
37
41
|
<slot></slot>
|
|
@@ -75,14 +79,14 @@ class c extends n {
|
|
|
75
79
|
"overflow-x--desktop"
|
|
76
80
|
];
|
|
77
81
|
}
|
|
78
|
-
attributeChangedCallback(
|
|
79
|
-
switch (
|
|
82
|
+
attributeChangedCallback(t, e, i) {
|
|
83
|
+
switch (t) {
|
|
80
84
|
case "gap":
|
|
81
85
|
case "gap--mobile":
|
|
82
86
|
case "gap--tablet":
|
|
83
87
|
case "gap--laptop":
|
|
84
88
|
case "gap--desktop":
|
|
85
|
-
this.updateFlexProperties(
|
|
89
|
+
this.updateFlexProperties(t, e, i, k);
|
|
86
90
|
break;
|
|
87
91
|
case "justify-content":
|
|
88
92
|
case "justify-content--mobile":
|
|
@@ -90,10 +94,10 @@ class c extends n {
|
|
|
90
94
|
case "justify-content--laptop":
|
|
91
95
|
case "justify-content--desktop":
|
|
92
96
|
this.updateFlexProperties(
|
|
93
|
-
e,
|
|
94
97
|
t,
|
|
98
|
+
e,
|
|
95
99
|
i,
|
|
96
|
-
|
|
100
|
+
S
|
|
97
101
|
);
|
|
98
102
|
break;
|
|
99
103
|
case "align-items":
|
|
@@ -101,252 +105,259 @@ class c extends n {
|
|
|
101
105
|
case "align-items--tablet":
|
|
102
106
|
case "align-items--laptop":
|
|
103
107
|
case "align-items--desktop":
|
|
104
|
-
this.updateFlexProperties(
|
|
108
|
+
this.updateFlexProperties(t, e, i, $);
|
|
105
109
|
break;
|
|
106
110
|
case "wrap":
|
|
107
111
|
case "wrap--mobile":
|
|
108
112
|
case "wrap--tablet":
|
|
109
113
|
case "wrap--laptop":
|
|
110
114
|
case "wrap--desktop":
|
|
111
|
-
this.updateFlexProperties(
|
|
115
|
+
this.updateFlexProperties(t, e, i, _);
|
|
112
116
|
break;
|
|
113
117
|
case "direction":
|
|
114
118
|
case "direction--mobile":
|
|
115
119
|
case "direction--tablet":
|
|
116
120
|
case "direction--laptop":
|
|
117
121
|
case "direction--desktop":
|
|
118
|
-
this.updateFlexProperties(
|
|
122
|
+
this.updateFlexProperties(t, e, i, C);
|
|
119
123
|
break;
|
|
120
124
|
case "overflow-x":
|
|
121
125
|
case "overflow-x--mobile":
|
|
122
126
|
case "overflow-x--tablet":
|
|
123
127
|
case "overflow-x--laptop":
|
|
124
128
|
case "overflow-x--desktop":
|
|
125
|
-
this.updateOverflowX(
|
|
129
|
+
this.updateOverflowX(t, e, i, E);
|
|
126
130
|
break;
|
|
127
131
|
default:
|
|
128
|
-
super.attributeChangedCallback(
|
|
132
|
+
super.attributeChangedCallback(t, e, i);
|
|
129
133
|
break;
|
|
130
134
|
}
|
|
131
135
|
}
|
|
132
|
-
updateOverflowX(
|
|
133
|
-
if (!
|
|
134
|
-
|
|
136
|
+
updateOverflowX(t, e, i, o) {
|
|
137
|
+
if (!y(o, i)) {
|
|
138
|
+
h(
|
|
139
|
+
`"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
140
|
+
);
|
|
135
141
|
return;
|
|
136
142
|
}
|
|
137
143
|
this.overflowXAttributeDelegate.attributeChangedCallback(
|
|
138
|
-
e,
|
|
139
144
|
t,
|
|
145
|
+
e,
|
|
140
146
|
i
|
|
141
147
|
);
|
|
142
148
|
}
|
|
143
|
-
updateFlexProperties(
|
|
144
|
-
this.checkName(o, i) ||
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
updateFlexProperties(t, e, i, o) {
|
|
150
|
+
this.checkName(o, i) || h(
|
|
151
|
+
`"${i}" is not a valid ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${o.join('", "')}".`
|
|
152
|
+
);
|
|
153
|
+
const r = t.indexOf("--") > -1, a = r ? t.split("--")[0] : t, l = [];
|
|
154
|
+
if (!r)
|
|
155
|
+
this.getAttribute(a + "--mobile") || l.push("mobile"), this.getAttribute(a + "--tablet") || l.push("tablet"), this.getAttribute(a + "--laptop") || l.push("laptop"), this.getAttribute(a + "--desktop") || l.push("desktop"), l.forEach((n) => {
|
|
156
|
+
this.updateStyle(a, n, e, o), this.updateStyle(a, n, i, o);
|
|
149
157
|
});
|
|
150
158
|
else {
|
|
151
|
-
const
|
|
152
|
-
this.updateStyle(
|
|
159
|
+
const n = t.split("--")[1];
|
|
160
|
+
this.updateStyle(a, n, e, o), this.updateStyle(a, n, i, o);
|
|
153
161
|
}
|
|
154
162
|
}
|
|
155
|
-
updateStyle(
|
|
156
|
-
i && (
|
|
157
|
-
`--flex-${
|
|
158
|
-
`var(--px-spacing-${i}-${
|
|
159
|
-
)
|
|
160
|
-
`--
|
|
163
|
+
updateStyle(t, e, i, o) {
|
|
164
|
+
i && (t === "gap" && o && o.includes(i) ? (this.$el.style.setProperty(
|
|
165
|
+
`--flex-${t}--${e}-value`,
|
|
166
|
+
`var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
|
|
167
|
+
), this.style.setProperty(
|
|
168
|
+
`--host-gap--${e}`,
|
|
169
|
+
`var(--px-spacing-${i}-${e === "laptop" ? "desktop" : e})`
|
|
170
|
+
)) : this.$el.style.setProperty(
|
|
171
|
+
`--flex-${t}--${e}-value`,
|
|
161
172
|
i
|
|
162
173
|
));
|
|
163
174
|
}
|
|
164
175
|
get direction() {
|
|
165
176
|
return this.getAttribute("direction");
|
|
166
177
|
}
|
|
167
|
-
set direction(
|
|
168
|
-
this.setAttribute("direction",
|
|
178
|
+
set direction(t) {
|
|
179
|
+
this.setAttribute("direction", t);
|
|
169
180
|
}
|
|
170
181
|
get directionMobile() {
|
|
171
182
|
return this.getAttribute("direction--mobile");
|
|
172
183
|
}
|
|
173
|
-
set directionMobile(
|
|
174
|
-
this.setAttribute("direction--mobile",
|
|
184
|
+
set directionMobile(t) {
|
|
185
|
+
this.setAttribute("direction--mobile", t);
|
|
175
186
|
}
|
|
176
187
|
get directionTablet() {
|
|
177
188
|
return this.getAttribute("direction--tablet");
|
|
178
189
|
}
|
|
179
|
-
set directionTablet(
|
|
180
|
-
this.setAttribute("direction--tablet",
|
|
190
|
+
set directionTablet(t) {
|
|
191
|
+
this.setAttribute("direction--tablet", t);
|
|
181
192
|
}
|
|
182
193
|
get directionLaptop() {
|
|
183
194
|
return this.getAttribute("direction--laptop");
|
|
184
195
|
}
|
|
185
|
-
set directionLaptop(
|
|
186
|
-
this.setAttribute("direction--laptop",
|
|
196
|
+
set directionLaptop(t) {
|
|
197
|
+
this.setAttribute("direction--laptop", t);
|
|
187
198
|
}
|
|
188
199
|
get directionDesktop() {
|
|
189
200
|
return this.getAttribute("direction--desktop");
|
|
190
201
|
}
|
|
191
|
-
set directionDesktop(
|
|
192
|
-
this.setAttribute("direction--desktop",
|
|
202
|
+
set directionDesktop(t) {
|
|
203
|
+
this.setAttribute("direction--desktop", t);
|
|
193
204
|
}
|
|
194
205
|
get gap() {
|
|
195
206
|
return this.getAttribute("gap");
|
|
196
207
|
}
|
|
197
|
-
set gap(
|
|
198
|
-
this.setAttribute("gap",
|
|
208
|
+
set gap(t) {
|
|
209
|
+
this.setAttribute("gap", t);
|
|
199
210
|
}
|
|
200
211
|
get gapMobile() {
|
|
201
212
|
return this.getAttribute("gap--mobile");
|
|
202
213
|
}
|
|
203
|
-
set gapMobile(
|
|
204
|
-
this.setAttribute("gap--mobile",
|
|
214
|
+
set gapMobile(t) {
|
|
215
|
+
this.setAttribute("gap--mobile", t);
|
|
205
216
|
}
|
|
206
217
|
get gapTablet() {
|
|
207
218
|
return this.getAttribute("gap--tablet");
|
|
208
219
|
}
|
|
209
|
-
set gapTablet(
|
|
210
|
-
this.setAttribute("gap--tablet",
|
|
220
|
+
set gapTablet(t) {
|
|
221
|
+
this.setAttribute("gap--tablet", t);
|
|
211
222
|
}
|
|
212
223
|
get gapLaptop() {
|
|
213
224
|
return this.getAttribute("gap--laptop");
|
|
214
225
|
}
|
|
215
|
-
set gapLaptop(
|
|
216
|
-
this.setAttribute("gap--laptop",
|
|
226
|
+
set gapLaptop(t) {
|
|
227
|
+
this.setAttribute("gap--laptop", t);
|
|
217
228
|
}
|
|
218
229
|
get gapDesktop() {
|
|
219
230
|
return this.getAttribute("gap--desktop");
|
|
220
231
|
}
|
|
221
|
-
set gapDesktop(
|
|
222
|
-
this.setAttribute("gap--desktop",
|
|
232
|
+
set gapDesktop(t) {
|
|
233
|
+
this.setAttribute("gap--desktop", t);
|
|
223
234
|
}
|
|
224
235
|
get justifyContent() {
|
|
225
236
|
return this.getAttribute("justify-content");
|
|
226
237
|
}
|
|
227
|
-
set justifyContent(
|
|
228
|
-
this.setAttribute("justify-content",
|
|
238
|
+
set justifyContent(t) {
|
|
239
|
+
this.setAttribute("justify-content", t);
|
|
229
240
|
}
|
|
230
241
|
get justifyContentMobile() {
|
|
231
242
|
return this.getAttribute("justify-content--mobile");
|
|
232
243
|
}
|
|
233
|
-
set justifyContentMobile(
|
|
234
|
-
this.setAttribute("justify-content--mobile",
|
|
244
|
+
set justifyContentMobile(t) {
|
|
245
|
+
this.setAttribute("justify-content--mobile", t);
|
|
235
246
|
}
|
|
236
247
|
get justifyContentTablet() {
|
|
237
248
|
return this.getAttribute("justify-content--tablet");
|
|
238
249
|
}
|
|
239
|
-
set justifyContentTablet(
|
|
240
|
-
this.setAttribute("justify-content--tablet",
|
|
250
|
+
set justifyContentTablet(t) {
|
|
251
|
+
this.setAttribute("justify-content--tablet", t);
|
|
241
252
|
}
|
|
242
253
|
get justifyContentLaptop() {
|
|
243
254
|
return this.getAttribute("justify-content--laptop");
|
|
244
255
|
}
|
|
245
|
-
set justifyContentLaptop(
|
|
246
|
-
this.setAttribute("justify-content--laptop",
|
|
256
|
+
set justifyContentLaptop(t) {
|
|
257
|
+
this.setAttribute("justify-content--laptop", t);
|
|
247
258
|
}
|
|
248
259
|
get justifyContentDesktop() {
|
|
249
260
|
return this.getAttribute("justify-content--desktop");
|
|
250
261
|
}
|
|
251
|
-
set justifyContentDesktop(
|
|
252
|
-
this.setAttribute("justify-content--desktop",
|
|
262
|
+
set justifyContentDesktop(t) {
|
|
263
|
+
this.setAttribute("justify-content--desktop", t);
|
|
253
264
|
}
|
|
254
265
|
get alignItems() {
|
|
255
266
|
return this.getAttribute("align-items");
|
|
256
267
|
}
|
|
257
|
-
set alignItems(
|
|
258
|
-
this.setAttribute("align-items",
|
|
268
|
+
set alignItems(t) {
|
|
269
|
+
this.setAttribute("align-items", t);
|
|
259
270
|
}
|
|
260
271
|
get alignItemsMobile() {
|
|
261
272
|
return this.getAttribute("align-items--mobile");
|
|
262
273
|
}
|
|
263
|
-
set alignItemsMobile(
|
|
264
|
-
this.setAttribute("align-items--mobile",
|
|
274
|
+
set alignItemsMobile(t) {
|
|
275
|
+
this.setAttribute("align-items--mobile", t);
|
|
265
276
|
}
|
|
266
277
|
get alignItemsTablet() {
|
|
267
278
|
return this.getAttribute("align-items--tablet");
|
|
268
279
|
}
|
|
269
|
-
set alignItemsTablet(
|
|
270
|
-
this.setAttribute("align-items--tablet",
|
|
280
|
+
set alignItemsTablet(t) {
|
|
281
|
+
this.setAttribute("align-items--tablet", t);
|
|
271
282
|
}
|
|
272
283
|
get alignItemsLaptop() {
|
|
273
284
|
return this.getAttribute("align-items--laptop");
|
|
274
285
|
}
|
|
275
|
-
set alignItemsLaptop(
|
|
276
|
-
this.setAttribute("align-items--laptop",
|
|
286
|
+
set alignItemsLaptop(t) {
|
|
287
|
+
this.setAttribute("align-items--laptop", t);
|
|
277
288
|
}
|
|
278
289
|
get alignItemsDesktop() {
|
|
279
290
|
return this.getAttribute("align-items--desktop");
|
|
280
291
|
}
|
|
281
|
-
set alignItemsDesktop(
|
|
282
|
-
this.setAttribute("align-items--desktop",
|
|
292
|
+
set alignItemsDesktop(t) {
|
|
293
|
+
this.setAttribute("align-items--desktop", t);
|
|
283
294
|
}
|
|
284
295
|
get wrap() {
|
|
285
296
|
return this.getAttribute("wrap");
|
|
286
297
|
}
|
|
287
|
-
set wrap(
|
|
288
|
-
this.setAttribute("wrap",
|
|
298
|
+
set wrap(t) {
|
|
299
|
+
this.setAttribute("wrap", t);
|
|
289
300
|
}
|
|
290
301
|
get wrapMobile() {
|
|
291
302
|
return this.getAttribute("wrap--mobile");
|
|
292
303
|
}
|
|
293
|
-
set wrapMobile(
|
|
294
|
-
this.setAttribute("wrap--mobile",
|
|
304
|
+
set wrapMobile(t) {
|
|
305
|
+
this.setAttribute("wrap--mobile", t);
|
|
295
306
|
}
|
|
296
307
|
get wrapTablet() {
|
|
297
308
|
return this.getAttribute("wrap--tablet");
|
|
298
309
|
}
|
|
299
|
-
set wrapTablet(
|
|
300
|
-
this.setAttribute("wrap--tablet",
|
|
310
|
+
set wrapTablet(t) {
|
|
311
|
+
this.setAttribute("wrap--tablet", t);
|
|
301
312
|
}
|
|
302
313
|
get wrapLaptop() {
|
|
303
314
|
return this.getAttribute("wrap--laptop");
|
|
304
315
|
}
|
|
305
|
-
set wrapLaptop(
|
|
306
|
-
this.setAttribute("wrap--laptop",
|
|
316
|
+
set wrapLaptop(t) {
|
|
317
|
+
this.setAttribute("wrap--laptop", t);
|
|
307
318
|
}
|
|
308
319
|
get wrapDesktop() {
|
|
309
320
|
return this.getAttribute("wrap--desktop");
|
|
310
321
|
}
|
|
311
|
-
set wrapDesktop(
|
|
312
|
-
this.setAttribute("wrap--desktop",
|
|
322
|
+
set wrapDesktop(t) {
|
|
323
|
+
this.setAttribute("wrap--desktop", t);
|
|
313
324
|
}
|
|
314
325
|
get overflowX() {
|
|
315
326
|
return this.getAttribute("overflow-x");
|
|
316
327
|
}
|
|
317
|
-
set overflowX(
|
|
318
|
-
this.setAttribute("overflow-x",
|
|
328
|
+
set overflowX(t) {
|
|
329
|
+
this.setAttribute("overflow-x", t);
|
|
319
330
|
}
|
|
320
331
|
get overflowXMobile() {
|
|
321
332
|
return this.getAttribute("overflow-x--mobile");
|
|
322
333
|
}
|
|
323
|
-
set overflowXMobile(
|
|
324
|
-
this.setAttribute("overflow-x--mobile",
|
|
334
|
+
set overflowXMobile(t) {
|
|
335
|
+
this.setAttribute("overflow-x--mobile", t);
|
|
325
336
|
}
|
|
326
337
|
get overflowXTablet() {
|
|
327
338
|
return this.getAttribute("overflow-x--tablet");
|
|
328
339
|
}
|
|
329
|
-
set overflowXTablet(
|
|
330
|
-
this.setAttribute("overflow-x--tablet",
|
|
340
|
+
set overflowXTablet(t) {
|
|
341
|
+
this.setAttribute("overflow-x--tablet", t);
|
|
331
342
|
}
|
|
332
343
|
get overflowXLaptop() {
|
|
333
344
|
return this.getAttribute("overflow-x--laptop");
|
|
334
345
|
}
|
|
335
|
-
set overflowXLaptop(
|
|
336
|
-
this.setAttribute("overflow-x--laptop",
|
|
346
|
+
set overflowXLaptop(t) {
|
|
347
|
+
this.setAttribute("overflow-x--laptop", t);
|
|
337
348
|
}
|
|
338
349
|
get overflowXDesktop() {
|
|
339
350
|
return this.getAttribute("overflow-x--desktop");
|
|
340
351
|
}
|
|
341
|
-
set overflowXDesktop(
|
|
342
|
-
this.setAttribute("overflow-x--desktop",
|
|
352
|
+
set overflowXDesktop(t) {
|
|
353
|
+
this.setAttribute("overflow-x--desktop", t);
|
|
343
354
|
}
|
|
344
355
|
get $el() {
|
|
345
356
|
return this.shadowRoot.querySelector(".flex-container");
|
|
346
357
|
}
|
|
347
358
|
}
|
|
348
|
-
customElements.get("px-stack") || customElements.define("px-stack",
|
|
349
|
-
class
|
|
359
|
+
customElements.get("px-stack") || customElements.define("px-stack", d);
|
|
360
|
+
class L extends d {
|
|
350
361
|
constructor() {
|
|
351
362
|
super();
|
|
352
363
|
}
|
|
@@ -354,8 +365,8 @@ class _ extends c {
|
|
|
354
365
|
super.connectedCallback(), this.direction = "column", this.directionMobile = "column", this.directionTablet = "column", this.directionLaptop = "column", this.directionDesktop = "column";
|
|
355
366
|
}
|
|
356
367
|
}
|
|
357
|
-
customElements.get("px-vstack") || customElements.define("px-vstack",
|
|
358
|
-
class
|
|
368
|
+
customElements.get("px-vstack") || customElements.define("px-vstack", L);
|
|
369
|
+
class z extends d {
|
|
359
370
|
constructor() {
|
|
360
371
|
super();
|
|
361
372
|
}
|
|
@@ -363,31 +374,31 @@ class E extends c {
|
|
|
363
374
|
super.connectedCallback(), this.direction = "row", this.directionMobile = "row", this.directionTablet = "row", this.directionLaptop = "row", this.directionDesktop = "row";
|
|
364
375
|
}
|
|
365
376
|
}
|
|
366
|
-
customElements.get("px-hstack") || customElements.define("px-hstack",
|
|
367
|
-
class
|
|
377
|
+
customElements.get("px-hstack") || customElements.define("px-hstack", z);
|
|
378
|
+
class D extends HTMLElement {
|
|
368
379
|
constructor() {
|
|
369
380
|
super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
|
|
370
381
|
}
|
|
371
382
|
static get observedAttributes() {
|
|
372
|
-
return ["grow"];
|
|
383
|
+
return ["grow", "nogap"];
|
|
373
384
|
}
|
|
374
|
-
attributeChangedCallback(
|
|
375
|
-
|
|
385
|
+
attributeChangedCallback(t, e, i) {
|
|
386
|
+
t === "grow" && (this.growValue = i || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
|
|
376
387
|
}
|
|
377
388
|
connectedCallback() {
|
|
378
|
-
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
|
|
389
|
+
this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.nogap && (this.resizeObserver = new ResizeObserver(() => {
|
|
379
390
|
this.handleSizeChange();
|
|
380
|
-
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
|
|
391
|
+
}), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck());
|
|
381
392
|
}
|
|
382
393
|
disconnectedCallback() {
|
|
383
|
-
var
|
|
384
|
-
(
|
|
394
|
+
var t;
|
|
395
|
+
(t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
|
|
385
396
|
}
|
|
386
397
|
get grow() {
|
|
387
398
|
return this.getAttribute("grow");
|
|
388
399
|
}
|
|
389
|
-
set grow(
|
|
390
|
-
this.setAttribute("grow",
|
|
400
|
+
set grow(t) {
|
|
401
|
+
this.setAttribute("grow", t);
|
|
391
402
|
}
|
|
392
403
|
scheduleRecheck() {
|
|
393
404
|
this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
|
|
@@ -398,19 +409,25 @@ class z extends HTMLElement {
|
|
|
398
409
|
this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
|
|
399
410
|
}
|
|
400
411
|
handleSizeChange() {
|
|
401
|
-
const
|
|
402
|
-
this.isZeroSized !==
|
|
412
|
+
const t = this.getBoundingClientRect(), e = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
|
|
413
|
+
this.isZeroSized !== e && (this.isZeroSized = e, this.updateParticipation());
|
|
403
414
|
}
|
|
404
415
|
updateParticipation() {
|
|
405
416
|
this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
|
|
406
417
|
}
|
|
418
|
+
get nogap() {
|
|
419
|
+
return this.hasAttribute("nogap");
|
|
420
|
+
}
|
|
421
|
+
set nogap(t) {
|
|
422
|
+
t ? this.setAttribute("nogap", "") : this.removeAttribute("nogap");
|
|
423
|
+
}
|
|
407
424
|
}
|
|
408
|
-
customElements.get("px-spacer") || customElements.define("px-spacer",
|
|
409
|
-
const
|
|
410
|
-
|
|
411
|
-
class
|
|
425
|
+
customElements.get("px-spacer") || customElements.define("px-spacer", D);
|
|
426
|
+
const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5rem}", p = new CSSStyleSheet();
|
|
427
|
+
p.replaceSync(j);
|
|
428
|
+
class R extends c {
|
|
412
429
|
constructor() {
|
|
413
|
-
super(
|
|
430
|
+
super(p), this.template = (t) => `
|
|
414
431
|
<px-container border-radius="none" padding="none">
|
|
415
432
|
<px-vstack>
|
|
416
433
|
<px-container id="header-container" border-radius="none">
|
|
@@ -447,7 +464,7 @@ class D extends n {
|
|
|
447
464
|
<px-spacer></px-spacer>
|
|
448
465
|
</px-hstack>
|
|
449
466
|
</px-container>
|
|
450
|
-
${
|
|
467
|
+
${t ? ` <px-hstack>
|
|
451
468
|
<px-spacer></px-spacer>
|
|
452
469
|
<px-container border-radius="none" box-shadow="xl" id="image-sticky-box" border="s" grow="${this.grow}" basis="${this.basis}" border-radius="m">
|
|
453
470
|
<px-vstack gap="s">
|
|
@@ -563,11 +580,11 @@ class D extends n {
|
|
|
563
580
|
get paddingHorizontal() {
|
|
564
581
|
return this.getAttribute("padding-horizontal");
|
|
565
582
|
}
|
|
566
|
-
set paddingVertical(
|
|
567
|
-
this.setAttribute("padding-vertical",
|
|
583
|
+
set paddingVertical(t) {
|
|
584
|
+
this.setAttribute("padding-vertical", t);
|
|
568
585
|
}
|
|
569
|
-
set paddingHorizontal(
|
|
570
|
-
this.setAttribute("padding-horizontal",
|
|
586
|
+
set paddingHorizontal(t) {
|
|
587
|
+
this.setAttribute("padding-horizontal", t);
|
|
571
588
|
}
|
|
572
589
|
get gap() {
|
|
573
590
|
return this.getAttribute("gap");
|
|
@@ -575,9 +592,9 @@ class D extends n {
|
|
|
575
592
|
connectedCallback() {
|
|
576
593
|
this.handlePaddingVerticalChange(this.paddingVertical), this.handlePaddingHorizontalChange(this.paddingHorizontal);
|
|
577
594
|
}
|
|
578
|
-
attributeChangedCallback(
|
|
579
|
-
if (
|
|
580
|
-
switch (
|
|
595
|
+
attributeChangedCallback(t, e, i) {
|
|
596
|
+
if (e !== i)
|
|
597
|
+
switch (t) {
|
|
581
598
|
case "background-image":
|
|
582
599
|
this.$imageContainer.setAttribute("background-image", i);
|
|
583
600
|
break;
|
|
@@ -587,7 +604,7 @@ class D extends n {
|
|
|
587
604
|
case "background-color":
|
|
588
605
|
this.$bodyContainer.setAttribute(
|
|
589
606
|
"background-color",
|
|
590
|
-
|
|
607
|
+
A.indexOf(i) > 0 ? i : "none"
|
|
591
608
|
);
|
|
592
609
|
break;
|
|
593
610
|
case "padding-vertical":
|
|
@@ -597,20 +614,20 @@ class D extends n {
|
|
|
597
614
|
this.handlePaddingHorizontalChange(i);
|
|
598
615
|
break;
|
|
599
616
|
default:
|
|
600
|
-
super.attributeChangedCallback(
|
|
617
|
+
super.attributeChangedCallback(t, e, i);
|
|
601
618
|
}
|
|
602
619
|
}
|
|
603
|
-
handlePaddingVerticalChange(
|
|
604
|
-
this.$headerContainer.setAttribute("padding-top",
|
|
620
|
+
handlePaddingVerticalChange(t) {
|
|
621
|
+
this.$headerContainer.setAttribute("padding-top", t), this.$footerContainer.setAttribute("padding-bottom", t);
|
|
605
622
|
}
|
|
606
|
-
handlePaddingHorizontalChange(
|
|
607
|
-
this.$headerContainer.paddingLeft =
|
|
623
|
+
handlePaddingHorizontalChange(t) {
|
|
624
|
+
this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
|
|
608
625
|
}
|
|
609
626
|
}
|
|
610
|
-
customElements.get("px-page") === void 0 && customElements.define("px-page",
|
|
611
|
-
const
|
|
612
|
-
|
|
613
|
-
class
|
|
627
|
+
customElements.get("px-page") === void 0 && customElements.define("px-page", R);
|
|
628
|
+
const F = ':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-s-mobile);flex-grow:1}.info .info__body .header{display:flex;align-items:center;gap:var(--px-spacing-s-mobile)}.info .info__body .header ::slotted([slot="action"]),.info .info__body .header ::slotted([slot="icon"]),.info .info__body .header ::slotted([slot="logo"]){flex-shrink:0}.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 screen and (min-width: 48rem){.info{flex-direction:column}.info .info__body{flex-basis:auto;gap:var(--px-spacing-default-tablet);padding:var(--px-padding-s-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 screen and (min-width: 64.0625rem){.info .info__body{gap:var(--px-spacing-default-laptop);padding:var(--px-padding-s-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 screen and (min-width: 90.0625rem){.info .info__body{gap:var(--px-spacing-default-desktop);padding:var(--px-padding-s-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)}', u = new CSSStyleSheet();
|
|
629
|
+
u.replaceSync(F);
|
|
630
|
+
class H extends c {
|
|
614
631
|
template() {
|
|
615
632
|
return `
|
|
616
633
|
<div class="selectable-box">
|
|
@@ -636,16 +653,16 @@ class R extends n {
|
|
|
636
653
|
`;
|
|
637
654
|
}
|
|
638
655
|
constructor() {
|
|
639
|
-
super(
|
|
656
|
+
super(u), this.shadowRoot.innerHTML = this.template();
|
|
640
657
|
}
|
|
641
658
|
static get observedAttributes() {
|
|
642
659
|
return [...super.observedAttributes, "inverted", "hide-footer"];
|
|
643
660
|
}
|
|
644
|
-
attributeChangedCallback(
|
|
645
|
-
if (
|
|
646
|
-
switch (
|
|
661
|
+
attributeChangedCallback(t, e, i) {
|
|
662
|
+
if (e !== i)
|
|
663
|
+
switch (t) {
|
|
647
664
|
default:
|
|
648
|
-
super.attributeChangedCallback(
|
|
665
|
+
super.attributeChangedCallback(t, e, i);
|
|
649
666
|
break;
|
|
650
667
|
}
|
|
651
668
|
}
|
|
@@ -655,29 +672,38 @@ class R extends n {
|
|
|
655
672
|
get inverted() {
|
|
656
673
|
return this.hasAttribute("inverted");
|
|
657
674
|
}
|
|
658
|
-
set inverted(
|
|
659
|
-
|
|
675
|
+
set inverted(t) {
|
|
676
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
660
677
|
}
|
|
661
678
|
get hideFooter() {
|
|
662
679
|
return this.hasAttribute("hide-footer");
|
|
663
680
|
}
|
|
664
|
-
set hideFooter(
|
|
665
|
-
|
|
681
|
+
set hideFooter(t) {
|
|
682
|
+
t ? this.setAttribute("hide-footer", "") : this.removeAttribute("hide-footer");
|
|
666
683
|
}
|
|
667
684
|
}
|
|
668
|
-
customElements.get("px-selectable-box") || customElements.define("px-selectable-box",
|
|
669
|
-
const
|
|
670
|
-
g
|
|
671
|
-
|
|
685
|
+
customElements.get("px-selectable-box") || customElements.define("px-selectable-box", H);
|
|
686
|
+
const P = ["px-a", "px-button"];
|
|
687
|
+
function g(s, t, e = P) {
|
|
688
|
+
const i = new Set(e), o = s.composedPath();
|
|
689
|
+
for (const r of o) {
|
|
690
|
+
if (r === t)
|
|
691
|
+
break;
|
|
692
|
+
if (r instanceof Element && i.has(r.tagName.toLowerCase()))
|
|
693
|
+
return !0;
|
|
694
|
+
}
|
|
695
|
+
return !1;
|
|
696
|
+
}
|
|
697
|
+
const x = ':host{display:block;outline:none}:host *{box-sizing:border-box}.selectable-box-checkbox,.selectable-box-radio{box-sizing:border-box;height:100%;cursor:pointer;border-radius:var(--px-radius-main);overflow:hidden;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-size-border-m) solid var(--px-color-border-main-default);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}.selectable-box-checkbox px-selectable-box,.selectable-box-radio px-selectable-box{height:100%;background-color:var(--px-color-background-container-light-default)}:host([parent-has-anchor-full]) .selectable-box-checkbox,:host([parent-has-anchor-full]) .selectable-box-radio{border-radius:0 0 var(--px-radius-main) var(--px-radius-main)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-default)}:host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-default )}:host(:not([disabled])):host(:focus-visible) .selectable-box-checkbox,:host(:not([disabled])):host(:focus-visible) .selectable-box-radio{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host([checked]) .selectable-box-checkbox,:host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-default)}:host([disabled]) .selectable-box-checkbox,:host([disabled]) .selectable-box-radio{cursor:default;pointer-events:none;border-color:transparent}:host([disabled]) .selectable-box-checkbox px-selectable-box,:host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-default)}:host([disabled]) ::slotted([slot="title"]),:host([disabled]) ::slotted([slot="description"]),:host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-default)}@media screen and (min-width: 48rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-tablet)}}@media screen and (min-width: 64.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-laptop)}}@media screen and (min-width: 90.0625rem){.selectable-box-checkbox,.selectable-box-radio{outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .selectable-box-checkbox,:host([inverted]) .selectable-box-radio{border-color:var(--px-color-border-main-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .selectable-box-checkbox px-selectable-box,:host([inverted]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-container-light-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-checkbox px-selectable-box,:host([inverted]):host(:not([disabled])):host(:hover) .selectable-box-radio px-selectable-box{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([checked]) .selectable-box-checkbox,:host([inverted]):host([checked]) .selectable-box-radio{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([disabled]) .selectable-box-checkbox,:host([inverted]):host([disabled]) .selectable-box-radio{border-color:transparent}:host([inverted]):host([disabled]) .selectable-box-checkbox px-selectable-box,:host([inverted]):host([disabled]) .selectable-box-radio px-selectable-box{background-color:var(--px-color-background-state-disabled-inverted)}:host([inverted]):host([disabled]) ::slotted([slot="title"]),:host([inverted]):host([disabled]) ::slotted([slot="description"]),:host([inverted]):host([disabled]) ::slotted([slot="content"]){color:var(--px-color-text-state-disabled-inverted)}', f = new CSSStyleSheet();
|
|
698
|
+
f.replaceSync(x);
|
|
699
|
+
class q extends c {
|
|
672
700
|
template() {
|
|
673
701
|
return `
|
|
674
702
|
<div class="selectable-box-checkbox">
|
|
675
703
|
<px-selectable-box>
|
|
676
704
|
<slot name="media" slot="media"></slot>
|
|
677
705
|
<px-checkbox
|
|
678
|
-
slot="action"
|
|
679
|
-
name="${this.name}"
|
|
680
|
-
value="${this.value}"
|
|
706
|
+
slot="action" inert
|
|
681
707
|
></px-checkbox>
|
|
682
708
|
<slot name="icon" slot="icon"></slot>
|
|
683
709
|
<slot name="logo" slot="logo"></slot>
|
|
@@ -690,14 +716,14 @@ class F extends n {
|
|
|
690
716
|
`;
|
|
691
717
|
}
|
|
692
718
|
constructor() {
|
|
693
|
-
var
|
|
694
|
-
super(
|
|
719
|
+
var t;
|
|
720
|
+
super(f), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
695
721
|
}
|
|
696
722
|
connectedCallback() {
|
|
697
|
-
this.tabIndex = 0, this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
|
|
723
|
+
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "checkbox", this.internals && (this.internals.role = "checkbox"), this.tabIndex = 0, this.ariaChecked = "false", this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
|
|
698
724
|
"slotchange",
|
|
699
725
|
this.toggleFooterVisibility
|
|
700
|
-
), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent)
|
|
726
|
+
), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent);
|
|
701
727
|
}
|
|
702
728
|
static get observedAttributes() {
|
|
703
729
|
return [
|
|
@@ -709,15 +735,15 @@ class F extends n {
|
|
|
709
735
|
"disabled"
|
|
710
736
|
];
|
|
711
737
|
}
|
|
712
|
-
attributeChangedCallback(
|
|
713
|
-
if (
|
|
714
|
-
switch (
|
|
738
|
+
attributeChangedCallback(t, e, i) {
|
|
739
|
+
if (e !== i)
|
|
740
|
+
switch (t) {
|
|
715
741
|
case "inverted":
|
|
716
742
|
this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$checkbox.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$checkbox.removeAttribute("inverted"));
|
|
717
743
|
break;
|
|
718
744
|
case "name":
|
|
719
745
|
case "value":
|
|
720
|
-
this.$checkbox && this.$checkbox.setAttribute(
|
|
746
|
+
this.$checkbox && this.$checkbox.setAttribute(t, i);
|
|
721
747
|
break;
|
|
722
748
|
case "disabled":
|
|
723
749
|
this.handleDisabledAttributeChange(i !== null);
|
|
@@ -726,7 +752,7 @@ class F extends n {
|
|
|
726
752
|
this.handleCheckedAttributeChange(i);
|
|
727
753
|
break;
|
|
728
754
|
default:
|
|
729
|
-
super.attributeChangedCallback(
|
|
755
|
+
super.attributeChangedCallback(t, e, i);
|
|
730
756
|
break;
|
|
731
757
|
}
|
|
732
758
|
}
|
|
@@ -742,31 +768,31 @@ class F extends n {
|
|
|
742
768
|
setHoverAttribute() {
|
|
743
769
|
this.$checkbox.setAttribute("hover", "");
|
|
744
770
|
}
|
|
745
|
-
setKeypressEvent(
|
|
746
|
-
switch (
|
|
771
|
+
setKeypressEvent(t) {
|
|
772
|
+
switch (t.stopPropagation(), t.preventDefault(), t.code) {
|
|
747
773
|
case "Space":
|
|
748
774
|
this.click();
|
|
749
775
|
break;
|
|
750
776
|
}
|
|
751
777
|
}
|
|
752
|
-
setClickEvent(
|
|
753
|
-
this.checked = !this.checked,
|
|
778
|
+
setClickEvent(t) {
|
|
779
|
+
g(t, this) || (this.checked = !this.checked, t.stopPropagation(), t.preventDefault());
|
|
754
780
|
}
|
|
755
781
|
toggleFooterVisibility() {
|
|
756
782
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
757
783
|
}
|
|
758
|
-
handleDisabledAttributeChange(
|
|
759
|
-
|
|
784
|
+
handleDisabledAttributeChange(t) {
|
|
785
|
+
t ? (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
786
|
}
|
|
761
|
-
handleCheckedAttributeChange(
|
|
762
|
-
var
|
|
763
|
-
(
|
|
787
|
+
handleCheckedAttributeChange(t) {
|
|
788
|
+
var e;
|
|
789
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === 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
790
|
new Event("change", {
|
|
765
791
|
bubbles: !0,
|
|
766
792
|
composed: !0
|
|
767
793
|
// Allow the event to pass through shadow DOM boundaries
|
|
768
794
|
})
|
|
769
|
-
)
|
|
795
|
+
);
|
|
770
796
|
}
|
|
771
797
|
// Form-associated callbacks
|
|
772
798
|
static get formAssociated() {
|
|
@@ -776,13 +802,13 @@ class F extends n {
|
|
|
776
802
|
formResetCallback() {
|
|
777
803
|
this.checked = !1;
|
|
778
804
|
}
|
|
779
|
-
formStateRestoreCallback(
|
|
780
|
-
this.checked =
|
|
805
|
+
formStateRestoreCallback(t) {
|
|
806
|
+
this.checked = t;
|
|
781
807
|
}
|
|
782
808
|
formData() {
|
|
783
809
|
if (this.name) {
|
|
784
|
-
const
|
|
785
|
-
return
|
|
810
|
+
const t = new FormData(), e = this.getAttribute("name");
|
|
811
|
+
return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
|
|
786
812
|
}
|
|
787
813
|
}
|
|
788
814
|
get $el() {
|
|
@@ -807,47 +833,45 @@ class F extends n {
|
|
|
807
833
|
get inverted() {
|
|
808
834
|
return this.hasAttribute("inverted");
|
|
809
835
|
}
|
|
810
|
-
set inverted(
|
|
811
|
-
|
|
836
|
+
set inverted(t) {
|
|
837
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
812
838
|
}
|
|
813
839
|
get checked() {
|
|
814
840
|
return this.hasAttribute("checked");
|
|
815
841
|
}
|
|
816
|
-
set checked(
|
|
817
|
-
|
|
842
|
+
set checked(t) {
|
|
843
|
+
t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
|
|
818
844
|
}
|
|
819
845
|
get name() {
|
|
820
846
|
return this.getAttribute("name");
|
|
821
847
|
}
|
|
822
|
-
set name(
|
|
823
|
-
|
|
848
|
+
set name(t) {
|
|
849
|
+
t ? this.setAttribute("name", t) : this.removeAttribute("name");
|
|
824
850
|
}
|
|
825
851
|
get disabled() {
|
|
826
852
|
return this.hasAttribute("disabled");
|
|
827
853
|
}
|
|
828
|
-
set disabled(
|
|
829
|
-
|
|
854
|
+
set disabled(t) {
|
|
855
|
+
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
830
856
|
}
|
|
831
857
|
get value() {
|
|
832
858
|
return this.getAttribute("value");
|
|
833
859
|
}
|
|
834
|
-
set value(
|
|
835
|
-
|
|
860
|
+
set value(t) {
|
|
861
|
+
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
836
862
|
}
|
|
837
863
|
}
|
|
838
|
-
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox",
|
|
839
|
-
const
|
|
840
|
-
|
|
841
|
-
class
|
|
864
|
+
customElements.get("px-selectable-box-checkbox") || customElements.define("px-selectable-box-checkbox", q);
|
|
865
|
+
const v = new CSSStyleSheet();
|
|
866
|
+
v.replaceSync(x);
|
|
867
|
+
class I extends c {
|
|
842
868
|
template() {
|
|
843
869
|
return `
|
|
844
870
|
<div class="selectable-box-radio">
|
|
845
871
|
<px-selectable-box>
|
|
846
872
|
<slot name="media" slot="media"></slot>
|
|
847
873
|
<px-radio
|
|
848
|
-
slot="action"
|
|
849
|
-
name="${this.name}"
|
|
850
|
-
value="${this.value}"
|
|
874
|
+
slot="action" inert
|
|
851
875
|
></px-radio>
|
|
852
876
|
<slot name="icon" slot="icon"></slot>
|
|
853
877
|
<slot name="logo" slot="logo"></slot>
|
|
@@ -860,15 +884,15 @@ class H extends n {
|
|
|
860
884
|
`;
|
|
861
885
|
}
|
|
862
886
|
constructor() {
|
|
863
|
-
var
|
|
864
|
-
super(
|
|
887
|
+
var t;
|
|
888
|
+
super(v), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
|
|
865
889
|
}
|
|
866
890
|
connectedCallback() {
|
|
867
|
-
var
|
|
868
|
-
this.tabIndex = ((
|
|
891
|
+
var t;
|
|
892
|
+
this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this), this.role = "radio", this.internals && (this.internals.role = "radio"), this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.querySelector("px-selectable-box-radio")) === this ? 0 : -1, this.ariaChecked = "false", this.toggleFooterVisibility(), this.$slotFooter.addEventListener(
|
|
869
893
|
"slotchange",
|
|
870
894
|
this.toggleFooterVisibility
|
|
871
|
-
), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent)
|
|
895
|
+
), this.addEventListener("mouseover", this.setHoverAttribute), this.addEventListener("mouseout", this.removeHoverAttribute), this.addEventListener("keypress", this.setKeypressEvent), this.addEventListener("click", this.setClickEvent);
|
|
872
896
|
}
|
|
873
897
|
static get observedAttributes() {
|
|
874
898
|
return [
|
|
@@ -880,15 +904,15 @@ class H extends n {
|
|
|
880
904
|
"disabled"
|
|
881
905
|
];
|
|
882
906
|
}
|
|
883
|
-
attributeChangedCallback(
|
|
884
|
-
if (
|
|
885
|
-
switch (
|
|
907
|
+
attributeChangedCallback(t, e, i) {
|
|
908
|
+
if (e !== i)
|
|
909
|
+
switch (t) {
|
|
886
910
|
case "inverted":
|
|
887
911
|
this.inverted ? (this.$selectableBox.setAttribute("inverted", ""), this.$radio.setAttribute("inverted", "")) : (this.$selectableBox.removeAttribute("inverted"), this.$radio.removeAttribute("inverted"));
|
|
888
912
|
break;
|
|
889
913
|
case "name":
|
|
890
914
|
case "value":
|
|
891
|
-
this.$radio && this.$radio.setAttribute(
|
|
915
|
+
this.$radio && this.$radio.setAttribute(t, i);
|
|
892
916
|
break;
|
|
893
917
|
case "disabled":
|
|
894
918
|
this.handleDisabledAttributeChange(i !== null);
|
|
@@ -897,7 +921,7 @@ class H extends n {
|
|
|
897
921
|
this.handleCheckedAttributeChange(i);
|
|
898
922
|
break;
|
|
899
923
|
default:
|
|
900
|
-
super.attributeChangedCallback(
|
|
924
|
+
super.attributeChangedCallback(t, e, i);
|
|
901
925
|
break;
|
|
902
926
|
}
|
|
903
927
|
}
|
|
@@ -913,25 +937,25 @@ class H extends n {
|
|
|
913
937
|
setHoverAttribute() {
|
|
914
938
|
this.$radio.setAttribute("hover", "");
|
|
915
939
|
}
|
|
916
|
-
setKeypressEvent(
|
|
917
|
-
switch (
|
|
940
|
+
setKeypressEvent(t) {
|
|
941
|
+
switch (t.preventDefault(), t.code) {
|
|
918
942
|
case "Space":
|
|
919
943
|
this.click();
|
|
920
944
|
break;
|
|
921
945
|
}
|
|
922
946
|
}
|
|
923
|
-
setClickEvent(
|
|
924
|
-
this.checked || (this.checked = !0),
|
|
947
|
+
setClickEvent(t) {
|
|
948
|
+
g(t, this) || (this.checked || (this.checked = !0), t.stopPropagation(), t.preventDefault());
|
|
925
949
|
}
|
|
926
950
|
toggleFooterVisibility() {
|
|
927
951
|
this.$slottedFooter ? this.$selectableBox.removeAttribute("hide-footer") : this.$selectableBox.setAttribute("hide-footer", "");
|
|
928
952
|
}
|
|
929
|
-
handleDisabledAttributeChange(
|
|
930
|
-
|
|
953
|
+
handleDisabledAttributeChange(t) {
|
|
954
|
+
t ? (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
955
|
}
|
|
932
|
-
handleCheckedAttributeChange(
|
|
933
|
-
var
|
|
934
|
-
(
|
|
956
|
+
handleCheckedAttributeChange(t) {
|
|
957
|
+
var e;
|
|
958
|
+
(e = this.internals) == null || e.setFormValue(this.formData()), t === 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
959
|
new Event("change", {
|
|
936
960
|
bubbles: !0,
|
|
937
961
|
composed: !0
|
|
@@ -947,13 +971,13 @@ class H extends n {
|
|
|
947
971
|
formResetCallback() {
|
|
948
972
|
this.checked = !1;
|
|
949
973
|
}
|
|
950
|
-
formStateRestoreCallback(
|
|
951
|
-
this.checked =
|
|
974
|
+
formStateRestoreCallback(t) {
|
|
975
|
+
this.checked = t;
|
|
952
976
|
}
|
|
953
977
|
formData() {
|
|
954
978
|
if (this.name) {
|
|
955
|
-
const
|
|
956
|
-
return
|
|
979
|
+
const t = new FormData(), e = this.getAttribute("name");
|
|
980
|
+
return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
|
|
957
981
|
}
|
|
958
982
|
}
|
|
959
983
|
get $el() {
|
|
@@ -978,37 +1002,37 @@ class H extends n {
|
|
|
978
1002
|
get inverted() {
|
|
979
1003
|
return this.hasAttribute("inverted");
|
|
980
1004
|
}
|
|
981
|
-
set inverted(
|
|
982
|
-
|
|
1005
|
+
set inverted(t) {
|
|
1006
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
983
1007
|
}
|
|
984
1008
|
get checked() {
|
|
985
1009
|
return this.hasAttribute("checked");
|
|
986
1010
|
}
|
|
987
|
-
set checked(
|
|
988
|
-
|
|
1011
|
+
set checked(t) {
|
|
1012
|
+
t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
|
|
989
1013
|
}
|
|
990
1014
|
get name() {
|
|
991
1015
|
return this.getAttribute("name");
|
|
992
1016
|
}
|
|
993
|
-
set name(
|
|
994
|
-
|
|
1017
|
+
set name(t) {
|
|
1018
|
+
t ? this.setAttribute("name", t) : this.removeAttribute("name");
|
|
995
1019
|
}
|
|
996
1020
|
get disabled() {
|
|
997
1021
|
return this.hasAttribute("disabled");
|
|
998
1022
|
}
|
|
999
|
-
set disabled(
|
|
1000
|
-
|
|
1023
|
+
set disabled(t) {
|
|
1024
|
+
t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
|
|
1001
1025
|
}
|
|
1002
1026
|
get value() {
|
|
1003
1027
|
return this.getAttribute("value");
|
|
1004
1028
|
}
|
|
1005
|
-
set value(
|
|
1006
|
-
|
|
1029
|
+
set value(t) {
|
|
1030
|
+
t ? this.setAttribute("value", t) : this.removeAttribute("value");
|
|
1007
1031
|
}
|
|
1008
1032
|
}
|
|
1009
|
-
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio",
|
|
1033
|
+
customElements.get("px-selectable-box-radio") || customElements.define("px-selectable-box-radio", I);
|
|
1010
1034
|
export {
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1035
|
+
H as SelectableBox,
|
|
1036
|
+
q as SelectableBoxCheckbox,
|
|
1037
|
+
I as SelectableBoxRadio
|
|
1014
1038
|
};
|