@proximus/lavender-list 1.4.6-beta.1 → 1.4.6
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 +49 -56
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
1
|
+
const A = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", y = ":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-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}}", w = {};
|
|
2
|
+
function $(o) {
|
|
3
3
|
const t = document.createElement(o), s = Object.getPrototypeOf(t);
|
|
4
4
|
return Object.getOwnPropertyNames(s);
|
|
5
5
|
}
|
|
6
|
-
function
|
|
6
|
+
function x(o) {
|
|
7
7
|
const t = document.createElement(o), s = Object.getPrototypeOf(t);
|
|
8
8
|
return Object.getOwnPropertyNames(s).map(
|
|
9
9
|
(e) => e.toLowerCase()
|
|
10
10
|
);
|
|
11
11
|
}
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
typeof window < "u" && (window.isComponentDebug =
|
|
16
|
-
function
|
|
17
|
-
return
|
|
12
|
+
const f = new CSSStyleSheet();
|
|
13
|
+
f.replaceSync(y);
|
|
14
|
+
const S = typeof import.meta < "u" && typeof w < "u" && !1;
|
|
15
|
+
typeof window < "u" && (window.isComponentDebug = m);
|
|
16
|
+
function m() {
|
|
17
|
+
return S;
|
|
18
18
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
typeof window < "u" && (window.isComponentDebug = b);
|
|
23
|
-
class u extends HTMLElement {
|
|
19
|
+
typeof window < "u" && (window.isComponentDebug = m);
|
|
20
|
+
class b extends HTMLElement {
|
|
24
21
|
static get observedAttributes() {
|
|
25
22
|
return [
|
|
26
23
|
"grow",
|
|
@@ -72,13 +69,13 @@ class u extends HTMLElement {
|
|
|
72
69
|
}
|
|
73
70
|
constructor(...t) {
|
|
74
71
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
75
|
-
|
|
72
|
+
f,
|
|
76
73
|
...t
|
|
77
74
|
];
|
|
78
75
|
}
|
|
79
76
|
attributeChangedCallback(t, s, e) {
|
|
80
77
|
var i;
|
|
81
|
-
if (
|
|
78
|
+
if (b.observedAttributes.indexOf(t) !== -1)
|
|
82
79
|
switch (t) {
|
|
83
80
|
case "grow":
|
|
84
81
|
case "grow--mobile":
|
|
@@ -106,7 +103,7 @@ class u extends HTMLElement {
|
|
|
106
103
|
t,
|
|
107
104
|
s,
|
|
108
105
|
e,
|
|
109
|
-
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ?
|
|
106
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? C : j
|
|
110
107
|
);
|
|
111
108
|
break;
|
|
112
109
|
case "justify-self":
|
|
@@ -118,7 +115,7 @@ class u extends HTMLElement {
|
|
|
118
115
|
t,
|
|
119
116
|
s,
|
|
120
117
|
e,
|
|
121
|
-
|
|
118
|
+
M
|
|
122
119
|
);
|
|
123
120
|
break;
|
|
124
121
|
case "col-span":
|
|
@@ -126,21 +123,19 @@ class u extends HTMLElement {
|
|
|
126
123
|
case "col-span--tablet":
|
|
127
124
|
case "col-span--laptop":
|
|
128
125
|
case "col-span--desktop":
|
|
129
|
-
this.updateProperties(t, s, e,
|
|
126
|
+
this.updateProperties(t, s, e, T);
|
|
130
127
|
break;
|
|
131
128
|
case "order":
|
|
132
129
|
case "order--mobile":
|
|
133
130
|
case "order--tablet":
|
|
134
131
|
case "order--laptop":
|
|
135
132
|
case "order--desktop":
|
|
136
|
-
this.updateProperties(t, s, e,
|
|
133
|
+
this.updateProperties(t, s, e, L);
|
|
137
134
|
break;
|
|
138
135
|
}
|
|
139
136
|
}
|
|
140
137
|
updateProperties(t, s, e, i) {
|
|
141
|
-
i && (this.checkName(i, e) ||
|
|
142
|
-
`${e} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
143
|
-
));
|
|
138
|
+
i && (this.checkName(i, e) || (`${e}${i}${this.tagName.toLowerCase()}`, void 0));
|
|
144
139
|
const l = t.indexOf("--") > -1, a = l ? t.split("--")[0] : t;
|
|
145
140
|
if (!l)
|
|
146
141
|
this.style.setProperty(
|
|
@@ -425,12 +420,12 @@ class u extends HTMLElement {
|
|
|
425
420
|
this.setAttribute("order--desktop", t);
|
|
426
421
|
}
|
|
427
422
|
}
|
|
428
|
-
const
|
|
423
|
+
const u = class u extends b {
|
|
429
424
|
// nativeName: string;
|
|
430
425
|
static get observedAttributes() {
|
|
431
426
|
return [
|
|
432
427
|
...super.observedAttributes,
|
|
433
|
-
...
|
|
428
|
+
...x(this.nativeName)
|
|
434
429
|
];
|
|
435
430
|
}
|
|
436
431
|
attributeChangedCallback(t, s, e) {
|
|
@@ -440,7 +435,7 @@ const g = class g extends u {
|
|
|
440
435
|
return Object.getPrototypeOf(this).constructor;
|
|
441
436
|
}
|
|
442
437
|
constructor(...t) {
|
|
443
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
438
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = $(
|
|
444
439
|
this.ctor.nativeName
|
|
445
440
|
)), this.enhanceWithNativeProperties();
|
|
446
441
|
}
|
|
@@ -471,9 +466,9 @@ const g = class g extends u {
|
|
|
471
466
|
s ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
472
467
|
}
|
|
473
468
|
};
|
|
474
|
-
|
|
475
|
-
let p =
|
|
476
|
-
const
|
|
469
|
+
u.accessorExclusions = [];
|
|
470
|
+
let p = u;
|
|
471
|
+
const j = [
|
|
477
472
|
"",
|
|
478
473
|
"default",
|
|
479
474
|
"auto",
|
|
@@ -482,21 +477,21 @@ const C = [
|
|
|
482
477
|
"center",
|
|
483
478
|
"baseline",
|
|
484
479
|
"stretch"
|
|
485
|
-
],
|
|
480
|
+
], C = [
|
|
486
481
|
"",
|
|
487
482
|
"default",
|
|
488
483
|
"start",
|
|
489
484
|
"end",
|
|
490
485
|
"center",
|
|
491
486
|
"stretch"
|
|
492
|
-
],
|
|
487
|
+
], M = [
|
|
493
488
|
"",
|
|
494
489
|
"default",
|
|
495
490
|
"start",
|
|
496
491
|
"end",
|
|
497
492
|
"center",
|
|
498
493
|
"stretch"
|
|
499
|
-
],
|
|
494
|
+
], T = [
|
|
500
495
|
"",
|
|
501
496
|
"1",
|
|
502
497
|
"2",
|
|
@@ -510,7 +505,7 @@ const C = [
|
|
|
510
505
|
"10",
|
|
511
506
|
"11",
|
|
512
507
|
"12"
|
|
513
|
-
],
|
|
508
|
+
], L = [
|
|
514
509
|
"",
|
|
515
510
|
"-1",
|
|
516
511
|
"0",
|
|
@@ -526,11 +521,11 @@ const C = [
|
|
|
526
521
|
"10",
|
|
527
522
|
"11",
|
|
528
523
|
"12"
|
|
529
|
-
],
|
|
524
|
+
], D = ["Xs", "S", "M", "L", "Xl"];
|
|
530
525
|
[
|
|
531
|
-
...
|
|
526
|
+
...D.map((o) => o.toLowerCase())
|
|
532
527
|
];
|
|
533
|
-
const
|
|
528
|
+
const O = [
|
|
534
529
|
"none",
|
|
535
530
|
"2xs",
|
|
536
531
|
"xs",
|
|
@@ -541,7 +536,7 @@ const E = [
|
|
|
541
536
|
"heading-to-content",
|
|
542
537
|
"page-layout-between-sections"
|
|
543
538
|
];
|
|
544
|
-
function
|
|
539
|
+
function E(o, t, s, e = "", i) {
|
|
545
540
|
const l = new CSSStyleSheet(), a = s.reduce(
|
|
546
541
|
(n, r) => n + `
|
|
547
542
|
${t(o, r)} {
|
|
@@ -587,15 +582,15 @@ function N(o, t, s, e = "", i) {
|
|
|
587
582
|
);
|
|
588
583
|
return l.replaceSync(a), l;
|
|
589
584
|
}
|
|
590
|
-
const
|
|
591
|
-
|
|
592
|
-
const
|
|
585
|
+
const v = new CSSStyleSheet();
|
|
586
|
+
v.replaceSync(A);
|
|
587
|
+
const N = ["", "ul", "ol"], _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px-spacing", G = E(
|
|
593
588
|
"gap",
|
|
589
|
+
_,
|
|
590
|
+
O,
|
|
594
591
|
B,
|
|
595
|
-
E,
|
|
596
|
-
G,
|
|
597
592
|
"--list-gap"
|
|
598
|
-
),
|
|
593
|
+
), g = class g extends p {
|
|
599
594
|
template() {
|
|
600
595
|
return `
|
|
601
596
|
<div class="list" role="list">
|
|
@@ -604,7 +599,7 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
604
599
|
`;
|
|
605
600
|
}
|
|
606
601
|
constructor() {
|
|
607
|
-
super(
|
|
602
|
+
super(v, G), this.shadowRoot.innerHTML = this.template();
|
|
608
603
|
}
|
|
609
604
|
static get observedAttributes() {
|
|
610
605
|
return ["inverted", "variant"];
|
|
@@ -621,9 +616,7 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
621
616
|
this.$el.toggleAttribute("inverted", e !== null);
|
|
622
617
|
break;
|
|
623
618
|
case "variant":
|
|
624
|
-
this.checkName(
|
|
625
|
-
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
626
|
-
);
|
|
619
|
+
this.checkName(N, e) || (`${e}${this.tagName.toLowerCase()}`, void 0);
|
|
627
620
|
for (let i = 0; i < this.$children.length; i++) {
|
|
628
621
|
const l = this.$children[i];
|
|
629
622
|
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"));
|
|
@@ -681,12 +674,12 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
681
674
|
t ? this.setAttribute("variant", t) : this.removeAttribute("variant");
|
|
682
675
|
}
|
|
683
676
|
};
|
|
684
|
-
|
|
685
|
-
let h =
|
|
677
|
+
g.nativeName = "div";
|
|
678
|
+
let h = g;
|
|
686
679
|
customElements.get("px-list") || customElements.define("px-list", h);
|
|
687
|
-
const
|
|
688
|
-
|
|
689
|
-
const
|
|
680
|
+
const R = '.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)}}', k = new CSSStyleSheet();
|
|
681
|
+
k.replaceSync(R);
|
|
682
|
+
const c = class c extends p {
|
|
690
683
|
template() {
|
|
691
684
|
return `
|
|
692
685
|
<div class="list-item" role="listitem">
|
|
@@ -696,7 +689,7 @@ const f = class f extends p {
|
|
|
696
689
|
`;
|
|
697
690
|
}
|
|
698
691
|
constructor() {
|
|
699
|
-
super(
|
|
692
|
+
super(k), this.shadowRoot.innerHTML = this.template();
|
|
700
693
|
}
|
|
701
694
|
static get observedAttributes() {
|
|
702
695
|
return ["inverted"];
|
|
@@ -722,11 +715,11 @@ const f = class f extends p {
|
|
|
722
715
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
723
716
|
}
|
|
724
717
|
};
|
|
725
|
-
|
|
726
|
-
let d =
|
|
718
|
+
c.nativeName = "div";
|
|
719
|
+
let d = c;
|
|
727
720
|
customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
728
721
|
export {
|
|
729
722
|
h as List,
|
|
730
723
|
d as ListItem,
|
|
731
|
-
|
|
724
|
+
N as listVariantValues
|
|
732
725
|
};
|