@proximus/lavender-common 2.0.0-alpha.21 → 2.0.0-alpha.211

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 (6) hide show
  1. package/dist/breakpoints.d.ts +1 -1
  2. package/dist/common.d.ts +102 -83
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.es.js +741 -924
  5. package/dist/template.d.ts +14 -0
  6. 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 = "@layer px-reset{:host{font-variant:normal;font-size-adjust:none;font-kerning:auto;font-optical-sizing:auto;font-synthesis:weight style small-caps position;font-feature-settings:normal;font-variation-settings:normal;font-language-override:normal;font-palette:normal;letter-spacing:normal;word-spacing:normal;tab-size:8;text-align:start;text-indent:0;text-transform:none;text-shadow:none;text-rendering:auto;text-wrap:wrap;white-space:normal;word-break:normal;overflow-wrap:normal;-webkit-hyphens:manual;hyphens:manual;text-underline-offset:auto;text-underline-position:auto;-webkit-font-smoothing:initial;-moz-osx-font-smoothing:auto;-webkit-text-size-adjust:auto;-moz-text-size-adjust:auto;text-size-adjust:auto;font-style:normal;font-stretch:100%;line-height:normal;text-emphasis:none}}: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}@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}@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}@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}}";
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
+ this.#n() ? t.forEach((t) => {
52
+ e ? t.setAttribute("interactive-state", e) : t.removeAttribute("interactive-state");
53
+ }) : t.forEach((e) => e.removeAttribute("interactive-state"));
54
+ }
55
+ get #a() {
56
+ return Array.from(this.#e.querySelectorAll("*")).filter(l);
57
+ }
476
58
  };
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
- }
59
+ function l(e) {
60
+ return e.hasAttribute("interactive-state") ? !0 : customElements.get(e.localName)?.observedAttributes?.includes("interactive-state") ?? !1;
483
61
  }
