@proximus/lavender-list 2.0.0-alpha.6 → 2.0.0-alpha.61
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 +4 -3
- package/dist/index.es.js +119 -171
- package/package.json +2 -2
package/dist/List.d.ts
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import { PxElement
|
|
2
|
-
export declare const
|
|
1
|
+
import { PxElement } from '@proximus/lavender-common';
|
|
2
|
+
export declare const listVariantValues: string[];
|
|
3
3
|
export declare class List extends PxElement<HTMLDivElement> {
|
|
4
4
|
static nativeName: string;
|
|
5
5
|
private template;
|
|
6
|
-
AttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
7
6
|
constructor();
|
|
8
7
|
static get observedAttributes(): string[];
|
|
9
8
|
connectedCallback(): void;
|
|
@@ -21,4 +20,6 @@ export declare class List extends PxElement<HTMLDivElement> {
|
|
|
21
20
|
set gapLaptop(value: string);
|
|
22
21
|
get gapDesktop(): string;
|
|
23
22
|
set gapDesktop(value: string);
|
|
23
|
+
get variant(): string;
|
|
24
|
+
set variant(value: string);
|
|
24
25
|
}
|
package/dist/index.es.js
CHANGED
|
@@ -1,17 +1,26 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
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
3
|
const t = document.createElement(r), s = Object.getPrototypeOf(t);
|
|
4
4
|
return Object.getOwnPropertyNames(s);
|
|
5
5
|
}
|
|
6
|
-
function
|
|
6
|
+
function j(r) {
|
|
7
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
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
const m = new CSSStyleSheet();
|
|
13
|
+
m.replaceSync($);
|
|
14
|
+
const C = typeof import.meta < "u" && typeof x < "u" && !0;
|
|
15
|
+
typeof window < "u" && (window.isComponentDebug = b);
|
|
16
|
+
function b() {
|
|
17
|
+
return C;
|
|
18
|
+
}
|
|
19
|
+
function v(r) {
|
|
20
|
+
b() && console.error(r);
|
|
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
|
+
L
|
|
113
122
|
);
|
|
114
123
|
break;
|
|
115
124
|
case "col-span":
|
|
@@ -117,38 +126,37 @@ 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, O);
|
|
128
137
|
break;
|
|
129
138
|
}
|
|
130
139
|
}
|
|
131
140
|
updateProperties(t, s, e, i) {
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
if (!a)
|
|
141
|
+
i && (this.checkName(i, e) || v(
|
|
142
|
+
`${e} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
|
|
143
|
+
));
|
|
144
|
+
const l = t.indexOf("--") > -1, a = l ? t.split("--")[0] : t;
|
|
145
|
+
if (!l)
|
|
138
146
|
this.style.setProperty(
|
|
139
|
-
`--${
|
|
147
|
+
`--${a}-value`,
|
|
140
148
|
s
|
|
141
149
|
), this.style.setProperty(
|
|
142
|
-
`--${
|
|
150
|
+
`--${a}-value`,
|
|
143
151
|
e
|
|
144
152
|
);
|
|
145
153
|
else {
|
|
146
154
|
const n = t.split("--")[1];
|
|
147
155
|
this.style.setProperty(
|
|
148
|
-
`--${
|
|
156
|
+
`--${a}--${n}-value`,
|
|
149
157
|
s
|
|
150
158
|
), this.style.setProperty(
|
|
151
|
-
`--${
|
|
159
|
+
`--${a}--${n}-value`,
|
|
152
160
|
e
|
|
153
161
|
);
|
|
154
162
|
}
|
|
@@ -417,38 +425,44 @@ class b extends HTMLElement {
|
|
|
417
425
|
this.setAttribute("order--desktop", t);
|
|
418
426
|
}
|
|
419
427
|
}
|
|
420
|
-
class g extends
|
|
421
|
-
|
|
422
|
-
super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
|
|
423
|
-
}
|
|
428
|
+
const g = class g extends u {
|
|
429
|
+
// nativeName: string;
|
|
424
430
|
static get observedAttributes() {
|
|
425
431
|
return [
|
|
426
432
|
...super.observedAttributes,
|
|
427
|
-
...
|
|
433
|
+
...j(this.nativeName)
|
|
428
434
|
];
|
|
429
435
|
}
|
|
430
436
|
attributeChangedCallback(t, s, e) {
|
|
431
437
|
super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
|
|
432
438
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
439
|
+
get ctor() {
|
|
440
|
+
return Object.getPrototypeOf(this).constructor;
|
|
441
|
+
}
|
|
442
|
+
constructor(...t) {
|
|
443
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = S(
|
|
444
|
+
this.ctor.nativeName
|
|
445
|
+
)), this.enhanceWithNativeProperties();
|
|
446
|
+
}
|
|
447
|
+
enhanceWithNativeProperties() {
|
|
448
|
+
var t;
|
|
449
|
+
for (const s of this.ctor.supportedPropertyNames)
|
|
450
|
+
if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
|
|
436
451
|
try {
|
|
437
|
-
Object.defineProperty(this,
|
|
452
|
+
Object.defineProperty(this, s, {
|
|
438
453
|
get() {
|
|
439
|
-
return this.$el[
|
|
454
|
+
return this.$el[s];
|
|
440
455
|
},
|
|
441
|
-
set(
|
|
442
|
-
this.$el[
|
|
456
|
+
set(e) {
|
|
457
|
+
this.$el[s] !== e && (this.$el[s] = e);
|
|
443
458
|
}
|
|
444
459
|
});
|
|
445
|
-
} catch (
|
|
446
|
-
console.warn(`Could not create property ${
|
|
460
|
+
} catch (e) {
|
|
461
|
+
console.warn(`Could not create property ${s} for`, this.$el, e);
|
|
447
462
|
}
|
|
448
|
-
this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
|
|
449
463
|
}
|
|
450
464
|
get $el() {
|
|
451
|
-
return this.shadowRoot.querySelector(this.nativeName);
|
|
465
|
+
return this.shadowRoot.querySelector(this.ctor.nativeName);
|
|
452
466
|
}
|
|
453
467
|
_updateAttribute(t, s) {
|
|
454
468
|
s ? this.setAttribute(t, s) : this.removeAttribute(t);
|
|
@@ -456,8 +470,10 @@ class g extends b {
|
|
|
456
470
|
_updateBooleanAttribute(t, s) {
|
|
457
471
|
s ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
458
472
|
}
|
|
459
|
-
}
|
|
460
|
-
|
|
473
|
+
};
|
|
474
|
+
g.accessorExclusions = [];
|
|
475
|
+
let p = g;
|
|
476
|
+
const M = [
|
|
461
477
|
"",
|
|
462
478
|
"default",
|
|
463
479
|
"auto",
|
|
@@ -466,21 +482,21 @@ const S = [
|
|
|
466
482
|
"center",
|
|
467
483
|
"baseline",
|
|
468
484
|
"stretch"
|
|
469
|
-
],
|
|
485
|
+
], T = [
|
|
470
486
|
"",
|
|
471
487
|
"default",
|
|
472
488
|
"start",
|
|
473
489
|
"end",
|
|
474
490
|
"center",
|
|
475
491
|
"stretch"
|
|
476
|
-
],
|
|
492
|
+
], L = [
|
|
477
493
|
"",
|
|
478
494
|
"default",
|
|
479
495
|
"start",
|
|
480
496
|
"end",
|
|
481
497
|
"center",
|
|
482
498
|
"stretch"
|
|
483
|
-
],
|
|
499
|
+
], D = [
|
|
484
500
|
"",
|
|
485
501
|
"1",
|
|
486
502
|
"2",
|
|
@@ -494,7 +510,7 @@ const S = [
|
|
|
494
510
|
"10",
|
|
495
511
|
"11",
|
|
496
512
|
"12"
|
|
497
|
-
],
|
|
513
|
+
], O = [
|
|
498
514
|
"",
|
|
499
515
|
"-1",
|
|
500
516
|
"0",
|
|
@@ -510,9 +526,9 @@ const S = [
|
|
|
510
526
|
"10",
|
|
511
527
|
"11",
|
|
512
528
|
"12"
|
|
513
|
-
],
|
|
529
|
+
], E = ["Xs", "S", "M", "L", "Xl"];
|
|
514
530
|
[
|
|
515
|
-
...
|
|
531
|
+
...E.map((r) => r.toLowerCase())
|
|
516
532
|
];
|
|
517
533
|
const N = [
|
|
518
534
|
"none",
|
|
@@ -525,42 +541,42 @@ const N = [
|
|
|
525
541
|
"heading-to-content",
|
|
526
542
|
"page-layout-between-sections"
|
|
527
543
|
];
|
|
528
|
-
function
|
|
529
|
-
const a = new CSSStyleSheet(),
|
|
530
|
-
(
|
|
531
|
-
${t(
|
|
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)} {
|
|
532
548
|
${r}: var(--${e}-${o}-desktop);
|
|
533
549
|
${`${i}:var(--${e}-${o}-desktop)`}
|
|
534
550
|
}
|
|
535
551
|
/* Mobile only - max 767px */
|
|
536
552
|
@media only screen and (max-width: 47.938em) {
|
|
537
|
-
${t(
|
|
553
|
+
${t(l, o)} {
|
|
538
554
|
${r}: var(--${e}-${o}-mobile);
|
|
539
555
|
${`${i}: var(--${e}-${o}-mobile)`}
|
|
540
556
|
}
|
|
541
557
|
}
|
|
542
|
-
${t(
|
|
558
|
+
${t(l, o, "mobile")} {
|
|
543
559
|
/* Mobile only - max 767px */
|
|
544
560
|
@media only screen and (max-width: 47.938em) {
|
|
545
561
|
${r}: var(--${e}-${o}-mobile) !important;
|
|
546
562
|
${`${i}: var(--${e}-${o}-mobile)`}
|
|
547
563
|
}
|
|
548
564
|
}
|
|
549
|
-
${t(
|
|
565
|
+
${t(l, o, "tablet")} {
|
|
550
566
|
/* Tablet - min 768px max 1024px */
|
|
551
567
|
@media only screen and (min-width: 48em) and (max-width: 64em) {
|
|
552
568
|
${r}: var(--${e}-${o}-desktop) !important;
|
|
553
569
|
${`${i}: var(--${e}-${o}-desktop)`}
|
|
554
570
|
}
|
|
555
571
|
}
|
|
556
|
-
${t(
|
|
572
|
+
${t(l, o, "laptop")} {
|
|
557
573
|
/* Laptop - 1025px*/
|
|
558
574
|
@media only screen and (min-width: 64.0625em) {
|
|
559
575
|
${r}: var(--${e}-${o}-desktop) !important;
|
|
560
576
|
${`${i}: var(--${e}-${o}-desktop)`}
|
|
561
577
|
}
|
|
562
578
|
}
|
|
563
|
-
${t(
|
|
579
|
+
${t(l, o, "desktop")} {
|
|
564
580
|
/* Desktop - 1025px*/
|
|
565
581
|
@media only screen and (min-width: 64.0625em) {
|
|
566
582
|
${r}: var(--${e}-${o}-desktop) !important;
|
|
@@ -569,108 +585,17 @@ function M(r, t, s, e = "", i) {
|
|
|
569
585
|
}`,
|
|
570
586
|
""
|
|
571
587
|
);
|
|
572
|
-
return a.replaceSync(
|
|
573
|
-
}
|
|
574
|
-
class T {
|
|
575
|
-
constructor(t, s, e, i) {
|
|
576
|
-
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(
|
|
577
|
-
this.component,
|
|
578
|
-
this.toCamelCase(this.attributeName),
|
|
579
|
-
{
|
|
580
|
-
get: () => this.component.getAttribute(this.attributeName),
|
|
581
|
-
set: (a) => {
|
|
582
|
-
this.component.setAttribute(this.attributeName, a);
|
|
583
|
-
}
|
|
584
|
-
}
|
|
585
|
-
);
|
|
586
|
-
}
|
|
587
|
-
toCamelCase(t) {
|
|
588
|
-
return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
|
|
589
|
-
}
|
|
590
|
-
init(t) {
|
|
591
|
-
this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
|
|
592
|
-
}
|
|
593
|
-
attributeChangedCallback(t, s, e) {
|
|
594
|
-
if (s !== e)
|
|
595
|
-
switch (!0) {
|
|
596
|
-
case t === this.attributeName:
|
|
597
|
-
case t === `${this.attributeName}--mobile`:
|
|
598
|
-
case t === `${this.attributeName}--tablet`:
|
|
599
|
-
case t === `${this.attributeName}--laptop`:
|
|
600
|
-
case t === `${this.attributeName}--desktop`:
|
|
601
|
-
this.setCSSProperty(t, e);
|
|
602
|
-
break;
|
|
603
|
-
default:
|
|
604
|
-
return;
|
|
605
|
-
}
|
|
606
|
-
}
|
|
607
|
-
setCSSProperty(t, s, e = !0) {
|
|
608
|
-
const [, i = ""] = t.split("--");
|
|
609
|
-
this.component.style.setProperty(
|
|
610
|
-
`${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
|
|
611
|
-
`${this._attributeValue(s, i)}`
|
|
612
|
-
);
|
|
613
|
-
}
|
|
614
|
-
setCSSProperties() {
|
|
615
|
-
const t = this.component.getAttribute(this.attributeName);
|
|
616
|
-
t && (this.setCSSProperty(this.attributeName, t), this.setCSSProperty(this.attributeNameMobile, t), this.setCSSProperty(this.attributeNameTablet, t), this.setCSSProperty(this.attributeNameLaptop, t), this.setCSSProperty(this.attributeNameDesktop, t));
|
|
617
|
-
const s = this.component.getAttribute(
|
|
618
|
-
this.attributeNameMobile
|
|
619
|
-
);
|
|
620
|
-
s && this.setCSSProperty(
|
|
621
|
-
this.attributeNameMobile,
|
|
622
|
-
s,
|
|
623
|
-
!1
|
|
624
|
-
);
|
|
625
|
-
const e = this.component.getAttribute(
|
|
626
|
-
this.attributeNameTablet
|
|
627
|
-
);
|
|
628
|
-
e && this.setCSSProperty(
|
|
629
|
-
this.attributeNameTablet,
|
|
630
|
-
e,
|
|
631
|
-
!1
|
|
632
|
-
);
|
|
633
|
-
const i = this.component.getAttribute(
|
|
634
|
-
this.attributeNameLaptop
|
|
635
|
-
);
|
|
636
|
-
i && this.setCSSProperty(
|
|
637
|
-
this.attributeNameLaptop,
|
|
638
|
-
i,
|
|
639
|
-
!1
|
|
640
|
-
);
|
|
641
|
-
const a = this.component.getAttribute(
|
|
642
|
-
this.attributeNameDesktop
|
|
643
|
-
);
|
|
644
|
-
a && this.setCSSProperty(
|
|
645
|
-
this.attributeNameDesktop,
|
|
646
|
-
a,
|
|
647
|
-
!1
|
|
648
|
-
);
|
|
649
|
-
}
|
|
650
|
-
set attributeValue(t) {
|
|
651
|
-
this._attributeValue = t, this.setCSSProperties();
|
|
652
|
-
}
|
|
588
|
+
return a.replaceSync(n), a;
|
|
653
589
|
}
|
|
654
|
-
const
|
|
655
|
-
|
|
656
|
-
const
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
N,
|
|
664
|
-
D,
|
|
665
|
-
"--list-gap"
|
|
666
|
-
)
|
|
667
|
-
), this.AttributeDelegate = new T(
|
|
668
|
-
this,
|
|
669
|
-
"gap",
|
|
670
|
-
(t) => t,
|
|
671
|
-
"--list-gap"
|
|
672
|
-
), this.shadowRoot.innerHTML = this.template();
|
|
673
|
-
}
|
|
590
|
+
const k = new CSSStyleSheet();
|
|
591
|
+
k.replaceSync(w);
|
|
592
|
+
const B = ["", "ul", "ol"], G = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, R = "px-spacing", q = _(
|
|
593
|
+
"gap",
|
|
594
|
+
G,
|
|
595
|
+
N,
|
|
596
|
+
R,
|
|
597
|
+
"--list-gap"
|
|
598
|
+
), c = class c extends p {
|
|
674
599
|
template() {
|
|
675
600
|
return `
|
|
676
601
|
<div class="list" role="list">
|
|
@@ -678,11 +603,14 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
|
|
|
678
603
|
</div>
|
|
679
604
|
`;
|
|
680
605
|
}
|
|
606
|
+
constructor() {
|
|
607
|
+
super(k, q), this.shadowRoot.innerHTML = this.template();
|
|
608
|
+
}
|
|
681
609
|
static get observedAttributes() {
|
|
682
|
-
return ["inverted"];
|
|
610
|
+
return ["inverted", "variant"];
|
|
683
611
|
}
|
|
684
612
|
connectedCallback() {
|
|
685
|
-
|
|
613
|
+
this.gap || (this.gap = "xs");
|
|
686
614
|
}
|
|
687
615
|
attributeChangedCallback(t, s, e) {
|
|
688
616
|
if (s !== e)
|
|
@@ -692,6 +620,19 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
|
|
|
692
620
|
this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
|
|
693
621
|
this.$el.toggleAttribute("inverted", e !== null);
|
|
694
622
|
break;
|
|
623
|
+
case "variant":
|
|
624
|
+
this.checkName(B, e) || v(
|
|
625
|
+
`${e} is not an allowed variant value for ${this.tagName.toLowerCase()}`
|
|
626
|
+
);
|
|
627
|
+
for (let i = 0; i < this.$children.length; i++) {
|
|
628
|
+
const l = this.$children[i];
|
|
629
|
+
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"));
|
|
630
|
+
}
|
|
631
|
+
super.attributeChangedCallback(t, s, e);
|
|
632
|
+
break;
|
|
633
|
+
default:
|
|
634
|
+
super.attributeChangedCallback(t, s, e);
|
|
635
|
+
break;
|
|
695
636
|
}
|
|
696
637
|
}
|
|
697
638
|
get $children() {
|
|
@@ -733,13 +674,19 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
|
|
|
733
674
|
set gapDesktop(t) {
|
|
734
675
|
t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
|
|
735
676
|
}
|
|
677
|
+
get variant() {
|
|
678
|
+
return this.getAttribute("variant");
|
|
679
|
+
}
|
|
680
|
+
set variant(t) {
|
|
681
|
+
t ? this.setAttribute("variant", t) : this.removeAttribute("variant");
|
|
682
|
+
}
|
|
736
683
|
};
|
|
737
|
-
|
|
738
|
-
let
|
|
739
|
-
customElements.get("px-list") || customElements.define("px-list",
|
|
740
|
-
const
|
|
741
|
-
|
|
742
|
-
const
|
|
684
|
+
c.nativeName = "div";
|
|
685
|
+
let h = c;
|
|
686
|
+
customElements.get("px-list") || customElements.define("px-list", h);
|
|
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
|
+
const f = class f extends p {
|
|
743
690
|
template() {
|
|
744
691
|
return `
|
|
745
692
|
<div class="list-item" role="listitem">
|
|
@@ -749,11 +696,12 @@ const u = class u extends g {
|
|
|
749
696
|
`;
|
|
750
697
|
}
|
|
751
698
|
constructor() {
|
|
752
|
-
super(
|
|
699
|
+
super(A), this.shadowRoot.innerHTML = this.template();
|
|
753
700
|
}
|
|
754
701
|
static get observedAttributes() {
|
|
755
702
|
return ["inverted"];
|
|
756
703
|
}
|
|
704
|
+
// TODO: factorize code
|
|
757
705
|
attributeChangedCallback(t, s, e) {
|
|
758
706
|
if (s !== e)
|
|
759
707
|
switch (t) {
|
|
@@ -774,11 +722,11 @@ const u = class u extends g {
|
|
|
774
722
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
775
723
|
}
|
|
776
724
|
};
|
|
777
|
-
|
|
778
|
-
let
|
|
779
|
-
customElements.get("px-list-item") || customElements.define("px-list-item",
|
|
725
|
+
f.nativeName = "div";
|
|
726
|
+
let d = f;
|
|
727
|
+
customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
780
728
|
export {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
729
|
+
h as List,
|
|
730
|
+
d as ListItem,
|
|
731
|
+
B as listVariantValues
|
|
784
732
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@proximus/lavender-list",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.61",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"clean": "rm -rf dist",
|
|
14
14
|
"build": "npm run clean && NODE_ENV=development vite build && tsc && npm run transform-package-json && npm run wc-manifest",
|
|
15
15
|
"test": "vitest run --coverage",
|
|
16
|
-
"wc-manifest": "cem analyze --globs \"src/*\" --config
|
|
16
|
+
"wc-manifest": "cem analyze --globs \"src/*\" --config ../../custom-elements-manifest.config.js --outdir dist"
|
|
17
17
|
},
|
|
18
18
|
"publishConfig": {
|
|
19
19
|
"access": "public"
|