@proximus/lavender-common 2.0.0-alpha.17 → 2.0.0-alpha.170

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 (4) hide show
  1. package/dist/breakpoints.d.ts +1 -1
  2. package/dist/common.d.ts +102 -83
  3. package/dist/index.es.js +741 -924
  4. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,956 +1,773 @@
1
- const c = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}", g = {};
2
- function f(i) {
3
- const t = document.createElement(i), s = Object.getPrototypeOf(t);
4
- return Object.getOwnPropertyNames(s);
1
+ //#region src/common.css?inline
2
+ var e = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted([shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([word-break-all]){word-break:break-all}@media screen and (width<=47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted([shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (width>=48rem) and (width<=64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted([shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (width>=64.0625rem){:host([shown--sr--laptop]),::slotted([shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}:host([word-break-all--laptop]){word-break:break-all!important}@media screen and (width>=90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}:host([word-break-all--desktop]){word-break:break-all!important}}";
3
+ //#endregion
4
+ //#region src/common.ts
5
+ function t(e) {
6
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
7
+ return Object.getOwnPropertyNames(n);
5
8
  }
6
- function m(i) {
7
- const t = document.createElement(i), s = Object.getPrototypeOf(t);
8
- return Object.getOwnPropertyNames(s).map(
9
- (e) => e.toLowerCase()
10
- );
9
+ function n(e) {
10
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
11
+ return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
11
12
  }
12
- const d = new CSSStyleSheet();
13
- d.replaceSync(c);
14
- const k = typeof import.meta < "u" && typeof g < "u" && !0;
15
- typeof window < "u" && (window.isComponentDebug = h);
16
- function h() {
17
- return k;
13
+ var r = new CSSStyleSheet();
14
+ r.replaceSync(e);
15
+ var i = {
16
+ BASE_URL: "/",
17
+ DEV: !0,
18
+ MODE: "production",
19
+ PROD: !1,
20
+ SSR: !1,
21
+ VITE_COMPONENT_DEBUG: "true"
22
+ }, a = i?.VITE_COMPONENT_DEBUG === "true" || i?.DEV === !0;
23
+ typeof window < "u" && (window.isComponentDebug = o);
24
+ function o() {
25
+ return a;
18
26
  }
19
- function v(i) {
20
- h() && console.error(i);
27
+ function s(e) {
28
+ o() && console.error(e);
21
29
  }
22
- typeof window < "u" && (window.isComponentDebug = h);
23
- class u extends HTMLElement {
24
- static get observedAttributes() {
25
- return [
26
- "grow",
27
- "grow--mobile",
28
- "grow--tablet",
29
- "grow--laptop",
30
- "grow--desktop",
31
- "shrink",
32
- "shrink--mobile",
33
- "shrink--tablet",
34
- "shrink--laptop",
35
- "shrink--desktop",
36
- "basis",
37
- "basis--mobile",
38
- "basis--tablet",
39
- "basis--laptop",
40
- "basis--desktop",
41
- "align-self",
42
- "align-self--mobile",
43
- "align-self--tablet",
44
- "align-self--laptop",
45
- "align-self--desktop",
46
- "justify-self",
47
- "justify-self--mobile",
48
- "justify-self--tablet",
49
- "justify-self--laptop",
50
- "justify-self--desktop",
51
- "hidden",
52
- "hidden--mobile",
53
- "hidden--tablet",
54
- "hidden--laptop",
55
- "hidden--desktop",
56
- "shown--sr",
57
- "shown--sr--mobile",
58
- "shown--sr--tablet",
59
- "shown--sr--laptop",
60
- "shown--sr--desktop",
61
- "col-span",
62
- "col-span--mobile",
63
- "col-span--tablet",
64
- "col-span--laptop",
65
- "col-span--desktop",
66
- "order",
67
- "order--mobile",
68
- "order--tablet",
69
- "order--laptop",
70
- "order--desktop"
71
- ];
72
- }
73
- constructor(...t) {
74
- super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
75
- d,
76
- ...t
77
- ];
78
- }
79
- attributeChangedCallback(t, s, e) {
80
- var o;
81
- if (u.observedAttributes.indexOf(t) !== -1)
82
- switch (t) {
83
- case "grow":
84
- case "grow--mobile":
85
- case "grow--tablet":
86
- case "grow--laptop":
87
- case "grow--desktop":
88
- case "shrink":
89
- case "shrink--mobile":
90
- case "shrink--tablet":
91
- case "shrink--laptop":
92
- case "shrink--desktop":
93
- case "basis":
94
- case "basis--mobile":
95
- case "basis--tablet":
96
- case "basis--laptop":
97
- case "basis--desktop":
98
- this.style.setProperty(`--${t}-value`, e);
99
- break;
100
- case "align-self":
101
- case "align-self--mobile":
102
- case "align-self--tablet":
103
- case "align-self--laptop":
104
- case "align-self--desktop":
105
- this.updateProperties(
106
- t,
107
- s,
108
- e,
109
- ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? y : w
110
- );
111
- break;
112
- case "justify-self":
113
- case "justify-self--mobile":
114
- case "justify-self--tablet":
115
- case "justify-self--laptop":
116
- case "justify-self--desktop":
117
- this.updateProperties(
118
- t,
119
- s,
120
- e,
121
- A
122
- );
123
- break;
124
- case "col-span":
125
- case "col-span--mobile":
126
- case "col-span--tablet":
127
- case "col-span--laptop":
128
- case "col-span--desktop":
129
- this.updateProperties(t, s, e, S);
130
- break;
131
- case "order":
132
- case "order--mobile":
133
- case "order--tablet":
134
- case "order--laptop":
135
- case "order--desktop":
136
- this.updateProperties(t, s, e, $);
137
- break;
138
- }
139
- }
140
- updateProperties(t, s, e, o) {
141
- if (o && !this.checkName(o, e)) {
142
- v(
143
- `${e} is not an allowed ${o} value for ${this.tagName.toLowerCase()}`
144
- );
145
- return;
146
- }
147
- const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
148
- if (!a)
149
- this.style.setProperty(
150
- `--${l}-value`,
151
- s
152
- ), this.style.setProperty(
153
- `--${l}-value`,
154
- e
155
- );
156
- else {
157
- const n = t.split("--")[1];
158
- this.style.setProperty(
159
- `--${l}--${n}-value`,
160
- s
161
- ), this.style.setProperty(
162
- `--${l}--${n}-value`,
163
- e
164
- );
165
- }
166
- }
167
- updateStyle(t, s, e) {
168
- e !== null && e !== "" && e !== "default" && this.style.setProperty(
169
- `--${t}--${s}-value`,
170
- e
171
- );
172
- }
173
- checkName(t, s) {
174
- return t.includes(s);
175
- }
176
- get $el() {
177
- return this;
178
- }
179
- get $parentElementName() {
180
- var t;
181
- return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
182
- }
183
- get isInsideGridOrStack() {
184
- let t = this.parentElement;
185
- for (; t; ) {
186
- if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
187
- return !0;
188
- if (window.getComputedStyle(t).display === "contents") {
189
- t = t.parentElement;
190
- continue;
191
- }
192
- break;
193
- }
194
- return !1;
195
- }
196
- get grow() {
197
- return this.getAttribute("grow");
198
- }
199
- set grow(t) {
200
- this.setAttribute("grow", t);
201
- }
202
- get growMobile() {
203
- return this.getAttribute("grow--mobile");
204
- }
205
- set growMobile(t) {
206
- this.setAttribute("grow--mobile", t);
207
- }
208
- get growTablet() {
209
- return this.getAttribute("grow--tablet");
210
- }
211
- set growTablet(t) {
212
- this.setAttribute("grow--tablet", t);
213
- }
214
- get growLaptop() {
215
- return this.getAttribute("grow--laptop");
216
- }
217
- set growLaptop(t) {
218
- this.setAttribute("grow--laptop", t);
219
- }
220
- get growDesktop() {
221
- return this.getAttribute("grow--desktop");
222
- }
223
- set growDesktop(t) {
224
- this.setAttribute("grow--desktop", t);
225
- }
226
- get shrink() {
227
- return this.getAttribute("shrink");
228
- }
229
- set shrink(t) {
230
- this.setAttribute("shrink", t);
231
- }
232
- get shrinkMobile() {
233
- return this.getAttribute("shrink--mobile");
234
- }
235
- set shrinkMobile(t) {
236
- this.setAttribute("shrink--mobile", t);
237
- }
238
- get shrinkTablet() {
239
- return this.getAttribute("shrink--tablet");
240
- }
241
- set shrinkTablet(t) {
242
- this.setAttribute("shrink--tablet", t);
243
- }
244
- get shrinkLaptop() {
245
- return this.getAttribute("shrink--laptop");
246
- }
247
- set shrinkLaptop(t) {
248
- this.setAttribute("shrink--laptop", t);
249
- }
250
- get shrinkDesktop() {
251
- return this.getAttribute("shrink--desktop");
252
- }
253
- set shrinkDesktop(t) {
254
- this.setAttribute("shrink--desktop", t);
255
- }
256
- get basis() {
257
- return this.getAttribute("basis");
258
- }
259
- set basis(t) {
260
- this.setAttribute("basis", t);
261
- }
262
- get basisMobile() {
263
- return this.getAttribute("basis--mobile");
264
- }
265
- set basisMobile(t) {
266
- this.setAttribute("basis--mobile", t);
267
- }
268
- get basisTablet() {
269
- return this.getAttribute("basis--tablet");
270
- }
271
- set basisTablet(t) {
272
- this.setAttribute("basis--tablet", t);
273
- }
274
- get basisLaptop() {
275
- return this.getAttribute("basis--laptop");
276
- }
277
- set basisLaptop(t) {
278
- this.setAttribute("basis--laptop", t);
279
- }
280
- get basisDesktop() {
281
- return this.getAttribute("basis--desktop");
282
- }
283
- set basisDesktop(t) {
284
- this.setAttribute("basis--desktop", t);
285
- }
286
- get alignSelf() {
287
- return this.getAttribute("align-self");
288
- }
289
- set alignSelf(t) {
290
- this.setAttribute("align-self", t);
291
- }
292
- get alignSelfMobile() {
293
- return this.getAttribute("align-self--mobile");
294
- }
295
- set alignSelfMobile(t) {
296
- this.setAttribute("align-self--mobile", t);
297
- }
298
- get alignSelfTablet() {
299
- return this.getAttribute("align-self--tablet");
300
- }
301
- set alignSelfTablet(t) {
302
- this.setAttribute("align-self--tablet", t);
303
- }
304
- get alignSelfLaptop() {
305
- return this.getAttribute("align-self--laptop");
306
- }
307
- set alignSelfLaptop(t) {
308
- this.setAttribute("align-self--laptop", t);
309
- }
310
- get alignSelfDesktop() {
311
- return this.getAttribute("align-self--desktop");
312
- }
313
- set alignSelfDesktop(t) {
314
- this.setAttribute("align-self--desktop", t);
315
- }
316
- get justifySelf() {
317
- return this.getAttribute("justify-self");
318
- }
319
- set justifySelf(t) {
320
- this.setAttribute("justify-self", t);
321
- }
322
- get justifySelfMobile() {
323
- return this.getAttribute("justify-self--mobile");
324
- }
325
- set justifySelfMobile(t) {
326
- this.setAttribute("justify-self--mobile", t);
327
- }
328
- get justifySelfTablet() {
329
- return this.getAttribute("justify-self--tablet");
330
- }
331
- set justifySelfTablet(t) {
332
- this.setAttribute("justify-self--tablet", t);
333
- }
334
- get justifySelfLaptop() {
335
- return this.getAttribute("justify-self--laptop");
336
- }
337
- set justifySelfLaptop(t) {
338
- this.setAttribute("justify-self--laptop", t);
339
- }
340
- get justifySelfDesktop() {
341
- return this.getAttribute("justify-self--desktop");
342
- }
343
- set justifySelfDesktop(t) {
344
- this.setAttribute("justify-self--desktop", t);
345
- }
346
- get hiddenMobile() {
347
- return this.getAttribute("hidden--mobile");
348
- }
349
- set hiddenMobile(t) {
350
- this.setAttribute("hidden--mobile", t);
351
- }
352
- get hiddenTablet() {
353
- return this.getAttribute("hidden--tablet");
354
- }
355
- set hiddenTablet(t) {
356
- this.setAttribute("hidden--tablet", t);
357
- }
358
- get hiddenLaptop() {
359
- return this.getAttribute("hidden--laptop");
360
- }
361
- set hiddenLaptop(t) {
362
- this.setAttribute("hidden--laptop", t);
363
- }
364
- get hiddenDesktop() {
365
- return this.getAttribute("hidden--desktop");
366
- }
367
- set hiddenDesktop(t) {
368
- this.setAttribute("hidden--desktop", t);
369
- }
370
- get colSpan() {
371
- return this.getAttribute("col-span");
372
- }
373
- set colSpan(t) {
374
- this.setAttribute("col-span", t);
375
- }
376
- get colSpanMobile() {
377
- return this.getAttribute("col-span--mobile");
378
- }
379
- set colSpanMobile(t) {
380
- this.setAttribute("col-span--mobile", t);
381
- }
382
- get colSpanTablet() {
383
- return this.getAttribute("col-span--tablet");
384
- }
385
- set colSpanTablet(t) {
386
- this.setAttribute("col-span--tablet", t);
387
- }
388
- get colSpanLaptop() {
389
- return this.getAttribute("col-span--laptop");
390
- }
391
- set colSpanLaptop(t) {
392
- this.setAttribute("col-span--laptop", t);
393
- }
394
- get colSpanDesktop() {
395
- return this.getAttribute("col-span--desktop");
396
- }
397
- set colSpanDesktop(t) {
398
- this.setAttribute("col-span--desktop", t);
399
- }
400
- get order() {
401
- return this.getAttribute("order");
402
- }
403
- set order(t) {
404
- this.setAttribute("order", t);
405
- }
406
- get orderMobile() {
407
- return this.getAttribute("order--mobile");
408
- }
409
- set orderMobile(t) {
410
- this.setAttribute("order--mobile", t);
411
- }
412
- get orderTablet() {
413
- return this.getAttribute("order--tablet");
414
- }
415
- set orderTablet(t) {
416
- this.setAttribute("order--tablet", t);
417
- }
418
- get orderLaptop() {
419
- return this.getAttribute("order--laptop");
420
- }
421
- set orderLaptop(t) {
422
- this.setAttribute("order--laptop", t);
423
- }
424
- get orderDesktop() {
425
- return this.getAttribute("order--desktop");
426
- }
427
- set orderDesktop(t) {
428
- this.setAttribute("order--desktop", t);
429
- }
430
- }
431
- const b = class b extends u {
432
- // nativeName: string;
433
- static get observedAttributes() {
434
- return [
435
- ...super.observedAttributes,
436
- ...m(this.nativeName)
437
- ];
438
- }
439
- attributeChangedCallback(t, s, e) {
440
- super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
441
- }
442
- get ctor() {
443
- return Object.getPrototypeOf(this).constructor;
444
- }
445
- constructor(...t) {
446
- super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = f(
447
- this.ctor.nativeName
448
- )), this.enhanceWithNativeProperties();
449
- }
450
- enhanceWithNativeProperties() {
451
- var t;
452
- for (const s of this.ctor.supportedPropertyNames)
453
- if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
454
- try {
455
- Object.defineProperty(this, s, {
456
- get() {
457
- return this.$el[s];
458
- },
459
- set(e) {
460
- this.$el[s] !== e && (this.$el[s] = e);
461
- }
462
- });
463
- } catch (e) {
464
- console.warn(`Could not create property ${s} for`, this.$el, e);
465
- }
466
- }
467
- get $el() {
468
- return this.shadowRoot.querySelector(this.ctor.nativeName);
469
- }
470
- _updateAttribute(t, s) {
471
- s ? this.setAttribute(t, s) : this.removeAttribute(t);
472
- }
473
- _updateBooleanAttribute(t, s) {
474
- s ? this.setAttribute(t, "") : this.removeAttribute(t);
475
- }
30
+ var c = class {
31
+ #e;
32
+ #t;
33
+ #n;
34
+ #r;
35
+ constructor(e, t, n) {
36
+ this.#r = !1, this.#i = () => {
37
+ this.setInteractiveState("hover");
38
+ }, this.clearInteractiveState = () => {
39
+ this.setInteractiveState(null);
40
+ }, this.#e = e, this.#t = t, this.#n = n;
41
+ }
42
+ #i;
43
+ connect() {
44
+ this.#r ||= (this.#t.addEventListener("pointerenter", this.#i), this.#t.addEventListener("pointerleave", this.clearInteractiveState), this.#t.addEventListener("focusin", this.#i), this.#t.addEventListener("focusout", this.clearInteractiveState), !0);
45
+ }
46
+ disconnect() {
47
+ this.#r &&= (this.#t.removeEventListener("pointerenter", this.#i), this.#t.removeEventListener("pointerleave", this.clearInteractiveState), this.#t.removeEventListener("focusin", this.#i), this.#t.removeEventListener("focusout", this.clearInteractiveState), !1);
48
+ }
49
+ setInteractiveState(e) {
50
+ let t = this.#a;
51
+ if (!this.#n()) {
52
+ t.forEach((e) => e.removeAttribute("interactive-state"));
53
+ return;
54
+ }
55
+ t.forEach((t) => {
56
+ e ? t.setAttribute("interactive-state", e) : t.removeAttribute("interactive-state");
57
+ });
58
+ }
59
+ get #a() {
60
+ return Array.from(this.#e.querySelectorAll("*")).filter(l);
61
+ }
476
62
  };
477
- b.accessorExclusions = [];
478
- let p = b;
479
- class j extends p {
480
- connectedCallback() {
481
- this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
482
- }
63
+ function l(e) {
64
+ return e.hasAttribute("interactive-state") ? !0 : customElements.get(e.localName)?.observedAttributes?.includes("interactive-state") ?? !1;
483
65
  }
484
- const C = ["", "default", "none", "l"], w = [
485
- "",
486
- "default",
487
- "auto",
488
- "flex-start",
489
- "flex-end",
490
- "center",
491
- "baseline",
492
- "stretch"
66
+ typeof window < "u" && (window.isComponentDebug = o);
67
+ var u = class e extends HTMLElement {
68
+ static get observedAttributes() {
69
+ return /* @__PURE__ */ "grow.grow--mobile.grow--tablet.grow--laptop.grow--desktop.shrink.shrink--mobile.shrink--tablet.shrink--laptop.shrink--desktop.basis.basis--mobile.basis--tablet.basis--laptop.basis--desktop.align-self.align-self--mobile.align-self--tablet.align-self--laptop.align-self--desktop.justify-self.justify-self--mobile.justify-self--tablet.justify-self--laptop.justify-self--desktop.hidden.hidden--mobile.hidden--tablet.hidden--laptop.hidden--desktop.shown--sr.shown--sr--mobile.shown--sr--tablet.shown--sr--laptop.shown--sr--desktop.col-span.col-span--mobile.col-span--tablet.col-span--laptop.col-span--desktop.order.order--mobile.order--tablet.order--laptop.order--desktop.sticky-top.sticky-bottom.word-break-all.word-break-all--mobile.word-break-all--tablet.word-break-all--laptop.word-break-all--desktop".split(".");
70
+ }
71
+ constructor(...e) {
72
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [r, ...e];
73
+ }
74
+ attributeChangedCallback(t, n, r) {
75
+ if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
76
+ case "grow":
77
+ case "grow--mobile":
78
+ case "grow--tablet":
79
+ case "grow--laptop":
80
+ case "grow--desktop":
81
+ case "shrink":
82
+ case "shrink--mobile":
83
+ case "shrink--tablet":
84
+ case "shrink--laptop":
85
+ case "shrink--desktop":
86
+ case "basis":
87
+ case "basis--mobile":
88
+ case "basis--tablet":
89
+ case "basis--laptop":
90
+ case "basis--desktop":
91
+ this.style.setProperty(`--${t}-value`, r);
92
+ break;
93
+ case "align-self":
94
+ case "align-self--mobile":
95
+ case "align-self--tablet":
96
+ case "align-self--laptop":
97
+ case "align-self--desktop":
98
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? h : m);
99
+ break;
100
+ case "justify-self":
101
+ case "justify-self--mobile":
102
+ case "justify-self--tablet":
103
+ case "justify-self--laptop":
104
+ case "justify-self--desktop":
105
+ this.updateProperties(t, n, r, g);
106
+ break;
107
+ case "col-span":
108
+ case "col-span--mobile":
109
+ case "col-span--tablet":
110
+ case "col-span--laptop":
111
+ case "col-span--desktop":
112
+ this.updateProperties(t, n, r, _);
113
+ break;
114
+ case "order":
115
+ case "order--mobile":
116
+ case "order--tablet":
117
+ case "order--laptop":
118
+ case "order--desktop": this.updateProperties(t, n, r, v);
119
+ }
120
+ }
121
+ updateProperties(e, t, n, r) {
122
+ r && (this.checkName(r, n) || s(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
123
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
124
+ if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
125
+ else {
126
+ let r = e.split("--")[1];
127
+ this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
128
+ }
129
+ }
130
+ updateStyle(e, t, n) {
131
+ n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
132
+ }
133
+ checkName(e, t) {
134
+ return e.includes(t);
135
+ }
136
+ get $el() {
137
+ return this;
138
+ }
139
+ get $parentElementName() {
140
+ return this.parentElement?.tagName.toLowerCase();
141
+ }
142
+ get isInsideGridOrStack() {
143
+ let e = this.parentElement;
144
+ for (; e;) {
145
+ if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
146
+ if (window.getComputedStyle(e).display === "contents") {
147
+ e = e.parentElement;
148
+ continue;
149
+ }
150
+ break;
151
+ }
152
+ return !1;
153
+ }
154
+ get grow() {
155
+ return this.getAttribute("grow");
156
+ }
157
+ set grow(e) {
158
+ G(this, "grow", e);
159
+ }
160
+ get growMobile() {
161
+ return this.getAttribute("grow--mobile");
162
+ }
163
+ set growMobile(e) {
164
+ G(this, "grow--mobile", e);
165
+ }
166
+ get growTablet() {
167
+ return this.getAttribute("grow--tablet");
168
+ }
169
+ set growTablet(e) {
170
+ G(this, "grow--tablet", e);
171
+ }
172
+ get growLaptop() {
173
+ return this.getAttribute("grow--laptop");
174
+ }
175
+ set growLaptop(e) {
176
+ G(this, "grow--laptop", e);
177
+ }
178
+ get growDesktop() {
179
+ return this.getAttribute("grow--desktop");
180
+ }
181
+ set growDesktop(e) {
182
+ G(this, "grow--desktop", e);
183
+ }
184
+ get shrink() {
185
+ return this.getAttribute("shrink");
186
+ }
187
+ set shrink(e) {
188
+ G(this, "shrink", e);
189
+ }
190
+ get shrinkMobile() {
191
+ return this.getAttribute("shrink--mobile");
192
+ }
193
+ set shrinkMobile(e) {
194
+ G(this, "shrink--mobile", e);
195
+ }
196
+ get shrinkTablet() {
197
+ return this.getAttribute("shrink--tablet");
198
+ }
199
+ set shrinkTablet(e) {
200
+ G(this, "shrink--tablet", e);
201
+ }
202
+ get shrinkLaptop() {
203
+ return this.getAttribute("shrink--laptop");
204
+ }
205
+ set shrinkLaptop(e) {
206
+ G(this, "shrink--laptop", e);
207
+ }
208
+ get shrinkDesktop() {
209
+ return this.getAttribute("shrink--desktop");
210
+ }
211
+ set shrinkDesktop(e) {
212
+ G(this, "shrink--desktop", e);
213
+ }
214
+ get basis() {
215
+ return this.getAttribute("basis");
216
+ }
217
+ set basis(e) {
218
+ G(this, "basis", e);
219
+ }
220
+ get basisMobile() {
221
+ return this.getAttribute("basis--mobile");
222
+ }
223
+ set basisMobile(e) {
224
+ G(this, "basis--mobile", e);
225
+ }
226
+ get basisTablet() {
227
+ return this.getAttribute("basis--tablet");
228
+ }
229
+ set basisTablet(e) {
230
+ G(this, "basis--tablet", e);
231
+ }
232
+ get basisLaptop() {
233
+ return this.getAttribute("basis--laptop");
234
+ }
235
+ set basisLaptop(e) {
236
+ G(this, "basis--laptop", e);
237
+ }
238
+ get basisDesktop() {
239
+ return this.getAttribute("basis--desktop");
240
+ }
241
+ set basisDesktop(e) {
242
+ G(this, "basis--desktop", e);
243
+ }
244
+ get alignSelf() {
245
+ return this.getAttribute("align-self");
246
+ }
247
+ set alignSelf(e) {
248
+ G(this, "align-self", e);
249
+ }
250
+ get alignSelfMobile() {
251
+ return this.getAttribute("align-self--mobile");
252
+ }
253
+ set alignSelfMobile(e) {
254
+ G(this, "align-self--mobile", e);
255
+ }
256
+ get alignSelfTablet() {
257
+ return this.getAttribute("align-self--tablet");
258
+ }
259
+ set alignSelfTablet(e) {
260
+ G(this, "align-self--tablet", e);
261
+ }
262
+ get alignSelfLaptop() {
263
+ return this.getAttribute("align-self--laptop");
264
+ }
265
+ set alignSelfLaptop(e) {
266
+ G(this, "align-self--laptop", e);
267
+ }
268
+ get alignSelfDesktop() {
269
+ return this.getAttribute("align-self--desktop");
270
+ }
271
+ set alignSelfDesktop(e) {
272
+ G(this, "align-self--desktop", e);
273
+ }
274
+ get justifySelf() {
275
+ return this.getAttribute("justify-self");
276
+ }
277
+ set justifySelf(e) {
278
+ G(this, "justify-self", e);
279
+ }
280
+ get justifySelfMobile() {
281
+ return this.getAttribute("justify-self--mobile");
282
+ }
283
+ set justifySelfMobile(e) {
284
+ G(this, "justify-self--mobile", e);
285
+ }
286
+ get justifySelfTablet() {
287
+ return this.getAttribute("justify-self--tablet");
288
+ }
289
+ set justifySelfTablet(e) {
290
+ G(this, "justify-self--tablet", e);
291
+ }
292
+ get justifySelfLaptop() {
293
+ return this.getAttribute("justify-self--laptop");
294
+ }
295
+ set justifySelfLaptop(e) {
296
+ G(this, "justify-self--laptop", e);
297
+ }
298
+ get justifySelfDesktop() {
299
+ return this.getAttribute("justify-self--desktop");
300
+ }
301
+ set justifySelfDesktop(e) {
302
+ G(this, "justify-self--desktop", e);
303
+ }
304
+ get hiddenMobile() {
305
+ return this.hasAttribute("hidden--mobile");
306
+ }
307
+ set hiddenMobile(e) {
308
+ K(this, "hidden--mobile", e);
309
+ }
310
+ get hiddenTablet() {
311
+ return this.hasAttribute("hidden--tablet");
312
+ }
313
+ set hiddenTablet(e) {
314
+ K(this, "hidden--tablet", e);
315
+ }
316
+ get hiddenLaptop() {
317
+ return this.hasAttribute("hidden--laptop");
318
+ }
319
+ set hiddenLaptop(e) {
320
+ K(this, "hidden--laptop", e);
321
+ }
322
+ get hiddenDesktop() {
323
+ return this.hasAttribute("hidden--desktop");
324
+ }
325
+ set hiddenDesktop(e) {
326
+ K(this, "hidden--desktop", e);
327
+ }
328
+ get colSpan() {
329
+ return this.getAttribute("col-span");
330
+ }
331
+ set colSpan(e) {
332
+ G(this, "col-span", e);
333
+ }
334
+ get colSpanMobile() {
335
+ return this.getAttribute("col-span--mobile");
336
+ }
337
+ set colSpanMobile(e) {
338
+ G(this, "col-span--mobile", e);
339
+ }
340
+ get colSpanTablet() {
341
+ return this.getAttribute("col-span--tablet");
342
+ }
343
+ set colSpanTablet(e) {
344
+ G(this, "col-span--tablet", e);
345
+ }
346
+ get colSpanLaptop() {
347
+ return this.getAttribute("col-span--laptop");
348
+ }
349
+ set colSpanLaptop(e) {
350
+ G(this, "col-span--laptop", e);
351
+ }
352
+ get colSpanDesktop() {
353
+ return this.getAttribute("col-span--desktop");
354
+ }
355
+ set colSpanDesktop(e) {
356
+ G(this, "col-span--desktop", e);
357
+ }
358
+ get order() {
359
+ return this.getAttribute("order");
360
+ }
361
+ set order(e) {
362
+ G(this, "order", e);
363
+ }
364
+ get orderMobile() {
365
+ return this.getAttribute("order--mobile");
366
+ }
367
+ set orderMobile(e) {
368
+ G(this, "order--mobile", e);
369
+ }
370
+ get orderTablet() {
371
+ return this.getAttribute("order--tablet");
372
+ }
373
+ set orderTablet(e) {
374
+ G(this, "order--tablet", e);
375
+ }
376
+ get orderLaptop() {
377
+ return this.getAttribute("order--laptop");
378
+ }
379
+ set orderLaptop(e) {
380
+ G(this, "order--laptop", e);
381
+ }
382
+ get orderDesktop() {
383
+ return this.getAttribute("order--desktop");
384
+ }
385
+ set orderDesktop(e) {
386
+ G(this, "order--desktop", e);
387
+ }
388
+ }, d = class extends u {
389
+ static {
390
+ this.accessorExclusions = [];
391
+ }
392
+ static get observedAttributes() {
393
+ return [...super.observedAttributes, ...n(this.nativeName)];
394
+ }
395
+ attributeChangedCallback(e, t, n) {
396
+ super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
397
+ }
398
+ get ctor() {
399
+ return Object.getPrototypeOf(this).constructor;
400
+ }
401
+ constructor(...e) {
402
+ super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = t(this.ctor.nativeName)), this.enhanceWithNativeProperties();
403
+ }
404
+ enhanceWithNativeProperties() {
405
+ for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
406
+ Object.defineProperty(this, e, {
407
+ get() {
408
+ return this.$el[e];
409
+ },
410
+ set(t) {
411
+ this.$el[e] !== t && (this.$el[e] = t);
412
+ }
413
+ });
414
+ } catch (t) {
415
+ console.warn(`Could not create property ${e} for`, this.$el, t);
416
+ }
417
+ }
418
+ get $el() {
419
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
420
+ }
421
+ _updateAttribute(e, t) {
422
+ G(this, e, t);
423
+ }
424
+ _updateBooleanAttribute(e, t) {
425
+ K(this, e, t);
426
+ }
427
+ }, f = class extends d {
428
+ connectedCallback() {
429
+ this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
430
+ }
431
+ }, p = [
432
+ "",
433
+ "default",
434
+ "none",
435
+ "l"
436
+ ], m = [
437
+ "",
438
+ "default",
439
+ "auto",
440
+ "flex-start",
441
+ "start",
442
+ "flex-end",
443
+ "end",
444
+ "center",
445
+ "baseline",
446
+ "stretch"
447
+ ], h = [
448
+ "",
449
+ "default",
450
+ "start",
451
+ "end",
452
+ "center",
453
+ "stretch"
454
+ ], g = [
455
+ "",
456
+ "default",
457
+ "start",
458
+ "end",
459
+ "center",
460
+ "stretch"
461
+ ], _ = [
462
+ "",
463
+ "1",
464
+ "2",
465
+ "3",
466
+ "4",
467
+ "5",
468
+ "6",
469
+ "7",
470
+ "8",
471
+ "9",
472
+ "10",
473
+ "11",
474
+ "12"
475
+ ], v = [
476
+ "",
477
+ "-1",
478
+ "0",
479
+ "1",
480
+ "2",
481
+ "3",
482
+ "4",
483
+ "5",
484
+ "6",
485
+ "7",
486
+ "8",
487
+ "9",
488
+ "10",
489
+ "11",
490
+ "12"
493
491
  ], y = [
494
- "",
495
- "default",
496
- "start",
497
- "end",
498
- "center",
499
- "stretch"
500
- ], A = [
501
- "",
502
- "default",
503
- "start",
504
- "end",
505
- "center",
506
- "stretch"
492
+ "",
493
+ "default",
494
+ "auto",
495
+ "start",
496
+ "end",
497
+ "center",
498
+ "stretch"
499
+ ], b = [
500
+ "",
501
+ "default",
502
+ "inherit",
503
+ "body-l",
504
+ "body-m",
505
+ "body-s",
506
+ "body-xs",
507
+ "heading-5xl",
508
+ "heading-4xl",
509
+ "heading-3xl",
510
+ "heading-2xl",
511
+ "heading-xl",
512
+ "heading-l",
513
+ "heading-m",
514
+ "heading-s"
515
+ ], x = [
516
+ "",
517
+ "default",
518
+ "inherit",
519
+ "brand",
520
+ "neutral",
521
+ "dimmed",
522
+ "purpose-success",
523
+ "purpose-warning",
524
+ "purpose-error",
525
+ "purpose-unlimited",
526
+ "purpose-promo",
527
+ "state-hover",
528
+ "state-active",
529
+ "state-disabled"
507
530
  ], S = [
508
- "",
509
- "1",
510
- "2",
511
- "3",
512
- "4",
513
- "5",
514
- "6",
515
- "7",
516
- "8",
517
- "9",
518
- "10",
519
- "11",
520
- "12"
521
- ], $ = [
522
- "",
523
- "-1",
524
- "0",
525
- "1",
526
- "2",
527
- "3",
528
- "4",
529
- "5",
530
- "6",
531
- "7",
532
- "8",
533
- "9",
534
- "10",
535
- "11",
536
- "12"
537
- ], L = [
538
- "",
539
- "default",
540
- "auto",
541
- "start",
542
- "end",
543
- "center",
544
- "stretch"
545
- ], M = [
546
- "",
547
- "default",
548
- "inherit",
549
- "body-l",
550
- "body-m",
551
- "body-s",
552
- "body-xs",
553
- "heading-5xl",
554
- "heading-4xl",
555
- "heading-3xl",
556
- "heading-2xl",
557
- "heading-xl",
558
- "heading-l",
559
- "heading-m",
560
- "heading-s"
561
- ], N = [
562
- "",
563
- "default",
564
- "inherit",
565
- "brand",
566
- "neutral",
567
- "dimmed",
568
- "purpose-success",
569
- "purpose-warning",
570
- "purpose-error",
571
- "purpose-unlimited",
572
- "purpose-promo",
573
- "state-hover",
574
- "state-active",
575
- "state-disabled"
576
- ], D = [
577
- "",
578
- "default",
579
- "inherit",
580
- "body",
581
- "title",
582
- "title-large",
583
- "subtitle"
584
- ], x = ["Xs", "S", "M", "L", "Xl"], T = [
585
- "",
586
- "default",
587
- ...x.map((i) => i.toLowerCase())
588
- ], O = ["", "default", "left", "center", "right"], _ = [
589
- "",
590
- "none",
591
- "3xs",
592
- "2xs",
593
- "xs",
594
- "s",
595
- "m",
596
- "l",
597
- "xl"
598
- ], P = ["", "none", "s", "m", "l"], q = ["", "none", "main", "pill"], G = [
599
- "none",
600
- "main",
601
- "brand",
602
- "state-hover",
603
- "state-active",
604
- "neutral",
605
- "purpose-success",
606
- "purpose-warning",
607
- "purpose-error",
608
- "purpose-unlimited"
531
+ "",
532
+ "default",
533
+ "inherit",
534
+ "body",
535
+ "title",
536
+ "title-large",
537
+ "subtitle"
538
+ ], C = [
539
+ "Xs",
540
+ "S",
541
+ "M",
542
+ "L",
543
+ "Xl"
544
+ ], w = [
545
+ "",
546
+ "default",
547
+ ...C.map((e) => e.toLowerCase())
548
+ ], T = [
549
+ "",
550
+ "default",
551
+ "left",
552
+ "center",
553
+ "right"
609
554
  ], E = [
610
- "",
611
- "all",
612
- "top",
613
- "right",
614
- "bottom",
615
- "left",
616
- "block",
617
- "inline"
618
- ], B = [
619
- "",
620
- "none",
621
- "surface-light",
622
- "surface-default",
623
- "surface-strong",
624
- "surface-stronger",
625
- "surface-dark",
626
- "surface-brand",
627
- "surface-brand-light",
628
- "container-primary",
629
- "container-secondary",
630
- "container-light",
631
- "container-default",
632
- "container-strong",
633
- "state-hover",
634
- "state-hover-bordered",
635
- "state-active",
636
- "state-disabled",
637
- "purpose-success",
638
- "purpose-warning",
639
- "purpose-error",
640
- "purpose-unlimited",
641
- "purpose-promo",
642
- "purpose-info",
643
- "purpose-eco",
644
- "purpose-notification",
645
- "footer"
646
- ], V = ["", "cover", "contain", "default"], R = ["", "none", "s", "m", "l", "xl"], z = [
647
- "",
648
- "default",
649
- "title-4xl",
650
- "title-3xl",
651
- "title-2xl",
652
- "title-xl",
653
- "title-l",
654
- "title-m",
655
- "title-s",
656
- "subtitle"
657
- ], H = [
658
- "",
659
- "purple-top-red",
660
- "purple-top-magenta",
661
- "purple-top-orange",
662
- "purple-top-blue",
663
- "purple-top-turquoise",
664
- "purple-top-green",
665
- "purple-right-red",
666
- "purple-right-magenta",
667
- "purple-right-orange",
668
- "purple-right-blue",
669
- "purple-right-turquoise",
670
- "purple-right-green",
671
- "purple-top-right-red",
672
- "purple-top-right-magenta",
673
- "purple-top-right-orange",
674
- "purple-top-right-blue",
675
- "purple-top-right-turquoise",
676
- "purple-top-right-green",
677
- "purple-bottom-right-red",
678
- "purple-bottom-right-magenta",
679
- "purple-bottom-right-orange",
680
- "purple-bottom-right-blue",
681
- "purple-bottom-right-turquoise",
682
- "purple-bottom-right-green",
683
- "color-top-red",
684
- "color-top-magenta",
685
- "color-top-orange",
686
- "color-top-blue",
687
- "color-top-turquoise",
688
- "color-top-green",
689
- "color-right-red",
690
- "color-right-magenta",
691
- "color-right-orange",
692
- "color-right-blue",
693
- "color-right-turquoise",
694
- "color-right-green",
695
- "color-top-right-red",
696
- "color-top-right-magenta",
697
- "color-top-right-orange",
698
- "color-top-right-blue",
699
- "color-top-right-turquoise",
700
- "color-top-right-green",
701
- "color-bottom-right-red",
702
- "color-bottom-right-magenta",
703
- "color-bottom-right-orange",
704
- "color-bottom-right-blue",
705
- "color-bottom-right-turquoise",
706
- "color-bottom-right-green"
707
- ], I = [
708
- "none",
709
- "2xs",
710
- "xs",
711
- "s",
712
- "default",
713
- "l",
714
- "heading-to-subtitle",
715
- "heading-to-content",
716
- "page-layout-between-sections"
717
- ], W = [
718
- "",
719
- "all",
720
- "top",
721
- "right",
722
- "bottom",
723
- "left"
724
- ], X = [
725
- "",
726
- "default",
727
- "xs",
728
- "s",
729
- "m",
730
- "l",
731
- "xl"
555
+ "",
556
+ "none",
557
+ "3xs",
558
+ "2xs",
559
+ "xs",
560
+ "s",
561
+ "m",
562
+ "l",
563
+ "xl"
564
+ ], D = [
565
+ "",
566
+ "none",
567
+ "s",
568
+ "m",
569
+ "l"
570
+ ], O = [
571
+ "",
572
+ "none",
573
+ "main",
574
+ "pill"
575
+ ], k = [
576
+ "none",
577
+ "main",
578
+ "brand",
579
+ "state-hover",
580
+ "state-active",
581
+ "neutral",
582
+ "purpose-success",
583
+ "purpose-warning",
584
+ "purpose-error",
585
+ "purpose-unlimited"
586
+ ], A = [
587
+ "",
588
+ "all",
589
+ "top",
590
+ "right",
591
+ "bottom",
592
+ "left",
593
+ "block",
594
+ "inline"
595
+ ], j = /* @__PURE__ */ ".none.surface-light.surface-default.surface-strong.surface-stronger.surface-dark.surface-brand.surface-brand-light.container-primary.container-secondary.container-light.container-default.container-strong.state-hover.state-hover-bordered.state-active.state-disabled.purpose-success.purpose-warning.purpose-error.purpose-unlimited.purpose-promo.purpose-info.purpose-eco.purpose-notification.footer-sitemap".split("."), M = [
596
+ "",
597
+ "cover",
598
+ "contain",
599
+ "default"
600
+ ], N = [
601
+ "",
602
+ "none",
603
+ "s",
604
+ "m",
605
+ "l",
606
+ "xl"
607
+ ], P = [
608
+ "",
609
+ "default",
610
+ "title-4xl",
611
+ "title-3xl",
612
+ "title-2xl",
613
+ "title-xl",
614
+ "title-l",
615
+ "title-m",
616
+ "title-s",
617
+ "subtitle"
618
+ ], F = /* @__PURE__ */ ".purple-top-red.purple-top-magenta.purple-top-orange.purple-top-blue.purple-top-turquoise.purple-top-green.purple-right-red.purple-right-magenta.purple-right-orange.purple-right-blue.purple-right-turquoise.purple-right-green.purple-top-right-red.purple-top-right-magenta.purple-top-right-orange.purple-top-right-blue.purple-top-right-turquoise.purple-top-right-green.purple-bottom-right-red.purple-bottom-right-magenta.purple-bottom-right-orange.purple-bottom-right-blue.purple-bottom-right-turquoise.purple-bottom-right-green.color-top-red.color-top-magenta.color-top-orange.color-top-blue.color-top-turquoise.color-top-green.color-right-red.color-right-magenta.color-right-orange.color-right-blue.color-right-turquoise.color-right-green.color-top-right-red.color-top-right-magenta.color-top-right-orange.color-top-right-blue.color-top-right-turquoise.color-top-right-green.color-bottom-right-red.color-bottom-right-magenta.color-bottom-right-orange.color-bottom-right-blue.color-bottom-right-turquoise.color-bottom-right-green".split("."), I = [
619
+ "none",
620
+ "2xs",
621
+ "xs",
622
+ "s",
623
+ "default",
624
+ "l",
625
+ "heading-to-subtitle",
626
+ "heading-to-content",
627
+ "page-layout-between-sections"
628
+ ], L = [
629
+ "",
630
+ "all",
631
+ "top",
632
+ "right",
633
+ "bottom",
634
+ "left"
635
+ ], R = [
636
+ "",
637
+ "default",
638
+ "xs",
639
+ "s",
640
+ "m",
641
+ "l",
642
+ "xl"
732
643
  ];
733
- function F(i) {
734
- const t = document.createElement("style");
735
- t.innerHTML = i, document.head.appendChild(t);
644
+ function z(e) {
645
+ let t = document.createElement("style");
646
+ t.innerHTML = e, document.head.appendChild(t);
736
647
  }
737
- function U(i) {
738
- return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
648
+ function B(e) {
649
+ return typeof e == "string" && (e === "false" || e === "0" || e === "null") || typeof e == "boolean" && !e;
739
650
  }
740
- function J() {
741
- return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
651
+ function V() {
652
+ return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
742
653
  }
743
- function K(i, t) {
744
- return i.includes(t);
654
+ function H(e, t) {
655
+ return t !== null && e.includes(t);
745
656
  }
746
- function Q(i, t, s = !0) {
747
- var e;
748
- if ([
749
- "aria-label",
750
- "aria-labelledby",
751
- "aria-describedby",
752
- "aria-controls",
753
- "aria-expanded",
754
- "aria-haspopup",
755
- "aria-pressed",
756
- "aria-selected",
757
- "aria-required",
758
- "aria-disabled",
759
- "aria-live",
760
- "aria-atomic",
761
- "aria-relevant",
762
- "aria-orientation",
763
- "aria-valuenow",
764
- "aria-valuetext",
765
- "aria-valuemin",
766
- "aria-valuemax",
767
- "aria-details",
768
- "aria-modal",
769
- "aria-autocomplete",
770
- "aria-activedescendant",
771
- "aria-colcount",
772
- "aria-colindex",
773
- "aria-colspan",
774
- "aria-rowcount",
775
- "aria-rowindex",
776
- "aria-rowspan",
777
- "aria-keyshortcuts",
778
- "aria-placeholder",
779
- "aria-invalid",
780
- "aria-busy",
781
- "aria-owns"
782
- ].forEach((o) => {
783
- i.getAttribute(o) && (t.setAttribute(o, i.getAttribute(o)), i.removeAttribute(o));
784
- }), s) {
785
- const o = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
786
- t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
787
- }
657
+ var U = /* @__PURE__ */ "aria-label.aria-labelledby.aria-describedby.aria-controls.aria-expanded.aria-haspopup.aria-pressed.aria-selected.aria-required.aria-disabled.aria-live.aria-atomic.aria-relevant.aria-orientation.aria-valuenow.aria-valuetext.aria-valuemin.aria-valuemax.aria-details.aria-modal.aria-autocomplete.aria-activedescendant.aria-colcount.aria-colindex.aria-colspan.aria-rowcount.aria-rowindex.aria-rowspan.aria-keyshortcuts.aria-placeholder.aria-invalid.aria-busy.aria-owns".split(".");
658
+ function W(e, t, n = !1) {
659
+ if (U.forEach((n) => {
660
+ e.getAttribute(n) && (t.setAttribute(n, e.getAttribute(n)), e.removeAttribute(n));
661
+ }), n && !e.getAttribute("aria-labelledby")) {
662
+ let n = `px-${t.localName?.toLowerCase() ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
663
+ t.setAttribute("id", n), e.setAttribute("aria-labelledby", n);
664
+ }
788
665
  }
789
- function Y(i, t, s, e = "", o) {
790
- const a = new CSSStyleSheet(), l = s.reduce(
791
- (n, r) => n + `
792
- ${t(i, r)} {
793
- ${i}: var(--${e}-${r}-desktop);
794
- ${o ? `${o}:var(--${e}-${r}-desktop)` : ""}
666
+ function G(e, t, n) {
667
+ if (n == null || n === "") {
668
+ e.removeAttribute(t);
669
+ return;
670
+ }
671
+ e.setAttribute(t, n.toString());
672
+ }
673
+ function K(e, t, n) {
674
+ if (!n) {
675
+ e.removeAttribute(t);
676
+ return;
677
+ }
678
+ e.setAttribute(t, "");
679
+ }
680
+ //#endregion
681
+ //#region src/breakpoints.ts
682
+ function q(e, t, n, r = "", i, a = e) {
683
+ let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
684
+ ${t(a, o)} {
685
+ ${e}: var(--${r}-${o}-desktop);
686
+ ${i ? `${i}:var(--${r}-${o}-desktop)` : ""}
795
687
  }
796
688
  /* Mobile only - max 767px */
797
- @media only screen and (max-width: 47.938em) {
798
- ${t(i, r)} {
799
- ${i}: var(--${e}-${r}-mobile);
800
- ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
689
+ @media only screen and (max-width: 47.938rem) {
690
+ ${t(a, o)} {
691
+ ${e}: var(--${r}-${o}-mobile);
692
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
801
693
  }
802
694
  }
803
- ${t(i, r, "mobile")} {
695
+ ${t(a, o, "mobile")} {
804
696
  /* Mobile only - max 767px */
805
- @media only screen and (max-width: 47.938em) {
806
- ${i}: var(--${e}-${r}-mobile) !important;
807
- ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
697
+ @media only screen and (max-width: 47.938rem) {
698
+ ${e}: var(--${r}-${o}-mobile) !important;
699
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
808
700
  }
809
701
  }
810
- ${t(i, r, "tablet")} {
702
+ ${t(a, o, "tablet")} {
811
703
  /* Tablet - min 768px max 1024px */
812
- @media only screen and (min-width: 48em) and (max-width: 64em) {
813
- ${i}: var(--${e}-${r}-desktop) !important;
814
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
704
+ @media only screen and (min-width: 48rem) and (max-width: 64rem) {
705
+ ${e}: var(--${r}-${o}-desktop) !important;
706
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
815
707
  }
816
708
  }
817
- ${t(i, r, "laptop")} {
709
+ ${t(a, o, "laptop")} {
818
710
  /* Laptop - 1025px*/
819
- @media only screen and (min-width: 64.0625em) {
820
- ${i}: var(--${e}-${r}-desktop) !important;
821
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
711
+ @media only screen and (min-width: 64.0625rem) {
712
+ ${e}: var(--${r}-${o}-desktop) !important;
713
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
822
714
  }
823
715
  }
824
- ${t(i, r, "desktop")} {
716
+ ${t(a, o, "desktop")} {
825
717
  /* Desktop - 1025px*/
826
- @media only screen and (min-width: 64.0625em) {
827
- ${i}: var(--${e}-${r}-desktop) !important;
828
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
718
+ @media only screen and (min-width: 64.0625rem) {
719
+ ${e}: var(--${r}-${o}-desktop) !important;
720
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
829
721
  }
830
- }`,
831
- ""
832
- );
833
- return a.replaceSync(l), a;
834
- }
835
- class Z {
836
- constructor(t, s, e, o) {
837
- this.component = t, this.attributeName = s, this.cssVariable = o, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
838
- this.component,
839
- this.toCamelCase(this.attributeName),
840
- {
841
- get: () => this.component.getAttribute(this.attributeName),
842
- set: (a) => {
843
- this.component.setAttribute(this.attributeName, a);
844
- }
845
- }
846
- );
847
- }
848
- toCamelCase(t) {
849
- return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
850
- }
851
- init(t) {
852
- this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
853
- }
854
- attributeChangedCallback(t, s, e) {
855
- if (s !== e)
856
- switch (!0) {
857
- case t === this.attributeName:
858
- case t === `${this.attributeName}--mobile`:
859
- case t === `${this.attributeName}--tablet`:
860
- case t === `${this.attributeName}--laptop`:
861
- case t === `${this.attributeName}--desktop`:
862
- this.setCSSProperty(t, e);
863
- break;
864
- default:
865
- return;
866
- }
867
- }
868
- setCSSProperty(t, s, e = !0) {
869
- const [, o = ""] = t.split("--");
870
- this.component.style.setProperty(
871
- `${this.cssVariable}${e ? "-all" : ""}${o ? `-${o}` : ""}`,
872
- `${this._attributeValue(s, o)}`
873
- );
874
- }
875
- setCSSProperties() {
876
- const t = this.component.getAttribute(this.attributeName);
877
- t && (this.setCSSProperty(this.attributeName, t), this.setCSSProperty(this.attributeNameMobile, t), this.setCSSProperty(this.attributeNameTablet, t), this.setCSSProperty(this.attributeNameLaptop, t), this.setCSSProperty(this.attributeNameDesktop, t));
878
- const s = this.component.getAttribute(
879
- this.attributeNameMobile
880
- );
881
- s && this.setCSSProperty(
882
- this.attributeNameMobile,
883
- s,
884
- !1
885
- );
886
- const e = this.component.getAttribute(
887
- this.attributeNameTablet
888
- );
889
- e && this.setCSSProperty(
890
- this.attributeNameTablet,
891
- e,
892
- !1
893
- );
894
- const o = this.component.getAttribute(
895
- this.attributeNameLaptop
896
- );
897
- o && this.setCSSProperty(
898
- this.attributeNameLaptop,
899
- o,
900
- !1
901
- );
902
- const a = this.component.getAttribute(
903
- this.attributeNameDesktop
904
- );
905
- a && this.setCSSProperty(
906
- this.attributeNameDesktop,
907
- a,
908
- !1
909
- );
910
- }
911
- set attributeValue(t) {
912
- this._attributeValue = t, this.setCSSProperties();
913
- }
722
+ }`, "");
723
+ return o.replaceSync(s), o;
914
724
  }
915
- export {
916
- Z as AttributeBreakpointHandlerDelegate,
917
- p as PxElement,
918
- j as VerticallyExtendedElement,
919
- u as WithExtraAttributes,
920
- F as addGlobalStylesheet,
921
- X as assetContainerImgWidthValues,
922
- B as backgroundColorValues,
923
- V as backgroundSizeValues,
924
- G as borderColorValues,
925
- q as borderRadiusValues,
926
- E as borderSideValues,
927
- P as borderValues,
928
- R as boxShadowValues,
929
- K as checkName,
930
- N as colorValues,
931
- y as cssGridAlignSelfValues,
932
- S as cssGridColSpanValues,
933
- A as cssGridJustifySelfValues,
934
- $ as cssGridOrderValues,
935
- L as cssGridPlaceSelfValues,
936
- Y as cssTokenBreakpoints,
937
- w as flexboxAlignSelfValues,
938
- M as fontsizeValues,
939
- D as fontweightValues,
940
- I as gapValues,
941
- m as getSupportedAttributeNames,
942
- f as getSupportedPropertyNames,
943
- J as getViewportFormat,
944
- H as gradientValues,
945
- C as gridGapValues,
946
- z as headingValues,
947
- x as iconSizeValues,
948
- T as iconSizeValuesKC,
949
- h as isComponentDebug,
950
- U as isFalsy,
951
- v as log,
952
- W as noBorderRadiusValues,
953
- _ as paddingValues,
954
- O as textalignValues,
955
- Q as transferAccessibilityAttributes
725
+ var J = class {
726
+ constructor(e, t, n, r) {
727
+ this.component = e, this.attributeName = t, this.cssVariable = r, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = n, Object.defineProperty(this.component, this.toCamelCase(this.attributeName), {
728
+ get: () => this.component.getAttribute(this.attributeName),
729
+ set: (e) => {
730
+ this.component.setAttribute(this.attributeName, e);
731
+ }
732
+ });
733
+ }
734
+ toCamelCase(e) {
735
+ return e.replace(/[-_]+(.)?/g, (e, t) => t ? t.toUpperCase() : "");
736
+ }
737
+ init(e) {
738
+ this.setCSSProperty(this.attributeName, e), this.setCSSProperties();
739
+ }
740
+ attributeChangedCallback(e, t, n) {
741
+ if (t !== n) switch (!0) {
742
+ case e === this.attributeName:
743
+ case e === `${this.attributeName}--mobile`:
744
+ case e === `${this.attributeName}--tablet`:
745
+ case e === `${this.attributeName}--laptop`:
746
+ case e === `${this.attributeName}--desktop`:
747
+ this.setCSSProperty(e, n);
748
+ break;
749
+ default: return;
750
+ }
751
+ }
752
+ setCSSProperty(e, t, n = !0) {
753
+ let [, r = ""] = e.split("--");
754
+ this.component.style.setProperty(`${this.cssVariable}${n ? "-all" : ""}${r ? `-${r}` : ""}`, `${this._attributeValue(t, r)}`);
755
+ }
756
+ setCSSProperties() {
757
+ let e = this.component.getAttribute(this.attributeName);
758
+ e && (this.setCSSProperty(this.attributeName, e), this.setCSSProperty(this.attributeNameMobile, e), this.setCSSProperty(this.attributeNameTablet, e), this.setCSSProperty(this.attributeNameLaptop, e), this.setCSSProperty(this.attributeNameDesktop, e));
759
+ let t = this.component.getAttribute(this.attributeNameMobile);
760
+ t && this.setCSSProperty(this.attributeNameMobile, t, !1);
761
+ let n = this.component.getAttribute(this.attributeNameTablet);
762
+ n && this.setCSSProperty(this.attributeNameTablet, n, !1);
763
+ let r = this.component.getAttribute(this.attributeNameLaptop);
764
+ r && this.setCSSProperty(this.attributeNameLaptop, r, !1);
765
+ let i = this.component.getAttribute(this.attributeNameDesktop);
766
+ i && this.setCSSProperty(this.attributeNameDesktop, i, !1);
767
+ }
768
+ set attributeValue(e) {
769
+ this._attributeValue = e, this.setCSSProperties();
770
+ }
956
771
  };
772
+ //#endregion
773
+ export { J as AttributeBreakpointHandlerDelegate, d as PxElement, f as VerticallyExtendedElement, u as WithExtraAttributes, c as WrappedInteractiveStateController, U as accessibilityAttributes, z as addGlobalStylesheet, R as assetContainerImgWidthValues, j as backgroundColorValues, M as backgroundSizeValues, K as booleanPropertyToAttributeSetter, k as borderColorValues, O as borderRadiusValues, A as borderSideValues, D as borderValues, N as boxShadowValues, H as checkName, x as colorValues, h as cssGridAlignSelfValues, _ as cssGridColSpanValues, g as cssGridJustifySelfValues, v as cssGridOrderValues, y as cssGridPlaceSelfValues, q as cssTokenBreakpoints, m as flexboxAlignSelfValues, b as fontsizeValues, S as fontweightValues, I as gapValues, n as getSupportedAttributeNames, t as getSupportedPropertyNames, V as getViewportFormat, F as gradientValues, p as gridGapValues, P as headingValues, C as iconSizeValues, w as iconSizeValuesKC, o as isComponentDebug, B as isFalsy, s as log, L as noBorderRadiusValues, E as paddingValues, G as propertyToAttributeSetter, T as textalignValues, W as transferAccessibilityAttributes };