@proximus/lavender-list 2.0.0-alpha.1 → 2.0.0-alpha.100

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 +245 -258
  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) and (max-width: 1440px){: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: 47.938rem){:host([hidden--mobile]),::slotted([hidden--mobile]){display:none}:host([grow--mobile]){flex-grow:var(--grow--mobile-value)!important}:host([shrink--mobile]){flex-shrink:var(--shrink--mobile-value)!important}:host([basis--mobile]){flex-basis:var(--basis--mobile-value)!important}:host([align-self--mobile]){align-self:var(--align-self--mobile-value)!important}:host([col-span--mobile]){grid-column:span var(--col-span--mobile-value) / span var(--col-span--mobile-value)!important}:host([justify-self--mobile]){justify-self:var(--justify-self--mobile-value)!important}:host([order--mobile]),::slotted([order--mobile]){order:var(--order--mobile-value)!important}:host([shown--sr--mobile]),::slotted(*[shown--sr--mobile]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 48rem) and (max-width: 64rem){:host([hidden--tablet]),::slotted([hidden--tablet]){display:none}:host([grow--tablet]){flex-grow:var(--grow--tablet-value)!important}:host([shrink--tablet]){flex-shrink:var(--shrink--tablet-value)!important}:host([basis--tablet]){flex-basis:var(--basis--tablet-value)!important}:host([align-self--tablet]){align-self:var(--align-self--tablet-value)!important}:host([col-span--tablet]){grid-column:span var(--col-span--tablet-value) / span var(--col-span--tablet-value)!important}:host([justify-self--tablet]){justify-self:var(--justify-self--tablet-value)!important}:host([order--tablet]),::slotted([order--tablet]){order:var(--order--tablet-value)!important}:host([shown--sr--tablet]),::slotted(*[shown--sr--tablet]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([shown--sr--laptop]),::slotted(*[shown--sr--laptop]){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}}@media screen and (min-width: 64.0625rem){:host([hidden--laptop]),::slotted([hidden--laptop]){display:none!important}:host([grow--laptop]){flex-grow:var(--grow--laptop-value)!important}:host([shrink--laptop]){flex-shrink:var(--shrink--laptop-value)!important}:host([basis--laptop]){flex-basis:var(--basis--laptop-value)!important}:host([align-self--laptop]){align-self:var(--align-self--laptop-value)!important}:host([col-span--laptop]){grid-column:span var(--col-span--laptop-value) / span var(--col-span--laptop-value)!important}:host([justify-self--laptop]){justify-self:var(--justify-self--laptop-value)!important}:host([order--laptop]),::slotted([order--laptop]){order:var(--order--laptop-value)!important}}@media screen and (min-width: 90.0625rem){:host([col-span--desktop]){grid-column:span var(--col-span--desktop-value) / span var(--col-span--desktop-value)!important}:host([justify-self--desktop]){justify-self:var(--justify-self--desktop-value)!important}:host([order--desktop]),::slotted([order--desktop]){order:var(--order--desktop-value)!important}:host([hidden--desktop]),::slotted([hidden--desktop]){display:none!important}:host([grow--desktop]){flex-grow:var(--grow--desktop-value)!important}:host([shrink--desktop]){flex-shrink:var(--shrink--desktop-value)!important}:host([basis--desktop]){flex-basis:var(--basis--desktop-value)!important}:host([align-self--desktop]){align-self:var(--align-self--desktop-value)!important}}", 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 g = new CSSStyleSheet();
13
- g.replaceSync(v);
14
- class b extends HTMLElement {
18
+ const S = new CSSStyleSheet();
19
+ S.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 x(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,17 +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
- g,
83
+ S,
67
84
  ...t
68
85
  ];
69
86
  }
70
- attributeChangedCallback(t, s, e) {
71
- if (b.observedAttributes.indexOf(t) !== -1)
87
+ attributeChangedCallback(t, e, s) {
88
+ var i;
89
+ if (v.observedAttributes.indexOf(t) !== -1)
72
90
  switch (t) {
73
91
  case "grow":
74
92
  case "grow--mobile":
@@ -85,7 +103,7 @@ class b extends HTMLElement {
85
103
  case "basis--tablet":
86
104
  case "basis--laptop":
87
105
  case "basis--desktop":
88
- this.style.setProperty(`--${t}-value`, e);
106
+ this.style.setProperty(`--${t}-value`, s);
89
107
  break;
90
108
  case "align-self":
91
109
  case "align-self--mobile":
@@ -94,9 +112,9 @@ class b extends HTMLElement {
94
112
  case "align-self--desktop":
95
113
  this.updateProperties(
96
114
  t,
97
- s,
98
115
  e,
99
- this.isGrid ? $ : S
116
+ s,
117
+ ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? R : G
100
118
  );
101
119
  break;
102
120
  case "justify-self":
@@ -106,9 +124,9 @@ class b extends HTMLElement {
106
124
  case "justify-self--desktop":
107
125
  this.updateProperties(
108
126
  t,
109
- s,
110
127
  e,
111
- w
128
+ s,
129
+ q
112
130
  );
113
131
  break;
114
132
  case "col-span":
@@ -116,50 +134,49 @@ class b extends HTMLElement {
116
134
  case "col-span--tablet":
117
135
  case "col-span--laptop":
118
136
  case "col-span--desktop":
119
- this.updateProperties(t, s, e, x);
137
+ this.updateProperties(t, e, s, H);
120
138
  break;
121
139
  case "order":
122
140
  case "order--mobile":
123
141
  case "order--tablet":
124
142
  case "order--laptop":
125
143
  case "order--desktop":
126
- this.updateProperties(t, s, e, j);
144
+ this.updateProperties(t, e, s, P);
127
145
  break;
128
146
  }
129
147
  }
130
- updateProperties(t, s, e, i) {
131
- if (i && !this.checkName(i, e)) {
132
- console.error(`${e} is not a valid value for ${i}`);
133
- return;
134
- }
135
- const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
136
- if (!a)
148
+ updateProperties(t, e, s, i) {
149
+ i && (this.checkName(i, s) || x(
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)
137
154
  this.style.setProperty(
138
- `--${l}-value`,
139
- s
140
- ), this.style.setProperty(
141
- `--${l}-value`,
155
+ `--${n}-value`,
142
156
  e
157
+ ), this.style.setProperty(
158
+ `--${n}-value`,
159
+ s
143
160
  );
144
161
  else {
145
- const n = t.split("--")[1];
162
+ const h = t.split("--")[1];
146
163
  this.style.setProperty(
147
- `--${l}--${n}-value`,
148
- s
149
- ), this.style.setProperty(
150
- `--${l}--${n}-value`,
164
+ `--${n}--${h}-value`,
151
165
  e
166
+ ), this.style.setProperty(
167
+ `--${n}--${h}-value`,
168
+ s
152
169
  );
153
170
  }
154
171
  }
155
- updateStyle(t, s, e) {
156
- e !== null && e !== "" && e !== "default" && this.style.setProperty(
157
- `--${t}--${s}-value`,
158
- e
172
+ updateStyle(t, e, s) {
173
+ s !== null && s !== "" && s !== "default" && this.style.setProperty(
174
+ `--${t}--${e}-value`,
175
+ s
159
176
  );
160
177
  }
161
- checkName(t, s) {
162
- return t.includes(s);
178
+ checkName(t, e) {
179
+ return t.includes(e);
163
180
  }
164
181
  get $el() {
165
182
  return this;
@@ -168,11 +185,18 @@ class b extends HTMLElement {
168
185
  var t;
169
186
  return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
170
187
  }
171
- get isGrid() {
172
- return this.$parentElementName === "px-grid";
173
- }
174
- get isStack() {
175
- return this.$parentElementName === "px-stack";
188
+ get isInsideGridOrStack() {
189
+ let t = this.parentElement;
190
+ for (; t; ) {
191
+ if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
192
+ return !0;
193
+ if (window.getComputedStyle(t).display === "contents") {
194
+ t = t.parentElement;
195
+ continue;
196
+ }
197
+ break;
198
+ }
199
+ return !1;
176
200
  }
177
201
  get grow() {
178
202
  return this.getAttribute("grow");
@@ -409,45 +433,55 @@ class b extends HTMLElement {
409
433
  this.setAttribute("order--desktop", t);
410
434
  }
411
435
  }
412
- class c extends b {
436
+ const k = class k extends v {
437
+ // nativeName: string;
413
438
  static get observedAttributes() {
414
439
  return [
415
440
  ...super.observedAttributes,
416
- ...y(this.nativeName)
441
+ ..._(this.nativeName)
417
442
  ];
418
443
  }
419
- attributeChangedCallback(t, s, e) {
420
- 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);
446
+ }
447
+ get ctor() {
448
+ return Object.getPrototypeOf(this).constructor;
421
449
  }
422
450
  constructor(...t) {
423
- super(...t), this.nativeName = Object.getPrototypeOf(this).constructor.nativeName;
451
+ super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = N(
452
+ this.ctor.nativeName
453
+ )), this.enhanceWithNativeProperties();
424
454
  }
425
- connectedCallback() {
455
+ enhanceWithNativeProperties() {
426
456
  var t;
427
- for (const s of A(this.nativeName))
428
- if (s !== "constructor")
457
+ for (const e of this.ctor.supportedPropertyNames)
458
+ if (!(e === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(e)))
429
459
  try {
430
- Object.defineProperty(this, s, {
460
+ Object.defineProperty(this, e, {
431
461
  get() {
432
- return this.$el[s];
462
+ return this.$el[e];
433
463
  },
434
- set(e) {
435
- this.$el[s] !== e && (this.$el[s] = e);
464
+ set(s) {
465
+ this.$el[e] !== s && (this.$el[e] = s);
436
466
  }
437
467
  });
438
- } catch (e) {
439
- console.warn(`Could not create property ${s} for`, this.$el, e);
468
+ } catch (s) {
469
+ console.warn(`Could not create property ${e} for`, this.$el, s);
440
470
  }
441
- if (this.isGrid || this.isStack) {
442
- const s = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
443
- this.$el.style.display = "block", (this.isGrid || this.isStack && s === "row") && (this.$el.style.height = "100%");
444
- }
445
471
  }
446
472
  get $el() {
447
- return this.shadowRoot.querySelector(this.nativeName);
473
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
448
474
  }
449
- }
450
- const S = [
475
+ _updateAttribute(t, e) {
476
+ e ? this.setAttribute(t, e) : this.removeAttribute(t);
477
+ }
478
+ _updateBooleanAttribute(t, e) {
479
+ e ? this.setAttribute(t, "") : this.removeAttribute(t);
480
+ }
481
+ };
482
+ k.accessorExclusions = [];
483
+ let d = k;
484
+ const G = [
451
485
  "",
452
486
  "default",
453
487
  "auto",
@@ -456,21 +490,21 @@ const S = [
456
490
  "center",
457
491
  "baseline",
458
492
  "stretch"
459
- ], $ = [
493
+ ], R = [
460
494
  "",
461
495
  "default",
462
496
  "start",
463
497
  "end",
464
498
  "center",
465
499
  "stretch"
466
- ], w = [
500
+ ], q = [
467
501
  "",
468
502
  "default",
469
503
  "start",
470
504
  "end",
471
505
  "center",
472
506
  "stretch"
473
- ], x = [
507
+ ], H = [
474
508
  "",
475
509
  "1",
476
510
  "2",
@@ -484,7 +518,7 @@ const S = [
484
518
  "10",
485
519
  "11",
486
520
  "12"
487
- ], j = [
521
+ ], P = [
488
522
  "",
489
523
  "-1",
490
524
  "0",
@@ -500,11 +534,11 @@ const S = [
500
534
  "10",
501
535
  "11",
502
536
  "12"
503
- ], C = ["Xs", "S", "M", "L", "Xl"];
537
+ ], X = ["Xs", "S", "M", "L", "Xl"];
504
538
  [
505
- ...C.map((r) => r.toLowerCase())
539
+ ...X.map((o) => o.toLowerCase())
506
540
  ];
507
- const M = [
541
+ const I = [
508
542
  "none",
509
543
  "2xs",
510
544
  "xs",
@@ -515,151 +549,116 @@ const M = [
515
549
  "heading-to-content",
516
550
  "page-layout-between-sections"
517
551
  ];
518
- function N(r, t, s, e = "", i) {
519
- const a = new CSSStyleSheet(), l = s.reduce(
520
- (n, o) => n + `
521
- ${t(r, o)} {
522
- ${r}: var(--${e}-${o}-desktop);
523
- ${`${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)`}
524
558
  }
525
559
  /* Mobile only - max 767px */
526
- @media only screen and (max-width: 47.938em) {
527
- ${t(r, o)} {
528
- ${r}: var(--${e}-${o}-mobile);
529
- ${`${i}: var(--${e}-${o}-mobile)`}
560
+ @media only screen and (max-width: 47.938rem) {
561
+ ${t(l, r)} {
562
+ ${o}: var(--${s}-${r}-mobile);
563
+ ${`${i}: var(--${s}-${r}-mobile)`}
530
564
  }
531
565
  }
532
- ${t(r, o, "mobile")} {
566
+ ${t(l, r, "mobile")} {
533
567
  /* Mobile only - max 767px */
534
- @media only screen and (max-width: 47.938em) {
535
- ${r}: var(--${e}-${o}-mobile) !important;
536
- ${`${i}: var(--${e}-${o}-mobile)`}
568
+ @media only screen and (max-width: 47.938rem) {
569
+ ${o}: var(--${s}-${r}-mobile) !important;
570
+ ${`${i}: var(--${s}-${r}-mobile)`}
537
571
  }
538
572
  }
539
- ${t(r, o, "tablet")} {
573
+ ${t(l, r, "tablet")} {
540
574
  /* Tablet - min 768px max 1024px */
541
- @media only screen and (min-width: 48em) and (max-width: 64em) {
542
- ${r}: var(--${e}-${o}-desktop) !important;
543
- ${`${i}: var(--${e}-${o}-desktop)`}
575
+ @media only screen and (min-width: 48rem) and (max-width: 64rem) {
576
+ ${o}: var(--${s}-${r}-desktop) !important;
577
+ ${`${i}: var(--${s}-${r}-desktop)`}
544
578
  }
545
579
  }
546
- ${t(r, o, "laptop")} {
580
+ ${t(l, r, "laptop")} {
547
581
  /* Laptop - 1025px*/
548
- @media only screen and (min-width: 64.0625em) {
549
- ${r}: var(--${e}-${o}-desktop) !important;
550
- ${`${i}: var(--${e}-${o}-desktop)`}
582
+ @media only screen and (min-width: 64.0625rem) {
583
+ ${o}: var(--${s}-${r}-desktop) !important;
584
+ ${`${i}: var(--${s}-${r}-desktop)`}
551
585
  }
552
586
  }
553
- ${t(r, o, "desktop")} {
587
+ ${t(l, r, "desktop")} {
554
588
  /* Desktop - 1025px*/
555
- @media only screen and (min-width: 64.0625em) {
556
- ${r}: var(--${e}-${o}-desktop) !important;
557
- ${`${i}: var(--${e}-${o}-desktop)`}
589
+ @media only screen and (min-width: 64.0625rem) {
590
+ ${o}: var(--${s}-${r}-desktop) !important;
591
+ ${`${i}: var(--${s}-${r}-desktop)`}
558
592
  }
559
593
  }`,
560
594
  ""
561
595
  );
562
- return a.replaceSync(l), a;
596
+ return n.replaceSync(h), n;
563
597
  }
564
- class T {
565
- constructor(t, s, e, i) {
566
- 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(
567
- this.component,
568
- this.toCamelCase(this.attributeName),
569
- {
570
- get: () => this.component.getAttribute(this.attributeName),
571
- set: (a) => {
572
- this.component.setAttribute(this.attributeName, a);
573
- }
574
- }
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 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)}}', 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
+ })
575
618
  );
576
619
  }
577
- toCamelCase(t) {
578
- return t.replace(/[-_]+(.)?/g, (s, e) => e ? e.toUpperCase() : "");
579
- }
580
- init(t) {
581
- this.setCSSProperty(this.attributeName, t), this.setCSSProperties();
582
- }
583
- attributeChangedCallback(t, s, e) {
584
- if (s !== e)
585
- switch (!0) {
586
- case t === this.attributeName:
587
- case t === `${this.attributeName}--mobile`:
588
- case t === `${this.attributeName}--tablet`:
589
- case t === `${this.attributeName}--laptop`:
590
- case t === `${this.attributeName}--desktop`:
591
- 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);
592
631
  break;
593
- default:
594
- return;
595
632
  }
596
633
  }
597
- setCSSProperty(t, s, e = !0) {
598
- const [, i = ""] = t.split("--");
599
- this.component.style.setProperty(
600
- `${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
601
- `${this._attributeValue(s, i)}`
602
- );
634
+ get $children() {
635
+ return this.querySelectorAll("px-list-item > *");
603
636
  }
604
- setCSSProperties() {
605
- const t = this.component.getAttribute(this.attributeName);
606
- 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));
607
- const s = this.component.getAttribute(
608
- this.attributeNameMobile
609
- );
610
- s && this.setCSSProperty(
611
- this.attributeNameMobile,
612
- s,
613
- !1
614
- );
615
- const e = this.component.getAttribute(
616
- this.attributeNameTablet
617
- );
618
- e && this.setCSSProperty(
619
- this.attributeNameTablet,
620
- e,
621
- !1
622
- );
623
- const i = this.component.getAttribute(
624
- this.attributeNameLaptop
625
- );
626
- i && this.setCSSProperty(
627
- this.attributeNameLaptop,
628
- i,
629
- !1
630
- );
631
- const a = this.component.getAttribute(
632
- this.attributeNameDesktop
633
- );
634
- a && this.setCSSProperty(
635
- this.attributeNameDesktop,
636
- a,
637
- !1
638
- );
637
+ get inverted() {
638
+ return this.hasAttribute("inverted");
639
639
  }
640
- set attributeValue(t) {
641
- this._attributeValue = t, this.setCSSProperties();
640
+ set inverted(t) {
641
+ t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
642
642
  }
643
- }
644
- const m = new CSSStyleSheet();
645
- m.replaceSync(k);
646
- const E = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ? `--${s}` : ""}='${t}']) .list`, L = "px-spacing", d = class d extends c {
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 {
647
658
  constructor() {
648
- super(
649
- m,
650
- N(
651
- "gap",
652
- D,
653
- M,
654
- L,
655
- "--list-gap"
656
- )
657
- ), this.AttributeDelegate = new T(
658
- this,
659
- "gap",
660
- (t) => t,
661
- "--list-gap"
662
- ), this.shadowRoot.innerHTML = this.template();
659
+ super(T, K);
660
+ $(this, a);
661
+ this.shadowRoot.innerHTML = this.template();
663
662
  }
664
663
  template() {
665
664
  return `
@@ -669,18 +668,26 @@ const E = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ?
669
668
  `;
670
669
  }
671
670
  static get observedAttributes() {
672
- return ["inverted"];
671
+ return ["inverted", "variant"];
673
672
  }
674
673
  connectedCallback() {
675
- 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);
676
677
  }
677
- attributeChangedCallback(t, s, e) {
678
- if (s !== e)
679
- switch (t) {
678
+ attributeChangedCallback(e, s, i) {
679
+ if (s !== i)
680
+ switch (e) {
680
681
  case "inverted":
681
- for (let i = 0; i < this.$children.length; i++)
682
- this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
683
- 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) || x(
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);
684
691
  break;
685
692
  }
686
693
  }
@@ -690,85 +697,65 @@ const E = ["", "mobile", "tablet", "laptop"], D = (r, t, s) => `:host([${r}${s ?
690
697
  get inverted() {
691
698
  return this.hasAttribute("inverted");
692
699
  }
693
- set inverted(t) {
694
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
700
+ set inverted(e) {
701
+ e ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
695
702
  }
696
703
  get gap() {
697
704
  return this.getAttribute("gap");
698
705
  }
699
- set gap(t) {
700
- t ? this.setAttribute("gap", t) : this.removeAttribute("gap");
706
+ set gap(e) {
707
+ e ? this.setAttribute("gap", e) : this.removeAttribute("gap");
701
708
  }
702
709
  get gapMobile() {
703
710
  return this.getAttribute("gap--mobile");
704
711
  }
705
- set gapMobile(t) {
706
- 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");
707
714
  }
708
715
  get gapTablet() {
709
716
  return this.getAttribute("gap--tablet");
710
717
  }
711
- set gapTablet(t) {
712
- 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");
713
720
  }
714
721
  get gapLaptop() {
715
722
  return this.getAttribute("gap--laptop");
716
723
  }
717
- set gapLaptop(t) {
718
- 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");
719
726
  }
720
727
  get gapDesktop() {
721
728
  return this.getAttribute("gap--desktop");
722
729
  }
723
- set gapDesktop(t) {
724
- t ? this.setAttribute("gap--desktop", t) : this.removeAttribute("gap--desktop");
725
- }
726
- };
727
- d.nativeName = "div";
728
- let p = d;
729
- customElements.get("px-list") || customElements.define("px-list", p);
730
- const O = '.list-item{display:flex;gap:var(--px-spacing-xs-mobile);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();
731
- f.replaceSync(O);
732
- const u = class u extends c {
733
- template() {
734
- return `
735
- <div class="list-item" role="listitem">
736
- <slot name="icon"></slot>
737
- <slot name="label"></slot>
738
- </div>
739
- `;
740
- }
741
- constructor() {
742
- super(f), this.shadowRoot.innerHTML = this.template();
730
+ set gapDesktop(e) {
731
+ e ? this.setAttribute("gap--desktop", e) : this.removeAttribute("gap--desktop");
743
732
  }
744
- static get observedAttributes() {
745
- return ["inverted"];
733
+ get variant() {
734
+ return this.getAttribute("variant");
746
735
  }
747
- attributeChangedCallback(t, s, e) {
748
- if (s !== e)
749
- switch (t) {
750
- case "inverted":
751
- for (let i = 0; i < this.$children.length; i++)
752
- this.$children[i].hasAttribute("inverted") || this.$children[i].toggleAttribute("inverted");
753
- this.$el.toggleAttribute("inverted", e !== null);
754
- break;
755
- }
756
- }
757
- get $children() {
758
- return this.querySelectorAll("px-list-item > *");
759
- }
760
- get inverted() {
761
- return this.hasAttribute("inverted");
762
- }
763
- set inverted(t) {
764
- t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
736
+ set variant(e) {
737
+ e ? this.setAttribute("variant", e) : this.removeAttribute("variant");
765
738
  }
766
739
  };
767
- u.nativeName = "div";
768
- let h = u;
769
- 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);
770
756
  export {
771
- p as List,
772
- h as ListItem,
773
- E as breakpointsValues
757
+ C as LIST_ITEM_CONNECTED_EVENT,
758
+ u as List,
759
+ b as ListItem,
760
+ J as listVariantValues
774
761
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-list",
3
- "version": "2.0.0-alpha.1",
3
+ "version": "2.0.0-alpha.100",
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"