@proximus/lavender-list 1.4.4-beta.1 → 1.4.4
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,22 +123,20 @@ 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
138
|
if (i && !this.checkName(i, e)) {
|
|
142
|
-
|
|
143
|
-
`${e} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
144
|
-
);
|
|
139
|
+
`${e}${i}${this.tagName.toLowerCase()}`;
|
|
145
140
|
return;
|
|
146
141
|
}
|
|
147
142
|
const l = t.indexOf("--") > -1, a = l ? t.split("--")[0] : t;
|
|
@@ -428,12 +423,12 @@ class u extends HTMLElement {
|
|
|
428
423
|
this.setAttribute("order--desktop", t);
|
|
429
424
|
}
|
|
430
425
|
}
|
|
431
|
-
const
|
|
426
|
+
const u = class u extends b {
|
|
432
427
|
// nativeName: string;
|
|
433
428
|
static get observedAttributes() {
|
|
434
429
|
return [
|
|
435
430
|
...super.observedAttributes,
|
|
436
|
-
...
|
|
431
|
+
...x(this.nativeName)
|
|
437
432
|
];
|
|
438
433
|
}
|
|
439
434
|
attributeChangedCallback(t, s, e) {
|
|
@@ -443,7 +438,7 @@ const g = class g extends u {
|
|
|
443
438
|
return Object.getPrototypeOf(this).constructor;
|
|
444
439
|
}
|
|
445
440
|
constructor(...t) {
|
|
446
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
441
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = $(
|
|
447
442
|
this.ctor.nativeName
|
|
448
443
|
)), this.enhanceWithNativeProperties();
|
|
449
444
|
}
|
|
@@ -474,9 +469,9 @@ const g = class g extends u {
|
|
|
474
469
|
s ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
475
470
|
}
|
|
476
471
|
};
|
|
477
|
-
|
|
478
|
-
let p =
|
|
479
|
-
const
|
|
472
|
+
u.accessorExclusions = [];
|
|
473
|
+
let p = u;
|
|
474
|
+
const j = [
|
|
480
475
|
"",
|
|
481
476
|
"default",
|
|
482
477
|
"auto",
|
|
@@ -485,21 +480,21 @@ const C = [
|
|
|
485
480
|
"center",
|
|
486
481
|
"baseline",
|
|
487
482
|
"stretch"
|
|
488
|
-
],
|
|
483
|
+
], C = [
|
|
489
484
|
"",
|
|
490
485
|
"default",
|
|
491
486
|
"start",
|
|
492
487
|
"end",
|
|
493
488
|
"center",
|
|
494
489
|
"stretch"
|
|
495
|
-
],
|
|
490
|
+
], M = [
|
|
496
491
|
"",
|
|
497
492
|
"default",
|
|
498
493
|
"start",
|
|
499
494
|
"end",
|
|
500
495
|
"center",
|
|
501
496
|
"stretch"
|
|
502
|
-
],
|
|
497
|
+
], T = [
|
|
503
498
|
"",
|
|
504
499
|
"1",
|
|
505
500
|
"2",
|
|
@@ -513,7 +508,7 @@ const C = [
|
|
|
513
508
|
"10",
|
|
514
509
|
"11",
|
|
515
510
|
"12"
|
|
516
|
-
],
|
|
511
|
+
], L = [
|
|
517
512
|
"",
|
|
518
513
|
"-1",
|
|
519
514
|
"0",
|
|
@@ -529,11 +524,11 @@ const C = [
|
|
|
529
524
|
"10",
|
|
530
525
|
"11",
|
|
531
526
|
"12"
|
|
532
|
-
],
|
|
527
|
+
], D = ["Xs", "S", "M", "L", "Xl"];
|
|
533
528
|
[
|
|
534
|
-
...
|
|
529
|
+
...D.map((o) => o.toLowerCase())
|
|
535
530
|
];
|
|
536
|
-
const
|
|
531
|
+
const O = [
|
|
537
532
|
"none",
|
|
538
533
|
"2xs",
|
|
539
534
|
"xs",
|
|
@@ -544,7 +539,7 @@ const E = [
|
|
|
544
539
|
"heading-to-content",
|
|
545
540
|
"page-layout-between-sections"
|
|
546
541
|
];
|
|
547
|
-
function
|
|
542
|
+
function E(o, t, s, e = "", i) {
|
|
548
543
|
const l = new CSSStyleSheet(), a = s.reduce(
|
|
549
544
|
(n, r) => n + `
|
|
550
545
|
${t(o, r)} {
|
|
@@ -590,15 +585,15 @@ function N(o, t, s, e = "", i) {
|
|
|
590
585
|
);
|
|
591
586
|
return l.replaceSync(a), l;
|
|
592
587
|
}
|
|
593
|
-
const
|
|
594
|
-
|
|
595
|
-
const
|
|
588
|
+
const v = new CSSStyleSheet();
|
|
589
|
+
v.replaceSync(A);
|
|
590
|
+
const N = ["", "ul", "ol"], _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px-spacing", G = E(
|
|
596
591
|
"gap",
|
|
592
|
+
_,
|
|
593
|
+
O,
|
|
597
594
|
B,
|
|
598
|
-
E,
|
|
599
|
-
G,
|
|
600
595
|
"--list-gap"
|
|
601
|
-
),
|
|
596
|
+
), g = class g extends p {
|
|
602
597
|
template() {
|
|
603
598
|
return `
|
|
604
599
|
<div class="list" role="list">
|
|
@@ -607,7 +602,7 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
607
602
|
`;
|
|
608
603
|
}
|
|
609
604
|
constructor() {
|
|
610
|
-
super(
|
|
605
|
+
super(v, G), this.shadowRoot.innerHTML = this.template();
|
|
611
606
|
}
|
|
612
607
|
static get observedAttributes() {
|
|
613
608
|
return ["inverted", "variant"];
|
|
@@ -624,9 +619,7 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
624
619
|
this.$el.toggleAttribute("inverted", e !== null);
|
|
625
620
|
break;
|
|
626
621
|
case "variant":
|
|
627
|
-
this.checkName(
|
|
628
|
-
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
629
|
-
);
|
|
622
|
+
this.checkName(N, e) || (`${e}${this.tagName.toLowerCase()}`, void 0);
|
|
630
623
|
for (let i = 0; i < this.$children.length; i++) {
|
|
631
624
|
const l = this.$children[i];
|
|
632
625
|
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"));
|
|
@@ -684,12 +677,12 @@ const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='$
|
|
|
684
677
|
t ? this.setAttribute("variant", t) : this.removeAttribute("variant");
|
|
685
678
|
}
|
|
686
679
|
};
|
|
687
|
-
|
|
688
|
-
let h =
|
|
680
|
+
g.nativeName = "div";
|
|
681
|
+
let h = g;
|
|
689
682
|
customElements.get("px-list") || customElements.define("px-list", h);
|
|
690
|
-
const
|
|
691
|
-
|
|
692
|
-
const
|
|
683
|
+
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();
|
|
684
|
+
k.replaceSync(R);
|
|
685
|
+
const c = class c extends p {
|
|
693
686
|
template() {
|
|
694
687
|
return `
|
|
695
688
|
<div class="list-item" role="listitem">
|
|
@@ -699,7 +692,7 @@ const f = class f extends p {
|
|
|
699
692
|
`;
|
|
700
693
|
}
|
|
701
694
|
constructor() {
|
|
702
|
-
super(
|
|
695
|
+
super(k), this.shadowRoot.innerHTML = this.template();
|
|
703
696
|
}
|
|
704
697
|
static get observedAttributes() {
|
|
705
698
|
return ["inverted"];
|
|
@@ -725,11 +718,11 @@ const f = class f extends p {
|
|
|
725
718
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
726
719
|
}
|
|
727
720
|
};
|
|
728
|
-
|
|
729
|
-
let d =
|
|
721
|
+
c.nativeName = "div";
|
|
722
|
+
let d = c;
|
|
730
723
|
customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
731
724
|
export {
|
|
732
725
|
h as List,
|
|
733
726
|
d as ListItem,
|
|
734
|
-
|
|
727
|
+
N as listVariantValues
|
|
735
728
|
};
|