484
- const C = ["", "default", "none", "l"], w = [
485
- "",
486
- "default",
487
- "auto",
488
- "flex-start",
489
- "flex-end",
490
- "center",
491
- "baseline",
492
- "stretch"
62
+ typeof window < "u" && (window.isComponentDebug = o);
63
+ var u = class e extends HTMLElement {
64
+ static get observedAttributes() {
65
+ 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(".");
66
+ }
67
+ constructor(...e) {
68
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [r, ...e];
69
+ }
70
+ attributeChangedCallback(t, n, r) {
71
+ if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
72
+ case "grow":
73
+ case "grow--mobile":
74
+ case "grow--tablet":
75
+ case "grow--laptop":
76
+ case "grow--desktop":
77
+ case "shrink":
78
+ case "shrink--mobile":
79
+ case "shrink--tablet":
80
+ case "shrink--laptop":
81
+ case "shrink--desktop":
82
+ case "basis":
83
+ case "basis--mobile":
84
+ case "basis--tablet":
85
+ case "basis--laptop":
86
+ case "basis--desktop":
87
+ this.style.setProperty(`--${t}-value`, r);
88
+ break;
89
+ case "align-self":
90
+ case "align-self--mobile":
91
+ case "align-self--tablet":
92
+ case "align-self--laptop":
93
+ case "align-self--desktop":
94
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? h : m);
95
+ break;
96
+ case "justify-self":
97
+ case "justify-self--mobile":
98
+ case "justify-self--tablet":
99
+ case "justify-self--laptop":
100
+ case "justify-self--desktop":
101
+ this.updateProperties(t, n, r, g);
102
+ break;
103
+ case "col-span":
104
+ case "col-span--mobile":
105
+ case "col-span--tablet":
106
+ case "col-span--laptop":
107
+ case "col-span--desktop":
108
+ this.updateProperties(t, n, r, _);
109
+ break;
110
+ case "order":
111
+ case "order--mobile":
112
+ case "order--tablet":
113
+ case "order--laptop":
114
+ case "order--desktop": this.updateProperties(t, n, r, v);
115
+ }
116
+ }
117
+ updateProperties(e, t, n, r) {
118
+ r && (this.checkName(r, n) || s(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
119
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
120
+ if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
121
+ else {
122
+ let r = e.split("--")[1];
123
+ this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
124
+ }
125
+ }
126
+ updateStyle(e, t, n) {
127
+ n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
128
+ }
129
+ checkName(e, t) {
130
+ return e.includes(t);
131
+ }
132
+ get $el() {
133
+ return this;
134
+ }
135
+ get $parentElementName() {
136
+ return this.parentElement?.tagName.toLowerCase();
137
+ }
138
+ get isInsideGridOrStack() {
139
+ let e = this.parentElement;
140
+ for (; e;) {
141
+ if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
142
+ if (window.getComputedStyle(e).display === "contents") e = e.parentElement;
143
+ else break;
144
+ }
145
+ return !1;
146
+ }
147
+ get grow() {
148
+ return this.getAttribute("grow");
149
+ }
150
+ set grow(e) {
151
+ G(this, "grow", e);
152
+ }
153
+ get growMobile() {
154
+ return this.getAttribute("grow--mobile");
155
+ }
156
+ set growMobile(e) {
157
+ G(this, "grow--mobile", e);
158
+ }
159
+ get growTablet() {
160
+ return this.getAttribute("grow--tablet");
161
+ }
162
+ set growTablet(e) {
163
+ G(this, "grow--tablet", e);
164
+ }
165
+ get growLaptop() {
166
+ return this.getAttribute("grow--laptop");
167
+ }
168
+ set growLaptop(e) {
169
+ G(this, "grow--laptop", e);
170
+ }
171
+ get growDesktop() {
172
+ return this.getAttribute("grow--desktop");
173
+ }
174
+ set growDesktop(e) {
175
+ G(this, "grow--desktop", e);
176
+ }
177
+ get shrink() {
178
+ return this.getAttribute("shrink");
179
+ }
180
+ set shrink(e) {
181
+ G(this, "shrink", e);
182
+ }
183
+ get shrinkMobile() {
184
+ return this.getAttribute("shrink--mobile");
185
+ }
186
+ set shrinkMobile(e) {
187
+ G(this, "shrink--mobile", e);
188
+ }
189
+ get shrinkTablet() {
190
+ return this.getAttribute("shrink--tablet");
191
+ }
192
+ set shrinkTablet(e) {
193
+ G(this, "shrink--tablet", e);
194
+ }
195
+ get shrinkLaptop() {
196
+ return this.getAttribute("shrink--laptop");
197
+ }
198
+ set shrinkLaptop(e) {
199
+ G(this, "shrink--laptop", e);
200
+ }
201
+ get shrinkDesktop() {
202
+ return this.getAttribute("shrink--desktop");
203
+ }
204
+ set shrinkDesktop(e) {
205
+ G(this, "shrink--desktop", e);
206
+ }
207
+ get basis() {
208
+ return this.getAttribute("basis");
209
+ }
210
+ set basis(e) {
211
+ G(this, "basis", e);
212
+ }
213
+ get basisMobile() {
214
+ return this.getAttribute("basis--mobile");
215
+ }
216
+ set basisMobile(e) {
217
+ G(this, "basis--mobile", e);
218
+ }
219
+ get basisTablet() {
220
+ return this.getAttribute("basis--tablet");
221
+ }
222
+ set basisTablet(e) {
223
+ G(this, "basis--tablet", e);
224
+ }
225
+ get basisLaptop() {
226
+ return this.getAttribute("basis--laptop");
227
+ }
228
+ set basisLaptop(e) {
229
+ G(this, "basis--laptop", e);
230
+ }
231
+ get basisDesktop() {
232
+ return this.getAttribute("basis--desktop");
233
+ }
234
+ set basisDesktop(e) {
235
+ G(this, "basis--desktop", e);
236
+ }
237
+ get alignSelf() {
238
+ return this.getAttribute("align-self");
239
+ }
240
+ set alignSelf(e) {
241
+ G(this, "align-self", e);
242
+ }
243
+ get alignSelfMobile() {
244
+ return this.getAttribute("align-self--mobile");
245
+ }
246
+ set alignSelfMobile(e) {
247
+ G(this, "align-self--mobile", e);
248
+ }
249
+ get alignSelfTablet() {
250
+ return this.getAttribute("align-self--tablet");
251
+ }
252
+ set alignSelfTablet(e) {
253
+ G(this, "align-self--tablet", e);
254
+ }
255
+ get alignSelfLaptop() {
256
+ return this.getAttribute("align-self--laptop");
257
+ }
258
+ set alignSelfLaptop(e) {
259
+ G(this, "align-self--laptop", e);
260
+ }
261
+ get alignSelfDesktop() {
262
+ return this.getAttribute("align-self--desktop");
263
+ }
264
+ set alignSelfDesktop(e) {
265
+ G(this, "align-self--desktop", e);
266
+ }
267
+ get justifySelf() {
268
+ return this.getAttribute("justify-self");
269
+ }
270
+ set justifySelf(e) {
271
+ G(this, "justify-self", e);
272
+ }
273
+ get justifySelfMobile() {
274
+ return this.getAttribute("justify-self--mobile");
275
+ }
276
+ set justifySelfMobile(e) {
277
+ G(this, "justify-self--mobile", e);
278
+ }
279
+ get justifySelfTablet() {
280
+ return this.getAttribute("justify-self--tablet");
281
+ }
282
+ set justifySelfTablet(e) {
283
+ G(this, "justify-self--tablet", e);
284
+ }
285
+ get justifySelfLaptop() {
286
+ return this.getAttribute("justify-self--laptop");
287
+ }
288
+ set justifySelfLaptop(e) {
289
+ G(this, "justify-self--laptop", e);
290
+ }
291
+ get justifySelfDesktop() {
292
+ return this.getAttribute("justify-self--desktop");
293
+ }
294
+ set justifySelfDesktop(e) {
295
+ G(this, "justify-self--desktop", e);
296
+ }
297
+ get hiddenMobile() {
298
+ return this.hasAttribute("hidden--mobile");
299
+ }
300
+ set hiddenMobile(e) {
301
+ K(this, "hidden--mobile", e);
302
+ }
303
+ get hiddenTablet() {
304
+ return this.hasAttribute("hidden--tablet");
305
+ }
306
+ set hiddenTablet(e) {
307
+ K(this, "hidden--tablet", e);
308
+ }
309
+ get hiddenLaptop() {
310
+ return this.hasAttribute("hidden--laptop");
311
+ }
312
+ set hiddenLaptop(e) {
313
+ K(this, "hidden--laptop", e);
314
+ }
315
+ get hiddenDesktop() {
316
+ return this.hasAttribute("hidden--desktop");
317
+ }
318
+ set hiddenDesktop(e) {
319
+ K(this, "hidden--desktop", e);
320
+ }
321
+ get colSpan() {
322
+ return this.getAttribute("col-span");
323
+ }
324
+ set colSpan(e) {
325
+ G(this, "col-span", e);
326
+ }
327
+ get colSpanMobile() {
328
+ return this.getAttribute("col-span--mobile");
329
+ }
330
+ set colSpanMobile(e) {
331
+ G(this, "col-span--mobile", e);
332
+ }
333
+ get colSpanTablet() {
334
+ return this.getAttribute("col-span--tablet");
335
+ }
336
+ set colSpanTablet(e) {
337
+ G(this, "col-span--tablet", e);
338
+ }
339
+ get colSpanLaptop() {
340
+ return this.getAttribute("col-span--laptop");
341
+ }
342
+ set colSpanLaptop(e) {
343
+ G(this, "col-span--laptop", e);
344
+ }
345
+ get colSpanDesktop() {
346
+ return this.getAttribute("col-span--desktop");
347
+ }
348
+ set colSpanDesktop(e) {
349
+ G(this, "col-span--desktop", e);
350
+ }
351
+ get order() {
352
+ return this.getAttribute("order");
353
+ }
354
+ set order(e) {
355
+ G(this, "order", e);
356
+ }
357
+ get orderMobile() {
358
+ return this.getAttribute("order--mobile");
359
+ }
360
+ set orderMobile(e) {
361
+ G(this, "order--mobile", e);
362
+ }
363
+ get orderTablet() {
364
+ return this.getAttribute("order--tablet");
365
+ }
366
+ set orderTablet(e) {
367
+ G(this, "order--tablet", e);
368
+ }
369
+ get orderLaptop() {
370
+ return this.getAttribute("order--laptop");
371
+ }
372
+ set orderLaptop(e) {
373
+ G(this, "order--laptop", e);
374
+ }
375
+ get orderDesktop() {
376
+ return this.getAttribute("order--desktop");
377
+ }
378
+ set orderDesktop(e) {
379
+ G(this, "order--desktop", e);
380
+ }
381
+ }, d = class extends u {
382
+ static {
383
+ this.accessorExclusions = [];
384
+ }
385
+ static get observedAttributes() {
386
+ return [...super.observedAttributes, ...n(this.nativeName)];
387
+ }
388
+ attributeChangedCallback(e, t, n) {
389
+ super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
390
+ }
391
+ get ctor() {
392
+ return Object.getPrototypeOf(this).constructor;
393
+ }
394
+ constructor(...e) {
395
+ super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = t(this.ctor.nativeName)), this.enhanceWithNativeProperties();
396
+ }
397
+ enhanceWithNativeProperties() {
398
+ for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
399
+ Object.defineProperty(this, e, {
400
+ get() {
401
+ return this.$el[e];
402
+ },
403
+ set(t) {
404
+ this.$el[e] !== t && (this.$el[e] = t);
405
+ }
406
+ });
407
+ } catch (t) {
408
+ console.warn(`Could not create property ${e} for`, this.$el, t);
409
+ }
410
+ }
411
+ get $el() {
412
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
413
+ }
414
+ _updateAttribute(e, t) {
415
+ G(this, e, t);
416
+ }
417
+ _updateBooleanAttribute(e, t) {
418
+ K(this, e, t);
419
+ }
420
+ }, f = class extends d {
421
+ connectedCallback() {
422
+ this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
423
+ }
424
+ }, p = [
425
+ "",
426
+ "default",
427
+ "none",
428
+ "l"
429
+ ], m = [
430
+ "",
431
+ "default",
432
+ "auto",
433
+ "flex-start",
434
+ "start",
435
+ "flex-end",
436
+ "end",
437
+ "center",
438
+ "baseline",
439
+ "stretch"
440
+ ], h = [
441
+ "",
442
+ "default",
443
+ "start",
444
+ "end",
445
+ "center",
446
+ "stretch"
447
+ ], g = [
448
+ "",
449
+ "default",
450
+ "start",
451
+ "end",
452
+ "center",
453
+ "stretch"
454
+ ], _ = [
455
+ "",
456
+ "1",
457
+ "2",
458
+ "3",
459
+ "4",
460
+ "5",
461
+ "6",
462
+ "7",
463
+ "8",
464
+ "9",
465
+ "10",
466
+ "11",
467
+ "12"
468
+ ], v = [
469
+ "",
470
+ "-1",
471
+ "0",
472
+ "1",
473
+ "2",
474
+ "3",
475
+ "4",
476
+ "5",
477
+ "6",
478
+ "7",
479
+ "8",
480
+ "9",
481
+ "10",
482
+ "11",
483
+ "12"
493
484
  ], 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"
