@proximus/lavender-list 1.4.14-beta.2 → 1.4.14-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/List.d.ts +12 -12
  2. package/dist/index.es.js +635 -739
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,768 +1,664 @@
1
- var $ = (o) => {
2
- throw TypeError(o);
3
- };
4
- var O = (o, t, e) => t.has(o) || $("Cannot " + e);
5
- var S = (o, t, e) => t.has(o) ? $("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e);
6
- var p = (o, t, e) => (O(o, t, "access private method"), e);
7
- const N = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", _ = ":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%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host([word-break-all]){word-break:break-all}@media screen and (max-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%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}:host([word-break-all--mobile]){word-break:break-all!important}@media screen and (min-width: 48rem) and (max-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%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}:host([word-break-all--tablet]){word-break:break-all!important}@media screen and (min-width: 64.0625rem){: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}: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 (min-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}}", x = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
8
- function B(o) {
9
- const t = document.createElement(o), e = Object.getPrototypeOf(t);
10
- return Object.getOwnPropertyNames(e);
11
- }
12
- function G(o) {
13
- const t = document.createElement(o), e = Object.getPrototypeOf(t);
14
- return Object.getOwnPropertyNames(e).map(
15
- (s) => s.toLowerCase()
16
- );
1
+ //#region src/list.css?inline
2
+ var e = ".list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}", t = "@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 ../common/src/common.ts
5
+ function n(e) {
6
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
7
+ return Object.getOwnPropertyNames(n);
17
8
  }
18
- const C = new CSSStyleSheet();
19
- C.replaceSync(_);
20
- const h = typeof import.meta < "u" && typeof x < "u" ? x : void 0, P = (h == null ? void 0 : h.VITE_COMPONENT_DEBUG) === "true" || (h == null ? void 0 : h.DEV) === !0;
21
- typeof window < "u" && (window.isComponentDebug = k);
22
- function k() {
23
- return P;
9
+ function r(e) {
10
+ let t = document.createElement(e), n = Object.getPrototypeOf(t);
11
+ return Object.getOwnPropertyNames(n).map((e) => e.toLowerCase());
24
12
  }
25
- function T(o) {
26
- k() && console.error(o);
13
+ var i = new CSSStyleSheet();
14
+ i.replaceSync(t);
15
+ var a = {
16
+ BASE_URL: "/",
17
+ DEV: !0,
18
+ MODE: "production",
19
+ PROD: !1,
20
+ SSR: !1,
21
+ VITE_COMPONENT_DEBUG: "true"
22
+ }, o = a?.VITE_COMPONENT_DEBUG === "true" || a?.DEV === !0;
23
+ typeof window < "u" && (window.isComponentDebug = s);
24
+ function s() {
25
+ return o;
27
26
  }
28
- typeof window < "u" && (window.isComponentDebug = k);
29
- class v extends HTMLElement {
30
- static get observedAttributes() {
31
- return [
32
- "grow",
33
- "grow--mobile",
34
- "grow--tablet",
35
- "grow--laptop",
36
- "grow--desktop",
37
- "shrink",
38
- "shrink--mobile",
39
- "shrink--tablet",
40
- "shrink--laptop",
41
- "shrink--desktop",
42
- "basis",
43
- "basis--mobile",
44
- "basis--tablet",
45
- "basis--laptop",
46
- "basis--desktop",
47
- "align-self",
48
- "align-self--mobile",
49
- "align-self--tablet",
50
- "align-self--laptop",
51
- "align-self--desktop",
52
- "justify-self",
53
- "justify-self--mobile",
54
- "justify-self--tablet",
55
- "justify-self--laptop",
56
- "justify-self--desktop",
57
- "hidden",
58
- "hidden--mobile",
59
- "hidden--tablet",
60
- "hidden--laptop",
61
- "hidden--desktop",
62
- "shown--sr",
63
- "shown--sr--mobile",
64
- "shown--sr--tablet",
65
- "shown--sr--laptop",
66
- "shown--sr--desktop",
67
- "col-span",
68
- "col-span--mobile",
69
- "col-span--tablet",
70
- "col-span--laptop",
71
- "col-span--desktop",
72
- "order",
73
- "order--mobile",
74
- "order--tablet",
75
- "order--laptop",
76
- "order--desktop",
77
- "sticky-top",
78
- "sticky-bottom",
79
- "word-break-all",
80
- "word-break-all--mobile",
81
- "word-break-all--tablet",
82
- "word-break-all--laptop",
83
- "word-break-all--desktop"
84
- ];
85
- }
86
- constructor(...t) {
87
- super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
88
- C,
89
- ...t
90
- ];
91
- }
92
- attributeChangedCallback(t, e, s) {
93
- var i;
94
- if (v.observedAttributes.indexOf(t) !== -1)
95
- switch (t) {
96
- case "grow":
97
- case "grow--mobile":
98
- case "grow--tablet":
99
- case "grow--laptop":
100
- case "grow--desktop":
101
- case "shrink":
102
- case "shrink--mobile":
103
- case "shrink--tablet":
104
- case "shrink--laptop":
105
- case "shrink--desktop":
106
- case "basis":
107
- case "basis--mobile":
108
- case "basis--tablet":
109
- case "basis--laptop":
110
- case "basis--desktop":
111
- this.style.setProperty(`--${t}-value`, s);
112
- break;
113
- case "align-self":
114
- case "align-self--mobile":
115
- case "align-self--tablet":
116
- case "align-self--laptop":
117
- case "align-self--desktop":
118
- this.updateProperties(
119
- t,
120
- e,
121
- s,
122
- ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? q : R
123
- );
124
- break;
125
- case "justify-self":
126
- case "justify-self--mobile":
127
- case "justify-self--tablet":
128
- case "justify-self--laptop":
129
- case "justify-self--desktop":
130
- this.updateProperties(
131
- t,
132
- e,
133
- s,
134
- H
135
- );
136
- break;
137
- case "col-span":
138
- case "col-span--mobile":
139
- case "col-span--tablet":
140
- case "col-span--laptop":
141
- case "col-span--desktop":
142
- this.updateProperties(t, e, s, U);
143
- break;
144
- case "order":
145
- case "order--mobile":
146
- case "order--tablet":
147
- case "order--laptop":
148
- case "order--desktop":
149
- this.updateProperties(t, e, s, X);
150
- break;
151
- }
152
- }
153
- updateProperties(t, e, s, i) {
154
- i && (this.checkName(i, s) || T(
155
- `"${s}" is not an allowed ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
156
- ));
157
- const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
158
- if (!l)
159
- this.style.setProperty(
160
- `--${n}-value`,
161
- e
162
- ), this.style.setProperty(
163
- `--${n}-value`,
164
- s
165
- );
166
- else {
167
- const d = t.split("--")[1];
168
- this.style.setProperty(
169
- `--${n}--${d}-value`,
170
- e
171
- ), this.style.setProperty(
172
- `--${n}--${d}-value`,
173
- s
174
- );
175
- }
176
- }
177
- updateStyle(t, e, s) {
178
- s !== null && s !== "" && s !== "default" && this.style.setProperty(
179
- `--${t}--${e}-value`,
180
- s
181
- );
182
- }
183
- checkName(t, e) {
184
- return t.includes(e);
185
- }
186
- get $el() {
187
- return this;
188
- }
189
- get $parentElementName() {
190
- var t;
191
- return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
192
- }
193
- get isInsideGridOrStack() {
194
- let t = this.parentElement;
195
- for (; t; ) {
196
- if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
197
- return !0;
198
- if (window.getComputedStyle(t).display === "contents") {
199
- t = t.parentElement;
200
- continue;
201
- }
202
- break;
203
- }
204
- return !1;
205
- }
206
- get grow() {
207
- return this.getAttribute("grow");
208
- }
209
- set grow(t) {
210
- this.setAttribute("grow", t);
211
- }
212
- get growMobile() {
213
- return this.getAttribute("grow--mobile");
214
- }
215
- set growMobile(t) {
216
- this.setAttribute("grow--mobile", t);
217
- }
218
- get growTablet() {
219
- return this.getAttribute("grow--tablet");
220
- }
221
- set growTablet(t) {
222
- this.setAttribute("grow--tablet", t);
223
- }
224
- get growLaptop() {
225
- return this.getAttribute("grow--laptop");
226
- }
227
- set growLaptop(t) {
228
- this.setAttribute("grow--laptop", t);
229
- }
230
- get growDesktop() {
231
- return this.getAttribute("grow--desktop");
232
- }
233
- set growDesktop(t) {
234
- this.setAttribute("grow--desktop", t);
235
- }
236
- get shrink() {
237
- return this.getAttribute("shrink");
238
- }
239
- set shrink(t) {
240
- this.setAttribute("shrink", t);
241
- }
242
- get shrinkMobile() {
243
- return this.getAttribute("shrink--mobile");
244
- }
245
- set shrinkMobile(t) {
246
- this.setAttribute("shrink--mobile", t);
247
- }
248
- get shrinkTablet() {
249
- return this.getAttribute("shrink--tablet");
250
- }
251
- set shrinkTablet(t) {
252
- this.setAttribute("shrink--tablet", t);
253
- }
254
- get shrinkLaptop() {
255
- return this.getAttribute("shrink--laptop");
256
- }
257
- set shrinkLaptop(t) {
258
- this.setAttribute("shrink--laptop", t);
259
- }
260
- get shrinkDesktop() {
261
- return this.getAttribute("shrink--desktop");
262
- }
263
- set shrinkDesktop(t) {
264
- this.setAttribute("shrink--desktop", t);
265
- }
266
- get basis() {
267
- return this.getAttribute("basis");
268
- }
269
- set basis(t) {
270
- this.setAttribute("basis", t);
271
- }
272
- get basisMobile() {
273
- return this.getAttribute("basis--mobile");
274
- }
275
- set basisMobile(t) {
276
- this.setAttribute("basis--mobile", t);
277
- }
278
- get basisTablet() {
279
- return this.getAttribute("basis--tablet");
280
- }
281
- set basisTablet(t) {
282
- this.setAttribute("basis--tablet", t);
283
- }
284
- get basisLaptop() {
285
- return this.getAttribute("basis--laptop");
286
- }
287
- set basisLaptop(t) {
288
- this.setAttribute("basis--laptop", t);
289
- }
290
- get basisDesktop() {
291
- return this.getAttribute("basis--desktop");
292
- }
293
- set basisDesktop(t) {
294
- this.setAttribute("basis--desktop", t);
295
- }
296
- get alignSelf() {
297
- return this.getAttribute("align-self");
298
- }
299
- set alignSelf(t) {
300
- this.setAttribute("align-self", t);
301
- }
302
- get alignSelfMobile() {
303
- return this.getAttribute("align-self--mobile");
304
- }
305
- set alignSelfMobile(t) {
306
- this.setAttribute("align-self--mobile", t);
307
- }
308
- get alignSelfTablet() {
309
- return this.getAttribute("align-self--tablet");
310
- }
311
- set alignSelfTablet(t) {
312
- this.setAttribute("align-self--tablet", t);
313
- }
314
- get alignSelfLaptop() {
315
- return this.getAttribute("align-self--laptop");
316
- }
317
- set alignSelfLaptop(t) {
318
- this.setAttribute("align-self--laptop", t);
319
- }
320
- get alignSelfDesktop() {
321
- return this.getAttribute("align-self--desktop");
322
- }
323
- set alignSelfDesktop(t) {
324
- this.setAttribute("align-self--desktop", t);
325
- }
326
- get justifySelf() {
327
- return this.getAttribute("justify-self");
328
- }
329
- set justifySelf(t) {
330
- this.setAttribute("justify-self", t);
331
- }
332
- get justifySelfMobile() {
333
- return this.getAttribute("justify-self--mobile");
334
- }
335
- set justifySelfMobile(t) {
336
- this.setAttribute("justify-self--mobile", t);
337
- }
338
- get justifySelfTablet() {
339
- return this.getAttribute("justify-self--tablet");
340
- }
341
- set justifySelfTablet(t) {
342
- this.setAttribute("justify-self--tablet", t);
343
- }
344
- get justifySelfLaptop() {
345
- return this.getAttribute("justify-self--laptop");
346
- }
347
- set justifySelfLaptop(t) {
348
- this.setAttribute("justify-self--laptop", t);
349
- }
350
- get justifySelfDesktop() {
351
- return this.getAttribute("justify-self--desktop");
352
- }
353
- set justifySelfDesktop(t) {
354
- this.setAttribute("justify-self--desktop", t);
355
- }
356
- get hiddenMobile() {
357
- return this.getAttribute("hidden--mobile");
358
- }
359
- set hiddenMobile(t) {
360
- this.setAttribute("hidden--mobile", t);
361
- }
362
- get hiddenTablet() {
363
- return this.getAttribute("hidden--tablet");
364
- }
365
- set hiddenTablet(t) {
366
- this.setAttribute("hidden--tablet", t);
367
- }
368
- get hiddenLaptop() {
369
- return this.getAttribute("hidden--laptop");
370
- }
371
- set hiddenLaptop(t) {
372
- this.setAttribute("hidden--laptop", t);
373
- }
374
- get hiddenDesktop() {
375
- return this.getAttribute("hidden--desktop");
376
- }
377
- set hiddenDesktop(t) {
378
- this.setAttribute("hidden--desktop", t);
379
- }
380
- get colSpan() {
381
- return this.getAttribute("col-span");
382
- }
383
- set colSpan(t) {
384
- this.setAttribute("col-span", t);
385
- }
386
- get colSpanMobile() {
387
- return this.getAttribute("col-span--mobile");
388
- }
389
- set colSpanMobile(t) {
390
- this.setAttribute("col-span--mobile", t);
391
- }
392
- get colSpanTablet() {
393
- return this.getAttribute("col-span--tablet");
394
- }
395
- set colSpanTablet(t) {
396
- this.setAttribute("col-span--tablet", t);
397
- }
398
- get colSpanLaptop() {
399
- return this.getAttribute("col-span--laptop");
400
- }
401
- set colSpanLaptop(t) {
402
- this.setAttribute("col-span--laptop", t);
403
- }
404
- get colSpanDesktop() {
405
- return this.getAttribute("col-span--desktop");
406
- }
407
- set colSpanDesktop(t) {
408
- this.setAttribute("col-span--desktop", t);
409
- }
410
- get order() {
411
- return this.getAttribute("order");
412
- }
413
- set order(t) {
414
- this.setAttribute("order", t);
415
- }
416
- get orderMobile() {
417
- return this.getAttribute("order--mobile");
418
- }
419
- set orderMobile(t) {
420
- this.setAttribute("order--mobile", t);
421
- }
422
- get orderTablet() {
423
- return this.getAttribute("order--tablet");
424
- }
425
- set orderTablet(t) {
426
- this.setAttribute("order--tablet", t);
427
- }
428
- get orderLaptop() {
429
- return this.getAttribute("order--laptop");
430
- }
431
- set orderLaptop(t) {
432
- this.setAttribute("order--laptop", t);
433
- }
434
- get orderDesktop() {
435
- return this.getAttribute("order--desktop");
436
- }
437
- set orderDesktop(t) {
438
- this.setAttribute("order--desktop", t);
439
- }
27
+ function c(e) {
28
+ s() && console.error(e);
440
29
  }
441
- const A = class A extends v {
442
- // nativeName: string;
443
- static get observedAttributes() {
444
- return [
445
- ...super.observedAttributes,
446
- ...G(this.nativeName)
447
- ];
448
- }
449
- attributeChangedCallback(t, e, s) {
450
- super.attributeChangedCallback(t, e, s), s === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, s);
451
- }
452
- get ctor() {
453
- return Object.getPrototypeOf(this).constructor;
454
- }
455
- constructor(...t) {
456
- super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = B(
457
- this.ctor.nativeName
458
- )), this.enhanceWithNativeProperties();
459
- }
460
- enhanceWithNativeProperties() {
461
- var t;
462
- for (const e of this.ctor.supportedPropertyNames)
463
- if (!(e === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(e)))
464
- try {
465
- Object.defineProperty(this, e, {
466
- get() {
467
- return this.$el[e];
468
- },
469
- set(s) {
470
- this.$el[e] !== s && (this.$el[e] = s);
471
- }
472
- });
473
- } catch (s) {
474
- console.warn(`Could not create property ${e} for`, this.$el, s);
475
- }
476
- }
477
- get $el() {
478
- return this.shadowRoot.querySelector(this.ctor.nativeName);
479
- }
480
- _updateAttribute(t, e) {
481
- e ? this.setAttribute(t, e) : this.removeAttribute(t);
482
- }
483
- _updateBooleanAttribute(t, e) {
484
- e ? this.setAttribute(t, "") : this.removeAttribute(t);
485
- }
486
- };
487
- A.accessorExclusions = [];
488
- let b = A;
489
- const R = [
490
- "",
491
- "default",
492
- "auto",
493
- "flex-start",
494
- "start",
495
- "flex-end",
496
- "end",
497
- "center",
498
- "baseline",
499
- "stretch"
500
- ], q = [
501
- "",
502
- "default",
503
- "start",
504
- "end",
505
- "center",
506
- "stretch"
507
- ], H = [
508
- "",
509
- "default",
510
- "start",
511
- "end",
512
- "center",
513
- "stretch"
514
- ], U = [
515
- "",
516
- "1",
517
- "2",
518
- "3",
519
- "4",
520
- "5",
521
- "6",
522
- "7",
523
- "8",
524
- "9",
525
- "10",
526
- "11",
527
- "12"
528
- ], X = [
529
- "",
530
- "-1",
531
- "0",
532
- "1",
533
- "2",
534
- "3",
535
- "4",
536
- "5",
537
- "6",
538
- "7",
539
- "8",
540
- "9",
541
- "10",
542
- "11",
543
- "12"
544
- ], z = ["Xs", "S", "M", "L", "Xl"];
545
- [
546
- ...z.map((o) => o.toLowerCase())
30
+ typeof window < "u" && (window.isComponentDebug = s);
31
+ var l = class e extends HTMLElement {
32
+ static get observedAttributes() {
33
+ 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(".");
34
+ }
35
+ constructor(...e) {
36
+ super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [i, ...e];
37
+ }
38
+ attributeChangedCallback(t, n, r) {
39
+ if (e.observedAttributes.indexOf(t) !== -1) switch (t) {
40
+ case "grow":
41
+ case "grow--mobile":
42
+ case "grow--tablet":
43
+ case "grow--laptop":
44
+ case "grow--desktop":
45
+ case "shrink":
46
+ case "shrink--mobile":
47
+ case "shrink--tablet":
48
+ case "shrink--laptop":
49
+ case "shrink--desktop":
50
+ case "basis":
51
+ case "basis--mobile":
52
+ case "basis--tablet":
53
+ case "basis--laptop":
54
+ case "basis--desktop":
55
+ this.style.setProperty(`--${t}-value`, r);
56
+ break;
57
+ case "align-self":
58
+ case "align-self--mobile":
59
+ case "align-self--tablet":
60
+ case "align-self--laptop":
61
+ case "align-self--desktop":
62
+ this.updateProperties(t, n, r, this.parentElement?.localName === "px-grid" ? f : d);
63
+ break;
64
+ case "justify-self":
65
+ case "justify-self--mobile":
66
+ case "justify-self--tablet":
67
+ case "justify-self--laptop":
68
+ case "justify-self--desktop":
69
+ this.updateProperties(t, n, r, p);
70
+ break;
71
+ case "col-span":
72
+ case "col-span--mobile":
73
+ case "col-span--tablet":
74
+ case "col-span--laptop":
75
+ case "col-span--desktop":
76
+ this.updateProperties(t, n, r, m);
77
+ break;
78
+ case "order":
79
+ case "order--mobile":
80
+ case "order--tablet":
81
+ case "order--laptop":
82
+ case "order--desktop": this.updateProperties(t, n, r, h);
83
+ }
84
+ }
85
+ updateProperties(e, t, n, r) {
86
+ r && (this.checkName(r, n) || c(`"${n}" is not an allowed ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${r.join("\", \"")}".`));
87
+ let i = e.indexOf("--") > -1, a = i ? e.split("--")[0] : e;
88
+ if (!i) this.style.setProperty(`--${a}-value`, t), this.style.setProperty(`--${a}-value`, n);
89
+ else {
90
+ let r = e.split("--")[1];
91
+ this.style.setProperty(`--${a}--${r}-value`, t), this.style.setProperty(`--${a}--${r}-value`, n);
92
+ }
93
+ }
94
+ updateStyle(e, t, n) {
95
+ n !== null && n !== "" && n !== "default" && this.style.setProperty(`--${e}--${t}-value`, n);
96
+ }
97
+ checkName(e, t) {
98
+ return e.includes(t);
99
+ }
100
+ get $el() {
101
+ return this;
102
+ }
103
+ get $parentElementName() {
104
+ return this.parentElement?.tagName.toLowerCase();
105
+ }
106
+ get isInsideGridOrStack() {
107
+ let e = this.parentElement;
108
+ for (; e;) {
109
+ if (e.localName === "px-grid" || e.localName === "px-stack" && e?.getAttribute("direction") === "row") return !0;
110
+ if (window.getComputedStyle(e).display === "contents") {
111
+ e = e.parentElement;
112
+ continue;
113
+ }
114
+ break;
115
+ }
116
+ return !1;
117
+ }
118
+ get grow() {
119
+ return this.getAttribute("grow");
120
+ }
121
+ set grow(e) {
122
+ _(this, "grow", e);
123
+ }
124
+ get growMobile() {
125
+ return this.getAttribute("grow--mobile");
126
+ }
127
+ set growMobile(e) {
128
+ _(this, "grow--mobile", e);
129
+ }
130
+ get growTablet() {
131
+ return this.getAttribute("grow--tablet");
132
+ }
133
+ set growTablet(e) {
134
+ _(this, "grow--tablet", e);
135
+ }
136
+ get growLaptop() {
137
+ return this.getAttribute("grow--laptop");
138
+ }
139
+ set growLaptop(e) {
140
+ _(this, "grow--laptop", e);
141
+ }
142
+ get growDesktop() {
143
+ return this.getAttribute("grow--desktop");
144
+ }
145
+ set growDesktop(e) {
146
+ _(this, "grow--desktop", e);
147
+ }
148
+ get shrink() {
149
+ return this.getAttribute("shrink");
150
+ }
151
+ set shrink(e) {
152
+ _(this, "shrink", e);
153
+ }
154
+ get shrinkMobile() {
155
+ return this.getAttribute("shrink--mobile");
156
+ }
157
+ set shrinkMobile(e) {
158
+ _(this, "shrink--mobile", e);
159
+ }
160
+ get shrinkTablet() {
161
+ return this.getAttribute("shrink--tablet");
162
+ }
163
+ set shrinkTablet(e) {
164
+ _(this, "shrink--tablet", e);
165
+ }
166
+ get shrinkLaptop() {
167
+ return this.getAttribute("shrink--laptop");
168
+ }
169
+ set shrinkLaptop(e) {
170
+ _(this, "shrink--laptop", e);
171
+ }
172
+ get shrinkDesktop() {
173
+ return this.getAttribute("shrink--desktop");
174
+ }
175
+ set shrinkDesktop(e) {
176
+ _(this, "shrink--desktop", e);
177
+ }
178
+ get basis() {
179
+ return this.getAttribute("basis");
180
+ }
181
+ set basis(e) {
182
+ _(this, "basis", e);
183
+ }
184
+ get basisMobile() {
185
+ return this.getAttribute("basis--mobile");
186
+ }
187
+ set basisMobile(e) {
188
+ _(this, "basis--mobile", e);
189
+ }
190
+ get basisTablet() {
191
+ return this.getAttribute("basis--tablet");
192
+ }
193
+ set basisTablet(e) {
194
+ _(this, "basis--tablet", e);
195
+ }
196
+ get basisLaptop() {
197
+ return this.getAttribute("basis--laptop");
198
+ }
199
+ set basisLaptop(e) {
200
+ _(this, "basis--laptop", e);
201
+ }
202
+ get basisDesktop() {
203
+ return this.getAttribute("basis--desktop");
204
+ }
205
+ set basisDesktop(e) {
206
+ _(this, "basis--desktop", e);
207
+ }
208
+ get alignSelf() {
209
+ return this.getAttribute("align-self");
210
+ }
211
+ set alignSelf(e) {
212
+ _(this, "align-self", e);
213
+ }
214
+ get alignSelfMobile() {
215
+ return this.getAttribute("align-self--mobile");
216
+ }
217
+ set alignSelfMobile(e) {
218
+ _(this, "align-self--mobile", e);
219
+ }
220
+ get alignSelfTablet() {
221
+ return this.getAttribute("align-self--tablet");
222
+ }
223
+ set alignSelfTablet(e) {
224
+ _(this, "align-self--tablet", e);
225
+ }
226
+ get alignSelfLaptop() {
227
+ return this.getAttribute("align-self--laptop");
228
+ }
229
+ set alignSelfLaptop(e) {
230
+ _(this, "align-self--laptop", e);
231
+ }
232
+ get alignSelfDesktop() {
233
+ return this.getAttribute("align-self--desktop");
234
+ }
235
+ set alignSelfDesktop(e) {
236
+ _(this, "align-self--desktop", e);
237
+ }
238
+ get justifySelf() {
239
+ return this.getAttribute("justify-self");
240
+ }
241
+ set justifySelf(e) {
242
+ _(this, "justify-self", e);
243
+ }
244
+ get justifySelfMobile() {
245
+ return this.getAttribute("justify-self--mobile");
246
+ }
247
+ set justifySelfMobile(e) {
248
+ _(this, "justify-self--mobile", e);
249
+ }
250
+ get justifySelfTablet() {
251
+ return this.getAttribute("justify-self--tablet");
252
+ }
253
+ set justifySelfTablet(e) {
254
+ _(this, "justify-self--tablet", e);
255
+ }
256
+ get justifySelfLaptop() {
257
+ return this.getAttribute("justify-self--laptop");
258
+ }
259
+ set justifySelfLaptop(e) {
260
+ _(this, "justify-self--laptop", e);
261
+ }
262
+ get justifySelfDesktop() {
263
+ return this.getAttribute("justify-self--desktop");
264
+ }
265
+ set justifySelfDesktop(e) {
266
+ _(this, "justify-self--desktop", e);
267
+ }
268
+ get hiddenMobile() {
269
+ return this.hasAttribute("hidden--mobile");
270
+ }
271
+ set hiddenMobile(e) {
272
+ v(this, "hidden--mobile", e);
273
+ }
274
+ get hiddenTablet() {
275
+ return this.hasAttribute("hidden--tablet");
276
+ }
277
+ set hiddenTablet(e) {
278
+ v(this, "hidden--tablet", e);
279
+ }
280
+ get hiddenLaptop() {
281
+ return this.hasAttribute("hidden--laptop");
282
+ }
283
+ set hiddenLaptop(e) {
284
+ v(this, "hidden--laptop", e);
285
+ }
286
+ get hiddenDesktop() {
287
+ return this.hasAttribute("hidden--desktop");
288
+ }
289
+ set hiddenDesktop(e) {
290
+ v(this, "hidden--desktop", e);
291
+ }
292
+ get colSpan() {
293
+ return this.getAttribute("col-span");
294
+ }
295
+ set colSpan(e) {
296
+ _(this, "col-span", e);
297
+ }
298
+ get colSpanMobile() {
299
+ return this.getAttribute("col-span--mobile");
300
+ }
301
+ set colSpanMobile(e) {
302
+ _(this, "col-span--mobile", e);
303
+ }
304
+ get colSpanTablet() {
305
+ return this.getAttribute("col-span--tablet");
306
+ }
307
+ set colSpanTablet(e) {
308
+ _(this, "col-span--tablet", e);
309
+ }
310
+ get colSpanLaptop() {
311
+ return this.getAttribute("col-span--laptop");
312
+ }
313
+ set colSpanLaptop(e) {
314
+ _(this, "col-span--laptop", e);
315
+ }
316
+ get colSpanDesktop() {
317
+ return this.getAttribute("col-span--desktop");
318
+ }
319
+ set colSpanDesktop(e) {
320
+ _(this, "col-span--desktop", e);
321
+ }
322
+ get order() {
323
+ return this.getAttribute("order");
324
+ }
325
+ set order(e) {
326
+ _(this, "order", e);
327
+ }
328
+ get orderMobile() {
329
+ return this.getAttribute("order--mobile");
330
+ }
331
+ set orderMobile(e) {
332
+ _(this, "order--mobile", e);
333
+ }
334
+ get orderTablet() {
335
+ return this.getAttribute("order--tablet");
336
+ }
337
+ set orderTablet(e) {
338
+ _(this, "order--tablet", e);
339
+ }
340
+ get orderLaptop() {
341
+ return this.getAttribute("order--laptop");
342
+ }
343
+ set orderLaptop(e) {
344
+ _(this, "order--laptop", e);
345
+ }
346
+ get orderDesktop() {
347
+ return this.getAttribute("order--desktop");
348
+ }
349
+ set orderDesktop(e) {
350
+ _(this, "order--desktop", e);
351
+ }
352
+ }, u = class extends l {
353
+ static {
354
+ this.accessorExclusions = [];
355
+ }
356
+ static get observedAttributes() {
357
+ return [...super.observedAttributes, ...r(this.nativeName)];
358
+ }
359
+ attributeChangedCallback(e, t, n) {
360
+ super.attributeChangedCallback(e, t, n), n === null ? this.$el.toggleAttribute(e) : this.$el.setAttribute(e, n);
361
+ }
362
+ get ctor() {
363
+ return Object.getPrototypeOf(this).constructor;
364
+ }
365
+ constructor(...e) {
366
+ super(...e), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = n(this.ctor.nativeName)), this.enhanceWithNativeProperties();
367
+ }
368
+ enhanceWithNativeProperties() {
369
+ for (let e of this.ctor.supportedPropertyNames) if (!(e === "constructor" || (this.ctor?.accessorExclusions ?? []).includes(e))) try {
370
+ Object.defineProperty(this, e, {
371
+ get() {
372
+ return this.$el[e];
373
+ },
374
+ set(t) {
375
+ this.$el[e] !== t && (this.$el[e] = t);
376
+ }
377
+ });
378
+ } catch (t) {
379
+ console.warn(`Could not create property ${e} for`, this.$el, t);
380
+ }
381
+ }
382
+ get $el() {
383
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
384
+ }
385
+ _updateAttribute(e, t) {
386
+ _(this, e, t);
387
+ }
388
+ _updateBooleanAttribute(e, t) {
389
+ v(this, e, t);
390
+ }
391
+ }, d = [
392
+ "",
393
+ "default",
394
+ "auto",
395
+ "flex-start",
396
+ "start",
397
+ "flex-end",
398
+ "end",
399
+ "center",
400
+ "baseline",
401
+ "stretch"
402
+ ], f = [
403
+ "",
404
+ "default",
405
+ "start",
406
+ "end",
407
+ "center",
408
+ "stretch"
409
+ ], p = [
410
+ "",
411
+ "default",
412
+ "start",
413
+ "end",
414
+ "center",
415
+ "stretch"
416
+ ], m = [
417
+ "",
418
+ "1",
419
+ "2",
420
+ "3",
421
+ "4",
422
+ "5",
423
+ "6",
424
+ "7",
425
+ "8",
426
+ "9",
427
+ "10",
428
+ "11",
429
+ "12"
430
+ ], h = [
431
+ "",
432
+ "-1",
433
+ "0",
434
+ "1",
435
+ "2",
436
+ "3",
437
+ "4",
438
+ "5",
439
+ "6",
440
+ "7",
441
+ "8",
442
+ "9",
443
+ "10",
444
+ "11",
445
+ "12"
547
446
  ];
548
- const W = [
549
- "none",
550
- "2xs",
551
- "xs",
552
- "s",
553
- "default",
554
- "l",
555
- "heading-to-subtitle",
556
- "heading-to-content",
557
- "page-layout-between-sections"
447
+ [...[
448
+ "Xs",
449
+ "S",
450
+ "M",
451
+ "L",
452
+ "Xl"
453
+ ].map((e) => e.toLowerCase())];
454
+ var g = [
455
+ "none",
456
+ "2xs",
457
+ "xs",
458
+ "s",
459
+ "default",
460
+ "l",
461
+ "heading-to-subtitle",
462
+ "heading-to-content",
463
+ "page-layout-between-sections"
558
464
  ];
559
- function I(o, t, e, s = "", i, l = o) {
560
- const n = new CSSStyleSheet(), d = e.reduce(
561
- (E, r) => E + `
562
- ${t(l, r)} {
563
- ${o}: var(--${s}-${r}-desktop);
564
- ${`${i}:var(--${s}-${r}-desktop)`}
465
+ function _(e, t, n) {
466
+ if (n == null || n === "") {
467
+ e.removeAttribute(t);
468
+ return;
469
+ }
470
+ e.setAttribute(t, n.toString());
471
+ }
472
+ function v(e, t, n) {
473
+ if (!n) {
474
+ e.removeAttribute(t);
475
+ return;
476
+ }
477
+ e.setAttribute(t, "");
478
+ }
479
+ //#endregion
480
+ //#region ../common/src/breakpoints.ts
481
+ function y(e, t, n, r = "", i, a = e) {
482
+ let o = new CSSStyleSheet(), s = n.reduce((n, o) => n + `
483
+ ${t(a, o)} {
484
+ ${e}: var(--${r}-${o}-desktop);
485
+ ${i ? `${i}:var(--${r}-${o}-desktop)` : ""}
565
486
  }
566
487
  /* Mobile only - max 767px */
567
488
  @media only screen and (max-width: 47.938rem) {
568
- ${t(l, r)} {
569
- ${o}: var(--${s}-${r}-mobile);
570
- ${`${i}: var(--${s}-${r}-mobile)`}
489
+ ${t(a, o)} {
490
+ ${e}: var(--${r}-${o}-mobile);
491
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
571
492
  }
572
493
  }
573
- ${t(l, r, "mobile")} {
494
+ ${t(a, o, "mobile")} {
574
495
  /* Mobile only - max 767px */
575
496
  @media only screen and (max-width: 47.938rem) {
576
- ${o}: var(--${s}-${r}-mobile) !important;
577
- ${`${i}: var(--${s}-${r}-mobile)`}
497
+ ${e}: var(--${r}-${o}-mobile) !important;
498
+ ${i ? `${i}: var(--${r}-${o}-mobile)` : ""}
578
499
  }
579
500
  }
580
- ${t(l, r, "tablet")} {
501
+ ${t(a, o, "tablet")} {
581
502
  /* Tablet - min 768px max 1024px */
582
503
  @media only screen and (min-width: 48rem) and (max-width: 64rem) {
583
- ${o}: var(--${s}-${r}-desktop) !important;
584
- ${`${i}: var(--${s}-${r}-desktop)`}
504
+ ${e}: var(--${r}-${o}-desktop) !important;
505
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
585
506
  }
586
507
  }
587
- ${t(l, r, "laptop")} {
508
+ ${t(a, o, "laptop")} {
588
509
  /* Laptop - 1025px*/
589
510
  @media only screen and (min-width: 64.0625rem) {
590
- ${o}: var(--${s}-${r}-desktop) !important;
591
- ${`${i}: var(--${s}-${r}-desktop)`}
511
+ ${e}: var(--${r}-${o}-desktop) !important;
512
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
592
513
  }
593
514
  }
594
- ${t(l, r, "desktop")} {
515
+ ${t(a, o, "desktop")} {
595
516
  /* Desktop - 1025px*/
596
517
  @media only screen and (min-width: 64.0625rem) {
597
- ${o}: var(--${s}-${r}-desktop) !important;
598
- ${`${i}: var(--${s}-${r}-desktop)`}
518
+ ${e}: var(--${r}-${o}-desktop) !important;
519
+ ${i ? `${i}: var(--${r}-${o}-desktop)` : ""}
599
520
  }
600
- }`,
601
- ""
602
- );
603
- return n.replaceSync(d), n;
521
+ }`, "");
522
+ return o.replaceSync(s), o;
604
523
  }
605
- const J = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:host([variant="ul"]) .list-item,:host([variant="ol"]) .list-item{display:list-item;margin-left:var(--px-spacing-default-mobile)}:host([variant="ul"]) .list-item{list-style-type:disc}:host([variant="ol"]) .list-item{counter-set:list-item var(--item-index, 0);list-style-type:decimal}@media screen and (min-width: 48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}', D = new CSSStyleSheet();
606
- D.replaceSync(J);
607
- const M = "px-list-item-connected", w = class w extends b {
608
- template() {
609
- return `
610
- <div class="list-item" role="listitem">
611
- <slot name="icon"></slot>
612
- <slot name="label"></slot>
613
- </div>
614
- `;
615
- }
616
- constructor() {
617
- super(D), this.shadowRoot.innerHTML = this.template();
618
- }
619
- connectedCallback() {
620
- this.dispatchEvent(
621
- new CustomEvent(M, {
622
- bubbles: !0,
623
- composed: !0
624
- })
625
- );
626
- }
627
- static get observedAttributes() {
628
- return ["inverted"];
629
- }
630
- // TODO: factorize code
631
- attributeChangedCallback(t, e, s) {
632
- if (e !== s)
633
- switch (t) {
634
- case "inverted":
635
- for (let i = 0; i < this.$children.length; i++)
636
- this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
637
- this.$el.toggleAttribute("inverted", s !== null);
638
- break;
639
- }
640
- }
641
- get $children() {
642
- return this.querySelectorAll("px-list-item > *");
643
- }
644
- get inverted() {
645
- return this.hasAttribute("inverted");
646
- }
647
- set inverted(t) {
648
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
649
- }
524
+ //#endregion
525
+ //#region src/listitem.css?inline
526
+ var b = ".list-item{gap:var(--px-spacing-xs-mobile);font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);align-items:flex-start;display:flex}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:is(:host([variant=ul]),:host([variant=ol])) .list-item{margin-left:var(--px-spacing-default-mobile);display:list-item}:host([variant=ul]) .list-item{list-style-type:disc}:host([variant=ol]) .list-item{counter-set:list-item var(--item-index,0);list-style-type:decimal}@media screen and (width>=48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (width>=64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (width>=90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}", x = new CSSStyleSheet();
527
+ x.replaceSync(b);
528
+ var S = "px-list-item-connected", C = class extends u {
529
+ static {
530
+ this.nativeName = "div";
531
+ }
532
+ template() {
533
+ return "\n <div class=\"list-item\" role=\"listitem\">\n <slot name=\"icon\"></slot>\n <slot name=\"label\"></slot>\n </div>\n ";
534
+ }
535
+ constructor() {
536
+ super(x), this.shadowRoot.innerHTML = this.template();
537
+ }
538
+ connectedCallback() {
539
+ this.dispatchEvent(new CustomEvent(S, {
540
+ bubbles: !0,
541
+ composed: !0
542
+ }));
543
+ }
544
+ static get observedAttributes() {
545
+ return ["inverted"];
546
+ }
547
+ attributeChangedCallback(e, t, n) {
548
+ if (t !== n) switch (e) {
549
+ case "inverted":
550
+ for (let e = 0; e < this.$children.length; e++) this.$children[e].hasAttribute("inverted") || this.$children[e].toggleAttribute("inverted");
551
+ this.$el.toggleAttribute("inverted", n !== null);
552
+ }
553
+ }
554
+ get $children() {
555
+ return this.querySelectorAll("px-list-item > *");
556
+ }
557
+ get inverted() {
558
+ return this.hasAttribute("inverted");
559
+ }
560
+ set inverted(e) {
561
+ e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
562
+ }
650
563
  };
651
- w.nativeName = "div";
652
- let u = w;
653
- customElements.get("px-list-item") || customElements.define("px-list-item", u);
654
- const L = new CSSStyleSheet();
655
- L.replaceSync(N);
656
- const j = ["", "ul", "ol"], F = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, K = "px-spacing", Q = I(
657
- "gap",
658
- F,
659
- W,
660
- K,
661
- "--list-gap"
662
- );
663
- var a, g, f, m;
664
- const y = class y extends b {
665
- constructor() {
666
- super(L, Q);
667
- S(this, a);
668
- this.shadowRoot.innerHTML = this.template();
669
- }
670
- template() {
671
- return `
672
- <div class="list" role="list">
673
- <slot></slot>
674
- </div>
675
- `;
676
- }
677
- static get observedAttributes() {
678
- return ["inverted", "variant"];
679
- }
680
- connectedCallback() {
681
- this.gap || (this.gap = "xs"), this.addEventListener(M, () => {
682
- p(this, a, g).call(this);
683
- }), p(this, a, g).call(this);
684
- }
685
- attributeChangedCallback(e, s, i) {
686
- if (s !== i)
687
- switch (e) {
688
- case "inverted":
689
- this.isConnected && p(this, a, f).call(this);
690
- break;
691
- case "variant":
692
- this.checkName(j, i) || T(
693
- `"${i}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join('", "')}".`
694
- ), this.isConnected && p(this, a, m).call(this, i), super.attributeChangedCallback(e, s, i);
695
- break;
696
- default:
697
- super.attributeChangedCallback(e, s, i);
698
- break;
699
- }
700
- }
701
- get $children() {
702
- return this.querySelectorAll("px-list-item");
703
- }
704
- get inverted() {
705
- return this.hasAttribute("inverted");
706
- }
707
- set inverted(e) {
708
- e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
709
- }
710
- get gap() {
711
- return this.getAttribute("gap");
712
- }
713
- set gap(e) {
714
- e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
715
- }
716
- get gapMobile() {
717
- return this.getAttribute("gap--mobile");
718
- }
719
- set gapMobile(e) {
720
- e ? this.setAttribute("gap--mobile", e) : this.removeAttribute("gap--mobile");
721
- }
722
- get gapTablet() {
723
- return this.getAttribute("gap--tablet");
724
- }
725
- set gapTablet(e) {
726
- e ? this.setAttribute("gap--tablet", e) : this.removeAttribute("gap--tablet");
727
- }
728
- get gapLaptop() {
729
- return this.getAttribute("gap--laptop");
730
- }
731
- set gapLaptop(e) {
732
- e ? this.setAttribute("gap--laptop", e) : this.removeAttribute("gap--laptop");
733
- }
734
- get gapDesktop() {
735
- return this.getAttribute("gap--desktop");
736
- }
737
- set gapDesktop(e) {
738
- e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
739
- }
740
- get variant() {
741
- return this.getAttribute("variant");
742
- }
743
- set variant(e) {
744
- e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
745
- }
746
- };
747
- a = new WeakSet(), g = function() {
748
- p(this, a, f).call(this), p(this, a, m).call(this, this.getAttribute("variant"));
749
- }, f = function() {
750
- var s;
751
- const e = this.hasAttribute("inverted");
752
- for (let i = 0; i < this.$children.length; i++)
753
- this.$children[i].toggleAttribute("inverted", e);
754
- (s = this.$el) == null || s.toggleAttribute("inverted", e);
755
- }, m = function(e) {
756
- for (let s = 0; s < this.$children.length; s++) {
757
- const i = this.$children[s];
758
- e !== null ? (i.setAttribute("variant", e), e === "ol" ? i.style.setProperty("--item-index", String(s + 1)) : i.style.removeProperty("--item-index")) : (i.removeAttribute("variant"), i.style.removeProperty("--item-index"));
759
- }
760
- }, y.nativeName = "div";
761
- let c = y;
762
- customElements.get("px-list") || customElements.define("px-list", c);
763
- export {
764
- M as LIST_ITEM_CONNECTED_EVENT,
765
- c as List,
766
- u as ListItem,
767
- j as listVariantValues
564
+ customElements.get("px-list-item") || customElements.define("px-list-item", C);
565
+ //#endregion
566
+ //#region src/List.ts
567
+ var w = new CSSStyleSheet();
568
+ w.replaceSync(e);
569
+ var T = [
570
+ "",
571
+ "ul",
572
+ "ol"
573
+ ], E = y("gap", (e, t, n) => `:host([${e}${n ? `--${n}` : ""}='${t}']) .list`, g, "px-spacing", "--list-gap"), D = class extends u {
574
+ static {
575
+ this.nativeName = "div";
576
+ }
577
+ template() {
578
+ return "\n <div class=\"list\" role=\"list\">\n <slot></slot>\n </div>\n ";
579
+ }
580
+ constructor() {
581
+ super(w, E), this.shadowRoot.innerHTML = this.template();
582
+ }
583
+ static get observedAttributes() {
584
+ return ["inverted", "variant"];
585
+ }
586
+ connectedCallback() {
587
+ this.gap ||= "xs", this.addEventListener(S, () => {
588
+ this.#e();
589
+ }), this.#e();
590
+ }
591
+ #e() {
592
+ this.#t(), this.#n(this.getAttribute("variant"));
593
+ }
594
+ #t() {
595
+ let e = this.hasAttribute("inverted");
596
+ for (let t = 0; t < this.$children.length; t++) this.$children[t].toggleAttribute("inverted", e);
597
+ this.$el?.toggleAttribute("inverted", e);
598
+ }
599
+ #n(e) {
600
+ for (let t = 0; t < this.$children.length; t++) {
601
+ let n = this.$children[t];
602
+ e === null ? (n.removeAttribute("variant"), n.style.removeProperty("--item-index")) : (n.setAttribute("variant", e), e === "ol" ? n.style.setProperty("--item-index", String(t + 1)) : n.style.removeProperty("--item-index"));
603
+ }
604
+ }
605
+ attributeChangedCallback(e, t, n) {
606
+ if (t !== n) switch (e) {
607
+ case "inverted":
608
+ this.isConnected && this.#t();
609
+ break;
610
+ case "variant":
611
+ this.checkName(T, n) || c(`"${n}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${T.join("\", \"")}".`), this.isConnected && this.#n(n), super.attributeChangedCallback(e, t, n);
612
+ break;
613
+ default: super.attributeChangedCallback(e, t, n);
614
+ }
615
+ }
616
+ get $children() {
617
+ return this.querySelectorAll("px-list-item");
618
+ }
619
+ get inverted() {
620
+ return this.hasAttribute("inverted");
621
+ }
622
+ set inverted(e) {
623
+ this._updateBooleanAttribute("inverted", e);
624
+ }
625
+ get gap() {
626
+ return this.getAttribute("gap");
627
+ }
628
+ set gap(e) {
629
+ this._updateAttribute("gap", e);
630
+ }
631
+ get gapMobile() {
632
+ return this.getAttribute("gap--mobile");
633
+ }
634
+ set gapMobile(e) {
635
+ this._updateAttribute("gap--mobile", e);
636
+ }
637
+ get gapTablet() {
638
+ return this.getAttribute("gap--tablet");
639
+ }
640
+ set gapTablet(e) {
641
+ this._updateAttribute("gap--tablet", e);
642
+ }
643
+ get gapLaptop() {
644
+ return this.getAttribute("gap--laptop");
645
+ }
646
+ set gapLaptop(e) {
647
+ this._updateAttribute("gap--laptop", e);
648
+ }
649
+ get gapDesktop() {
650
+ return this.getAttribute("gap--desktop");
651
+ }
652
+ set gapDesktop(e) {
653
+ this._updateAttribute("gap--desktop", e);
654
+ }
655
+ get variant() {
656
+ return this.getAttribute("variant");
657
+ }
658
+ set variant(e) {
659
+ this._updateAttribute("variant", e);
660
+ }
768
661
  };
662
+ customElements.get("px-list") || customElements.define("px-list", D);
663
+ //#endregion
664
+ export { S as LIST_ITEM_CONNECTED_EVENT, D as List, C as ListItem, T as listVariantValues };