@proximus/lavender-selectablebox 2.0.0-alpha.7 → 2.0.0-alpha.74

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