@proximus/lavender-list 1.4.1-beta.1 → 1.4.2-beta.1

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.
Files changed (3) hide show
  1. package/dist/List.d.ts +1 -3
  2. package/dist/index.es.js +95 -171
  3. package/package.json +1 -1
package/dist/List.d.ts CHANGED
@@ -1,9 +1,7 @@
1
- import { PxElement, AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
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 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){: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);
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(r) {
7
- const t = document.createElement(r), s = Object.getPrototypeOf(t);
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 c = new CSSStyleSheet();
13
- c.replaceSync(v);
12
+ const f = new CSSStyleSheet();
13
+ f.replaceSync(A);
14
14
  class b extends HTMLElement {
15
15
  static get observedAttributes() {
16
16
  return [
@@ -63,11 +63,12 @@ class b extends HTMLElement {
63
63
  }
64
64
  constructor(...t) {
65
65
  super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
66
- c,
66
+ f,
67
67
  ...t
68
68
  ];
69
69
  }
70
70
  attributeChangedCallback(t, s, e) {
71
+ var i;
71
72
  if (b.observedAttributes.indexOf(t) !== -1)
72
73
  switch (t) {
73
74
  case "grow":
@@ -96,7 +97,7 @@ class b extends HTMLElement {
96
97
  t,
97
98
  s,
98
99
  e,
99
- this.isGrid ? $ : S
100
+ ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? S : $
100
101
  );
101
102
  break;
102
103
  case "justify-self":
@@ -108,7 +109,7 @@ class b extends HTMLElement {
108
109
  t,
109
110
  s,
110
111
  e,
111
- w
112
+ x
112
113
  );
113
114
  break;
114
115
  case "col-span":
@@ -116,14 +117,14 @@ class b extends HTMLElement {
116
117
  case "col-span--tablet":
117
118
  case "col-span--laptop":
118
119
  case "col-span--desktop":
119
- this.updateProperties(t, s, e, x);
120
+ this.updateProperties(t, s, e, j);
120
121
  break;
121
122
  case "order":
122
123
  case "order--mobile":
123
124
  case "order--tablet":
124
125
  case "order--laptop":
125
126
  case "order--desktop":
126
- this.updateProperties(t, s, e, j);
127
+ this.updateProperties(t, s, e, M);
127
128
  break;
128
129
  }
129
130
  }
@@ -168,11 +169,18 @@ class b extends HTMLElement {
168
169
  var t;
169
170
  return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
170
171
  }
171
- get isGrid() {
172
- return this.$parentElementName === "px-grid";
173
- }
174
- get isStack() {
175
- return this.$parentElementName === "px-stack";
172
+ get isInsideGridOrStack() {
173
+ let t = this.parentElement;
174
+ for (; t; ) {
175
+ if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
176
+ return !0;
177
+ if (window.getComputedStyle(t).display === "contents") {
178
+ t = t.parentElement;
179
+ continue;
180
+ }
181
+ break;
182
+ }
183
+ return !1;
176
184
  }
177
185
  get grow() {
178
186
  return this.getAttribute("grow");
@@ -409,10 +417,8 @@ class b extends HTMLElement {
409
417
  this.setAttribute("order--desktop", t);
410
418
  }
411
419
  }
412
- class g extends b {
413
- constructor(...t) {
414
- super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
415
- }
420
+ const u = class u extends b {
421
+ // nativeName: string;
416
422
  static get observedAttributes() {
417
423
  return [
418
424
  ...super.observedAttributes,
@@ -422,10 +428,18 @@ class g extends b {
422
428
  attributeChangedCallback(t, s, e) {
423
429
  super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
424
430
  }
425
- connectedCallback() {
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() {
426
440
  var t;
427
- for (const s of A(this.nativeName))
428
- if (!(s === "constructor" || this.accessorExclusions.includes(s)))
441
+ for (const s of this.ctor.supportedPropertyNames)
442
+ if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
429
443
  try {
430
444
  Object.defineProperty(this, s, {
431
445
  get() {
@@ -438,13 +452,9 @@ class g extends b {
438
452
  } catch (e) {
439
453
  console.warn(`Could not create property ${s} for`, this.$el, e);
440
454
  }
441
- if (this.isGrid || this.isStack) {
442
- const s = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
443
- this.$el.style.display = "block", (this.isGrid || this.isStack && s === "row") && (this.$el.style.height = "100%");
444
- }
445
455
  }
446
456
  get $el() {
447
- return this.shadowRoot.querySelector(this.nativeName);
457
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
448
458
  }
449
459
  _updateAttribute(t, s) {
450
460
  s ? this.setAttribute(t, s) : this.removeAttribute(t);
@@ -452,8 +462,10 @@ class g extends b {
452
462
  _updateBooleanAttribute(t, s) {
453
463
  s ? this.setAttribute(t, "") : this.removeAttribute(t);
454
464
  }
455
- }
456
- const S = [
465
+ };
466
+ u.accessorExclusions = [];
467
+ let p = u;
468
+ const $ = [
457
469
  "",
458
470
  "default",
459
471
  "auto",
@@ -462,21 +474,21 @@ const S = [
462
474
  "center",
463
475
  "baseline",
464
476
  "stretch"
465
- ], $ = [
477
+ ], S = [
466
478
  "",
467
479
  "default",
468
480
  "start",
469
481
  "end",
470
482
  "center",
471
483
  "stretch"
472
- ], w = [
484
+ ], x = [
473
485
  "",
474
486
  "default",
475
487
  "start",
476
488
  "end",
477
489
  "center",
478
490
  "stretch"
479
- ], x = [
491
+ ], j = [
480
492
  "",
481
493
  "1",
482
494
  "2",
@@ -490,7 +502,7 @@ const S = [
490
502
  "10",
491
503
  "11",
492
504
  "12"
493
- ], j = [
505
+ ], M = [
494
506
  "",
495
507
  "-1",
496
508
  "0",
@@ -506,11 +518,11 @@ const S = [
506
518
  "10",
507
519
  "11",
508
520
  "12"
509
- ], C = ["Xs", "S", "M", "L", "Xl"];
521
+ ], T = ["Xs", "S", "M", "L", "Xl"];
510
522
  [
511
- ...C.map((r) => r.toLowerCase())
523
+ ...T.map((o) => o.toLowerCase())
512
524
  ];
513
- const M = [
525
+ const L = [
514
526
  "none",
515
527
  "2xs",
516
528
  "xs",
@@ -521,152 +533,61 @@ const M = [
521
533
  "heading-to-content",
522
534
  "page-layout-between-sections"
523
535
  ];
524
- function N(r, t, s, e = "", i) {
536
+ function D(o, t, s, e = "", i) {
525
537
  const a = new CSSStyleSheet(), l = s.reduce(
526
- (n, o) => n + `
527
- ${t(r, o)} {
528
- ${r}: var(--${e}-${o}-desktop);
529
- ${`${i}:var(--${e}-${o}-desktop)`}
538
+ (n, r) => n + `
539
+ ${t(o, r)} {
540
+ ${o}: var(--${e}-${r}-desktop);
541
+ ${`${i}:var(--${e}-${r}-desktop)`}
530
542
  }
531
543
  /* Mobile only - max 767px */
532
544
  @media only screen and (max-width: 47.938em) {
533
- ${t(r, o)} {
534
- ${r}: var(--${e}-${o}-mobile);
535
- ${`${i}: var(--${e}-${o}-mobile)`}
545
+ ${t(o, r)} {
546
+ ${o}: var(--${e}-${r}-mobile);
547
+ ${`${i}: var(--${e}-${r}-mobile)`}
536
548
  }
537
549
  }
538
- ${t(r, o, "mobile")} {
550
+ ${t(o, r, "mobile")} {
539
551
  /* Mobile only - max 767px */
540
552
  @media only screen and (max-width: 47.938em) {
541
- ${r}: var(--${e}-${o}-mobile) !important;
542
- ${`${i}: var(--${e}-${o}-mobile)`}
553
+ ${o}: var(--${e}-${r}-mobile) !important;
554
+ ${`${i}: var(--${e}-${r}-mobile)`}
543
555
  }
544
556
  }
545
- ${t(r, o, "tablet")} {
557
+ ${t(o, r, "tablet")} {
546
558
  /* Tablet - min 768px max 1024px */
547
559
  @media only screen and (min-width: 48em) and (max-width: 64em) {
548
- ${r}: var(--${e}-${o}-desktop) !important;
549
- ${`${i}: var(--${e}-${o}-desktop)`}
560
+ ${o}: var(--${e}-${r}-desktop) !important;
561
+ ${`${i}: var(--${e}-${r}-desktop)`}
550
562
  }
551
563
  }
552
- ${t(r, o, "laptop")} {
564
+ ${t(o, r, "laptop")} {
553
565
  /* Laptop - 1025px*/
554
566
  @media only screen and (min-width: 64.0625em) {
555
- ${r}: var(--${e}-${o}-desktop) !important;
556
- ${`${i}: var(--${e}-${o}-desktop)`}
567
+ ${o}: var(--${e}-${r}-desktop) !important;
568
+ ${`${i}: var(--${e}-${r}-desktop)`}
557
569
  }
558
570
  }
559
- ${t(r, o, "desktop")} {
571
+ ${t(o, r, "desktop")} {
560
572
  /* Desktop - 1025px*/
561
573
  @media only screen and (min-width: 64.0625em) {
562
- ${r}: var(--${e}-${o}-desktop) !important;
563
- ${`${i}: var(--${e}-${o}-desktop)`}
574
+ ${o}: var(--${e}-${r}-desktop) !important;
575
+ ${`${i}: var(--${e}-${r}-desktop)`}
564
576
  }
565
577
  }`,
566
578
  ""
567
579
  );
568
580
  return a.replaceSync(l), a;
569
581
  }
570
- class T {
571
- constructor(t, s, e, i) {
572
- 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(
573
- this.component,
574
- this.toCamelCase(this.attributeName),
575
- {
576
- get: () => this.component.getAttribute(this.attributeName),
577
- set: (a) => {
578
- this.component.setAttribute(this.attributeName, a);
579
- }
580
- }
581
- );
582
- }
583
- toCamelCase(t) {
584
- return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
585
- }
586
- init(t) {
587
- this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
588
- }
589
- attributeChangedCallback(t, s, e) {
590
- if (s !== e)
591
- switch (!0) {
592
- case t === this.attributeName:
593
- case t === `${this.attributeName}--mobile`:
594
- case t === `${this.attributeName}--tablet`:
595
- case t === `${this.attributeName}--laptop`:
596
- case t === `${this.attributeName}--desktop`:
597
- this.setCSSProperty(t, e);
598
- break;
599
- default:
600
- return;
601
- }
602
- }
603
- setCSSProperty(t, s, e = !0) {
604
- const [, i = ""] = t.split("--");
605
- this.component.style.setProperty(
606
- `${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
607
- `${this._attributeValue(s, i)}`
608
- );
609
- }
610
- setCSSProperties() {
611
- const t = this.component.getAttribute(this.attributeName);
612
- 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));
613
- const s = this.component.getAttribute(
614
- this.attributeNameMobile
615
- );
616
- s && this.setCSSProperty(
617
- this.attributeNameMobile,
618
- s,
619
- !1
620
- );
621
- const e = this.component.getAttribute(
622
- this.attributeNameTablet
623
- );
624
- e && this.setCSSProperty(
625
- this.attributeNameTablet,
626
- e,
627
- !1
628
- );
629
- const i = this.component.getAttribute(
630
- this.attributeNameLaptop
631
- );
632
- i && this.setCSSProperty(
633
- this.attributeNameLaptop,
634
- i,
635
- !1
636
- );
637
- const a = this.component.getAttribute(
638
- this.attributeNameDesktop
639
- );
640
- a && this.setCSSProperty(
641
- this.attributeNameDesktop,
642
- a,
643
- !1
644
- );
645
- }
646
- set attributeValue(t) {
647
- this._attributeValue = t, this.setCSSProperties();
648
- }
649
- }
650
582
  const m = new CSSStyleSheet();
651
- m.replaceSync(k);
652
- const O = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, L = "px-spacing", d = class d extends g {
653
- constructor() {
654
- super(
655
- m,
656
- N(
657
- "gap",
658
- D,
659
- M,
660
- L,
661
- "--list-gap"
662
- )
663
- ), this.AttributeDelegate = new T(
664
- this,
665
- "gap",
666
- (t) => t,
667
- "--list-gap"
668
- ), this.shadowRoot.innerHTML = this.template();
669
- }
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 {
670
591
  template() {
671
592
  return `
672
593
  <div class="list" role="list">
@@ -674,11 +595,14 @@ const O = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ?
674
595
  </div>
675
596
  `;
676
597
  }
598
+ constructor() {
599
+ super(m, E), this.shadowRoot.innerHTML = this.template();
600
+ }
677
601
  static get observedAttributes() {
678
602
  return ["inverted"];
679
603
  }
680
604
  connectedCallback() {
681
- super.connectedCallback(), this.gap || (this.gap = "xs");
605
+ this.gap || (this.gap = "xs");
682
606
  }
683
607
  attributeChangedCallback(t, s, e) {
684
608
  if (s !== e)
@@ -730,12 +654,12 @@ const O = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ?
730
654
  t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
731
655
  }
732
656
  };
733
- d.nativeName = "div";
734
- let p = d;
735
- customElements.get("px-list") || customElements.define("px-list", p);
736
- const E = '.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)}}', f = new CSSStyleSheet();
737
- f.replaceSync(E);
738
- const u = class u extends g {
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 {
739
663
  template() {
740
664
  return `
741
665
  <div class="list-item" role="listitem">
@@ -745,11 +669,12 @@ const u = class u extends g {
745
669
  `;
746
670
  }
747
671
  constructor() {
748
- super(f), this.shadowRoot.innerHTML = this.template();
672
+ super(k), this.shadowRoot.innerHTML = this.template();
749
673
  }
750
674
  static get observedAttributes() {
751
675
  return ["inverted"];
752
676
  }
677
+ // TODO: factorize code
753
678
  attributeChangedCallback(t, s, e) {
754
679
  if (s !== e)
755
680
  switch (t) {
@@ -770,11 +695,10 @@ const u = class u extends g {
770
695
  t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
771
696
  }
772
697
  };
773
- u.nativeName = "div";
774
- let h = u;
775
- customElements.get("px-list-item") || customElements.define("px-list-item", h);
698
+ c.nativeName = "div";
699
+ let d = c;
700
+ customElements.get("px-list-item") || customElements.define("px-list-item", d);
776
701
  export {
777
- p as List,
778
- h as ListItem,
779
- O as breakpointsValues
702
+ h as List,
703
+ d as ListItem
780
704
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
3
- "version": "1.4.1-beta.1",
3
+ "version": "1.4.2-beta.1",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",