@proximus/lavender-list 2.0.0-alpha.16 → 2.0.0-alpha.160

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