@proximus/lavender-list 2.0.0-alpha.63 → 2.0.0-alpha.64
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.
- package/dist/List.d.ts +1 -0
- package/dist/ListItem.d.ts +2 -0
- package/dist/index.es.js +210 -183
- package/package.json +1 -1
package/dist/List.d.ts
CHANGED
package/dist/ListItem.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { PxElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
|
|
2
3
|
export declare class ListItem extends PxElement<HTMLDivElement> {
|
|
3
4
|
static nativeName: string;
|
|
4
5
|
private template;
|
|
5
6
|
constructor();
|
|
7
|
+
connectedCallback(): void;
|
|
6
8
|
static get observedAttributes(): string[];
|
|
7
9
|
attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
|
|
8
10
|
get $children(): NodeListOf<Element>;
|
package/dist/index.es.js
CHANGED
|
@@ -1,26 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
var w = (o) => {
|
|
2
|
+
throw TypeError(o);
|
|
3
|
+
};
|
|
4
|
+
var M = (o, t, e) => t.has(o) || w("Cannot " + e);
|
|
5
|
+
var $ = (o, t, e) => t.has(o) ? w("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) => (M(o, t, "access private method"), e);
|
|
7
|
+
const D = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", E = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([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}}", O = {};
|
|
8
|
+
function N(o) {
|
|
9
|
+
const t = document.createElement(o), e = Object.getPrototypeOf(t);
|
|
10
|
+
return Object.getOwnPropertyNames(e);
|
|
5
11
|
}
|
|
6
|
-
function
|
|
7
|
-
const t = document.createElement(
|
|
8
|
-
return Object.getOwnPropertyNames(
|
|
9
|
-
(
|
|
12
|
+
function _(o) {
|
|
13
|
+
const t = document.createElement(o), e = Object.getPrototypeOf(t);
|
|
14
|
+
return Object.getOwnPropertyNames(e).map(
|
|
15
|
+
(s) => s.toLowerCase()
|
|
10
16
|
);
|
|
11
17
|
}
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
typeof window < "u" && (window.isComponentDebug =
|
|
16
|
-
function
|
|
17
|
-
return
|
|
18
|
+
const x = new CSSStyleSheet();
|
|
19
|
+
x.replaceSync(E);
|
|
20
|
+
const B = typeof import.meta < "u" && typeof O < "u" && !0;
|
|
21
|
+
typeof window < "u" && (window.isComponentDebug = m);
|
|
22
|
+
function m() {
|
|
23
|
+
return B;
|
|
18
24
|
}
|
|
19
|
-
function
|
|
20
|
-
|
|
25
|
+
function S(o) {
|
|
26
|
+
m() && console.error(o);
|
|
21
27
|
}
|
|
22
|
-
typeof window < "u" && (window.isComponentDebug =
|
|
23
|
-
class
|
|
28
|
+
typeof window < "u" && (window.isComponentDebug = m);
|
|
29
|
+
class v extends HTMLElement {
|
|
24
30
|
static get observedAttributes() {
|
|
25
31
|
return [
|
|
26
32
|
"grow",
|
|
@@ -72,13 +78,13 @@ class u extends HTMLElement {
|
|
|
72
78
|
}
|
|
73
79
|
constructor(...t) {
|
|
74
80
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
75
|
-
|
|
81
|
+
x,
|
|
76
82
|
...t
|
|
77
83
|
];
|
|
78
84
|
}
|
|
79
|
-
attributeChangedCallback(t,
|
|
85
|
+
attributeChangedCallback(t, e, s) {
|
|
80
86
|
var i;
|
|
81
|
-
if (
|
|
87
|
+
if (v.observedAttributes.indexOf(t) !== -1)
|
|
82
88
|
switch (t) {
|
|
83
89
|
case "grow":
|
|
84
90
|
case "grow--mobile":
|
|
@@ -95,7 +101,7 @@ class u extends HTMLElement {
|
|
|
95
101
|
case "basis--tablet":
|
|
96
102
|
case "basis--laptop":
|
|
97
103
|
case "basis--desktop":
|
|
98
|
-
this.style.setProperty(`--${t}-value`,
|
|
104
|
+
this.style.setProperty(`--${t}-value`, s);
|
|
99
105
|
break;
|
|
100
106
|
case "align-self":
|
|
101
107
|
case "align-self--mobile":
|
|
@@ -104,9 +110,9 @@ class u extends HTMLElement {
|
|
|
104
110
|
case "align-self--desktop":
|
|
105
111
|
this.updateProperties(
|
|
106
112
|
t,
|
|
107
|
-
s,
|
|
108
113
|
e,
|
|
109
|
-
|
|
114
|
+
s,
|
|
115
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? R : G
|
|
110
116
|
);
|
|
111
117
|
break;
|
|
112
118
|
case "justify-self":
|
|
@@ -116,9 +122,9 @@ class u extends HTMLElement {
|
|
|
116
122
|
case "justify-self--desktop":
|
|
117
123
|
this.updateProperties(
|
|
118
124
|
t,
|
|
119
|
-
s,
|
|
120
125
|
e,
|
|
121
|
-
|
|
126
|
+
s,
|
|
127
|
+
q
|
|
122
128
|
);
|
|
123
129
|
break;
|
|
124
130
|
case "col-span":
|
|
@@ -126,49 +132,49 @@ class u extends HTMLElement {
|
|
|
126
132
|
case "col-span--tablet":
|
|
127
133
|
case "col-span--laptop":
|
|
128
134
|
case "col-span--desktop":
|
|
129
|
-
this.updateProperties(t,
|
|
135
|
+
this.updateProperties(t, e, s, H);
|
|
130
136
|
break;
|
|
131
137
|
case "order":
|
|
132
138
|
case "order--mobile":
|
|
133
139
|
case "order--tablet":
|
|
134
140
|
case "order--laptop":
|
|
135
141
|
case "order--desktop":
|
|
136
|
-
this.updateProperties(t,
|
|
142
|
+
this.updateProperties(t, e, s, P);
|
|
137
143
|
break;
|
|
138
144
|
}
|
|
139
145
|
}
|
|
140
|
-
updateProperties(t,
|
|
141
|
-
i && (this.checkName(i,
|
|
142
|
-
`${
|
|
146
|
+
updateProperties(t, e, s, i) {
|
|
147
|
+
i && (this.checkName(i, s) || S(
|
|
148
|
+
`${s} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
143
149
|
));
|
|
144
|
-
const l = t.indexOf("--") > -1,
|
|
150
|
+
const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
|
|
145
151
|
if (!l)
|
|
146
152
|
this.style.setProperty(
|
|
147
|
-
`--${
|
|
148
|
-
s
|
|
149
|
-
), this.style.setProperty(
|
|
150
|
-
`--${a}-value`,
|
|
153
|
+
`--${n}-value`,
|
|
151
154
|
e
|
|
155
|
+
), this.style.setProperty(
|
|
156
|
+
`--${n}-value`,
|
|
157
|
+
s
|
|
152
158
|
);
|
|
153
159
|
else {
|
|
154
|
-
const
|
|
160
|
+
const h = t.split("--")[1];
|
|
155
161
|
this.style.setProperty(
|
|
156
|
-
`--${
|
|
157
|
-
s
|
|
158
|
-
), this.style.setProperty(
|
|
159
|
-
`--${a}--${n}-value`,
|
|
162
|
+
`--${n}--${h}-value`,
|
|
160
163
|
e
|
|
164
|
+
), this.style.setProperty(
|
|
165
|
+
`--${n}--${h}-value`,
|
|
166
|
+
s
|
|
161
167
|
);
|
|
162
168
|
}
|
|
163
169
|
}
|
|
164
|
-
updateStyle(t,
|
|
165
|
-
|
|
166
|
-
`--${t}--${
|
|
167
|
-
|
|
170
|
+
updateStyle(t, e, s) {
|
|
171
|
+
s !== null && s !== "" && s !== "default" && this.style.setProperty(
|
|
172
|
+
`--${t}--${e}-value`,
|
|
173
|
+
s
|
|
168
174
|
);
|
|
169
175
|
}
|
|
170
|
-
checkName(t,
|
|
171
|
-
return t.includes(
|
|
176
|
+
checkName(t, e) {
|
|
177
|
+
return t.includes(e);
|
|
172
178
|
}
|
|
173
179
|
get $el() {
|
|
174
180
|
return this;
|
|
@@ -425,55 +431,55 @@ class u extends HTMLElement {
|
|
|
425
431
|
this.setAttribute("order--desktop", t);
|
|
426
432
|
}
|
|
427
433
|
}
|
|
428
|
-
const
|
|
434
|
+
const k = class k extends v {
|
|
429
435
|
// nativeName: string;
|
|
430
436
|
static get observedAttributes() {
|
|
431
437
|
return [
|
|
432
438
|
...super.observedAttributes,
|
|
433
|
-
...
|
|
439
|
+
..._(this.nativeName)
|
|
434
440
|
];
|
|
435
441
|
}
|
|
436
|
-
attributeChangedCallback(t,
|
|
437
|
-
super.attributeChangedCallback(t,
|
|
442
|
+
attributeChangedCallback(t, e, s) {
|
|
443
|
+
super.attributeChangedCallback(t, e, s), s === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, s);
|
|
438
444
|
}
|
|
439
445
|
get ctor() {
|
|
440
446
|
return Object.getPrototypeOf(this).constructor;
|
|
441
447
|
}
|
|
442
448
|
constructor(...t) {
|
|
443
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
449
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = N(
|
|
444
450
|
this.ctor.nativeName
|
|
445
451
|
)), this.enhanceWithNativeProperties();
|
|
446
452
|
}
|
|
447
453
|
enhanceWithNativeProperties() {
|
|
448
454
|
var t;
|
|
449
|
-
for (const
|
|
450
|
-
if (!(
|
|
455
|
+
for (const e of this.ctor.supportedPropertyNames)
|
|
456
|
+
if (!(e === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(e)))
|
|
451
457
|
try {
|
|
452
|
-
Object.defineProperty(this,
|
|
458
|
+
Object.defineProperty(this, e, {
|
|
453
459
|
get() {
|
|
454
|
-
return this.$el[
|
|
460
|
+
return this.$el[e];
|
|
455
461
|
},
|
|
456
|
-
set(
|
|
457
|
-
this.$el[
|
|
462
|
+
set(s) {
|
|
463
|
+
this.$el[e] !== s && (this.$el[e] = s);
|
|
458
464
|
}
|
|
459
465
|
});
|
|
460
|
-
} catch (
|
|
461
|
-
console.warn(`Could not create property ${
|
|
466
|
+
} catch (s) {
|
|
467
|
+
console.warn(`Could not create property ${e} for`, this.$el, s);
|
|
462
468
|
}
|
|
463
469
|
}
|
|
464
470
|
get $el() {
|
|
465
471
|
return this.shadowRoot.querySelector(this.ctor.nativeName);
|
|
466
472
|
}
|
|
467
|
-
_updateAttribute(t,
|
|
468
|
-
|
|
473
|
+
_updateAttribute(t, e) {
|
|
474
|
+
e ? this.setAttribute(t, e) : this.removeAttribute(t);
|
|
469
475
|
}
|
|
470
|
-
_updateBooleanAttribute(t,
|
|
471
|
-
|
|
476
|
+
_updateBooleanAttribute(t, e) {
|
|
477
|
+
e ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
472
478
|
}
|
|
473
479
|
};
|
|
474
|
-
|
|
475
|
-
let
|
|
476
|
-
const
|
|
480
|
+
k.accessorExclusions = [];
|
|
481
|
+
let d = k;
|
|
482
|
+
const G = [
|
|
477
483
|
"",
|
|
478
484
|
"default",
|
|
479
485
|
"auto",
|
|
@@ -482,21 +488,21 @@ const M = [
|
|
|
482
488
|
"center",
|
|
483
489
|
"baseline",
|
|
484
490
|
"stretch"
|
|
485
|
-
],
|
|
491
|
+
], R = [
|
|
486
492
|
"",
|
|
487
493
|
"default",
|
|
488
494
|
"start",
|
|
489
495
|
"end",
|
|
490
496
|
"center",
|
|
491
497
|
"stretch"
|
|
492
|
-
],
|
|
498
|
+
], q = [
|
|
493
499
|
"",
|
|
494
500
|
"default",
|
|
495
501
|
"start",
|
|
496
502
|
"end",
|
|
497
503
|
"center",
|
|
498
504
|
"stretch"
|
|
499
|
-
],
|
|
505
|
+
], H = [
|
|
500
506
|
"",
|
|
501
507
|
"1",
|
|
502
508
|
"2",
|
|
@@ -510,7 +516,7 @@ const M = [
|
|
|
510
516
|
"10",
|
|
511
517
|
"11",
|
|
512
518
|
"12"
|
|
513
|
-
],
|
|
519
|
+
], P = [
|
|
514
520
|
"",
|
|
515
521
|
"-1",
|
|
516
522
|
"0",
|
|
@@ -526,11 +532,11 @@ const M = [
|
|
|
526
532
|
"10",
|
|
527
533
|
"11",
|
|
528
534
|
"12"
|
|
529
|
-
],
|
|
535
|
+
], X = ["Xs", "S", "M", "L", "Xl"];
|
|
530
536
|
[
|
|
531
|
-
...
|
|
537
|
+
...X.map((o) => o.toLowerCase())
|
|
532
538
|
];
|
|
533
|
-
const
|
|
539
|
+
const I = [
|
|
534
540
|
"none",
|
|
535
541
|
"2xs",
|
|
536
542
|
"xs",
|
|
@@ -541,61 +547,117 @@ const N = [
|
|
|
541
547
|
"heading-to-content",
|
|
542
548
|
"page-layout-between-sections"
|
|
543
549
|
];
|
|
544
|
-
function
|
|
545
|
-
const
|
|
546
|
-
(
|
|
547
|
-
${t(l,
|
|
548
|
-
${
|
|
549
|
-
${`${i}:var(--${
|
|
550
|
+
function W(o, t, e, s = "", i, l = o) {
|
|
551
|
+
const n = new CSSStyleSheet(), h = e.reduce(
|
|
552
|
+
(L, r) => L + `
|
|
553
|
+
${t(l, r)} {
|
|
554
|
+
${o}: var(--${s}-${r}-desktop);
|
|
555
|
+
${`${i}:var(--${s}-${r}-desktop)`}
|
|
550
556
|
}
|
|
551
557
|
/* Mobile only - max 767px */
|
|
552
558
|
@media only screen and (max-width: 47.938em) {
|
|
553
|
-
${t(l,
|
|
554
|
-
${
|
|
555
|
-
${`${i}: var(--${
|
|
559
|
+
${t(l, r)} {
|
|
560
|
+
${o}: var(--${s}-${r}-mobile);
|
|
561
|
+
${`${i}: var(--${s}-${r}-mobile)`}
|
|
556
562
|
}
|
|
557
563
|
}
|
|
558
|
-
${t(l,
|
|
564
|
+
${t(l, r, "mobile")} {
|
|
559
565
|
/* Mobile only - max 767px */
|
|
560
566
|
@media only screen and (max-width: 47.938em) {
|
|
561
|
-
${
|
|
562
|
-
${`${i}: var(--${
|
|
567
|
+
${o}: var(--${s}-${r}-mobile) !important;
|
|
568
|
+
${`${i}: var(--${s}-${r}-mobile)`}
|
|
563
569
|
}
|
|
564
570
|
}
|
|
565
|
-
${t(l,
|
|
571
|
+
${t(l, r, "tablet")} {
|
|
566
572
|
/* Tablet - min 768px max 1024px */
|
|
567
573
|
@media only screen and (min-width: 48em) and (max-width: 64em) {
|
|
568
|
-
${
|
|
569
|
-
${`${i}: var(--${
|
|
574
|
+
${o}: var(--${s}-${r}-desktop) !important;
|
|
575
|
+
${`${i}: var(--${s}-${r}-desktop)`}
|
|
570
576
|
}
|
|
571
577
|
}
|
|
572
|
-
${t(l,
|
|
578
|
+
${t(l, r, "laptop")} {
|
|
573
579
|
/* Laptop - 1025px*/
|
|
574
580
|
@media only screen and (min-width: 64.0625em) {
|
|
575
|
-
${
|
|
576
|
-
${`${i}: var(--${
|
|
581
|
+
${o}: var(--${s}-${r}-desktop) !important;
|
|
582
|
+
${`${i}: var(--${s}-${r}-desktop)`}
|
|
577
583
|
}
|
|
578
584
|
}
|
|
579
|
-
${t(l,
|
|
585
|
+
${t(l, r, "desktop")} {
|
|
580
586
|
/* Desktop - 1025px*/
|
|
581
587
|
@media only screen and (min-width: 64.0625em) {
|
|
582
|
-
${
|
|
583
|
-
${`${i}: var(--${
|
|
588
|
+
${o}: var(--${s}-${r}-desktop) !important;
|
|
589
|
+
${`${i}: var(--${s}-${r}-desktop)`}
|
|
584
590
|
}
|
|
585
591
|
}`,
|
|
586
592
|
""
|
|
587
593
|
);
|
|
588
|
-
return
|
|
594
|
+
return n.replaceSync(h), n;
|
|
589
595
|
}
|
|
590
|
-
const
|
|
591
|
-
|
|
592
|
-
const
|
|
596
|
+
const z = '.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 only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', j = new CSSStyleSheet();
|
|
597
|
+
j.replaceSync(z);
|
|
598
|
+
const C = "px-list-item-connected", A = class A extends d {
|
|
599
|
+
template() {
|
|
600
|
+
return `
|
|
601
|
+
<div class="list-item" role="listitem">
|
|
602
|
+
<slot name="icon"></slot>
|
|
603
|
+
<slot name="label"></slot>
|
|
604
|
+
</div>
|
|
605
|
+
`;
|
|
606
|
+
}
|
|
607
|
+
constructor() {
|
|
608
|
+
super(j), this.shadowRoot.innerHTML = this.template();
|
|
609
|
+
}
|
|
610
|
+
connectedCallback() {
|
|
611
|
+
this.dispatchEvent(
|
|
612
|
+
new CustomEvent(C, {
|
|
613
|
+
bubbles: !0,
|
|
614
|
+
composed: !0
|
|
615
|
+
})
|
|
616
|
+
);
|
|
617
|
+
}
|
|
618
|
+
static get observedAttributes() {
|
|
619
|
+
return ["inverted"];
|
|
620
|
+
}
|
|
621
|
+
// TODO: factorize code
|
|
622
|
+
attributeChangedCallback(t, e, s) {
|
|
623
|
+
if (e !== s)
|
|
624
|
+
switch (t) {
|
|
625
|
+
case "inverted":
|
|
626
|
+
for (let i = 0; i < this.$children.length; i++)
|
|
627
|
+
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
628
|
+
this.$el.toggleAttribute("inverted", s !== null);
|
|
629
|
+
break;
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
get $children() {
|
|
633
|
+
return this.querySelectorAll("px-list-item > *");
|
|
634
|
+
}
|
|
635
|
+
get inverted() {
|
|
636
|
+
return this.hasAttribute("inverted");
|
|
637
|
+
}
|
|
638
|
+
set inverted(t) {
|
|
639
|
+
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
640
|
+
}
|
|
641
|
+
};
|
|
642
|
+
A.nativeName = "div";
|
|
643
|
+
let b = A;
|
|
644
|
+
customElements.get("px-list-item") || customElements.define("px-list-item", b);
|
|
645
|
+
const T = new CSSStyleSheet();
|
|
646
|
+
T.replaceSync(D);
|
|
647
|
+
const J = ["", "ul", "ol"], U = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, F = "px-spacing", K = W(
|
|
593
648
|
"gap",
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
649
|
+
U,
|
|
650
|
+
I,
|
|
651
|
+
F,
|
|
597
652
|
"--list-gap"
|
|
598
|
-
)
|
|
653
|
+
);
|
|
654
|
+
var a, g, c, f;
|
|
655
|
+
const y = class y extends d {
|
|
656
|
+
constructor() {
|
|
657
|
+
super(T, K);
|
|
658
|
+
$(this, a);
|
|
659
|
+
this.shadowRoot.innerHTML = this.template();
|
|
660
|
+
}
|
|
599
661
|
template() {
|
|
600
662
|
return `
|
|
601
663
|
<div class="list" role="list">
|
|
@@ -603,35 +665,27 @@ const B = ["", "ul", "ol"], G = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='$
|
|
|
603
665
|
</div>
|
|
604
666
|
`;
|
|
605
667
|
}
|
|
606
|
-
constructor() {
|
|
607
|
-
super(k, q), this.shadowRoot.innerHTML = this.template();
|
|
608
|
-
}
|
|
609
668
|
static get observedAttributes() {
|
|
610
669
|
return ["inverted", "variant"];
|
|
611
670
|
}
|
|
612
671
|
connectedCallback() {
|
|
613
|
-
this.gap || (this.gap = "xs")
|
|
672
|
+
this.gap || (this.gap = "xs"), this.addEventListener(C, () => {
|
|
673
|
+
p(this, a, g).call(this);
|
|
674
|
+
}), p(this, a, g).call(this);
|
|
614
675
|
}
|
|
615
|
-
attributeChangedCallback(
|
|
616
|
-
if (s !==
|
|
617
|
-
switch (
|
|
676
|
+
attributeChangedCallback(e, s, i) {
|
|
677
|
+
if (s !== i)
|
|
678
|
+
switch (e) {
|
|
618
679
|
case "inverted":
|
|
619
|
-
|
|
620
|
-
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
621
|
-
this.$el.toggleAttribute("inverted", e !== null);
|
|
680
|
+
this.isConnected && p(this, a, c).call(this);
|
|
622
681
|
break;
|
|
623
682
|
case "variant":
|
|
624
|
-
this.checkName(
|
|
625
|
-
`${
|
|
626
|
-
);
|
|
627
|
-
for (let i = 0; i < this.$children.length; i++) {
|
|
628
|
-
const l = this.$children[i];
|
|
629
|
-
e !== null ? (l.setAttribute("variant", e), e === "ol" ? l.style.setProperty("--item-index", String(i + 1)) : l.style.removeProperty("--item-index")) : (l.removeAttribute("variant"), l.style.removeProperty("--item-index"));
|
|
630
|
-
}
|
|
631
|
-
super.attributeChangedCallback(t, s, e);
|
|
683
|
+
this.checkName(J, i) || S(
|
|
684
|
+
`${i} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
685
|
+
), this.isConnected && p(this, a, f).call(this, i), super.attributeChangedCallback(e, s, i);
|
|
632
686
|
break;
|
|
633
687
|
default:
|
|
634
|
-
super.attributeChangedCallback(
|
|
688
|
+
super.attributeChangedCallback(e, s, i);
|
|
635
689
|
break;
|
|
636
690
|
}
|
|
637
691
|
}
|
|
@@ -641,92 +695,65 @@ const B = ["", "ul", "ol"], G = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='$
|
|
|
641
695
|
get inverted() {
|
|
642
696
|
return this.hasAttribute("inverted");
|
|
643
697
|
}
|
|
644
|
-
set inverted(
|
|
645
|
-
|
|
698
|
+
set inverted(e) {
|
|
699
|
+
e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
646
700
|
}
|
|
647
701
|
get gap() {
|
|
648
702
|
return this.getAttribute("gap");
|
|
649
703
|
}
|
|
650
|
-
set gap(
|
|
651
|
-
|
|
704
|
+
set gap(e) {
|
|
705
|
+
e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
|
|
652
706
|
}
|
|
653
707
|
get gapMobile() {
|
|
654
708
|
return this.getAttribute("gap--mobile");
|
|
655
709
|
}
|
|
656
|
-
set gapMobile(
|
|
657
|
-
|
|
710
|
+
set gapMobile(e) {
|
|
711
|
+
e ? this.setAttribute("gap--mobile", e) : this.removeAttribute("gap--mobile");
|
|
658
712
|
}
|
|
659
713
|
get gapTablet() {
|
|
660
714
|
return this.getAttribute("gap--tablet");
|
|
661
715
|
}
|
|
662
|
-
set gapTablet(
|
|
663
|
-
|
|
716
|
+
set gapTablet(e) {
|
|
717
|
+
e ? this.setAttribute("gap--tablet", e) : this.removeAttribute("gap--tablet");
|
|
664
718
|
}
|
|
665
719
|
get gapLaptop() {
|
|
666
720
|
return this.getAttribute("gap--laptop");
|
|
667
721
|
}
|
|
668
|
-
set gapLaptop(
|
|
669
|
-
|
|
722
|
+
set gapLaptop(e) {
|
|
723
|
+
e ? this.setAttribute("gap--laptop", e) : this.removeAttribute("gap--laptop");
|
|
670
724
|
}
|
|
671
725
|
get gapDesktop() {
|
|
672
726
|
return this.getAttribute("gap--desktop");
|
|
673
727
|
}
|
|
674
|
-
set gapDesktop(
|
|
675
|
-
|
|
728
|
+
set gapDesktop(e) {
|
|
729
|
+
e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
|
|
676
730
|
}
|
|
677
731
|
get variant() {
|
|
678
732
|
return this.getAttribute("variant");
|
|
679
733
|
}
|
|
680
|
-
set variant(
|
|
681
|
-
|
|
682
|
-
}
|
|
683
|
-
};
|
|
684
|
-
c.nativeName = "div";
|
|
685
|
-
let h = c;
|
|
686
|
-
customElements.get("px-list") || customElements.define("px-list", h);
|
|
687
|
-
const H = '.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 only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', A = new CSSStyleSheet();
|
|
688
|
-
A.replaceSync(H);
|
|
689
|
-
const f = class f extends p {
|
|
690
|
-
template() {
|
|
691
|
-
return `
|
|
692
|
-
<div class="list-item" role="listitem">
|
|
693
|
-
<slot name="icon"></slot>
|
|
694
|
-
<slot name="label"></slot>
|
|
695
|
-
</div>
|
|
696
|
-
`;
|
|
697
|
-
}
|
|
698
|
-
constructor() {
|
|
699
|
-
super(A), this.shadowRoot.innerHTML = this.template();
|
|
700
|
-
}
|
|
701
|
-
static get observedAttributes() {
|
|
702
|
-
return ["inverted"];
|
|
703
|
-
}
|
|
704
|
-
// TODO: factorize code
|
|
705
|
-
attributeChangedCallback(t, s, e) {
|
|
706
|
-
if (s !== e)
|
|
707
|
-
switch (t) {
|
|
708
|
-
case "inverted":
|
|
709
|
-
for (let i = 0; i < this.$children.length; i++)
|
|
710
|
-
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
711
|
-
this.$el.toggleAttribute("inverted", e !== null);
|
|
712
|
-
break;
|
|
713
|
-
}
|
|
714
|
-
}
|
|
715
|
-
get $children() {
|
|
716
|
-
return this.querySelectorAll("px-list-item > *");
|
|
717
|
-
}
|
|
718
|
-
get inverted() {
|
|
719
|
-
return this.hasAttribute("inverted");
|
|
720
|
-
}
|
|
721
|
-
set inverted(t) {
|
|
722
|
-
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
734
|
+
set variant(e) {
|
|
735
|
+
e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
|
|
723
736
|
}
|
|
724
737
|
};
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
738
|
+
a = new WeakSet(), g = function() {
|
|
739
|
+
p(this, a, c).call(this), p(this, a, f).call(this, this.getAttribute("variant"));
|
|
740
|
+
}, c = function() {
|
|
741
|
+
var s;
|
|
742
|
+
const e = this.hasAttribute("inverted");
|
|
743
|
+
for (let i = 0; i < this.$children.length; i++)
|
|
744
|
+
this.$children[i].toggleAttribute("inverted", e);
|
|
745
|
+
(s = this.$el) == null || s.toggleAttribute("inverted", e);
|
|
746
|
+
}, f = function(e) {
|
|
747
|
+
for (let s = 0; s < this.$children.length; s++) {
|
|
748
|
+
const i = this.$children[s];
|
|
749
|
+
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"));
|
|
750
|
+
}
|
|
751
|
+
}, y.nativeName = "div";
|
|
752
|
+
let u = y;
|
|
753
|
+
customElements.get("px-list") || customElements.define("px-list", u);
|
|
728
754
|
export {
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
755
|
+
C as LIST_ITEM_CONNECTED_EVENT,
|
|
756
|
+
u as List,
|
|
757
|
+
b as ListItem,
|
|
758
|
+
J as listVariantValues
|
|
732
759
|
};
|