@proximus/lavender-list 2.0.0-alpha.13 → 2.0.0-alpha.130

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 (4) hide show
  1. package/dist/List.d.ts +4 -0
  2. package/dist/ListItem.d.ts +2 -0
  3. package/dist/index.es.js +230 -171
  4. package/package.json +2 -2
package/dist/List.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import { PxElement } from '@proximus/lavender-common';
2
+ export declare const listVariantValues: string[];
2
3
  export declare class List extends PxElement<HTMLDivElement> {
4
+ #private;
3
5
  static nativeName: string;
4
6
  private template;
5
7
  constructor();
@@ -19,4 +21,6 @@ export declare class List extends PxElement<HTMLDivElement> {
19
21
  set gapLaptop(value: string);
20
22
  get gapDesktop(): string;
21
23
  set gapDesktop(value: string);
24
+ get variant(): string;
25
+ set variant(value: string);
22
26
  }
package/dist/ListItem.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { PxElement } from '@proximus/lavender-common';
2
+ export declare const LIST_ITEM_CONNECTED_EVENT = "px-list-item-connected";
2
3
  export declare class ListItem extends PxElement<HTMLDivElement> {
3
4
  static nativeName: string;
4
5
  private template;
5
6
  constructor();
7
+ connectedCallback(): void;
6
8
  static get observedAttributes(): string[];
7
9
  attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
8
10
  get $children(): NodeListOf<Element>;
package/dist/index.es.js CHANGED
@@ -1,17 +1,32 @@
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
- return Object.getOwnPropertyNames(s);
1
+ var $ = (o) => {
2
+ throw TypeError(o);
3
+ };
4
+ var O = (o, t, e) => t.has(o) || $("Cannot " + e);
5
+ var S = (o, t, e) => t.has(o) ? $("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(o) : t.set(o, e);
6
+ var p = (o, t, e) => (O(o, t, "access private method"), e);
7
+ const N = ".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-self-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([sticky-top]),:host([sticky-bottom]){z-index:5}:host([sticky-top]){position:sticky;top:0}:host([sticky-bottom]){position:sticky;bottom:0}: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: 47.938rem){: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: 48rem) and (max-width: 64rem){: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: 64.0625rem){: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: 64.0625rem){: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: 90.0625rem){: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 = { DEV: !0, VITE_COMPONENT_DEBUG: "true" };
8
+ function B(o) {
9
+ const t = document.createElement(o), e = Object.getPrototypeOf(t);
10
+ return Object.getOwnPropertyNames(e);
5
11
  }
6
- function y(o) {
7
- const t = document.createElement(o), s = Object.getPrototypeOf(t);
8
- return Object.getOwnPropertyNames(s).map(
9
- (e) => e.toLowerCase()
12
+ function G(o) {
13
+ const t = document.createElement(o), e = Object.getPrototypeOf(t);
14
+ return Object.getOwnPropertyNames(e).map(
15
+ (s) => s.toLowerCase()
10
16
  );
11
17
  }
12
- const f = new CSSStyleSheet();
13
- f.replaceSync(A);
14
- class b extends HTMLElement {
18
+ const C = new CSSStyleSheet();
19
+ C.replaceSync(_);
20
+ const h = typeof import.meta < "u" && typeof x < "u" ? x : void 0, P = (h == null ? void 0 : h.VITE_COMPONENT_DEBUG) === "true" || (h == null ? void 0 : h.DEV) === !0;
21
+ typeof window < "u" && (window.isComponentDebug = v);
22
+ function v() {
23
+ return P;
24
+ }
25
+ function T(o) {
26
+ v() && console.error(o);
27
+ }
28
+ typeof window < "u" && (window.isComponentDebug = v);
29
+ class k extends HTMLElement {
15
30
  static get observedAttributes() {
16
31
  return [
17
32
  "grow",
@@ -58,18 +73,20 @@ class b extends HTMLElement {
58
73
  "order--mobile",
59
74
  "order--tablet",
60
75
  "order--laptop",
61
- "order--desktop"
76
+ "order--desktop",
77
+ "sticky-top",
78
+ "sticky-bottom"
62
79
  ];
63
80
  }
64
81
  constructor(...t) {
65
82
  super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
66
- f,
83
+ C,
67
84
  ...t
68
85
  ];
69
86
  }
70
- attributeChangedCallback(t, s, e) {
87
+ attributeChangedCallback(t, e, s) {
71
88
  var i;
72
- if (b.observedAttributes.indexOf(t) !== -1)
89
+ if (k.observedAttributes.indexOf(t) !== -1)
73
90
  switch (t) {
74
91
  case "grow":
75
92
  case "grow--mobile":
@@ -86,7 +103,7 @@ class b extends HTMLElement {
86
103
  case "basis--tablet":
87
104
  case "basis--laptop":
88
105
  case "basis--desktop":
89
- this.style.setProperty(`--${t}-value`, e);
106
+ this.style.setProperty(`--${t}-value`, s);
90
107
  break;
91
108
  case "align-self":
92
109
  case "align-self--mobile":
@@ -95,9 +112,9 @@ class b extends HTMLElement {
95
112
  case "align-self--desktop":
96
113
  this.updateProperties(
97
114
  t,
98
- s,
99
115
  e,
100
- ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? S : $
116
+ s,
117
+ ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? q : R
101
118
  );
102
119
  break;
103
120
  case "justify-self":
@@ -107,9 +124,9 @@ class b extends HTMLElement {
107
124
  case "justify-self--desktop":
108
125
  this.updateProperties(
109
126
  t,
110
- s,
111
127
  e,
112
- x
128
+ s,
129
+ H
113
130
  );
114
131
  break;
115
132
  case "col-span":
@@ -117,50 +134,49 @@ class b extends HTMLElement {
117
134
  case "col-span--tablet":
118
135
  case "col-span--laptop":
119
136
  case "col-span--desktop":
120
- this.updateProperties(t, s, e, j);
137
+ this.updateProperties(t, e, s, U);
121
138
  break;
122
139
  case "order":
123
140
  case "order--mobile":
124
141
  case "order--tablet":
125
142
  case "order--laptop":
126
143
  case "order--desktop":
127
- this.updateProperties(t, s, e, M);
144
+ this.updateProperties(t, e, s, X);
128
145
  break;
129
146
  }
130
147
  }
131
- updateProperties(t, s, e, i) {
132
- if (i && !this.checkName(i, e)) {
133
- console.error(`${e} is not a valid value for ${i}`);
134
- return;
135
- }
136
- const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
137
- if (!a)
148
+ updateProperties(t, e, s, i) {
149
+ i && (this.checkName(i, s) || T(
150
+ `"${s}" is not an allowed ${t} value for ${this.tagName.toLowerCase()}. Allowed values are: "${i.join('", "')}".`
151
+ ));
152
+ const l = t.indexOf("--") > -1, n = l ? t.split("--")[0] : t;
153
+ if (!l)
138
154
  this.style.setProperty(
139
- `--${l}-value`,
140
- s
141
- ), this.style.setProperty(
142
- `--${l}-value`,
155
+ `--${n}-value`,
143
156
  e
157
+ ), this.style.setProperty(
158
+ `--${n}-value`,
159
+ s
144
160
  );
145
161
  else {
146
- const n = t.split("--")[1];
162
+ const d = t.split("--")[1];
147
163
  this.style.setProperty(
148
- `--${l}--${n}-value`,
149
- s
150
- ), this.style.setProperty(
151
- `--${l}--${n}-value`,
164
+ `--${n}--${d}-value`,
152
165
  e
166
+ ), this.style.setProperty(
167
+ `--${n}--${d}-value`,
168
+ s
153
169
  );
154
170
  }
155
171
  }
156
- updateStyle(t, s, e) {
157
- e !== null && e !== "" && e !== "default" && this.style.setProperty(
158
- `--${t}--${s}-value`,
159
- e
172
+ updateStyle(t, e, s) {
173
+ s !== null && s !== "" && s !== "default" && this.style.setProperty(
174
+ `--${t}--${e}-value`,
175
+ s
160
176
  );
161
177
  }
162
- checkName(t, s) {
163
- return t.includes(s);
178
+ checkName(t, e) {
179
+ return t.includes(e);
164
180
  }
165
181
  get $el() {
166
182
  return this;
@@ -417,78 +433,80 @@ class b extends HTMLElement {
417
433
  this.setAttribute("order--desktop", t);
418
434
  }
419
435
  }
420
- const u = class u extends b {
436
+ const A = class A extends k {
421
437
  // nativeName: string;
422
438
  static get observedAttributes() {
423
439
  return [
424
440
  ...super.observedAttributes,
425
- ...y(this.nativeName)
441
+ ...G(this.nativeName)
426
442
  ];
427
443
  }
428
- attributeChangedCallback(t, s, e) {
429
- super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
444
+ attributeChangedCallback(t, e, s) {
445
+ super.attributeChangedCallback(t, e, s), s === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, s);
430
446
  }
431
447
  get ctor() {
432
448
  return Object.getPrototypeOf(this).constructor;
433
449
  }
434
450
  constructor(...t) {
435
- super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = w(
451
+ super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = B(
436
452
  this.ctor.nativeName
437
453
  )), this.enhanceWithNativeProperties();
438
454
  }
439
455
  enhanceWithNativeProperties() {
440
456
  var t;
441
- for (const s of this.ctor.supportedPropertyNames)
442
- if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
457
+ for (const e of this.ctor.supportedPropertyNames)
458
+ if (!(e === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(e)))
443
459
  try {
444
- Object.defineProperty(this, s, {
460
+ Object.defineProperty(this, e, {
445
461
  get() {
446
- return this.$el[s];
462
+ return this.$el[e];
447
463
  },
448
- set(e) {
449
- this.$el[s] !== e && (this.$el[s] = e);
464
+ set(s) {
465
+ this.$el[e] !== s && (this.$el[e] = s);
450
466
  }
451
467
  });
452
- } catch (e) {
453
- console.warn(`Could not create property ${s} for`, this.$el, e);
468
+ } catch (s) {
469
+ console.warn(`Could not create property ${e} for`, this.$el, s);
454
470
  }
455
471
  }
456
472
  get $el() {
457
473
  return this.shadowRoot.querySelector(this.ctor.nativeName);
458
474
  }
459
- _updateAttribute(t, s) {
460
- s ? this.setAttribute(t, s) : this.removeAttribute(t);
475
+ _updateAttribute(t, e) {
476
+ e ? this.setAttribute(t, e) : this.removeAttribute(t);
461
477
  }
462
- _updateBooleanAttribute(t, s) {
463
- s ? this.setAttribute(t, "") : this.removeAttribute(t);
478
+ _updateBooleanAttribute(t, e) {
479
+ e ? this.setAttribute(t, "") : this.removeAttribute(t);
464
480
  }
465
481
  };
466
- u.accessorExclusions = [];
467
- let p = u;
468
- const $ = [
482
+ A.accessorExclusions = [];
483
+ let b = A;
484
+ const R = [
469
485
  "",
470
486
  "default",
471
487
  "auto",
472
488
  "flex-start",
489
+ "start",
473
490
  "flex-end",
491
+ "end",
474
492
  "center",
475
493
  "baseline",
476
494
  "stretch"
477
- ], S = [
495
+ ], q = [
478
496
  "",
479
497
  "default",
480
498
  "start",
481
499
  "end",
482
500
  "center",
483
501
  "stretch"
484
- ], x = [
502
+ ], H = [
485
503
  "",
486
504
  "default",
487
505
  "start",
488
506
  "end",
489
507
  "center",
490
508
  "stretch"
491
- ], j = [
509
+ ], U = [
492
510
  "",
493
511
  "1",
494
512
  "2",
@@ -502,7 +520,7 @@ const $ = [
502
520
  "10",
503
521
  "11",
504
522
  "12"
505
- ], M = [
523
+ ], X = [
506
524
  "",
507
525
  "-1",
508
526
  "0",
@@ -518,11 +536,11 @@ const $ = [
518
536
  "10",
519
537
  "11",
520
538
  "12"
521
- ], T = ["Xs", "S", "M", "L", "Xl"];
539
+ ], z = ["Xs", "S", "M", "L", "Xl"];
522
540
  [
523
- ...T.map((o) => o.toLowerCase())
541
+ ...z.map((o) => o.toLowerCase())
524
542
  ];
525
- const L = [
543
+ const W = [
526
544
  "none",
527
545
  "2xs",
528
546
  "xs",
@@ -533,89 +551,90 @@ const L = [
533
551
  "heading-to-content",
534
552
  "page-layout-between-sections"
535
553
  ];
536
- function D(o, t, s, e = "", i) {
537
- const a = new CSSStyleSheet(), l = s.reduce(
538
- (n, r) => n + `
539
- ${t(o, r)} {
540
- ${o}: var(--${e}-${r}-desktop);
541
- ${`${i}:var(--${e}-${r}-desktop)`}
554
+ function I(o, t, e, s = "", i, l = o) {
555
+ const n = new CSSStyleSheet(), d = e.reduce(
556
+ (E, r) => E + `
557
+ ${t(l, r)} {
558
+ ${o}: var(--${s}-${r}-desktop);
559
+ ${`${i}:var(--${s}-${r}-desktop)`}
542
560
  }
543
561
  /* Mobile only - max 767px */
544
- @media only screen and (max-width: 47.938em) {
545
- ${t(o, r)} {
546
- ${o}: var(--${e}-${r}-mobile);
547
- ${`${i}: var(--${e}-${r}-mobile)`}
562
+ @media only screen and (max-width: 47.938rem) {
563
+ ${t(l, r)} {
564
+ ${o}: var(--${s}-${r}-mobile);
565
+ ${`${i}: var(--${s}-${r}-mobile)`}
548
566
  }
549
567
  }
550
- ${t(o, r, "mobile")} {
568
+ ${t(l, r, "mobile")} {
551
569
  /* Mobile only - max 767px */
552
- @media only screen and (max-width: 47.938em) {
553
- ${o}: var(--${e}-${r}-mobile) !important;
554
- ${`${i}: var(--${e}-${r}-mobile)`}
570
+ @media only screen and (max-width: 47.938rem) {
571
+ ${o}: var(--${s}-${r}-mobile) !important;
572
+ ${`${i}: var(--${s}-${r}-mobile)`}
555
573
  }
556
574
  }
557
- ${t(o, r, "tablet")} {
575
+ ${t(l, r, "tablet")} {
558
576
  /* Tablet - min 768px max 1024px */
559
- @media only screen and (min-width: 48em) and (max-width: 64em) {
560
- ${o}: var(--${e}-${r}-desktop) !important;
561
- ${`${i}: var(--${e}-${r}-desktop)`}
577
+ @media only screen and (min-width: 48rem) and (max-width: 64rem) {
578
+ ${o}: var(--${s}-${r}-desktop) !important;
579
+ ${`${i}: var(--${s}-${r}-desktop)`}
562
580
  }
563
581
  }
564
- ${t(o, r, "laptop")} {
582
+ ${t(l, r, "laptop")} {
565
583
  /* Laptop - 1025px*/
566
- @media only screen and (min-width: 64.0625em) {
567
- ${o}: var(--${e}-${r}-desktop) !important;
568
- ${`${i}: var(--${e}-${r}-desktop)`}
584
+ @media only screen and (min-width: 64.0625rem) {
585
+ ${o}: var(--${s}-${r}-desktop) !important;
586
+ ${`${i}: var(--${s}-${r}-desktop)`}
569
587
  }
570
588
  }
571
- ${t(o, r, "desktop")} {
589
+ ${t(l, r, "desktop")} {
572
590
  /* Desktop - 1025px*/
573
- @media only screen and (min-width: 64.0625em) {
574
- ${o}: var(--${e}-${r}-desktop) !important;
575
- ${`${i}: var(--${e}-${r}-desktop)`}
591
+ @media only screen and (min-width: 64.0625rem) {
592
+ ${o}: var(--${s}-${r}-desktop) !important;
593
+ ${`${i}: var(--${s}-${r}-desktop)`}
576
594
  }
577
595
  }`,
578
596
  ""
579
597
  );
580
- return a.replaceSync(l), a;
598
+ return n.replaceSync(d), n;
581
599
  }
582
- const m = new CSSStyleSheet();
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 {
600
+ const J = '.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 screen and (min-width: 48rem){.list-item{gap:var(--px-spacing-xs-tablet)}}@media screen and (min-width: 64.0625rem){.list-item{gap:var(--px-spacing-xs-laptop)}}@media screen and (min-width: 90.0625rem){.list-item{gap:var(--px-spacing-xs-desktop)}}', D = new CSSStyleSheet();
601
+ D.replaceSync(J);
602
+ const M = "px-list-item-connected", y = class y extends b {
591
603
  template() {
592
604
  return `
593
- <div class="list" role="list">
594
- <slot></slot>
605
+ <div class="list-item" role="listitem">
606
+ <slot name="icon"></slot>
607
+ <slot name="label"></slot>
595
608
  </div>
596
609
  `;
597
610
  }
598
611
  constructor() {
599
- super(m, E), this.shadowRoot.innerHTML = this.template();
612
+ super(D), this.shadowRoot.innerHTML = this.template();
613
+ }
614
+ connectedCallback() {
615
+ this.dispatchEvent(
616
+ new CustomEvent(M, {
617
+ bubbles: !0,
618
+ composed: !0
619
+ })
620
+ );
600
621
  }
601
622
  static get observedAttributes() {
602
623
  return ["inverted"];
603
624
  }
604
- connectedCallback() {
605
- this.gap || (this.gap = "xs");
606
- }
607
- attributeChangedCallback(t, s, e) {
608
- if (s !== e)
625
+ // TODO: factorize code
626
+ attributeChangedCallback(t, e, s) {
627
+ if (e !== s)
609
628
  switch (t) {
610
629
  case "inverted":
611
630
  for (let i = 0; i < this.$children.length; i++)
612
631
  this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
613
- this.$el.toggleAttribute("inverted", e !== null);
632
+ this.$el.toggleAttribute("inverted", s !== null);
614
633
  break;
615
634
  }
616
635
  }
617
636
  get $children() {
618
- return this.querySelectorAll("px-list-item");
637
+ return this.querySelectorAll("px-list-item > *");
619
638
  }
620
639
  get inverted() {
621
640
  return this.hasAttribute("inverted");
@@ -623,82 +642,122 @@ const C = (o, t, s) => `:host([${o}${s ? `--${s}` : ""}='${t}']) .list`, O = "px
623
642
  set inverted(t) {
624
643
  t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
625
644
  }
645
+ };
646
+ y.nativeName = "div";
647
+ let u = y;
648
+ customElements.get("px-list-item") || customElements.define("px-list-item", u);
649
+ const L = new CSSStyleSheet();
650
+ L.replaceSync(N);
651
+ const j = ["", "ul", "ol"], F = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, K = "px-spacing", Q = I(
652
+ "gap",
653
+ F,
654
+ W,
655
+ K,
656
+ "--list-gap"
657
+ );
658
+ var a, g, f, m;
659
+ const w = class w extends b {
660
+ constructor() {
661
+ super(L, Q);
662
+ S(this, a);
663
+ this.shadowRoot.innerHTML = this.template();
664
+ }
665
+ template() {
666
+ return `
667
+ <div class="list" role="list">
668
+ <slot></slot>
669
+ </div>
670
+ `;
671
+ }
672
+ static get observedAttributes() {
673
+ return ["inverted", "variant"];
674
+ }
675
+ connectedCallback() {
676
+ this.gap || (this.gap = "xs"), this.addEventListener(M, () => {
677
+ p(this, a, g).call(this);
678
+ }), p(this, a, g).call(this);
679
+ }
680
+ attributeChangedCallback(e, s, i) {
681
+ if (s !== i)
682
+ switch (e) {
683
+ case "inverted":
684
+ this.isConnected && p(this, a, f).call(this);
685
+ break;
686
+ case "variant":
687
+ this.checkName(j, i) || T(
688
+ `"${i}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${j.join('", "')}".`
689
+ ), this.isConnected && p(this, a, m).call(this, i), super.attributeChangedCallback(e, s, i);
690
+ break;
691
+ default:
692
+ super.attributeChangedCallback(e, s, i);
693
+ break;
694
+ }
695
+ }
696
+ get $children() {
697
+ return this.querySelectorAll("px-list-item");
698
+ }
699
+ get inverted() {
700
+ return this.hasAttribute("inverted");
701
+ }
702
+ set inverted(e) {
703
+ e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
704
+ }
626
705
  get gap() {
627
706
  return this.getAttribute("gap");
628
707
  }
629
- set gap(t) {
630
- t ? this.setAttribute("gap", t) : this.removeAttribute("gap");
708
+ set gap(e) {
709
+ e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
631
710
  }
632
711
  get gapMobile() {
633
712
  return this.getAttribute("gap--mobile");
634
713
  }
635
- set gapMobile(t) {
636
- t ? this.setAttribute("gap--mobile", t) : this.removeAttribute("gap--mobile");
714
+ set gapMobile(e) {
715
+ e ? this.setAttribute("gap--mobile", e) : this.removeAttribute("gap--mobile");
637
716
  }
638
717
  get gapTablet() {
639
718
  return this.getAttribute("gap--tablet");
640
719
  }
641
- set gapTablet(t) {
642
- t ? this.setAttribute("gap--tablet", t) : this.removeAttribute("gap--tablet");
720
+ set gapTablet(e) {
721
+ e ? this.setAttribute("gap--tablet", e) : this.removeAttribute("gap--tablet");
643
722
  }
644
723
  get gapLaptop() {
645
724
  return this.getAttribute("gap--laptop");
646
725
  }
647
- set gapLaptop(t) {
648
- t ? this.setAttribute("gap--laptop", t) : this.removeAttribute("gap--laptop");
726
+ set gapLaptop(e) {
727
+ e ? this.setAttribute("gap--laptop", e) : this.removeAttribute("gap--laptop");
649
728
  }
650
729
  get gapDesktop() {
651
730
  return this.getAttribute("gap--desktop");
652
731
  }
653
- set gapDesktop(t) {
654
- t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
732
+ set gapDesktop(e) {
733
+ e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
655
734
  }
656
- };
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 {
663
- template() {
664
- return `
665
- <div class="list-item" role="listitem">
666
- <slot name="icon"></slot>
667
- <slot name="label"></slot>
668
- </div>
669
- `;
670
- }
671
- constructor() {
672
- super(k), this.shadowRoot.innerHTML = this.template();
673
- }
674
- static get observedAttributes() {
675
- return ["inverted"];
676
- }
677
- // TODO: factorize code
678
- attributeChangedCallback(t, s, e) {
679
- if (s !== e)
680
- switch (t) {
681
- case "inverted":
682
- for (let i = 0; i < this.$children.length; i++)
683
- this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
684
- this.$el.toggleAttribute("inverted", e !== null);
685
- break;
686
- }
687
- }
688
- get $children() {
689
- return this.querySelectorAll("px-list-item > *");
735
+ get variant() {
736
+ return this.getAttribute("variant");
690
737
  }
691
- get inverted() {
692
- return this.hasAttribute("inverted");
693
- }
694
- set inverted(t) {
695
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
738
+ set variant(e) {
739
+ e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
696
740
  }
697
741
  };
698
- c.nativeName = "div";
699
- let d = c;
700
- customElements.get("px-list-item") || customElements.define("px-list-item", d);
742
+ a = new WeakSet(), g = function() {
743
+ p(this, a, f).call(this), p(this, a, m).call(this, this.getAttribute("variant"));
744
+ }, f = function() {
745
+ var s;
746
+ const e = this.hasAttribute("inverted");
747
+ for (let i = 0; i < this.$children.length; i++)
748
+ this.$children[i].toggleAttribute("inverted", e);
749
+ (s = this.$el) == null || s.toggleAttribute("inverted", e);
750
+ }, m = function(e) {
751
+ for (let s = 0; s < this.$children.length; s++) {
752
+ const i = this.$children[s];
753
+ e !== null ? (i.setAttribute("variant", e), e === "ol" ? i.style.setProperty("--item-index", String(s + 1)) : i.style.removeProperty("--item-index")) : (i.removeAttribute("variant"), i.style.removeProperty("--item-index"));
754
+ }
755
+ }, w.nativeName = "div";
756
+ let c = w;
757
+ customElements.get("px-list") || customElements.define("px-list", c);
701
758
  export {
702
- h as List,
703
- d as ListItem
759
+ M as LIST_ITEM_CONNECTED_EVENT,
760
+ c as List,
761
+ u as ListItem,
762
+ j as listVariantValues
704
763
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
3
- "version": "2.0.0-alpha.13",
3
+ "version": "2.0.0-alpha.130",
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"