@proximus/lavender-list 2.0.0-alpha.14 → 2.0.0-alpha.140

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