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