@proximus/lavender-list 2.0.0-alpha.57 → 2.0.0-alpha.59
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 +55 -55
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
3
|
-
const t = document.createElement(
|
|
1
|
+
const w = ".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-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}}", x = {};
|
|
2
|
+
function S(r) {
|
|
3
|
+
const t = document.createElement(r), s = Object.getPrototypeOf(t);
|
|
4
4
|
return Object.getOwnPropertyNames(s);
|
|
5
5
|
}
|
|
6
|
-
function
|
|
7
|
-
const t = document.createElement(
|
|
6
|
+
function j(r) {
|
|
7
|
+
const t = document.createElement(r), s = Object.getPrototypeOf(t);
|
|
8
8
|
return Object.getOwnPropertyNames(s).map(
|
|
9
9
|
(e) => e.toLowerCase()
|
|
10
10
|
);
|
|
11
11
|
}
|
|
12
12
|
const m = new CSSStyleSheet();
|
|
13
|
-
m.replaceSync(
|
|
14
|
-
const
|
|
13
|
+
m.replaceSync($);
|
|
14
|
+
const C = typeof import.meta < "u" && typeof x < "u" && !0;
|
|
15
15
|
typeof window < "u" && (window.isComponentDebug = b);
|
|
16
16
|
function b() {
|
|
17
|
-
return
|
|
17
|
+
return C;
|
|
18
18
|
}
|
|
19
|
-
function v(
|
|
20
|
-
b() && console.error(
|
|
19
|
+
function v(r) {
|
|
20
|
+
b() && console.error(r);
|
|
21
21
|
}
|
|
22
22
|
typeof window < "u" && (window.isComponentDebug = b);
|
|
23
23
|
class u extends HTMLElement {
|
|
@@ -106,7 +106,7 @@ class u extends HTMLElement {
|
|
|
106
106
|
t,
|
|
107
107
|
s,
|
|
108
108
|
e,
|
|
109
|
-
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ?
|
|
109
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? T : M
|
|
110
110
|
);
|
|
111
111
|
break;
|
|
112
112
|
case "justify-self":
|
|
@@ -118,7 +118,7 @@ class u extends HTMLElement {
|
|
|
118
118
|
t,
|
|
119
119
|
s,
|
|
120
120
|
e,
|
|
121
|
-
|
|
121
|
+
L
|
|
122
122
|
);
|
|
123
123
|
break;
|
|
124
124
|
case "col-span":
|
|
@@ -126,14 +126,14 @@ class u extends HTMLElement {
|
|
|
126
126
|
case "col-span--tablet":
|
|
127
127
|
case "col-span--laptop":
|
|
128
128
|
case "col-span--desktop":
|
|
129
|
-
this.updateProperties(t, s, e,
|
|
129
|
+
this.updateProperties(t, s, e, D);
|
|
130
130
|
break;
|
|
131
131
|
case "order":
|
|
132
132
|
case "order--mobile":
|
|
133
133
|
case "order--tablet":
|
|
134
134
|
case "order--laptop":
|
|
135
135
|
case "order--desktop":
|
|
136
|
-
this.updateProperties(t, s, e,
|
|
136
|
+
this.updateProperties(t, s, e, O);
|
|
137
137
|
break;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
@@ -430,7 +430,7 @@ const g = class g extends u {
|
|
|
430
430
|
static get observedAttributes() {
|
|
431
431
|
return [
|
|
432
432
|
...super.observedAttributes,
|
|
433
|
-
...
|
|
433
|
+
...j(this.nativeName)
|
|
434
434
|
];
|
|
435
435
|
}
|
|
436
436
|
attributeChangedCallback(t, s, e) {
|
|
@@ -440,7 +440,7 @@ const g = class g extends u {
|
|
|
440
440
|
return Object.getPrototypeOf(this).constructor;
|
|
441
441
|
}
|
|
442
442
|
constructor(...t) {
|
|
443
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
443
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = S(
|
|
444
444
|
this.ctor.nativeName
|
|
445
445
|
)), this.enhanceWithNativeProperties();
|
|
446
446
|
}
|
|
@@ -473,7 +473,7 @@ const g = class g extends u {
|
|
|
473
473
|
};
|
|
474
474
|
g.accessorExclusions = [];
|
|
475
475
|
let p = g;
|
|
476
|
-
const
|
|
476
|
+
const M = [
|
|
477
477
|
"",
|
|
478
478
|
"default",
|
|
479
479
|
"auto",
|
|
@@ -482,21 +482,21 @@ const C = [
|
|
|
482
482
|
"center",
|
|
483
483
|
"baseline",
|
|
484
484
|
"stretch"
|
|
485
|
-
],
|
|
485
|
+
], T = [
|
|
486
486
|
"",
|
|
487
487
|
"default",
|
|
488
488
|
"start",
|
|
489
489
|
"end",
|
|
490
490
|
"center",
|
|
491
491
|
"stretch"
|
|
492
|
-
],
|
|
492
|
+
], L = [
|
|
493
493
|
"",
|
|
494
494
|
"default",
|
|
495
495
|
"start",
|
|
496
496
|
"end",
|
|
497
497
|
"center",
|
|
498
498
|
"stretch"
|
|
499
|
-
],
|
|
499
|
+
], D = [
|
|
500
500
|
"",
|
|
501
501
|
"1",
|
|
502
502
|
"2",
|
|
@@ -510,7 +510,7 @@ const C = [
|
|
|
510
510
|
"10",
|
|
511
511
|
"11",
|
|
512
512
|
"12"
|
|
513
|
-
],
|
|
513
|
+
], O = [
|
|
514
514
|
"",
|
|
515
515
|
"-1",
|
|
516
516
|
"0",
|
|
@@ -526,11 +526,11 @@ const C = [
|
|
|
526
526
|
"10",
|
|
527
527
|
"11",
|
|
528
528
|
"12"
|
|
529
|
-
],
|
|
529
|
+
], E = ["Xs", "S", "M", "L", "Xl"];
|
|
530
530
|
[
|
|
531
|
-
...
|
|
531
|
+
...E.map((r) => r.toLowerCase())
|
|
532
532
|
];
|
|
533
|
-
const
|
|
533
|
+
const N = [
|
|
534
534
|
"none",
|
|
535
535
|
"2xs",
|
|
536
536
|
"xs",
|
|
@@ -541,59 +541,59 @@ const E = [
|
|
|
541
541
|
"heading-to-content",
|
|
542
542
|
"page-layout-between-sections"
|
|
543
543
|
];
|
|
544
|
-
function
|
|
545
|
-
const
|
|
546
|
-
(
|
|
547
|
-
${t(
|
|
548
|
-
${
|
|
549
|
-
${`${i}:var(--${e}-${
|
|
544
|
+
function _(r, t, s, e = "", i, l = r) {
|
|
545
|
+
const a = new CSSStyleSheet(), n = s.reduce(
|
|
546
|
+
(y, o) => y + `
|
|
547
|
+
${t(l, o)} {
|
|
548
|
+
${r}: var(--${e}-${o}-desktop);
|
|
549
|
+
${`${i}:var(--${e}-${o}-desktop)`}
|
|
550
550
|
}
|
|
551
551
|
/* Mobile only - max 767px */
|
|
552
552
|
@media only screen and (max-width: 47.938em) {
|
|
553
|
-
${t(
|
|
554
|
-
${
|
|
555
|
-
${`${i}: var(--${e}-${
|
|
553
|
+
${t(l, o)} {
|
|
554
|
+
${r}: var(--${e}-${o}-mobile);
|
|
555
|
+
${`${i}: var(--${e}-${o}-mobile)`}
|
|
556
556
|
}
|
|
557
557
|
}
|
|
558
|
-
${t(
|
|
558
|
+
${t(l, o, "mobile")} {
|
|
559
559
|
/* Mobile only - max 767px */
|
|
560
560
|
@media only screen and (max-width: 47.938em) {
|
|
561
|
-
${
|
|
562
|
-
${`${i}: var(--${e}-${
|
|
561
|
+
${r}: var(--${e}-${o}-mobile) !important;
|
|
562
|
+
${`${i}: var(--${e}-${o}-mobile)`}
|
|
563
563
|
}
|
|
564
564
|
}
|
|
565
|
-
${t(
|
|
565
|
+
${t(l, o, "tablet")} {
|
|
566
566
|
/* Tablet - min 768px max 1024px */
|
|
567
567
|
@media only screen and (min-width: 48em) and (max-width: 64em) {
|
|
568
|
-
${
|
|
569
|
-
${`${i}: var(--${e}-${
|
|
568
|
+
${r}: var(--${e}-${o}-desktop) !important;
|
|
569
|
+
${`${i}: var(--${e}-${o}-desktop)`}
|
|
570
570
|
}
|
|
571
571
|
}
|
|
572
|
-
${t(
|
|
572
|
+
${t(l, o, "laptop")} {
|
|
573
573
|
/* Laptop - 1025px*/
|
|
574
574
|
@media only screen and (min-width: 64.0625em) {
|
|
575
|
-
${
|
|
576
|
-
${`${i}: var(--${e}-${
|
|
575
|
+
${r}: var(--${e}-${o}-desktop) !important;
|
|
576
|
+
${`${i}: var(--${e}-${o}-desktop)`}
|
|
577
577
|
}
|
|
578
578
|
}
|
|
579
|
-
${t(
|
|
579
|
+
${t(l, o, "desktop")} {
|
|
580
580
|
/* Desktop - 1025px*/
|
|
581
581
|
@media only screen and (min-width: 64.0625em) {
|
|
582
|
-
${
|
|
583
|
-
${`${i}: var(--${e}-${
|
|
582
|
+
${r}: var(--${e}-${o}-desktop) !important;
|
|
583
|
+
${`${i}: var(--${e}-${o}-desktop)`}
|
|
584
584
|
}
|
|
585
585
|
}`,
|
|
586
586
|
""
|
|
587
587
|
);
|
|
588
|
-
return
|
|
588
|
+
return a.replaceSync(n), a;
|
|
589
589
|
}
|
|
590
590
|
const k = new CSSStyleSheet();
|
|
591
|
-
k.replaceSync(
|
|
592
|
-
const
|
|
591
|
+
k.replaceSync(w);
|
|
592
|
+
const B = ["", "ul", "ol"], G = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, R = "px-spacing", q = _(
|
|
593
593
|
"gap",
|
|
594
|
-
B,
|
|
595
|
-
E,
|
|
596
594
|
G,
|
|
595
|
+
N,
|
|
596
|
+
R,
|
|
597
597
|
"--list-gap"
|
|
598
598
|
), c = class c extends p {
|
|
599
599
|
template() {
|
|
@@ -604,7 +604,7 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
604
604
|
`;
|
|
605
605
|
}
|
|
606
606
|
constructor() {
|
|
607
|
-
super(k,
|
|
607
|
+
super(k, q), this.shadowRoot.innerHTML = this.template();
|
|
608
608
|
}
|
|
609
609
|
static get observedAttributes() {
|
|
610
610
|
return ["inverted", "variant"];
|
|
@@ -621,7 +621,7 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
621
621
|
this.$el.toggleAttribute("inverted", e !== null);
|
|
622
622
|
break;
|
|
623
623
|
case "variant":
|
|
624
|
-
this.checkName(
|
|
624
|
+
this.checkName(B, e) || v(
|
|
625
625
|
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
626
626
|
);
|
|
627
627
|
for (let i = 0; i < this.$children.length; i++) {
|
|
@@ -684,8 +684,8 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
684
684
|
c.nativeName = "div";
|
|
685
685
|
let h = c;
|
|
686
686
|
customElements.get("px-list") || customElements.define("px-list", h);
|
|
687
|
-
const
|
|
688
|
-
A.replaceSync(
|
|
687
|
+
const H = '.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)}}', A = new CSSStyleSheet();
|
|
688
|
+
A.replaceSync(H);
|
|
689
689
|
const f = class f extends p {
|
|
690
690
|
template() {
|
|
691
691
|
return `
|
|
@@ -728,5 +728,5 @@ customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
|
728
728
|
export {
|
|
729
729
|
h as List,
|
|
730
730
|
d as ListItem,
|
|
731
|
-
|
|
731
|
+
B as listVariantValues
|
|
732
732
|
};
|