@proximus/lavender-list 1.4.7-beta.2 → 1.4.7
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/index.es.js +66 -75
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,32 +1,29 @@
|
|
|
1
|
-
var
|
|
1
|
+
var y = (o) => {
|
|
2
2
|
throw TypeError(o);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var p = (o, t, e) => (
|
|
7
|
-
const
|
|
8
|
-
function
|
|
4
|
+
var L = (o, t, e) => t.has(o) || y("Cannot " + e);
|
|
5
|
+
var w = (o, t, e) => t.has(o) ? y("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) => (L(o, t, "access private method"), e);
|
|
7
|
+
const M = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", D = ":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}}", E = {};
|
|
8
|
+
function O(o) {
|
|
9
9
|
const t = document.createElement(o), e = Object.getPrototypeOf(t);
|
|
10
10
|
return Object.getOwnPropertyNames(e);
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function N(o) {
|
|
13
13
|
const t = document.createElement(o), e = Object.getPrototypeOf(t);
|
|
14
14
|
return Object.getOwnPropertyNames(e).map(
|
|
15
15
|
(s) => s.toLowerCase()
|
|
16
16
|
);
|
|
17
17
|
}
|
|
18
|
-
const
|
|
19
|
-
|
|
20
|
-
const
|
|
21
|
-
typeof window < "u" && (window.isComponentDebug =
|
|
22
|
-
function
|
|
23
|
-
return
|
|
24
|
-
}
|
|
25
|
-
function S(o) {
|
|
26
|
-
m() && console.error(o);
|
|
18
|
+
const $ = new CSSStyleSheet();
|
|
19
|
+
$.replaceSync(D);
|
|
20
|
+
const _ = typeof import.meta < "u" && typeof E < "u" && !1;
|
|
21
|
+
typeof window < "u" && (window.isComponentDebug = x);
|
|
22
|
+
function x() {
|
|
23
|
+
return _;
|
|
27
24
|
}
|
|
28
|
-
typeof window < "u" && (window.isComponentDebug =
|
|
29
|
-
class
|
|
25
|
+
typeof window < "u" && (window.isComponentDebug = x);
|
|
26
|
+
class m extends HTMLElement {
|
|
30
27
|
static get observedAttributes() {
|
|
31
28
|
return [
|
|
32
29
|
"grow",
|
|
@@ -73,20 +70,18 @@ class v extends HTMLElement {
|
|
|
73
70
|
"order--mobile",
|
|
74
71
|
"order--tablet",
|
|
75
72
|
"order--laptop",
|
|
76
|
-
"order--desktop"
|
|
77
|
-
"sticky-top",
|
|
78
|
-
"sticky-bottom"
|
|
73
|
+
"order--desktop"
|
|
79
74
|
];
|
|
80
75
|
}
|
|
81
76
|
constructor(...t) {
|
|
82
77
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
83
|
-
|
|
78
|
+
$,
|
|
84
79
|
...t
|
|
85
80
|
];
|
|
86
81
|
}
|
|
87
82
|
attributeChangedCallback(t, e, s) {
|
|
88
83
|
var i;
|
|
89
|
-
if (
|
|
84
|
+
if (m.observedAttributes.indexOf(t) !== -1)
|
|
90
85
|
switch (t) {
|
|
91
86
|
case "grow":
|
|
92
87
|
case "grow--mobile":
|
|
@@ -114,7 +109,7 @@ class v extends HTMLElement {
|
|
|
114
109
|
t,
|
|
115
110
|
e,
|
|
116
111
|
s,
|
|
117
|
-
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ?
|
|
112
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? G : B
|
|
118
113
|
);
|
|
119
114
|
break;
|
|
120
115
|
case "justify-self":
|
|
@@ -126,7 +121,7 @@ class v extends HTMLElement {
|
|
|
126
121
|
t,
|
|
127
122
|
e,
|
|
128
123
|
s,
|
|
129
|
-
|
|
124
|
+
R
|
|
130
125
|
);
|
|
131
126
|
break;
|
|
132
127
|
case "col-span":
|
|
@@ -134,21 +129,19 @@ class v extends HTMLElement {
|
|
|
134
129
|
case "col-span--tablet":
|
|
135
130
|
case "col-span--laptop":
|
|
136
131
|
case "col-span--desktop":
|
|
137
|
-
this.updateProperties(t, e, s,
|
|
132
|
+
this.updateProperties(t, e, s, q);
|
|
138
133
|
break;
|
|
139
134
|
case "order":
|
|
140
135
|
case "order--mobile":
|
|
141
136
|
case "order--tablet":
|
|
142
137
|
case "order--laptop":
|
|
143
138
|
case "order--desktop":
|
|
144
|
-
this.updateProperties(t, e, s,
|
|
139
|
+
this.updateProperties(t, e, s, H);
|
|
145
140
|
break;
|
|
146
141
|
}
|
|
147
142
|
}
|
|
148
143
|
updateProperties(t, e, s, i) {
|
|
149
|
-
i && (this.checkName(i, s) ||
|
|
150
|
-
`${s} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
151
|
-
));
|
|
144
|
+
i && (this.checkName(i, s) || (`${s}${i}${this.tagName.toLowerCase()}`, void 0));
|
|
152
145
|
const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
|
|
153
146
|
if (!l)
|
|
154
147
|
this.style.setProperty(
|
|
@@ -433,12 +426,12 @@ class v extends HTMLElement {
|
|
|
433
426
|
this.setAttribute("order--desktop", t);
|
|
434
427
|
}
|
|
435
428
|
}
|
|
436
|
-
const
|
|
429
|
+
const v = class v extends m {
|
|
437
430
|
// nativeName: string;
|
|
438
431
|
static get observedAttributes() {
|
|
439
432
|
return [
|
|
440
433
|
...super.observedAttributes,
|
|
441
|
-
...
|
|
434
|
+
...N(this.nativeName)
|
|
442
435
|
];
|
|
443
436
|
}
|
|
444
437
|
attributeChangedCallback(t, e, s) {
|
|
@@ -448,7 +441,7 @@ const k = class k extends v {
|
|
|
448
441
|
return Object.getPrototypeOf(this).constructor;
|
|
449
442
|
}
|
|
450
443
|
constructor(...t) {
|
|
451
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
444
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = O(
|
|
452
445
|
this.ctor.nativeName
|
|
453
446
|
)), this.enhanceWithNativeProperties();
|
|
454
447
|
}
|
|
@@ -479,9 +472,9 @@ const k = class k extends v {
|
|
|
479
472
|
e ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
480
473
|
}
|
|
481
474
|
};
|
|
482
|
-
|
|
483
|
-
let d =
|
|
484
|
-
const
|
|
475
|
+
v.accessorExclusions = [];
|
|
476
|
+
let d = v;
|
|
477
|
+
const B = [
|
|
485
478
|
"",
|
|
486
479
|
"default",
|
|
487
480
|
"auto",
|
|
@@ -490,21 +483,21 @@ const G = [
|
|
|
490
483
|
"center",
|
|
491
484
|
"baseline",
|
|
492
485
|
"stretch"
|
|
493
|
-
],
|
|
486
|
+
], G = [
|
|
494
487
|
"",
|
|
495
488
|
"default",
|
|
496
489
|
"start",
|
|
497
490
|
"end",
|
|
498
491
|
"center",
|
|
499
492
|
"stretch"
|
|
500
|
-
],
|
|
493
|
+
], R = [
|
|
501
494
|
"",
|
|
502
495
|
"default",
|
|
503
496
|
"start",
|
|
504
497
|
"end",
|
|
505
498
|
"center",
|
|
506
499
|
"stretch"
|
|
507
|
-
],
|
|
500
|
+
], q = [
|
|
508
501
|
"",
|
|
509
502
|
"1",
|
|
510
503
|
"2",
|
|
@@ -518,7 +511,7 @@ const G = [
|
|
|
518
511
|
"10",
|
|
519
512
|
"11",
|
|
520
513
|
"12"
|
|
521
|
-
],
|
|
514
|
+
], H = [
|
|
522
515
|
"",
|
|
523
516
|
"-1",
|
|
524
517
|
"0",
|
|
@@ -534,11 +527,11 @@ const G = [
|
|
|
534
527
|
"10",
|
|
535
528
|
"11",
|
|
536
529
|
"12"
|
|
537
|
-
],
|
|
530
|
+
], P = ["Xs", "S", "M", "L", "Xl"];
|
|
538
531
|
[
|
|
539
|
-
...
|
|
532
|
+
...P.map((o) => o.toLowerCase())
|
|
540
533
|
];
|
|
541
|
-
const
|
|
534
|
+
const X = [
|
|
542
535
|
"none",
|
|
543
536
|
"2xs",
|
|
544
537
|
"xs",
|
|
@@ -549,9 +542,9 @@ const I = [
|
|
|
549
542
|
"heading-to-content",
|
|
550
543
|
"page-layout-between-sections"
|
|
551
544
|
];
|
|
552
|
-
function
|
|
545
|
+
function I(o, t, e, s = "", i, l = o) {
|
|
553
546
|
const n = new CSSStyleSheet(), h = e.reduce(
|
|
554
|
-
(
|
|
547
|
+
(T, r) => T + `
|
|
555
548
|
${t(l, r)} {
|
|
556
549
|
${o}: var(--${s}-${r}-desktop);
|
|
557
550
|
${`${i}:var(--${s}-${r}-desktop)`}
|
|
@@ -595,9 +588,9 @@ function W(o, t, e, s = "", i, l = o) {
|
|
|
595
588
|
);
|
|
596
589
|
return n.replaceSync(h), n;
|
|
597
590
|
}
|
|
598
|
-
const
|
|
599
|
-
|
|
600
|
-
const
|
|
591
|
+
const W = '.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)}}', S = new CSSStyleSheet();
|
|
592
|
+
S.replaceSync(W);
|
|
593
|
+
const j = "px-list-item-connected", k = class k extends d {
|
|
601
594
|
template() {
|
|
602
595
|
return `
|
|
603
596
|
<div class="list-item" role="listitem">
|
|
@@ -607,11 +600,11 @@ const C = "px-list-item-connected", A = class A extends d {
|
|
|
607
600
|
`;
|
|
608
601
|
}
|
|
609
602
|
constructor() {
|
|
610
|
-
super(
|
|
603
|
+
super(S), this.shadowRoot.innerHTML = this.template();
|
|
611
604
|
}
|
|
612
605
|
connectedCallback() {
|
|
613
606
|
this.dispatchEvent(
|
|
614
|
-
new CustomEvent(
|
|
607
|
+
new CustomEvent(j, {
|
|
615
608
|
bubbles: !0,
|
|
616
609
|
composed: !0
|
|
617
610
|
})
|
|
@@ -641,23 +634,23 @@ const C = "px-list-item-connected", A = class A extends d {
|
|
|
641
634
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
642
635
|
}
|
|
643
636
|
};
|
|
644
|
-
|
|
645
|
-
let b =
|
|
637
|
+
k.nativeName = "div";
|
|
638
|
+
let b = k;
|
|
646
639
|
customElements.get("px-list-item") || customElements.define("px-list-item", b);
|
|
647
|
-
const
|
|
648
|
-
|
|
649
|
-
const
|
|
640
|
+
const C = new CSSStyleSheet();
|
|
641
|
+
C.replaceSync(M);
|
|
642
|
+
const z = ["", "ul", "ol"], J = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, U = "px-spacing", F = I(
|
|
650
643
|
"gap",
|
|
644
|
+
J,
|
|
645
|
+
X,
|
|
651
646
|
U,
|
|
652
|
-
I,
|
|
653
|
-
F,
|
|
654
647
|
"--list-gap"
|
|
655
648
|
);
|
|
656
|
-
var a,
|
|
657
|
-
const
|
|
649
|
+
var a, g, c, f;
|
|
650
|
+
const A = class A extends d {
|
|
658
651
|
constructor() {
|
|
659
|
-
super(
|
|
660
|
-
|
|
652
|
+
super(C, F);
|
|
653
|
+
w(this, a);
|
|
661
654
|
this.shadowRoot.innerHTML = this.template();
|
|
662
655
|
}
|
|
663
656
|
template() {
|
|
@@ -671,20 +664,18 @@ const y = class y extends d {
|
|
|
671
664
|
return ["inverted", "variant"];
|
|
672
665
|
}
|
|
673
666
|
connectedCallback() {
|
|
674
|
-
this.gap || (this.gap = "xs"), this.addEventListener(
|
|
675
|
-
p(this, a,
|
|
676
|
-
}), p(this, a,
|
|
667
|
+
this.gap || (this.gap = "xs"), this.addEventListener(j, () => {
|
|
668
|
+
p(this, a, g).call(this);
|
|
669
|
+
}), p(this, a, g).call(this);
|
|
677
670
|
}
|
|
678
671
|
attributeChangedCallback(e, s, i) {
|
|
679
672
|
if (s !== i)
|
|
680
673
|
switch (e) {
|
|
681
674
|
case "inverted":
|
|
682
|
-
this.isConnected && p(this, a,
|
|
675
|
+
this.isConnected && p(this, a, c).call(this);
|
|
683
676
|
break;
|
|
684
677
|
case "variant":
|
|
685
|
-
this.checkName(
|
|
686
|
-
`${i} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
687
|
-
), this.isConnected && p(this, a, f).call(this, i), super.attributeChangedCallback(e, s, i);
|
|
678
|
+
this.checkName(z, i) || (`${i}${this.tagName.toLowerCase()}`, void 0), this.isConnected && p(this, a, f).call(this, i), super.attributeChangedCallback(e, s, i);
|
|
688
679
|
break;
|
|
689
680
|
default:
|
|
690
681
|
super.attributeChangedCallback(e, s, i);
|
|
@@ -737,9 +728,9 @@ const y = class y extends d {
|
|
|
737
728
|
e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
|
|
738
729
|
}
|
|
739
730
|
};
|
|
740
|
-
a = new WeakSet(),
|
|
741
|
-
p(this, a,
|
|
742
|
-
},
|
|
731
|
+
a = new WeakSet(), g = function() {
|
|
732
|
+
p(this, a, c).call(this), p(this, a, f).call(this, this.getAttribute("variant"));
|
|
733
|
+
}, c = function() {
|
|
743
734
|
var s;
|
|
744
735
|
const e = this.hasAttribute("inverted");
|
|
745
736
|
for (let i = 0; i < this.$children.length; i++)
|
|
@@ -750,12 +741,12 @@ a = new WeakSet(), c = function() {
|
|
|
750
741
|
const i = this.$children[s];
|
|
751
742
|
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"));
|
|
752
743
|
}
|
|
753
|
-
},
|
|
754
|
-
let u =
|
|
744
|
+
}, A.nativeName = "div";
|
|
745
|
+
let u = A;
|
|
755
746
|
customElements.get("px-list") || customElements.define("px-list", u);
|
|
756
747
|
export {
|
|
757
|
-
|
|
748
|
+
j as LIST_ITEM_CONNECTED_EVENT,
|
|
758
749
|
u as List,
|
|
759
750
|
b as ListItem,
|
|
760
|
-
|
|
751
|
+
z as listVariantValues
|
|
761
752
|
};
|