@proximus/lavender-list 1.4.3-beta.2 → 1.4.3-beta.3
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/List.d.ts +3 -0
- package/dist/index.es.js +54 -34
- package/package.json +1 -1
package/dist/List.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { PxElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare const listVariantValues: string[];
|
|
2
3
|
export declare class List extends PxElement<HTMLDivElement> {
|
|
3
4
|
static nativeName: string;
|
|
4
5
|
private template;
|
|
@@ -19,4 +20,6 @@ export declare class List extends PxElement<HTMLDivElement> {
|
|
|
19
20
|
set gapLaptop(value: string);
|
|
20
21
|
get gapDesktop(): string;
|
|
21
22
|
set gapDesktop(value: string);
|
|
23
|
+
get variant(): string;
|
|
24
|
+
set variant(value: string);
|
|
22
25
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
1
|
+
const y = ".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}}", $ = {};
|
|
2
|
+
function x(o) {
|
|
3
3
|
const t = document.createElement(o), s = Object.getPrototypeOf(t);
|
|
4
4
|
return Object.getOwnPropertyNames(s);
|
|
5
5
|
}
|
|
@@ -11,12 +11,12 @@ function S(o) {
|
|
|
11
11
|
}
|
|
12
12
|
const m = new CSSStyleSheet();
|
|
13
13
|
m.replaceSync(w);
|
|
14
|
-
const
|
|
14
|
+
const j = typeof import.meta < "u" && typeof $ < "u" && !0;
|
|
15
15
|
typeof window < "u" && (window.isComponentDebug = b);
|
|
16
16
|
function b() {
|
|
17
|
-
return
|
|
17
|
+
return j;
|
|
18
18
|
}
|
|
19
|
-
function
|
|
19
|
+
function v(o) {
|
|
20
20
|
b() && console.error(o);
|
|
21
21
|
}
|
|
22
22
|
typeof window < "u" && (window.isComponentDebug = b);
|
|
@@ -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" ? M : C
|
|
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
|
+
T
|
|
122
122
|
);
|
|
123
123
|
break;
|
|
124
124
|
case "col-span":
|
|
@@ -126,40 +126,40 @@ 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, L);
|
|
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, D);
|
|
137
137
|
break;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
updateProperties(t, s, e, i) {
|
|
141
141
|
if (i && !this.checkName(i, e)) {
|
|
142
|
-
|
|
142
|
+
v(
|
|
143
143
|
`${e} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
144
144
|
);
|
|
145
145
|
return;
|
|
146
146
|
}
|
|
147
|
-
const
|
|
148
|
-
if (!
|
|
147
|
+
const l = t.indexOf("--") > -1, a = l ? t.split("--")[0] : t;
|
|
148
|
+
if (!l)
|
|
149
149
|
this.style.setProperty(
|
|
150
|
-
`--${
|
|
150
|
+
`--${a}-value`,
|
|
151
151
|
s
|
|
152
152
|
), this.style.setProperty(
|
|
153
|
-
`--${
|
|
153
|
+
`--${a}-value`,
|
|
154
154
|
e
|
|
155
155
|
);
|
|
156
156
|
else {
|
|
157
157
|
const n = t.split("--")[1];
|
|
158
158
|
this.style.setProperty(
|
|
159
|
-
`--${
|
|
159
|
+
`--${a}--${n}-value`,
|
|
160
160
|
s
|
|
161
161
|
), this.style.setProperty(
|
|
162
|
-
`--${
|
|
162
|
+
`--${a}--${n}-value`,
|
|
163
163
|
e
|
|
164
164
|
);
|
|
165
165
|
}
|
|
@@ -443,7 +443,7 @@ const g = class g extends u {
|
|
|
443
443
|
return Object.getPrototypeOf(this).constructor;
|
|
444
444
|
}
|
|
445
445
|
constructor(...t) {
|
|
446
|
-
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames =
|
|
446
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = x(
|
|
447
447
|
this.ctor.nativeName
|
|
448
448
|
)), this.enhanceWithNativeProperties();
|
|
449
449
|
}
|
|
@@ -476,7 +476,7 @@ const g = class g extends u {
|
|
|
476
476
|
};
|
|
477
477
|
g.accessorExclusions = [];
|
|
478
478
|
let p = g;
|
|
479
|
-
const
|
|
479
|
+
const C = [
|
|
480
480
|
"",
|
|
481
481
|
"default",
|
|
482
482
|
"auto",
|
|
@@ -485,21 +485,21 @@ const M = [
|
|
|
485
485
|
"center",
|
|
486
486
|
"baseline",
|
|
487
487
|
"stretch"
|
|
488
|
-
],
|
|
488
|
+
], M = [
|
|
489
489
|
"",
|
|
490
490
|
"default",
|
|
491
491
|
"start",
|
|
492
492
|
"end",
|
|
493
493
|
"center",
|
|
494
494
|
"stretch"
|
|
495
|
-
],
|
|
495
|
+
], T = [
|
|
496
496
|
"",
|
|
497
497
|
"default",
|
|
498
498
|
"start",
|
|
499
499
|
"end",
|
|
500
500
|
"center",
|
|
501
501
|
"stretch"
|
|
502
|
-
],
|
|
502
|
+
], L = [
|
|
503
503
|
"",
|
|
504
504
|
"1",
|
|
505
505
|
"2",
|
|
@@ -513,7 +513,7 @@ const M = [
|
|
|
513
513
|
"10",
|
|
514
514
|
"11",
|
|
515
515
|
"12"
|
|
516
|
-
],
|
|
516
|
+
], D = [
|
|
517
517
|
"",
|
|
518
518
|
"-1",
|
|
519
519
|
"0",
|
|
@@ -545,7 +545,7 @@ const E = [
|
|
|
545
545
|
"page-layout-between-sections"
|
|
546
546
|
];
|
|
547
547
|
function N(o, t, s, e = "", i) {
|
|
548
|
-
const
|
|
548
|
+
const l = new CSSStyleSheet(), a = s.reduce(
|
|
549
549
|
(n, r) => n + `
|
|
550
550
|
${t(o, r)} {
|
|
551
551
|
${o}: var(--${e}-${r}-desktop);
|
|
@@ -588,15 +588,15 @@ function N(o, t, s, e = "", i) {
|
|
|
588
588
|
}`,
|
|
589
589
|
""
|
|
590
590
|
);
|
|
591
|
-
return
|
|
591
|
+
return l.replaceSync(a), l;
|
|
592
592
|
}
|
|
593
593
|
const k = new CSSStyleSheet();
|
|
594
|
-
k.replaceSync(
|
|
595
|
-
const _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`,
|
|
594
|
+
k.replaceSync(y);
|
|
595
|
+
const _ = ["", "ul", "ol"], B = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, G = "px-spacing", R = N(
|
|
596
596
|
"gap",
|
|
597
|
-
_,
|
|
598
|
-
E,
|
|
599
597
|
B,
|
|
598
|
+
E,
|
|
599
|
+
G,
|
|
600
600
|
"--list-gap"
|
|
601
601
|
), c = class c extends p {
|
|
602
602
|
template() {
|
|
@@ -607,10 +607,10 @@ const _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px
|
|
|
607
607
|
`;
|
|
608
608
|
}
|
|
609
609
|
constructor() {
|
|
610
|
-
super(k,
|
|
610
|
+
super(k, R), this.shadowRoot.innerHTML = this.template();
|
|
611
611
|
}
|
|
612
612
|
static get observedAttributes() {
|
|
613
|
-
return ["inverted"];
|
|
613
|
+
return ["inverted", "variant"];
|
|
614
614
|
}
|
|
615
615
|
connectedCallback() {
|
|
616
616
|
this.gap || (this.gap = "xs");
|
|
@@ -623,6 +623,19 @@ const _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px
|
|
|
623
623
|
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
624
624
|
this.$el.toggleAttribute("inverted", e !== null);
|
|
625
625
|
break;
|
|
626
|
+
case "variant":
|
|
627
|
+
this.checkName(_, e) || v(
|
|
628
|
+
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
629
|
+
);
|
|
630
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
631
|
+
const l = this.$children[i];
|
|
632
|
+
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"));
|
|
633
|
+
}
|
|
634
|
+
super.attributeChangedCallback(t, s, e);
|
|
635
|
+
break;
|
|
636
|
+
default:
|
|
637
|
+
super.attributeChangedCallback(t, s, e);
|
|
638
|
+
break;
|
|
626
639
|
}
|
|
627
640
|
}
|
|
628
641
|
get $children() {
|
|
@@ -664,12 +677,18 @@ const _ = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, B = "px
|
|
|
664
677
|
set gapDesktop(t) {
|
|
665
678
|
t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
|
|
666
679
|
}
|
|
680
|
+
get variant() {
|
|
681
|
+
return this.getAttribute("variant");
|
|
682
|
+
}
|
|
683
|
+
set variant(t) {
|
|
684
|
+
t ? this.setAttribute("variant", t) : this.removeAttribute("variant");
|
|
685
|
+
}
|
|
667
686
|
};
|
|
668
687
|
c.nativeName = "div";
|
|
669
688
|
let h = c;
|
|
670
689
|
customElements.get("px-list") || customElements.define("px-list", h);
|
|
671
|
-
const
|
|
672
|
-
|
|
690
|
+
const q = '.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();
|
|
691
|
+
A.replaceSync(q);
|
|
673
692
|
const f = class f extends p {
|
|
674
693
|
template() {
|
|
675
694
|
return `
|
|
@@ -680,7 +699,7 @@ const f = class f extends p {
|
|
|
680
699
|
`;
|
|
681
700
|
}
|
|
682
701
|
constructor() {
|
|
683
|
-
super(
|
|
702
|
+
super(A), this.shadowRoot.innerHTML = this.template();
|
|
684
703
|
}
|
|
685
704
|
static get observedAttributes() {
|
|
686
705
|
return ["inverted"];
|
|
@@ -711,5 +730,6 @@ let d = f;
|
|
|
711
730
|
customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
712
731
|
export {
|
|
713
732
|
h as List,
|
|
714
|
-
d as ListItem
|
|
733
|
+
d as ListItem,
|
|
734
|
+
_ as listVariantValues
|
|
715
735
|
};
|