@proximus/lavender-list 1.4.2-beta.1 → 1.4.3-alpha.2
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 +54 -43
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,17 +1,26 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
1
|
+
const A = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", w = ":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}}", y = {};
|
|
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 S(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
|
-
|
|
12
|
+
const m = new CSSStyleSheet();
|
|
13
|
+
m.replaceSync(w);
|
|
14
|
+
const x = typeof import.meta < "u" && typeof y < "u" && !0;
|
|
15
|
+
typeof window < "u" && (window.isComponentDebug = b);
|
|
16
|
+
function b() {
|
|
17
|
+
return x;
|
|
18
|
+
}
|
|
19
|
+
function j(o) {
|
|
20
|
+
b() && console.error(o);
|
|
21
|
+
}
|
|
22
|
+
typeof window < "u" && (window.isComponentDebug = b);
|
|
23
|
+
class u extends HTMLElement {
|
|
15
24
|
static get observedAttributes() {
|
|
16
25
|
return [
|
|
17
26
|
"grow",
|
|
@@ -63,13 +72,13 @@ class b extends HTMLElement {
|
|
|
63
72
|
}
|
|
64
73
|
constructor(...t) {
|
|
65
74
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
66
|
-
|
|
75
|
+
m,
|
|
67
76
|
...t
|
|
68
77
|
];
|
|
69
78
|
}
|
|
70
79
|
attributeChangedCallback(t, s, e) {
|
|
71
80
|
var i;
|
|
72
|
-
if (
|
|
81
|
+
if (u.observedAttributes.indexOf(t) !== -1)
|
|
73
82
|
switch (t) {
|
|
74
83
|
case "grow":
|
|
75
84
|
case "grow--mobile":
|
|
@@ -97,7 +106,7 @@ class b extends HTMLElement {
|
|
|
97
106
|
t,
|
|
98
107
|
s,
|
|
99
108
|
e,
|
|
100
|
-
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ?
|
|
109
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? T : M
|
|
101
110
|
);
|
|
102
111
|
break;
|
|
103
112
|
case "justify-self":
|
|
@@ -109,7 +118,7 @@ class b extends HTMLElement {
|
|
|
109
118
|
t,
|
|
110
119
|
s,
|
|
111
120
|
e,
|
|
112
|
-
|
|
121
|
+
C
|
|
113
122
|
);
|
|
114
123
|
break;
|
|
115
124
|
case "col-span":
|
|
@@ -117,20 +126,22 @@ class b extends HTMLElement {
|
|
|
117
126
|
case "col-span--tablet":
|
|
118
127
|
case "col-span--laptop":
|
|
119
128
|
case "col-span--desktop":
|
|
120
|
-
this.updateProperties(t, s, e,
|
|
129
|
+
this.updateProperties(t, s, e, D);
|
|
121
130
|
break;
|
|
122
131
|
case "order":
|
|
123
132
|
case "order--mobile":
|
|
124
133
|
case "order--tablet":
|
|
125
134
|
case "order--laptop":
|
|
126
135
|
case "order--desktop":
|
|
127
|
-
this.updateProperties(t, s, e,
|
|
136
|
+
this.updateProperties(t, s, e, L);
|
|
128
137
|
break;
|
|
129
138
|
}
|
|
130
139
|
}
|
|
131
140
|
updateProperties(t, s, e, i) {
|
|
132
141
|
if (i && !this.checkName(i, e)) {
|
|
133
|
-
|
|
142
|
+
j(
|
|
143
|
+
`${e} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
144
|
+
);
|
|
134
145
|
return;
|
|
135
146
|
}
|
|
136
147
|
const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
|
|
@@ -417,12 +428,12 @@ class b extends HTMLElement {
|
|
|
417
428
|
this.setAttribute("order--desktop", t);
|
|
418
429
|
}
|
|
419
430
|
}
|
|
420
|
-
const
|
|
431
|
+
const g = class g extends u {
|
|
421
432
|
// nativeName: string;
|
|
422
433
|
static get observedAttributes() {
|
|
423
434
|
return [
|
|
424
435
|
...super.observedAttributes,
|
|
425
|
-
...
|
|
436
|
+
...S(this.nativeName)
|
|
426
437
|
];
|
|
427
438
|
}
|
|
428
439
|
attributeChangedCallback(t, s, e) {
|
|
@@ -432,7 +443,7 @@ const u = class u extends b {
|
|
|
432
443
|
return Object.getPrototypeOf(this).constructor;
|
|
433
444
|
}
|
|
434
445
|
constructor(...t) {
|
|
435
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
446
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = $(
|
|
436
447
|
this.ctor.nativeName
|
|
437
448
|
)), this.enhanceWithNativeProperties();
|
|
438
449
|
}
|
|
@@ -463,9 +474,9 @@ const u = class u extends b {
|
|
|
463
474
|
s ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
464
475
|
}
|
|
465
476
|
};
|
|
466
|
-
|
|
467
|
-
let p =
|
|
468
|
-
const
|
|
477
|
+
g.accessorExclusions = [];
|
|
478
|
+
let p = g;
|
|
479
|
+
const M = [
|
|
469
480
|
"",
|
|
470
481
|
"default",
|
|
471
482
|
"auto",
|
|
@@ -474,21 +485,21 @@ const $ = [
|
|
|
474
485
|
"center",
|
|
475
486
|
"baseline",
|
|
476
487
|
"stretch"
|
|
477
|
-
],
|
|
488
|
+
], T = [
|
|
478
489
|
"",
|
|
479
490
|
"default",
|
|
480
491
|
"start",
|
|
481
492
|
"end",
|
|
482
493
|
"center",
|
|
483
494
|
"stretch"
|
|
484
|
-
],
|
|
495
|
+
], C = [
|
|
485
496
|
"",
|
|
486
497
|
"default",
|
|
487
498
|
"start",
|
|
488
499
|
"end",
|
|
489
500
|
"center",
|
|
490
501
|
"stretch"
|
|
491
|
-
],
|
|
502
|
+
], D = [
|
|
492
503
|
"",
|
|
493
504
|
"1",
|
|
494
505
|
"2",
|
|
@@ -502,7 +513,7 @@ const $ = [
|
|
|
502
513
|
"10",
|
|
503
514
|
"11",
|
|
504
515
|
"12"
|
|
505
|
-
],
|
|
516
|
+
], L = [
|
|
506
517
|
"",
|
|
507
518
|
"-1",
|
|
508
519
|
"0",
|
|
@@ -518,11 +529,11 @@ const $ = [
|
|
|
518
529
|
"10",
|
|
519
530
|
"11",
|
|
520
531
|
"12"
|
|
521
|
-
],
|
|
532
|
+
], O = ["Xs", "S", "M", "L", "Xl"];
|
|
522
533
|
[
|
|
523
|
-
...
|
|
534
|
+
...O.map((o) => o.toLowerCase())
|
|
524
535
|
];
|
|
525
|
-
const
|
|
536
|
+
const E = [
|
|
526
537
|
"none",
|
|
527
538
|
"2xs",
|
|
528
539
|
"xs",
|
|
@@ -533,7 +544,7 @@ const L = [
|
|
|
533
544
|
"heading-to-content",
|
|
534
545
|
"page-layout-between-sections"
|
|
535
546
|
];
|
|
536
|
-
function
|
|
547
|
+
function N(o, t, s, e = "", i) {
|
|
537
548
|
const a = new CSSStyleSheet(), l = s.reduce(
|
|
538
549
|
(n, r) => n + `
|
|
539
550
|
${t(o, r)} {
|
|
@@ -579,15 +590,15 @@ function D(o, t, s, e = "", i) {
|
|
|
579
590
|
);
|
|
580
591
|
return a.replaceSync(l), a;
|
|
581
592
|
}
|
|
582
|
-
const
|
|
583
|
-
|
|
584
|
-
const
|
|
593
|
+
const k = new CSSStyleSheet();
|
|
594
|
+
k.replaceSync(A);
|
|
595
|
+
const _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px-spacing", G = N(
|
|
585
596
|
"gap",
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
597
|
+
_,
|
|
598
|
+
E,
|
|
599
|
+
B,
|
|
589
600
|
"--list-gap"
|
|
590
|
-
),
|
|
601
|
+
), c = class c extends p {
|
|
591
602
|
template() {
|
|
592
603
|
return `
|
|
593
604
|
<div class="list" role="list">
|
|
@@ -596,7 +607,7 @@ const C = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, O = "px
|
|
|
596
607
|
`;
|
|
597
608
|
}
|
|
598
609
|
constructor() {
|
|
599
|
-
super(
|
|
610
|
+
super(k, G), this.shadowRoot.innerHTML = this.template();
|
|
600
611
|
}
|
|
601
612
|
static get observedAttributes() {
|
|
602
613
|
return ["inverted"];
|
|
@@ -654,12 +665,12 @@ const C = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, O = "px
|
|
|
654
665
|
t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
|
|
655
666
|
}
|
|
656
667
|
};
|
|
657
|
-
|
|
658
|
-
let h =
|
|
668
|
+
c.nativeName = "div";
|
|
669
|
+
let h = c;
|
|
659
670
|
customElements.get("px-list") || customElements.define("px-list", h);
|
|
660
|
-
const
|
|
661
|
-
|
|
662
|
-
const
|
|
671
|
+
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)}::slotted([slot="label"][inverted]){color:var(--px-color-text-neutral-inverted)}@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)}}', v = new CSSStyleSheet();
|
|
672
|
+
v.replaceSync(R);
|
|
673
|
+
const f = class f extends p {
|
|
663
674
|
template() {
|
|
664
675
|
return `
|
|
665
676
|
<div class="list-item" role="listitem">
|
|
@@ -669,7 +680,7 @@ const c = class c extends p {
|
|
|
669
680
|
`;
|
|
670
681
|
}
|
|
671
682
|
constructor() {
|
|
672
|
-
super(
|
|
683
|
+
super(v), this.shadowRoot.innerHTML = this.template();
|
|
673
684
|
}
|
|
674
685
|
static get observedAttributes() {
|
|
675
686
|
return ["inverted"];
|
|
@@ -695,8 +706,8 @@ const c = class c extends p {
|
|
|
695
706
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
696
707
|
}
|
|
697
708
|
};
|
|
698
|
-
|
|
699
|
-
let d =
|
|
709
|
+
f.nativeName = "div";
|
|
710
|
+
let d = f;
|
|
700
711
|
customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
701
712
|
export {
|
|
702
713
|
h as List,
|