@proximus/lavender-list 2.0.0-alpha.100 → 2.0.0-alpha.101
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 +82 -80
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
var
|
|
1
|
+
var $ = (o) => {
|
|
2
2
|
throw TypeError(o);
|
|
3
3
|
};
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var p = (o, t, e) => (
|
|
7
|
-
const
|
|
8
|
-
function
|
|
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]){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}@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}}@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}}@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}}@media screen and (min-width: 64.0625rem){: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: 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}}", x = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
|
|
8
|
+
function B(o) {
|
|
9
9
|
const t = document.createElement(o), e = Object.getPrototypeOf(t);
|
|
10
10
|
return Object.getOwnPropertyNames(e);
|
|
11
11
|
}
|
|
12
|
-
function
|
|
12
|
+
function G(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
|
|
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 = v);
|
|
22
|
+
function v() {
|
|
23
|
+
return P;
|
|
24
24
|
}
|
|
25
|
-
function
|
|
26
|
-
|
|
25
|
+
function T(o) {
|
|
26
|
+
v() && console.error(o);
|
|
27
27
|
}
|
|
28
|
-
typeof window < "u" && (window.isComponentDebug =
|
|
29
|
-
class
|
|
28
|
+
typeof window < "u" && (window.isComponentDebug = v);
|
|
29
|
+
class k extends HTMLElement {
|
|
30
30
|
static get observedAttributes() {
|
|
31
31
|
return [
|
|
32
32
|
"grow",
|
|
@@ -80,13 +80,13 @@ class v extends HTMLElement {
|
|
|
80
80
|
}
|
|
81
81
|
constructor(...t) {
|
|
82
82
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
83
|
-
|
|
83
|
+
C,
|
|
84
84
|
...t
|
|
85
85
|
];
|
|
86
86
|
}
|
|
87
87
|
attributeChangedCallback(t, e, s) {
|
|
88
88
|
var i;
|
|
89
|
-
if (
|
|
89
|
+
if (k.observedAttributes.indexOf(t) !== -1)
|
|
90
90
|
switch (t) {
|
|
91
91
|
case "grow":
|
|
92
92
|
case "grow--mobile":
|
|
@@ -114,7 +114,7 @@ class v extends HTMLElement {
|
|
|
114
114
|
t,
|
|
115
115
|
e,
|
|
116
116
|
s,
|
|
117
|
-
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ?
|
|
117
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? q : R
|
|
118
118
|
);
|
|
119
119
|
break;
|
|
120
120
|
case "justify-self":
|
|
@@ -126,7 +126,7 @@ class v extends HTMLElement {
|
|
|
126
126
|
t,
|
|
127
127
|
e,
|
|
128
128
|
s,
|
|
129
|
-
|
|
129
|
+
H
|
|
130
130
|
);
|
|
131
131
|
break;
|
|
132
132
|
case "col-span":
|
|
@@ -134,20 +134,20 @@ class v extends HTMLElement {
|
|
|
134
134
|
case "col-span--tablet":
|
|
135
135
|
case "col-span--laptop":
|
|
136
136
|
case "col-span--desktop":
|
|
137
|
-
this.updateProperties(t, e, s,
|
|
137
|
+
this.updateProperties(t, e, s, U);
|
|
138
138
|
break;
|
|
139
139
|
case "order":
|
|
140
140
|
case "order--mobile":
|
|
141
141
|
case "order--tablet":
|
|
142
142
|
case "order--laptop":
|
|
143
143
|
case "order--desktop":
|
|
144
|
-
this.updateProperties(t, e, s,
|
|
144
|
+
this.updateProperties(t, e, s, X);
|
|
145
145
|
break;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
updateProperties(t, e, s, i) {
|
|
149
|
-
i && (this.checkName(i, s) ||
|
|
150
|
-
|
|
149
|
+
i && (this.checkName(i, s) || T(
|
|
150
|
+
`"${s}" is not an allowed ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
|
|
151
151
|
));
|
|
152
152
|
const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
|
|
153
153
|
if (!l)
|
|
@@ -159,12 +159,12 @@ class v extends HTMLElement {
|
|
|
159
159
|
s
|
|
160
160
|
);
|
|
161
161
|
else {
|
|
162
|
-
const
|
|
162
|
+
const d = t.split("--")[1];
|
|
163
163
|
this.style.setProperty(
|
|
164
|
-
`--${n}--${
|
|
164
|
+
`--${n}--${d}-value`,
|
|
165
165
|
e
|
|
166
166
|
), this.style.setProperty(
|
|
167
|
-
`--${n}--${
|
|
167
|
+
`--${n}--${d}-value`,
|
|
168
168
|
s
|
|
169
169
|
);
|
|
170
170
|
}
|
|
@@ -433,12 +433,12 @@ class v extends HTMLElement {
|
|
|
433
433
|
this.setAttribute("order--desktop", t);
|
|
434
434
|
}
|
|
435
435
|
}
|
|
436
|
-
const
|
|
436
|
+
const A = class A extends k {
|
|
437
437
|
// nativeName: string;
|
|
438
438
|
static get observedAttributes() {
|
|
439
439
|
return [
|
|
440
440
|
...super.observedAttributes,
|
|
441
|
-
...
|
|
441
|
+
...G(this.nativeName)
|
|
442
442
|
];
|
|
443
443
|
}
|
|
444
444
|
attributeChangedCallback(t, e, s) {
|
|
@@ -448,7 +448,7 @@ const k = class k extends v {
|
|
|
448
448
|
return Object.getPrototypeOf(this).constructor;
|
|
449
449
|
}
|
|
450
450
|
constructor(...t) {
|
|
451
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
451
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = B(
|
|
452
452
|
this.ctor.nativeName
|
|
453
453
|
)), this.enhanceWithNativeProperties();
|
|
454
454
|
}
|
|
@@ -479,32 +479,34 @@ const k = class k extends v {
|
|
|
479
479
|
e ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
480
480
|
}
|
|
481
481
|
};
|
|
482
|
-
|
|
483
|
-
let
|
|
484
|
-
const
|
|
482
|
+
A.accessorExclusions = [];
|
|
483
|
+
let b = A;
|
|
484
|
+
const R = [
|
|
485
485
|
"",
|
|
486
486
|
"default",
|
|
487
487
|
"auto",
|
|
488
488
|
"flex-start",
|
|
489
|
+
"start",
|
|
489
490
|
"flex-end",
|
|
491
|
+
"end",
|
|
490
492
|
"center",
|
|
491
493
|
"baseline",
|
|
492
494
|
"stretch"
|
|
493
|
-
],
|
|
495
|
+
], q = [
|
|
494
496
|
"",
|
|
495
497
|
"default",
|
|
496
498
|
"start",
|
|
497
499
|
"end",
|
|
498
500
|
"center",
|
|
499
501
|
"stretch"
|
|
500
|
-
],
|
|
502
|
+
], H = [
|
|
501
503
|
"",
|
|
502
504
|
"default",
|
|
503
505
|
"start",
|
|
504
506
|
"end",
|
|
505
507
|
"center",
|
|
506
508
|
"stretch"
|
|
507
|
-
],
|
|
509
|
+
], U = [
|
|
508
510
|
"",
|
|
509
511
|
"1",
|
|
510
512
|
"2",
|
|
@@ -518,7 +520,7 @@ const G = [
|
|
|
518
520
|
"10",
|
|
519
521
|
"11",
|
|
520
522
|
"12"
|
|
521
|
-
],
|
|
523
|
+
], X = [
|
|
522
524
|
"",
|
|
523
525
|
"-1",
|
|
524
526
|
"0",
|
|
@@ -534,11 +536,11 @@ const G = [
|
|
|
534
536
|
"10",
|
|
535
537
|
"11",
|
|
536
538
|
"12"
|
|
537
|
-
],
|
|
539
|
+
], W = ["Xs", "S", "M", "L", "Xl"];
|
|
538
540
|
[
|
|
539
|
-
...
|
|
541
|
+
...W.map((o) => o.toLowerCase())
|
|
540
542
|
];
|
|
541
|
-
const
|
|
543
|
+
const z = [
|
|
542
544
|
"none",
|
|
543
545
|
"2xs",
|
|
544
546
|
"xs",
|
|
@@ -549,9 +551,9 @@ const I = [
|
|
|
549
551
|
"heading-to-content",
|
|
550
552
|
"page-layout-between-sections"
|
|
551
553
|
];
|
|
552
|
-
function
|
|
553
|
-
const n = new CSSStyleSheet(),
|
|
554
|
-
(
|
|
554
|
+
function I(o, t, e, s = "", i, l = o) {
|
|
555
|
+
const n = new CSSStyleSheet(), d = e.reduce(
|
|
556
|
+
(E, r) => E + `
|
|
555
557
|
${t(l, r)} {
|
|
556
558
|
${o}: var(--${s}-${r}-desktop);
|
|
557
559
|
${`${i}:var(--${s}-${r}-desktop)`}
|
|
@@ -593,11 +595,11 @@ function W(o, t, e, s = "", i, l = o) {
|
|
|
593
595
|
}`,
|
|
594
596
|
""
|
|
595
597
|
);
|
|
596
|
-
return n.replaceSync(
|
|
598
|
+
return n.replaceSync(d), n;
|
|
597
599
|
}
|
|
598
|
-
const
|
|
599
|
-
|
|
600
|
-
const
|
|
600
|
+
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();
|
|
601
|
+
D.replaceSync(J);
|
|
602
|
+
const M = "px-list-item-connected", y = class y extends b {
|
|
601
603
|
template() {
|
|
602
604
|
return `
|
|
603
605
|
<div class="list-item" role="listitem">
|
|
@@ -607,11 +609,11 @@ const C = "px-list-item-connected", A = class A extends d {
|
|
|
607
609
|
`;
|
|
608
610
|
}
|
|
609
611
|
constructor() {
|
|
610
|
-
super(
|
|
612
|
+
super(D), this.shadowRoot.innerHTML = this.template();
|
|
611
613
|
}
|
|
612
614
|
connectedCallback() {
|
|
613
615
|
this.dispatchEvent(
|
|
614
|
-
new CustomEvent(
|
|
616
|
+
new CustomEvent(M, {
|
|
615
617
|
bubbles: !0,
|
|
616
618
|
composed: !0
|
|
617
619
|
})
|
|
@@ -641,23 +643,23 @@ const C = "px-list-item-connected", A = class A extends d {
|
|
|
641
643
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
642
644
|
}
|
|
643
645
|
};
|
|
644
|
-
|
|
645
|
-
let
|
|
646
|
-
customElements.get("px-list-item") || customElements.define("px-list-item",
|
|
647
|
-
const
|
|
648
|
-
|
|
649
|
-
const
|
|
646
|
+
y.nativeName = "div";
|
|
647
|
+
let u = y;
|
|
648
|
+
customElements.get("px-list-item") || customElements.define("px-list-item", u);
|
|
649
|
+
const L = new CSSStyleSheet();
|
|
650
|
+
L.replaceSync(N);
|
|
651
|
+
const j = ["", "ul", "ol"], F = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, K = "px-spacing", Q = I(
|
|
650
652
|
"gap",
|
|
651
|
-
U,
|
|
652
|
-
I,
|
|
653
653
|
F,
|
|
654
|
+
z,
|
|
655
|
+
K,
|
|
654
656
|
"--list-gap"
|
|
655
657
|
);
|
|
656
|
-
var a,
|
|
657
|
-
const
|
|
658
|
+
var a, g, f, m;
|
|
659
|
+
const w = class w extends b {
|
|
658
660
|
constructor() {
|
|
659
|
-
super(
|
|
660
|
-
|
|
661
|
+
super(L, Q);
|
|
662
|
+
S(this, a);
|
|
661
663
|
this.shadowRoot.innerHTML = this.template();
|
|
662
664
|
}
|
|
663
665
|
template() {
|
|
@@ -671,20 +673,20 @@ const y = class y extends d {
|
|
|
671
673
|
return ["inverted", "variant"];
|
|
672
674
|
}
|
|
673
675
|
connectedCallback() {
|
|
674
|
-
this.gap || (this.gap = "xs"), this.addEventListener(
|
|
675
|
-
p(this, a,
|
|
676
|
-
}), p(this, a,
|
|
676
|
+
this.gap || (this.gap = "xs"), this.addEventListener(M, () => {
|
|
677
|
+
p(this, a, g).call(this);
|
|
678
|
+
}), p(this, a, g).call(this);
|
|
677
679
|
}
|
|
678
680
|
attributeChangedCallback(e, s, i) {
|
|
679
681
|
if (s !== i)
|
|
680
682
|
switch (e) {
|
|
681
683
|
case "inverted":
|
|
682
|
-
this.isConnected && p(this, a,
|
|
684
|
+
this.isConnected && p(this, a, f).call(this);
|
|
683
685
|
break;
|
|
684
686
|
case "variant":
|
|
685
|
-
this.checkName(
|
|
686
|
-
|
|
687
|
-
), this.isConnected && p(this, a,
|
|
687
|
+
this.checkName(j, i) || T(
|
|
688
|
+
`"${i}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join('", "')}".`
|
|
689
|
+
), this.isConnected && p(this, a, m).call(this, i), super.attributeChangedCallback(e, s, i);
|
|
688
690
|
break;
|
|
689
691
|
default:
|
|
690
692
|
super.attributeChangedCallback(e, s, i);
|
|
@@ -737,25 +739,25 @@ const y = class y extends d {
|
|
|
737
739
|
e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
|
|
738
740
|
}
|
|
739
741
|
};
|
|
740
|
-
a = new WeakSet(),
|
|
741
|
-
p(this, a,
|
|
742
|
-
},
|
|
742
|
+
a = new WeakSet(), g = function() {
|
|
743
|
+
p(this, a, f).call(this), p(this, a, m).call(this, this.getAttribute("variant"));
|
|
744
|
+
}, f = function() {
|
|
743
745
|
var s;
|
|
744
746
|
const e = this.hasAttribute("inverted");
|
|
745
747
|
for (let i = 0; i < this.$children.length; i++)
|
|
746
748
|
this.$children[i].toggleAttribute("inverted", e);
|
|
747
749
|
(s = this.$el) == null || s.toggleAttribute("inverted", e);
|
|
748
|
-
},
|
|
750
|
+
}, m = function(e) {
|
|
749
751
|
for (let s = 0; s < this.$children.length; s++) {
|
|
750
752
|
const i = this.$children[s];
|
|
751
753
|
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
754
|
}
|
|
753
|
-
},
|
|
754
|
-
let
|
|
755
|
-
customElements.get("px-list") || customElements.define("px-list",
|
|
755
|
+
}, w.nativeName = "div";
|
|
756
|
+
let c = w;
|
|
757
|
+
customElements.get("px-list") || customElements.define("px-list", c);
|
|
756
758
|
export {
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
759
|
+
M as LIST_ITEM_CONNECTED_EVENT,
|
|
760
|
+
c as List,
|
|
761
|
+
u as ListItem,
|
|
762
|
+
j as listVariantValues
|
|
761
763
|
};
|