@proximus/lavender-list 1.4.1 → 1.4.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/List.d.ts +1 -3
- package/dist/index.es.js +89 -169
- package/package.json +1 -1
package/dist/List.d.ts
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { PxElement
|
|
2
|
-
export declare const breakpointsValues: string[];
|
|
1
|
+
import { PxElement } from '@proximus/lavender-common';
|
|
3
2
|
export declare class List extends PxElement<HTMLDivElement> {
|
|
4
3
|
static nativeName: string;
|
|
5
4
|
private template;
|
|
6
|
-
AttributeDelegate: AttributeBreakpointHandlerDelegate;
|
|
7
5
|
constructor();
|
|
8
6
|
static get observedAttributes(): string[];
|
|
9
7
|
connectedCallback(): void;
|
package/dist/index.es.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
const
|
|
2
|
-
function
|
|
3
|
-
const t = document.createElement(
|
|
1
|
+
const v = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", A = ":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 w(o) {
|
|
3
|
+
const t = document.createElement(o), s = Object.getPrototypeOf(t);
|
|
4
4
|
return Object.getOwnPropertyNames(s);
|
|
5
5
|
}
|
|
6
|
-
function y(
|
|
7
|
-
const t = document.createElement(
|
|
6
|
+
function y(o) {
|
|
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
|
-
|
|
12
|
+
const f = new CSSStyleSheet();
|
|
13
|
+
f.replaceSync(A);
|
|
14
14
|
class b extends HTMLElement {
|
|
15
15
|
static get observedAttributes() {
|
|
16
16
|
return [
|
|
@@ -63,7 +63,7 @@ class b extends HTMLElement {
|
|
|
63
63
|
}
|
|
64
64
|
constructor(...t) {
|
|
65
65
|
super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
|
|
66
|
-
|
|
66
|
+
f,
|
|
67
67
|
...t
|
|
68
68
|
];
|
|
69
69
|
}
|
|
@@ -97,7 +97,7 @@ class b extends HTMLElement {
|
|
|
97
97
|
t,
|
|
98
98
|
s,
|
|
99
99
|
e,
|
|
100
|
-
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ?
|
|
100
|
+
((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? S : $
|
|
101
101
|
);
|
|
102
102
|
break;
|
|
103
103
|
case "justify-self":
|
|
@@ -109,7 +109,7 @@ class b extends HTMLElement {
|
|
|
109
109
|
t,
|
|
110
110
|
s,
|
|
111
111
|
e,
|
|
112
|
-
|
|
112
|
+
x
|
|
113
113
|
);
|
|
114
114
|
break;
|
|
115
115
|
case "col-span":
|
|
@@ -117,14 +117,14 @@ class b extends HTMLElement {
|
|
|
117
117
|
case "col-span--tablet":
|
|
118
118
|
case "col-span--laptop":
|
|
119
119
|
case "col-span--desktop":
|
|
120
|
-
this.updateProperties(t, s, e,
|
|
120
|
+
this.updateProperties(t, s, e, j);
|
|
121
121
|
break;
|
|
122
122
|
case "order":
|
|
123
123
|
case "order--mobile":
|
|
124
124
|
case "order--tablet":
|
|
125
125
|
case "order--laptop":
|
|
126
126
|
case "order--desktop":
|
|
127
|
-
this.updateProperties(t, s, e,
|
|
127
|
+
this.updateProperties(t, s, e, M);
|
|
128
128
|
break;
|
|
129
129
|
}
|
|
130
130
|
}
|
|
@@ -417,10 +417,8 @@ class b extends HTMLElement {
|
|
|
417
417
|
this.setAttribute("order--desktop", t);
|
|
418
418
|
}
|
|
419
419
|
}
|
|
420
|
-
class
|
|
421
|
-
|
|
422
|
-
super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
|
|
423
|
-
}
|
|
420
|
+
const u = class u extends b {
|
|
421
|
+
// nativeName: string;
|
|
424
422
|
static get observedAttributes() {
|
|
425
423
|
return [
|
|
426
424
|
...super.observedAttributes,
|
|
@@ -430,25 +428,33 @@ class g extends b {
|
|
|
430
428
|
attributeChangedCallback(t, s, e) {
|
|
431
429
|
super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
|
|
432
430
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
431
|
+
get ctor() {
|
|
432
|
+
return Object.getPrototypeOf(this).constructor;
|
|
433
|
+
}
|
|
434
|
+
constructor(...t) {
|
|
435
|
+
super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = w(
|
|
436
|
+
this.ctor.nativeName
|
|
437
|
+
)), this.enhanceWithNativeProperties();
|
|
438
|
+
}
|
|
439
|
+
enhanceWithNativeProperties() {
|
|
440
|
+
var t;
|
|
441
|
+
for (const s of this.ctor.supportedPropertyNames)
|
|
442
|
+
if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
|
|
436
443
|
try {
|
|
437
|
-
Object.defineProperty(this,
|
|
444
|
+
Object.defineProperty(this, s, {
|
|
438
445
|
get() {
|
|
439
|
-
return this.$el[
|
|
446
|
+
return this.$el[s];
|
|
440
447
|
},
|
|
441
|
-
set(
|
|
442
|
-
this.$el[
|
|
448
|
+
set(e) {
|
|
449
|
+
this.$el[s] !== e && (this.$el[s] = e);
|
|
443
450
|
}
|
|
444
451
|
});
|
|
445
|
-
} catch (
|
|
446
|
-
console.warn(`Could not create property ${
|
|
452
|
+
} catch (e) {
|
|
453
|
+
console.warn(`Could not create property ${s} for`, this.$el, e);
|
|
447
454
|
}
|
|
448
|
-
this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
|
|
449
455
|
}
|
|
450
456
|
get $el() {
|
|
451
|
-
return this.shadowRoot.querySelector(this.nativeName);
|
|
457
|
+
return this.shadowRoot.querySelector(this.ctor.nativeName);
|
|
452
458
|
}
|
|
453
459
|
_updateAttribute(t, s) {
|
|
454
460
|
s ? this.setAttribute(t, s) : this.removeAttribute(t);
|
|
@@ -456,8 +462,10 @@ class g extends b {
|
|
|
456
462
|
_updateBooleanAttribute(t, s) {
|
|
457
463
|
s ? this.setAttribute(t, "") : this.removeAttribute(t);
|
|
458
464
|
}
|
|
459
|
-
}
|
|
460
|
-
|
|
465
|
+
};
|
|
466
|
+
u.accessorExclusions = [];
|
|
467
|
+
let p = u;
|
|
468
|
+
const $ = [
|
|
461
469
|
"",
|
|
462
470
|
"default",
|
|
463
471
|
"auto",
|
|
@@ -466,21 +474,21 @@ const S = [
|
|
|
466
474
|
"center",
|
|
467
475
|
"baseline",
|
|
468
476
|
"stretch"
|
|
469
|
-
],
|
|
477
|
+
], S = [
|
|
470
478
|
"",
|
|
471
479
|
"default",
|
|
472
480
|
"start",
|
|
473
481
|
"end",
|
|
474
482
|
"center",
|
|
475
483
|
"stretch"
|
|
476
|
-
],
|
|
484
|
+
], x = [
|
|
477
485
|
"",
|
|
478
486
|
"default",
|
|
479
487
|
"start",
|
|
480
488
|
"end",
|
|
481
489
|
"center",
|
|
482
490
|
"stretch"
|
|
483
|
-
],
|
|
491
|
+
], j = [
|
|
484
492
|
"",
|
|
485
493
|
"1",
|
|
486
494
|
"2",
|
|
@@ -494,7 +502,7 @@ const S = [
|
|
|
494
502
|
"10",
|
|
495
503
|
"11",
|
|
496
504
|
"12"
|
|
497
|
-
],
|
|
505
|
+
], M = [
|
|
498
506
|
"",
|
|
499
507
|
"-1",
|
|
500
508
|
"0",
|
|
@@ -510,11 +518,11 @@ const S = [
|
|
|
510
518
|
"10",
|
|
511
519
|
"11",
|
|
512
520
|
"12"
|
|
513
|
-
],
|
|
521
|
+
], T = ["Xs", "S", "M", "L", "Xl"];
|
|
514
522
|
[
|
|
515
|
-
...
|
|
523
|
+
...T.map((o) => o.toLowerCase())
|
|
516
524
|
];
|
|
517
|
-
const
|
|
525
|
+
const L = [
|
|
518
526
|
"none",
|
|
519
527
|
"2xs",
|
|
520
528
|
"xs",
|
|
@@ -525,152 +533,61 @@ const N = [
|
|
|
525
533
|
"heading-to-content",
|
|
526
534
|
"page-layout-between-sections"
|
|
527
535
|
];
|
|
528
|
-
function
|
|
536
|
+
function D(o, t, s, e = "", i) {
|
|
529
537
|
const a = new CSSStyleSheet(), l = s.reduce(
|
|
530
|
-
(n,
|
|
531
|
-
${t(
|
|
532
|
-
${
|
|
533
|
-
${`${i}:var(--${e}-${
|
|
538
|
+
(n, r) => n + `
|
|
539
|
+
${t(o, r)} {
|
|
540
|
+
${o}: var(--${e}-${r}-desktop);
|
|
541
|
+
${`${i}:var(--${e}-${r}-desktop)`}
|
|
534
542
|
}
|
|
535
543
|
/* Mobile only - max 767px */
|
|
536
544
|
@media only screen and (max-width: 47.938em) {
|
|
537
|
-
${t(
|
|
538
|
-
${
|
|
539
|
-
${`${i}: var(--${e}-${
|
|
545
|
+
${t(o, r)} {
|
|
546
|
+
${o}: var(--${e}-${r}-mobile);
|
|
547
|
+
${`${i}: var(--${e}-${r}-mobile)`}
|
|
540
548
|
}
|
|
541
549
|
}
|
|
542
|
-
${t(
|
|
550
|
+
${t(o, r, "mobile")} {
|
|
543
551
|
/* Mobile only - max 767px */
|
|
544
552
|
@media only screen and (max-width: 47.938em) {
|
|
545
|
-
${
|
|
546
|
-
${`${i}: var(--${e}-${
|
|
553
|
+
${o}: var(--${e}-${r}-mobile) !important;
|
|
554
|
+
${`${i}: var(--${e}-${r}-mobile)`}
|
|
547
555
|
}
|
|
548
556
|
}
|
|
549
|
-
${t(
|
|
557
|
+
${t(o, r, "tablet")} {
|
|
550
558
|
/* Tablet - min 768px max 1024px */
|
|
551
559
|
@media only screen and (min-width: 48em) and (max-width: 64em) {
|
|
552
|
-
${
|
|
553
|
-
${`${i}: var(--${e}-${
|
|
560
|
+
${o}: var(--${e}-${r}-desktop) !important;
|
|
561
|
+
${`${i}: var(--${e}-${r}-desktop)`}
|
|
554
562
|
}
|
|
555
563
|
}
|
|
556
|
-
${t(
|
|
564
|
+
${t(o, r, "laptop")} {
|
|
557
565
|
/* Laptop - 1025px*/
|
|
558
566
|
@media only screen and (min-width: 64.0625em) {
|
|
559
|
-
${
|
|
560
|
-
${`${i}: var(--${e}-${
|
|
567
|
+
${o}: var(--${e}-${r}-desktop) !important;
|
|
568
|
+
${`${i}: var(--${e}-${r}-desktop)`}
|
|
561
569
|
}
|
|
562
570
|
}
|
|
563
|
-
${t(
|
|
571
|
+
${t(o, r, "desktop")} {
|
|
564
572
|
/* Desktop - 1025px*/
|
|
565
573
|
@media only screen and (min-width: 64.0625em) {
|
|
566
|
-
${
|
|
567
|
-
${`${i}: var(--${e}-${
|
|
574
|
+
${o}: var(--${e}-${r}-desktop) !important;
|
|
575
|
+
${`${i}: var(--${e}-${r}-desktop)`}
|
|
568
576
|
}
|
|
569
577
|
}`,
|
|
570
578
|
""
|
|
571
579
|
);
|
|
572
580
|
return a.replaceSync(l), a;
|
|
573
581
|
}
|
|
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
|
-
}
|
|
653
|
-
}
|
|
654
582
|
const m = new CSSStyleSheet();
|
|
655
|
-
m.replaceSync(
|
|
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
|
-
}
|
|
583
|
+
m.replaceSync(v);
|
|
584
|
+
const C = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, O = "px-spacing", E = D(
|
|
585
|
+
"gap",
|
|
586
|
+
C,
|
|
587
|
+
L,
|
|
588
|
+
O,
|
|
589
|
+
"--list-gap"
|
|
590
|
+
), g = class g extends p {
|
|
674
591
|
template() {
|
|
675
592
|
return `
|
|
676
593
|
<div class="list" role="list">
|
|
@@ -678,11 +595,14 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
|
|
|
678
595
|
</div>
|
|
679
596
|
`;
|
|
680
597
|
}
|
|
598
|
+
constructor() {
|
|
599
|
+
super(m, E), this.shadowRoot.innerHTML = this.template();
|
|
600
|
+
}
|
|
681
601
|
static get observedAttributes() {
|
|
682
602
|
return ["inverted"];
|
|
683
603
|
}
|
|
684
604
|
connectedCallback() {
|
|
685
|
-
|
|
605
|
+
this.gap || (this.gap = "xs");
|
|
686
606
|
}
|
|
687
607
|
attributeChangedCallback(t, s, e) {
|
|
688
608
|
if (s !== e)
|
|
@@ -734,12 +654,12 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
|
|
|
734
654
|
t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
|
|
735
655
|
}
|
|
736
656
|
};
|
|
737
|
-
|
|
738
|
-
let
|
|
739
|
-
customElements.get("px-list") || customElements.define("px-list",
|
|
740
|
-
const
|
|
741
|
-
|
|
742
|
-
const
|
|
657
|
+
g.nativeName = "div";
|
|
658
|
+
let h = g;
|
|
659
|
+
customElements.get("px-list") || customElements.define("px-list", h);
|
|
660
|
+
const N = '.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)}}', k = new CSSStyleSheet();
|
|
661
|
+
k.replaceSync(N);
|
|
662
|
+
const c = class c extends p {
|
|
743
663
|
template() {
|
|
744
664
|
return `
|
|
745
665
|
<div class="list-item" role="listitem">
|
|
@@ -749,11 +669,12 @@ const u = class u extends g {
|
|
|
749
669
|
`;
|
|
750
670
|
}
|
|
751
671
|
constructor() {
|
|
752
|
-
super(
|
|
672
|
+
super(k), this.shadowRoot.innerHTML = this.template();
|
|
753
673
|
}
|
|
754
674
|
static get observedAttributes() {
|
|
755
675
|
return ["inverted"];
|
|
756
676
|
}
|
|
677
|
+
// TODO: factorize code
|
|
757
678
|
attributeChangedCallback(t, s, e) {
|
|
758
679
|
if (s !== e)
|
|
759
680
|
switch (t) {
|
|
@@ -774,11 +695,10 @@ const u = class u extends g {
|
|
|
774
695
|
t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
|
|
775
696
|
}
|
|
776
697
|
};
|
|
777
|
-
|
|
778
|
-
let
|
|
779
|
-
customElements.get("px-list-item") || customElements.define("px-list-item",
|
|
698
|
+
c.nativeName = "div";
|
|
699
|
+
let d = c;
|
|
700
|
+
customElements.get("px-list-item") || customElements.define("px-list-item", d);
|
|
780
701
|
export {
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
E as breakpointsValues
|
|
702
|
+
h as List,
|
|
703
|
+
d as ListItem
|
|
784
704
|
};
|