485
+ "",
486
+ "default",
487
+ "auto",
488
+ "start",
489
+ "end",
490
+ "center",
491
+ "stretch"
492
+ ], b = [
493
+ "",
494
+ "default",
495
+ "inherit",
496
+ "body-l",
497
+ "body-m",
498
+ "body-s",
499
+ "body-xs",
500
+ "heading-5xl",
501
+ "heading-4xl",
502
+ "heading-3xl",
503
+ "heading-2xl",
504
+ "heading-xl",
505
+ "heading-l",
506
+ "heading-m",
507
+ "heading-s"
508
+ ], x = [
509
+ "",
510
+ "default",
511
+ "inherit",
512
+ "brand",
513
+ "neutral",
514
+ "dimmed",
515
+ "purpose-success",
516
+ "purpose-warning",
517
+ "purpose-error",
518
+ "purpose-unlimited",
519
+ "purpose-promo",
520
+ "state-hover",
521
+ "state-active",
522
+ "state-disabled"
507
523
  ], 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"
524
+ "",
525
+ "default",
526
+ "inherit",
527
+ "body",
528
+ "title",
529
+ "title-large",
530
+ "subtitle"
531
+ ], C = [
532
+ "Xs",
533
+ "S",
534
+ "M",
535
+ "L",
536
+ "Xl"
537
+ ], w = [
538
+ "",
539
+ "default",
540
+ ...C.map((e) => e.toLowerCase())
541
+ ], T = [
542
+ "",
543
+ "default",
544
+ "left",
545
+ "center",
546
+ "right"
609
547
  ], 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"
