@proximus/lavender-list 1.0.0-alpha.2 → 1.0.0-beta.0
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 +70 -82
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
3
|
-
const t = document.createElement(
|
|
1
|
+
const k = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", v = ":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) and (max-width: 1440px){: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}}";
|
|
2
|
+
function A(r) {
|
|
3
|
+
const t = document.createElement(r), s = Object.getPrototypeOf(t);
|
|
4
4
|
return Object.getOwnPropertyNames(s);
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
function y(r) {
|
|
7
|
+
const t = document.createElement(r), s = Object.getPrototypeOf(t);
|
|
8
|
+
return Object.getOwnPropertyNames(s).map(
|
|
9
|
+
(e) => e.toLowerCase()
|
|
10
|
+
);
|
|
11
|
+
}
|
|
12
|
+
const g = new CSSStyleSheet();
|
|
13
|
+
g.replaceSync(v);
|
|
8
14
|
class b extends HTMLElement {
|
|
9
15
|
static get observedAttributes() {
|
|
10
16
|
return [
|
|
@@ -57,7 +63,7 @@ class b extends HTMLElement {
|
|
|
57
63
|
}
|
|
58
64
|
constructor(...t) {
|
|
59
65
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
60
|
-
|
|
66
|
+
g,
|
|
61
67
|
...t
|
|
62
68
|
];
|
|
63
69
|
}
|
|
@@ -90,7 +96,7 @@ class b extends HTMLElement {
|
|
|
90
96
|
t,
|
|
91
97
|
s,
|
|
92
98
|
e,
|
|
93
|
-
this.isGrid ?
|
|
99
|
+
this.isGrid ? $ : S
|
|
94
100
|
);
|
|
95
101
|
break;
|
|
96
102
|
case "justify-self":
|
|
@@ -102,7 +108,7 @@ class b extends HTMLElement {
|
|
|
102
108
|
t,
|
|
103
109
|
s,
|
|
104
110
|
e,
|
|
105
|
-
|
|
111
|
+
w
|
|
106
112
|
);
|
|
107
113
|
break;
|
|
108
114
|
case "col-span":
|
|
@@ -110,14 +116,14 @@ class b extends HTMLElement {
|
|
|
110
116
|
case "col-span--tablet":
|
|
111
117
|
case "col-span--laptop":
|
|
112
118
|
case "col-span--desktop":
|
|
113
|
-
this.updateProperties(t, s, e,
|
|
119
|
+
this.updateProperties(t, s, e, x);
|
|
114
120
|
break;
|
|
115
121
|
case "order":
|
|
116
122
|
case "order--mobile":
|
|
117
123
|
case "order--tablet":
|
|
118
124
|
case "order--laptop":
|
|
119
125
|
case "order--desktop":
|
|
120
|
-
this.updateProperties(t, s, e,
|
|
126
|
+
this.updateProperties(t, s, e, j);
|
|
121
127
|
break;
|
|
122
128
|
}
|
|
123
129
|
}
|
|
@@ -126,8 +132,8 @@ class b extends HTMLElement {
|
|
|
126
132
|
console.error(`${e} is not a valid value for ${i}`);
|
|
127
133
|
return;
|
|
128
134
|
}
|
|
129
|
-
const
|
|
130
|
-
if (!
|
|
135
|
+
const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
|
|
136
|
+
if (!a)
|
|
131
137
|
this.style.setProperty(
|
|
132
138
|
`--${l}-value`,
|
|
133
139
|
s
|
|
@@ -403,11 +409,11 @@ class b extends HTMLElement {
|
|
|
403
409
|
this.setAttribute("order--desktop", t);
|
|
404
410
|
}
|
|
405
411
|
}
|
|
406
|
-
class
|
|
412
|
+
class c extends b {
|
|
407
413
|
static get observedAttributes() {
|
|
408
414
|
return [
|
|
409
415
|
...super.observedAttributes,
|
|
410
|
-
...
|
|
416
|
+
...y(this.nativeName)
|
|
411
417
|
];
|
|
412
418
|
}
|
|
413
419
|
attributeChangedCallback(t, s, e) {
|
|
@@ -418,7 +424,7 @@ class m extends b {
|
|
|
418
424
|
}
|
|
419
425
|
connectedCallback() {
|
|
420
426
|
var t;
|
|
421
|
-
for (const s of
|
|
427
|
+
for (const s of A(this.nativeName))
|
|
422
428
|
if (s !== "constructor")
|
|
423
429
|
try {
|
|
424
430
|
Object.defineProperty(this, s, {
|
|
@@ -441,7 +447,7 @@ class m extends b {
|
|
|
441
447
|
return this.shadowRoot.querySelector(this.nativeName);
|
|
442
448
|
}
|
|
443
449
|
}
|
|
444
|
-
const
|
|
450
|
+
const S = [
|
|
445
451
|
"",
|
|
446
452
|
"default",
|
|
447
453
|
"auto",
|
|
@@ -450,21 +456,21 @@ const y = [
|
|
|
450
456
|
"center",
|
|
451
457
|
"baseline",
|
|
452
458
|
"stretch"
|
|
453
|
-
],
|
|
459
|
+
], $ = [
|
|
454
460
|
"",
|
|
455
461
|
"default",
|
|
456
462
|
"start",
|
|
457
463
|
"end",
|
|
458
464
|
"center",
|
|
459
465
|
"stretch"
|
|
460
|
-
],
|
|
466
|
+
], w = [
|
|
461
467
|
"",
|
|
462
468
|
"default",
|
|
463
469
|
"start",
|
|
464
470
|
"end",
|
|
465
471
|
"center",
|
|
466
472
|
"stretch"
|
|
467
|
-
],
|
|
473
|
+
], x = [
|
|
468
474
|
"",
|
|
469
475
|
"1",
|
|
470
476
|
"2",
|
|
@@ -478,7 +484,7 @@ const y = [
|
|
|
478
484
|
"10",
|
|
479
485
|
"11",
|
|
480
486
|
"12"
|
|
481
|
-
],
|
|
487
|
+
], j = [
|
|
482
488
|
"",
|
|
483
489
|
"-1",
|
|
484
490
|
"0",
|
|
@@ -494,11 +500,11 @@ const y = [
|
|
|
494
500
|
"10",
|
|
495
501
|
"11",
|
|
496
502
|
"12"
|
|
497
|
-
],
|
|
503
|
+
], C = ["Xs", "S", "M", "L", "Xl"];
|
|
498
504
|
[
|
|
499
|
-
...
|
|
505
|
+
...C.map((r) => r.toLowerCase())
|
|
500
506
|
];
|
|
501
|
-
const
|
|
507
|
+
const M = [
|
|
502
508
|
"none",
|
|
503
509
|
"2xs",
|
|
504
510
|
"xs",
|
|
@@ -509,61 +515,61 @@ const C = [
|
|
|
509
515
|
"heading-to-content",
|
|
510
516
|
"page-layout-between-sections"
|
|
511
517
|
];
|
|
512
|
-
function
|
|
513
|
-
const
|
|
514
|
-
(n,
|
|
515
|
-
${t(
|
|
516
|
-
${
|
|
517
|
-
${`${i}:var(--${e}-${
|
|
518
|
+
function N(r, t, s, e = "", i) {
|
|
519
|
+
const a = new CSSStyleSheet(), l = s.reduce(
|
|
520
|
+
(n, o) => n + `
|
|
521
|
+
${t(r, o)} {
|
|
522
|
+
${r}: var(--${e}-${o}-desktop);
|
|
523
|
+
${`${i}:var(--${e}-${o}-desktop)`}
|
|
518
524
|
}
|
|
519
525
|
/* Mobile only - max 767px */
|
|
520
526
|
@media only screen and (max-width: 47.938em) {
|
|
521
|
-
${t(
|
|
522
|
-
${
|
|
523
|
-
${`${i}: var(--${e}-${
|
|
527
|
+
${t(r, o)} {
|
|
528
|
+
${r}: var(--${e}-${o}-mobile);
|
|
529
|
+
${`${i}: var(--${e}-${o}-mobile)`}
|
|
524
530
|
}
|
|
525
531
|
}
|
|
526
|
-
${t(
|
|
532
|
+
${t(r, o, "mobile")} {
|
|
527
533
|
/* Mobile only - max 767px */
|
|
528
534
|
@media only screen and (max-width: 47.938em) {
|
|
529
|
-
${
|
|
530
|
-
${`${i}: var(--${e}-${
|
|
535
|
+
${r}: var(--${e}-${o}-mobile) !important;
|
|
536
|
+
${`${i}: var(--${e}-${o}-mobile)`}
|
|
531
537
|
}
|
|
532
538
|
}
|
|
533
|
-
${t(
|
|
539
|
+
${t(r, o, "tablet")} {
|
|
534
540
|
/* Tablet - min 768px max 1024px */
|
|
535
541
|
@media only screen and (min-width: 48em) and (max-width: 64em) {
|
|
536
|
-
${
|
|
537
|
-
${`${i}: var(--${e}-${
|
|
542
|
+
${r}: var(--${e}-${o}-desktop) !important;
|
|
543
|
+
${`${i}: var(--${e}-${o}-desktop)`}
|
|
538
544
|
}
|
|
539
545
|
}
|
|
540
|
-
${t(
|
|
546
|
+
${t(r, o, "laptop")} {
|
|
541
547
|
/* Laptop - 1025px*/
|
|
542
548
|
@media only screen and (min-width: 64.0625em) {
|
|
543
|
-
${
|
|
544
|
-
${`${i}: var(--${e}-${
|
|
549
|
+
${r}: var(--${e}-${o}-desktop) !important;
|
|
550
|
+
${`${i}: var(--${e}-${o}-desktop)`}
|
|
545
551
|
}
|
|
546
552
|
}
|
|
547
|
-
${t(
|
|
553
|
+
${t(r, o, "desktop")} {
|
|
548
554
|
/* Desktop - 1025px*/
|
|
549
555
|
@media only screen and (min-width: 64.0625em) {
|
|
550
|
-
${
|
|
551
|
-
${`${i}: var(--${e}-${
|
|
556
|
+
${r}: var(--${e}-${o}-desktop) !important;
|
|
557
|
+
${`${i}: var(--${e}-${o}-desktop)`}
|
|
552
558
|
}
|
|
553
559
|
}`,
|
|
554
560
|
""
|
|
555
561
|
);
|
|
556
|
-
return
|
|
562
|
+
return a.replaceSync(l), a;
|
|
557
563
|
}
|
|
558
|
-
class
|
|
564
|
+
class T {
|
|
559
565
|
constructor(t, s, e, i) {
|
|
560
566
|
this.component = t, this.attributeName = s, this.cssVariable = i, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
|
|
561
567
|
this.component,
|
|
562
568
|
this.toCamelCase(this.attributeName),
|
|
563
569
|
{
|
|
564
570
|
get: () => this.component.getAttribute(this.attributeName),
|
|
565
|
-
set: (
|
|
566
|
-
this.component.setAttribute(this.attributeName,
|
|
571
|
+
set: (a) => {
|
|
572
|
+
this.component.setAttribute(this.attributeName, a);
|
|
567
573
|
}
|
|
568
574
|
}
|
|
569
575
|
);
|
|
@@ -622,12 +628,12 @@ class D {
|
|
|
622
628
|
i,
|
|
623
629
|
!1
|
|
624
630
|
);
|
|
625
|
-
const
|
|
631
|
+
const a = this.component.getAttribute(
|
|
626
632
|
this.attributeNameDesktop
|
|
627
633
|
);
|
|
628
|
-
|
|
634
|
+
a && this.setCSSProperty(
|
|
629
635
|
this.attributeNameDesktop,
|
|
630
|
-
|
|
636
|
+
a,
|
|
631
637
|
!1
|
|
632
638
|
);
|
|
633
639
|
}
|
|
@@ -635,20 +641,20 @@ class D {
|
|
|
635
641
|
this._attributeValue = t, this.setCSSProperties();
|
|
636
642
|
}
|
|
637
643
|
}
|
|
638
|
-
const
|
|
639
|
-
|
|
640
|
-
const E = ["", "mobile", "tablet", "laptop"],
|
|
644
|
+
const m = new CSSStyleSheet();
|
|
645
|
+
m.replaceSync(k);
|
|
646
|
+
const E = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, L = "px-spacing", d = class d extends c {
|
|
641
647
|
constructor() {
|
|
642
648
|
super(
|
|
643
|
-
|
|
644
|
-
|
|
649
|
+
m,
|
|
650
|
+
N(
|
|
645
651
|
"gap",
|
|
646
|
-
|
|
647
|
-
|
|
652
|
+
D,
|
|
653
|
+
M,
|
|
648
654
|
L,
|
|
649
655
|
"--list-gap"
|
|
650
656
|
)
|
|
651
|
-
), this.AttributeDelegate = new
|
|
657
|
+
), this.AttributeDelegate = new T(
|
|
652
658
|
this,
|
|
653
659
|
"gap",
|
|
654
660
|
(t) => t,
|
|
@@ -663,14 +669,7 @@ const E = ["", "mobile", "tablet", "laptop"], T = (a, t, s) => `:host([${a}${s ?
|
|
|
663
669
|
`;
|
|
664
670
|
}
|
|
665
671
|
static get observedAttributes() {
|
|
666
|
-
return [
|
|
667
|
-
"gap",
|
|
668
|
-
"gap--mobile",
|
|
669
|
-
"gap--tablet",
|
|
670
|
-
"gap--laptop",
|
|
671
|
-
"gap--desktop",
|
|
672
|
-
"inverted"
|
|
673
|
-
];
|
|
672
|
+
return ["inverted"];
|
|
674
673
|
}
|
|
675
674
|
connectedCallback() {
|
|
676
675
|
super.connectedCallback(), this.gap || (this.gap = "xs");
|
|
@@ -678,17 +677,6 @@ const E = ["", "mobile", "tablet", "laptop"], T = (a, t, s) => `:host([${a}${s ?
|
|
|
678
677
|
attributeChangedCallback(t, s, e) {
|
|
679
678
|
if (s !== e)
|
|
680
679
|
switch (t) {
|
|
681
|
-
case "gap":
|
|
682
|
-
case "gap--mobile":
|
|
683
|
-
case "gap--tablet":
|
|
684
|
-
case "gap--laptop":
|
|
685
|
-
case "gap--desktop":
|
|
686
|
-
this.AttributeDelegate.attributeChangedCallback(
|
|
687
|
-
t,
|
|
688
|
-
s,
|
|
689
|
-
e
|
|
690
|
-
);
|
|
691
|
-
break;
|
|
692
680
|
case "inverted":
|
|
693
681
|
for (let i = 0; i < this.$children.length; i++)
|
|
694
682
|
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
@@ -739,9 +727,9 @@ const E = ["", "mobile", "tablet", "laptop"], T = (a, t, s) => `:host([${a}${s ?
|
|
|
739
727
|
d.nativeName = "div";
|
|
740
728
|
let p = d;
|
|
741
729
|
customElements.get("px-list") || customElements.define("px-list", p);
|
|
742
|
-
const
|
|
743
|
-
|
|
744
|
-
const u = class u extends
|
|
730
|
+
const O = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);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)}}', f = new CSSStyleSheet();
|
|
731
|
+
f.replaceSync(O);
|
|
732
|
+
const u = class u extends c {
|
|
745
733
|
template() {
|
|
746
734
|
return `
|
|
747
735
|
<div class="list-item" role="listitem">
|
|
@@ -751,7 +739,7 @@ const u = class u extends m {
|
|
|
751
739
|
`;
|
|
752
740
|
}
|
|
753
741
|
constructor() {
|
|
754
|
-
super(
|
|
742
|
+
super(f), this.shadowRoot.innerHTML = this.template();
|
|
755
743
|
}
|
|
756
744
|
static get observedAttributes() {
|
|
757
745
|
return ["inverted"];
|