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