548
+ "",
549
+ "none",
550
+ "3xs",
551
+ "2xs",
552
+ "xs",
553
+ "s",
554
+ "m",
555
+ "l",
556
+ "xl"
557
+ ], D = [
558
+ "",
559
+ "none",
560
+ "s",
561
+ "m",
562
+ "l"
563
+ ], O = [
564
+ "",
565
+ "none",
566
+ "main",
567
+ "pill"
568
+ ], k = [
569
+ "none",
570
+ "main",
571
+ "brand",
572
+ "state-hover",
573
+ "state-active",
574
+ "neutral",
575
+ "purpose-success",
576
+ "purpose-warning",
577
+ "purpose-error",
578
+ "purpose-unlimited"
579
+ ], A = [
580
+ "",
581
+ "all",
582
+ "top",
583
+ "right",
584
+ "bottom",
585
+ "left",
586
+ "block",
587
+ "inline"
588
+ ], 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 = [
589
+ "",
590
+ "cover",
591
+ "contain",
592
+ "default"
593
+ ], N = [
594
+ "",
595
+ "none",
596
+ "s",
597
+ "m",
598
+ "l",
599
+ "xl"
600
+ ], P = [
601
+ "",
602
+ "default",
603
+ "title-4xl",
604
+ "title-3xl",
605
+ "title-2xl",
606
+ "title-xl",
607
+ "title-l",
608
+ "title-m",
609
+ "title-s",
610
+ "subtitle"
611
+ ], 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 = [
612
+ "none",
613
+ "2xs",
614
+ "xs",
615
+ "s",
616
+ "default",
617
+ "l",
618
+ "heading-to-subtitle",
619
+ "heading-to-content",
620
+ "page-layout-between-sections"
621
+ ], L = [
622
+ "",
623
+ "all",
624
+ "top",
625
+ "right",
626
+ "bottom",
627
+ "left"
628
+ ], R = [
629
+ "",
630
+ "default",
631
+ "xs",
632
+ "s",
633
+ "m",
634
+ "l",
635
+ "xl"
732
636
  ];
