@proximus/lavender-list 2.0.0-alpha.8 → 2.0.0-alpha.80

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 +5 -3
  2. package/dist/ListItem.d.ts +2 -0
  3. package/dist/index.es.js +226 -249
  4. package/package.json +2 -2
package/dist/List.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { PxElement, AttributeBreakpointHandlerDelegate } from '@proximus/lavender-common';
2
- export declare const breakpointsValues: string[];
1
+ import { PxElement } from '@proximus/lavender-common';
2
+ export declare const listVariantValues: string[];
3
3
  export declare class List extends PxElement<HTMLDivElement> {
4
+ #private;
4
5
  static nativeName: string;
5
6
  private template;
6
- AttributeDelegate: AttributeBreakpointHandlerDelegate;
7
7
  constructor();
8
8
  static get observedAttributes(): string[];
9
9
  connectedCallback(): void;
@@ -21,4 +21,6 @@ export declare class List extends PxElement<HTMLDivElement> {
21
21
  set gapLaptop(value: string);
22
22
  get gapDesktop(): string;
23
23
  set gapDesktop(value: string);
24
+ get variant(): string;
25
+ set variant(value: string);
24
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 k = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", v = ":host([grow]){flex-grow:var(--grow-value)}:host([shrink]){flex-shrink:var(--shrink-value)}:host([basis]){flex-basis:var(--basis-value)}:host([align-self]){align-self:var(--align-self-value)}:host([col-span]){grid-column:span var(--col-span-value) / span var(--col-span-value)}:host([justify-self]){justify-self:var(--justify-value)}:host([order]),::slotted([order]){order:var(--order-value)}:host([hidden]),::slotted([hidden]){display:none}:host([shown--sr]),::slotted(*[shown--sr]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media screen and (max-width: 767px){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 768px) and (max-width: 1024px){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 1025px){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 1441px){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}";
2
- function A(r) {
3
- const t = document.createElement(r), s = Object.getPrototypeOf(t);
4
- return Object.getOwnPropertyNames(s);
1
+ var w = (o) => {
2
+ throw TypeError(o);
3
+ };
4
+ var M = (o, t, e) => t.has(o) || w("Cannot " + e);
5
+ var $ = (o, t, e) => t.has(o) ? w("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) => (M(o, t, "access private method"), e);
7
+ const D = ".list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}", E = ":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]){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: 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}}", O = {};
8
+ function N(o) {
9
+ const t = document.createElement(o), e = Object.getPrototypeOf(t);
10
+ return Object.getOwnPropertyNames(e);
5
11
  }
6
- function y(r) {
7
- const t = document.createElement(r), s = Object.getPrototypeOf(t);
8
- return Object.getOwnPropertyNames(s).map(
9
- (e) => e.toLowerCase()
12
+ function _(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 c = new CSSStyleSheet();
13
- c.replaceSync(v);
14
- class b extends HTMLElement {
18
+ const x = new CSSStyleSheet();
19
+ x.replaceSync(E);
20
+ const B = typeof import.meta < "u" && typeof O < "u" && !0;
21
+ typeof window < "u" && (window.isComponentDebug = m);
22
+ function m() {
23
+ return B;
24
+ }
25
+ function S(o) {
26
+ m() && console.error(o);
27
+ }
28
+ typeof window < "u" && (window.isComponentDebug = m);
29
+ class v 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
- c,
83
+ x,
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 (v.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" ? w : S
116
+ s,
117
+ ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? R : G
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
- $
128
+ s,
129
+ q
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, x);
137
+ this.updateProperties(t, e, s, H);
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, j);
144
+ this.updateProperties(t, e, s, P);
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) || S(
150
+ `${s} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
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 h = t.split("--")[1];
147
163
  this.style.setProperty(
148
- `--${l}--${n}-value`,
149
- s
150
- ), this.style.setProperty(
151
- `--${l}--${n}-value`,
164
+ `--${n}--${h}-value`,
152
165
  e
166
+ ), this.style.setProperty(
167
+ `--${n}--${h}-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,47 +433,55 @@ class b extends HTMLElement {
417
433
  this.setAttribute("order--desktop", t);
418
434
  }
419
435
  }
420
- class g extends b {
421
- constructor(...t) {
422
- super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
423
- }
436
+ const k = class k extends v {
437
+ // nativeName: string;
424
438
  static get observedAttributes() {
425
439
  return [
426
440
  ...super.observedAttributes,
427
- ...y(this.nativeName)
441
+ ..._(this.nativeName)
428
442
  ];
429
443
  }
430
- attributeChangedCallback(t, s, e) {
431
- 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);
432
446
  }
433
- connectedCallback() {
434
- for (const t of A(this.nativeName))
435
- if (!(t === "constructor" || this.accessorExclusions.includes(t)))
447
+ get ctor() {
448
+ return Object.getPrototypeOf(this).constructor;
449
+ }
450
+ constructor(...t) {
451
+ super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = N(
452
+ this.ctor.nativeName
453
+ )), this.enhanceWithNativeProperties();
454
+ }
455
+ enhanceWithNativeProperties() {
456
+ var t;
457
+ for (const e of this.ctor.supportedPropertyNames)
458
+ if (!(e === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(e)))
436
459
  try {
437
- Object.defineProperty(this, t, {
460
+ Object.defineProperty(this, e, {
438
461
  get() {
439
- return this.$el[t];
462
+ return this.$el[e];
440
463
  },
441
464
  set(s) {
442
- this.$el[t] !== s && (this.$el[t] = s);
465
+ this.$el[e] !== s && (this.$el[e] = s);
443
466
  }
444
467
  });
445
468
  } catch (s) {
446
- console.warn(`Could not create property ${t} for`, this.$el, s);
469
+ console.warn(`Could not create property ${e} for`, this.$el, s);
447
470
  }
448
- this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
449
471
  }
450
472
  get $el() {
451
- return this.shadowRoot.querySelector(this.nativeName);
473
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
452
474
  }
453
- _updateAttribute(t, s) {
454
- s ? this.setAttribute(t, s) : this.removeAttribute(t);
475
+ _updateAttribute(t, e) {
476
+ e ? this.setAttribute(t, e) : this.removeAttribute(t);
455
477
  }
456
- _updateBooleanAttribute(t, s) {
457
- s ? this.setAttribute(t, "") : this.removeAttribute(t);
478
+ _updateBooleanAttribute(t, e) {
479
+ e ? this.setAttribute(t, "") : this.removeAttribute(t);
458
480
  }
459
- }
460
- const S = [
481
+ };
482
+ k.accessorExclusions = [];
483
+ let d = k;
484
+ const G = [
461
485
  "",
462
486
  "default",
463
487
  "auto",
@@ -466,21 +490,21 @@ const S = [
466
490
  "center",
467
491
  "baseline",
468
492
  "stretch"
469
- ], w = [
493
+ ], R = [
470
494
  "",
471
495
  "default",
472
496
  "start",
473
497
  "end",
474
498
  "center",
475
499
  "stretch"
476
- ], $ = [
500
+ ], q = [
477
501
  "",
478
502
  "default",
479
503
  "start",
480
504
  "end",
481
505
  "center",
482
506
  "stretch"
483
- ], x = [
507
+ ], H = [
484
508
  "",
485
509
  "1",
486
510
  "2",
@@ -494,7 +518,7 @@ const S = [
494
518
  "10",
495
519
  "11",
496
520
  "12"
497
- ], j = [
521
+ ], P = [
498
522
  "",
499
523
  "-1",
500
524
  "0",
@@ -510,11 +534,11 @@ const S = [
510
534
  "10",
511
535
  "11",
512
536
  "12"
513
- ], C = ["Xs", "S", "M", "L", "Xl"];
537
+ ], X = ["Xs", "S", "M", "L", "Xl"];
514
538
  [
515
- ...C.map((r) => r.toLowerCase())
539
+ ...X.map((o) => o.toLowerCase())
516
540
  ];
517
- const N = [
541
+ const I = [
518
542
  "none",
519
543
  "2xs",
520
544
  "xs",
@@ -525,151 +549,116 @@ const N = [
525
549
  "heading-to-content",
526
550
  "page-layout-between-sections"
527
551
  ];
528
- function M(r, t, s, e = "", i) {
529
- const a = new CSSStyleSheet(), l = s.reduce(
530
- (n, o) => n + `
531
- ${t(r, o)} {
532
- ${r}: var(--${e}-${o}-desktop);
533
- ${`${i}:var(--${e}-${o}-desktop)`}
552
+ function W(o, t, e, s = "", i, l = o) {
553
+ const n = new CSSStyleSheet(), h = e.reduce(
554
+ (L, r) => L + `
555
+ ${t(l, r)} {
556
+ ${o}: var(--${s}-${r}-desktop);
557
+ ${`${i}:var(--${s}-${r}-desktop)`}
534
558
  }
535
559
  /* Mobile only - max 767px */
536
560
  @media only screen and (max-width: 47.938em) {
537
- ${t(r, o)} {
538
- ${r}: var(--${e}-${o}-mobile);
539
- ${`${i}: var(--${e}-${o}-mobile)`}
561
+ ${t(l, r)} {
562
+ ${o}: var(--${s}-${r}-mobile);
563
+ ${`${i}: var(--${s}-${r}-mobile)`}
540
564
  }
541
565
  }
542
- ${t(r, o, "mobile")} {
566
+ ${t(l, r, "mobile")} {
543
567
  /* Mobile only - max 767px */
544
568
  @media only screen and (max-width: 47.938em) {
545
- ${r}: var(--${e}-${o}-mobile) !important;
546
- ${`${i}: var(--${e}-${o}-mobile)`}
569
+ ${o}: var(--${s}-${r}-mobile) !important;
570
+ ${`${i}: var(--${s}-${r}-mobile)`}
547
571
  }
548
572
  }
549
- ${t(r, o, "tablet")} {
573
+ ${t(l, r, "tablet")} {
550
574
  /* Tablet - min 768px max 1024px */
551
575
  @media only screen and (min-width: 48em) and (max-width: 64em) {
552
- ${r}: var(--${e}-${o}-desktop) !important;
553
- ${`${i}: var(--${e}-${o}-desktop)`}
576
+ ${o}: var(--${s}-${r}-desktop) !important;
577
+ ${`${i}: var(--${s}-${r}-desktop)`}
554
578
  }
555
579
  }
556
- ${t(r, o, "laptop")} {
580
+ ${t(l, r, "laptop")} {
557
581
  /* Laptop - 1025px*/
558
582
  @media only screen and (min-width: 64.0625em) {
559
- ${r}: var(--${e}-${o}-desktop) !important;
560
- ${`${i}: var(--${e}-${o}-desktop)`}
583
+ ${o}: var(--${s}-${r}-desktop) !important;
584
+ ${`${i}: var(--${s}-${r}-desktop)`}
561
585
  }
562
586
  }
563
- ${t(r, o, "desktop")} {
587
+ ${t(l, r, "desktop")} {
564
588
  /* Desktop - 1025px*/
565
589
  @media only screen and (min-width: 64.0625em) {
566
- ${r}: var(--${e}-${o}-desktop) !important;
567
- ${`${i}: var(--${e}-${o}-desktop)`}
590
+ ${o}: var(--${s}-${r}-desktop) !important;
591
+ ${`${i}: var(--${s}-${r}-desktop)`}
568
592
  }
569
593
  }`,
570
594
  ""
571
595
  );
572
- return a.replaceSync(l), a;
596
+ return n.replaceSync(h), n;
573
597
  }
574
- class T {
575
- constructor(t, s, e, i) {
576
- this.component = t, this.attributeName = s, this.cssVariable = i, this.attributeNameMobile = `${this.attributeName}--mobile`, this.attributeNameTablet = `${this.attributeName}--tablet`, this.attributeNameLaptop = `${this.attributeName}--laptop`, this.attributeNameDesktop = `${this.attributeName}--desktop`, this._attributeValue = e, Object.defineProperty(
577
- this.component,
578
- this.toCamelCase(this.attributeName),
579
- {
580
- get: () => this.component.getAttribute(this.attributeName),
581
- set: (a) => {
582
- this.component.setAttribute(this.attributeName, a);
583
- }
584
- }
598
+ const z = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default)}.list-item[inverted]{color:var(--px-color-text-neutral-inverted)}:host([variant="ul"]) .list-item,:host([variant="ol"]) .list-item{display:list-item;margin-left:var(--px-spacing-default-mobile)}:host([variant="ul"]) .list-item{list-style-type:disc}:host([variant="ol"]) .list-item{counter-set:list-item var(--item-index, 0);list-style-type:decimal}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', j = new CSSStyleSheet();
599
+ j.replaceSync(z);
600
+ const C = "px-list-item-connected", A = class A extends d {
601
+ template() {
602
+ return `
603
+ <div class="list-item" role="listitem">
604
+ <slot name="icon"></slot>
605
+ <slot name="label"></slot>
606
+ </div>
607
+ `;
608
+ }
609
+ constructor() {
610
+ super(j), this.shadowRoot.innerHTML = this.template();
611
+ }
612
+ connectedCallback() {
613
+ this.dispatchEvent(
614
+ new CustomEvent(C, {
615
+ bubbles: !0,
616
+ composed: !0
617
+ })
585
618
  );
586
619
  }
587
- toCamelCase(t) {
588
- return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
589
- }
590
- init(t) {
591
- this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
592
- }
593
- attributeChangedCallback(t, s, e) {
594
- if (s !== e)
595
- switch (!0) {
596
- case t === this.attributeName:
597
- case t === `${this.attributeName}--mobile`:
598
- case t === `${this.attributeName}--tablet`:
599
- case t === `${this.attributeName}--laptop`:
600
- case t === `${this.attributeName}--desktop`:
601
- this.setCSSProperty(t, e);
620
+ static get observedAttributes() {
621
+ return ["inverted"];
622
+ }
623
+ // TODO: factorize code
624
+ attributeChangedCallback(t, e, s) {
625
+ if (e !== s)
626
+ switch (t) {
627
+ case "inverted":
628
+ for (let i = 0; i < this.$children.length; i++)
629
+ this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
630
+ this.$el.toggleAttribute("inverted", s !== null);
602
631
  break;
603
- default:
604
- return;
605
632
  }
606
633
  }
607
- setCSSProperty(t, s, e = !0) {
608
- const [, i = ""] = t.split("--");
609
- this.component.style.setProperty(
610
- `${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
611
- `${this._attributeValue(s, i)}`
612
- );
634
+ get $children() {
635
+ return this.querySelectorAll("px-list-item > *");
613
636
  }
614
- setCSSProperties() {
615
- const t = this.component.getAttribute(this.attributeName);
616
- t && (this.setCSSProperty(this.attributeName, t), this.setCSSProperty(this.attributeNameMobile, t), this.setCSSProperty(this.attributeNameTablet, t), this.setCSSProperty(this.attributeNameLaptop, t), this.setCSSProperty(this.attributeNameDesktop, t));
617
- const s = this.component.getAttribute(
618
- this.attributeNameMobile
619
- );
620
- s && this.setCSSProperty(
621
- this.attributeNameMobile,
622
- s,
623
- !1
624
- );
625
- const e = this.component.getAttribute(
626
- this.attributeNameTablet
627
- );
628
- e && this.setCSSProperty(
629
- this.attributeNameTablet,
630
- e,
631
- !1
632
- );
633
- const i = this.component.getAttribute(
634
- this.attributeNameLaptop
635
- );
636
- i && this.setCSSProperty(
637
- this.attributeNameLaptop,
638
- i,
639
- !1
640
- );
641
- const a = this.component.getAttribute(
642
- this.attributeNameDesktop
643
- );
644
- a && this.setCSSProperty(
645
- this.attributeNameDesktop,
646
- a,
647
- !1
648
- );
637
+ get inverted() {
638
+ return this.hasAttribute("inverted");
649
639
  }
650
- set attributeValue(t) {
651
- this._attributeValue = t, this.setCSSProperties();
640
+ set inverted(t) {
641
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
652
642
  }
653
- }
654
- const m = new CSSStyleSheet();
655
- m.replaceSync(k);
656
- const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, D = "px-spacing", d = class d extends g {
643
+ };
644
+ A.nativeName = "div";
645
+ let b = A;
646
+ customElements.get("px-list-item") || customElements.define("px-list-item", b);
647
+ const T = new CSSStyleSheet();
648
+ T.replaceSync(D);
649
+ const J = ["", "ul", "ol"], U = (o, t, e) => `:host([${o}${e ? `--${e}` : ""}='${t}']) .list`, F = "px-spacing", K = W(
650
+ "gap",
651
+ U,
652
+ I,
653
+ F,
654
+ "--list-gap"
655
+ );
656
+ var a, c, g, f;
657
+ const y = class y extends d {
657
658
  constructor() {
658
- super(
659
- m,
660
- M(
661
- "gap",
662
- L,
663
- N,
664
- D,
665
- "--list-gap"
666
- )
667
- ), this.AttributeDelegate = new T(
668
- this,
669
- "gap",
670
- (t) => t,
671
- "--list-gap"
672
- ), this.shadowRoot.innerHTML = this.template();
659
+ super(T, K);
660
+ $(this, a);
661
+ this.shadowRoot.innerHTML = this.template();
673
662
  }
674
663
  template() {
675
664
  return `
@@ -679,18 +668,26 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
679
668
  `;
680
669
  }
681
670
  static get observedAttributes() {
682
- return ["inverted"];
671
+ return ["inverted", "variant"];
683
672
  }
684
673
  connectedCallback() {
685
- super.connectedCallback(), this.gap || (this.gap = "xs");
674
+ this.gap || (this.gap = "xs"), this.addEventListener(C, () => {
675
+ p(this, a, c).call(this);
676
+ }), p(this, a, c).call(this);
686
677
  }
687
- attributeChangedCallback(t, s, e) {
688
- if (s !== e)
689
- switch (t) {
678
+ attributeChangedCallback(e, s, i) {
679
+ if (s !== i)
680
+ switch (e) {
690
681
  case "inverted":
691
- for (let i = 0; i < this.$children.length; i++)
692
- this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
693
- this.$el.toggleAttribute("inverted", e !== null);
682
+ this.isConnected && p(this, a, g).call(this);
683
+ break;
684
+ case "variant":
685
+ this.checkName(J, i) || S(
686
+ `${i} is not an allowed variant value for ${this.tagName.toLowerCase()}`
687
+ ), this.isConnected && p(this, a, f).call(this, i), super.attributeChangedCallback(e, s, i);
688
+ break;
689
+ default:
690
+ super.attributeChangedCallback(e, s, i);
694
691
  break;
695
692
  }
696
693
  }
@@ -700,85 +697,65 @@ const E = ["", "mobile", "tablet", "laptop"], L = (r, t, s) => `:host([${r}${s ?
700
697
  get inverted() {
701
698
  return this.hasAttribute("inverted");
702
699
  }
703
- set inverted(t) {
704
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
700
+ set inverted(e) {
701
+ e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
705
702
  }
706
703
  get gap() {
707
704
  return this.getAttribute("gap");
708
705
  }
709
- set gap(t) {
710
- t ? this.setAttribute("gap", t) : this.removeAttribute("gap");
706
+ set gap(e) {
707
+ e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
711
708
  }
712
709
  get gapMobile() {
713
710
  return this.getAttribute("gap--mobile");
714
711
  }
715
- set gapMobile(t) {
716
- t ? this.setAttribute("gap--mobile", t) : this.removeAttribute("gap--mobile");
712
+ set gapMobile(e) {
713
+ e ? this.setAttribute("gap--mobile", e) : this.removeAttribute("gap--mobile");
717
714
  }
718
715
  get gapTablet() {
719
716
  return this.getAttribute("gap--tablet");
720
717
  }
721
- set gapTablet(t) {
722
- t ? this.setAttribute("gap--tablet", t) : this.removeAttribute("gap--tablet");
718
+ set gapTablet(e) {
719
+ e ? this.setAttribute("gap--tablet", e) : this.removeAttribute("gap--tablet");
723
720
  }
724
721
  get gapLaptop() {
725
722
  return this.getAttribute("gap--laptop");
726
723
  }
727
- set gapLaptop(t) {
728
- t ? this.setAttribute("gap--laptop", t) : this.removeAttribute("gap--laptop");
724
+ set gapLaptop(e) {
725
+ e ? this.setAttribute("gap--laptop", e) : this.removeAttribute("gap--laptop");
729
726
  }
730
727
  get gapDesktop() {
731
728
  return this.getAttribute("gap--desktop");
732
729
  }
733
- set gapDesktop(t) {
734
- t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
735
- }
736
- };
737
- d.nativeName = "div";
738
- let p = d;
739
- customElements.get("px-list") || customElements.define("px-list", p);
740
- const O = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);align-items:flex-start;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l)}::slotted([slot="label"][inverted]){color:var(--px-color-text-neutral-inverted)}@media only screen and (min-width: 48em){.list-item{gap:var(--px-spacing-xs-tablet)}}@media only screen and (min-width: 64.0625em){.list-item{gap:var(--px-spacing-xs-laptop)}}@media only screen and (min-width: 90.0625em){.list-item{gap:var(--px-spacing-xs-desktop)}}', f = new CSSStyleSheet();
741
- f.replaceSync(O);
742
- const u = class u extends g {
743
- template() {
744
- return `
745
- <div class="list-item" role="listitem">
746
- <slot name="icon"></slot>
747
- <slot name="label"></slot>
748
- </div>
749
- `;
750
- }
751
- constructor() {
752
- super(f), this.shadowRoot.innerHTML = this.template();
730
+ set gapDesktop(e) {
731
+ e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
753
732
  }
754
- static get observedAttributes() {
755
- return ["inverted"];
733
+ get variant() {
734
+ return this.getAttribute("variant");
756
735
  }
757
- attributeChangedCallback(t, s, e) {
758
- if (s !== e)
759
- switch (t) {
760
- case "inverted":
761
- for (let i = 0; i < this.$children.length; i++)
762
- this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
763
- this.$el.toggleAttribute("inverted", e !== null);
764
- break;
765
- }
766
- }
767
- get $children() {
768
- return this.querySelectorAll("px-list-item > *");
769
- }
770
- get inverted() {
771
- return this.hasAttribute("inverted");
772
- }
773
- set inverted(t) {
774
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
736
+ set variant(e) {
737
+ e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
775
738
  }
776
739
  };
777
- u.nativeName = "div";
778
- let h = u;
779
- customElements.get("px-list-item") || customElements.define("px-list-item", h);
740
+ a = new WeakSet(), c = function() {
741
+ p(this, a, g).call(this), p(this, a, f).call(this, this.getAttribute("variant"));
742
+ }, g = function() {
743
+ var s;
744
+ const e = this.hasAttribute("inverted");
745
+ for (let i = 0; i < this.$children.length; i++)
746
+ this.$children[i].toggleAttribute("inverted", e);
747
+ (s = this.$el) == null || s.toggleAttribute("inverted", e);
748
+ }, f = function(e) {
749
+ for (let s = 0; s < this.$children.length; s++) {
750
+ const i = this.$children[s];
751
+ 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"));
752
+ }
753
+ }, y.nativeName = "div";
754
+ let u = y;
755
+ customElements.get("px-list") || customElements.define("px-list", u);
780
756
  export {
781
- p as List,
782
- h as ListItem,
783
- E as breakpointsValues
757
+ C as LIST_ITEM_CONNECTED_EVENT,
758
+ u as List,
759
+ b as ListItem,
760
+ J as listVariantValues
784
761
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
3
- "version": "2.0.0-alpha.8",
3
+ "version": "2.0.0-alpha.80",
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"