@proximus/lavender-selectablebox 1.4.1 → 1.4.3-alpha.1

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