733
- function F(i) {
734
- const t = document.createElement("style");
735
- t.innerHTML = i, document.head.appendChild(t);
637
+ function z(e) {
638
+ let t = document.createElement("style");
639
+ t.innerHTML = e, document.head.appendChild(t);
736
640
  }
737
- function U(i) {
738
- return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
641
+ function B(e) {
642
+ return typeof e == "string" && (e === "false" || e === "0" || e === "null") || typeof e == "boolean" && !e;
739
643
  }
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";
644
+ function V() {
645
+ return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
742
646
  }
743
- function K(i, t) {
744
- return i.includes(t);
647
+ function H(e, t) {
648
+ return t !== null && e.includes(t);
745
649
  }
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
- }
650
+ 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(".");
651
+ function W(e, t, n = !1) {
652
+ if (U.forEach((n) => {
653
+ e.getAttribute(n) && (t.setAttribute(n, e.getAttribute(n)), e.removeAttribute(n));
654
+ }), n && !e.getAttribute("aria-labelledby")) {
655
+ let n = `px-${t.localName?.toLowerCase() ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
656
+ t.setAttribute("id", n), e.setAttribute("aria-labelledby", n);
657
+ }
658
+ }
659
+ function G(e, t, n) {
660
+ n == null || n === "" ? e.removeAttribute(t) : e.setAttribute(t, n.toString());
661
+ }
662
+ function K(e, t, n) {
663
+ n ? e.setAttribute(t, "") : e.removeAttribute(t);
788
664
  }
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)` : ""}
665
+ //#endregion
666
+ //#region src/breakpoints.ts
667
+ function q(e, t, n, r = "", i, a = e) {
668
+ let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
669
+ ${t(a, o)} {
670
+ ${e}: var(--${r}-${o}-desktop);
671
+ ${i ? `${i}:var(--${r}-${o}-desktop)` : ""}
795
672
  }
796
673
  /* 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)` : ""}
674
+ @media only screen and (max-width: 47.938rem) {
675
+ ${t(a, o)} {
676
+ ${e}: var(--${r}-${o}-mobile);
677
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
801
678
  }
802
679
  }
803
- ${t(i, r, "mobile")} {
680
+ ${t(a, o, "mobile")} {
804
681
  /* 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)` : ""}
682
+ @media only screen and (max-width: 47.938rem) {
683
+ ${e}: var(--${r}-${o}-mobile) !important;
684
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
808
685
  }
809
686
  }
810
- ${t(i, r, "tablet")} {
687
+ ${t(a, o, "tablet")} {
811
688
  /* 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)` : ""}
689
+ @media only screen and (min-width: 48rem) and (max-width: 64rem) {
690
+ ${e}: var(--${r}-${o}-desktop) !important;
691
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
815
692
  }
816
693
  }
817
- ${t(i, r, "laptop")} {
694
+ ${t(a, o, "laptop")} {
818
695
  /* 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)` : ""}
696
+ @media only screen and (min-width: 64.0625rem) {
697
+ ${e}: var(--${r}-${o}-desktop) !important;
698
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
822
699
  }
823
700
  }
824
- ${t(i, r, "desktop")} {
701
+ ${t(a, o, "desktop")} {
825
702
  /* 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)` : ""}
703
+ @media only screen and (min-width: 64.0625rem) {
704
+ ${e}: var(--${r}-${o}-desktop) !important;
705
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
829
706
  }
830
- }`,
831
- ""
832
- );
833
- return a.replaceSync(l), a;
707
+ }`, "");
708
+ return o.replaceSync(s), o;
834
709
  }
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
- }
710
+ var J = class {
711
+ constructor(e, t, n, r) {
712
+ 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), {
713
+ get: () => this.component.getAttribute(this.attributeName),
714
+ set: (e) => {
715
+ this.component.setAttribute(this.attributeName, e);
716
+ }
717
+ });
718
+ }
719
+ toCamelCase(e) {
720
+ return e.replace(/[-_]+(.)?/g, (e, t) => t ? t.toUpperCase() : "");
721
+ }
722
+ init(e) {
723
+ this.setCSSProperty(this.attributeName, e), this.setCSSProperties();
724
+ }
725
+ attributeChangedCallback(e, t, n) {
726
+ if (t !== n) switch (!0) {
727
+ case e === this.attributeName:
728
+ case e === `${this.attributeName}--mobile`:
729
+ case e === `${this.attributeName}--tablet`:
730
+ case e === `${this.attributeName}--laptop`:
731
+ case e === `${this.attributeName}--desktop`:
732
+ this.setCSSProperty(e, n);
733
+ break;
734
+ default: return;
735
+ }
736
+ }
737
+ setCSSProperty(e, t, n = !0) {
738
+ let [, r = ""] = e.split("--");
739
+ this.component.style.setProperty(`${this.cssVariable}${n ? "-all" : ""}${r ? `-${r}` : ""}`, `${this._attributeValue(t, r)}`);
740
+ }
741
+ setCSSProperties() {
742
+ let e = this.component.getAttribute(this.attributeName);
743
+ 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));
744
+ let t = this.component.getAttribute(this.attributeNameMobile);
745
+ t && this.setCSSProperty(this.attributeNameMobile, t, !1);
746
+ let n = this.component.getAttribute(this.attributeNameTablet);
747
+ n && this.setCSSProperty(this.attributeNameTablet, n, !1);
748
+ let r = this.component.getAttribute(this.attributeNameLaptop);
749
+ r && this.setCSSProperty(this.attributeNameLaptop, r, !1);
750
+ let i = this.component.getAttribute(this.attributeNameDesktop);
751
+ i && this.setCSSProperty(this.attributeNameDesktop, i, !1);
752
+ }
753
+ set attributeValue(e) {
754
+ this._attributeValue = e, this.setCSSProperties();
755
+ }
756
+ }, Y = /* @__PURE__ */ new Map(), X = 500;
757
+ function Z(e) {
758
+ let t = document.createElement("template");
759
+ return t.innerHTML = e, t;
914
760
  }
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
956
- };
761
+ function Q(e) {
762
+ return Z(e);
763
+ }
764
+ function $(e) {
765
+ let t = Y.get(e);
766
+ return t || (t = Z(e), Y.size < X && Y.set(e, t)), t;
767
+ }
768
+ function ee(e, t) {
769
+ let n = typeof t == "string" ? $(t) : t;
770
+ e.replaceChildren(document.importNode(n.content, !0));
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, Q as createTemplate, 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, $ as getTemplate, 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, ee as renderTemplate, T as textalignValues, W as transferAccessibilityAttributes };