@proximus/lavender-list 2.0.0-alpha.5 → 2.0.0-alpha.51

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