@proximus/lavender-common 2.0.0-alpha.2 → 2.0.0-alpha.20

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.
package/dist/common.d.ts CHANGED
@@ -1,5 +1,16 @@
1
1
  export declare function getSupportedPropertyNames(htmlElementName: string): string[];
2
2
  export declare function getSupportedAttributeNames(htmlElementName: string): string[];
3
+ declare global {
4
+ interface Window {
5
+ isComponentDebug?: () => boolean;
6
+ }
7
+ }
8
+ export declare function isComponentDebug(): boolean;
9
+ /**
10
+ * Logs an error message to the console if the global debug flag is set.
11
+ * Usage: log('message')
12
+ */
13
+ export declare function log(message: string): void;
3
14
  export declare class WithExtraAttributes extends HTMLElement {
4
15
  static get observedAttributes(): string[];
5
16
  constructor(...adoptedStylesheets: CSSStyleSheet[]);
@@ -9,8 +20,7 @@ export declare class WithExtraAttributes extends HTMLElement {
9
20
  checkName<T extends readonly string[]>(values: T, value: string): boolean;
10
21
  get $el(): Element;
11
22
  get $parentElementName(): string;
12
- get isGrid(): boolean;
13
- get isStack(): boolean;
23
+ get isInsideGridOrStack(): boolean;
14
24
  get grow(): string;
15
25
  set grow(value: string);
16
26
  get growMobile(): string;
@@ -92,13 +102,19 @@ export declare class WithExtraAttributes extends HTMLElement {
92
102
  }
93
103
  export declare abstract class PxElement<HTML_TYPE extends Element> extends WithExtraAttributes {
94
104
  static nativeName: string;
95
- nativeName: string;
96
- accessorExclusions: string[];
105
+ static supportedPropertyNames: string[];
106
+ static accessorExclusions: string[];
97
107
  static get observedAttributes(): string[];
98
108
  attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
109
+ protected get ctor(): any;
99
110
  protected constructor(...adoptedStylesheets: CSSStyleSheet[]);
100
- connectedCallback(): void;
111
+ enhanceWithNativeProperties(): void;
101
112
  get $el(): HTML_TYPE;
113
+ protected _updateAttribute(name: string, value: string): void;
114
+ protected _updateBooleanAttribute(name: string, value: boolean): void;
115
+ }
116
+ export declare class VerticallyExtendedElement<HTML_TYPE extends Element> extends PxElement<HTML_TYPE> {
117
+ connectedCallback(): void;
102
118
  }
103
119
  export declare const gridGapValues: string[];
104
120
  export declare const flexboxAlignSelfValues: readonly ["", "default", "auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
package/dist/index.es.js CHANGED
@@ -1,17 +1,26 @@
1
- const u = ":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 b(i) {
1
+ const c = ":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}}", g = {};
2
+ function f(i) {
3
3
  const t = document.createElement(i), s = Object.getPrototypeOf(t);
4
4
  return Object.getOwnPropertyNames(s);
5
5
  }
6
- function d(i) {
6
+ function m(i) {
7
7
  const t = document.createElement(i), s = Object.getPrototypeOf(t);
8
8
  return Object.getOwnPropertyNames(s).map(
9
9
  (e) => e.toLowerCase()
10
10
  );
11
11
  }
12
- const h = new CSSStyleSheet();
13
- h.replaceSync(u);
14
- class p extends HTMLElement {
12
+ const d = new CSSStyleSheet();
13
+ d.replaceSync(c);
14
+ const k = typeof import.meta < "u" && typeof g < "u" && !0;
15
+ typeof window < "u" && (window.isComponentDebug = h);
16
+ function h() {
17
+ return k;
18
+ }
19
+ function v(i) {
20
+ h() && console.error(i);
21
+ }
22
+ typeof window < "u" && (window.isComponentDebug = h);
23
+ class u extends HTMLElement {
15
24
  static get observedAttributes() {
16
25
  return [
17
26
  "grow",
@@ -63,12 +72,13 @@ class p extends HTMLElement {
63
72
  }
64
73
  constructor(...t) {
65
74
  super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
66
- h,
75
+ d,
67
76
  ...t
68
77
  ];
69
78
  }
70
79
  attributeChangedCallback(t, s, e) {
71
- if (p.observedAttributes.indexOf(t) !== -1)
80
+ var o;
81
+ if (u.observedAttributes.indexOf(t) !== -1)
72
82
  switch (t) {
73
83
  case "grow":
74
84
  case "grow--mobile":
@@ -96,7 +106,7 @@ class p extends HTMLElement {
96
106
  t,
97
107
  s,
98
108
  e,
99
- this.isGrid ? g : c
109
+ ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? y : w
100
110
  );
101
111
  break;
102
112
  case "justify-self":
@@ -108,7 +118,7 @@ class p extends HTMLElement {
108
118
  t,
109
119
  s,
110
120
  e,
111
- f
121
+ A
112
122
  );
113
123
  break;
114
124
  case "col-span":
@@ -116,20 +126,22 @@ class p extends HTMLElement {
116
126
  case "col-span--tablet":
117
127
  case "col-span--laptop":
118
128
  case "col-span--desktop":
119
- this.updateProperties(t, s, e, m);
129
+ this.updateProperties(t, s, e, S);
120
130
  break;
121
131
  case "order":
122
132
  case "order--mobile":
123
133
  case "order--tablet":
124
134
  case "order--laptop":
125
135
  case "order--desktop":
126
- this.updateProperties(t, s, e, k);
136
+ this.updateProperties(t, s, e, $);
127
137
  break;
128
138
  }
129
139
  }
130
140
  updateProperties(t, s, e, o) {
131
141
  if (o && !this.checkName(o, e)) {
132
- console.error(`${e} is not a valid value for ${o}`);
142
+ v(
143
+ `${e} is not an allowed ${o} value for ${this.tagName.toLowerCase()}`
144
+ );
133
145
  return;
134
146
  }
135
147
  const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
@@ -168,11 +180,18 @@ class p extends HTMLElement {
168
180
  var t;
169
181
  return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
170
182
  }
171
- get isGrid() {
172
- return this.$parentElementName === "px-grid";
173
- }
174
- get isStack() {
175
- return this.$parentElementName === "px-stack";
183
+ get isInsideGridOrStack() {
184
+ let t = this.parentElement;
185
+ for (; t; ) {
186
+ if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
187
+ return !0;
188
+ if (window.getComputedStyle(t).display === "contents") {
189
+ t = t.parentElement;
190
+ continue;
191
+ }
192
+ break;
193
+ }
194
+ return !1;
176
195
  }
177
196
  get grow() {
178
197
  return this.getAttribute("grow");
@@ -409,23 +428,29 @@ class p extends HTMLElement {
409
428
  this.setAttribute("order--desktop", t);
410
429
  }
411
430
  }
412
- class y extends p {
413
- constructor(...t) {
414
- super(...t), this.accessorExclusions = [], this.nativeName = Object.getPrototypeOf(this).constructor.nativeName, this.accessorExclusions = Object.getPrototypeOf(this).constructor.accessorExclusions || [];
415
- }
431
+ const b = class b extends u {
432
+ // nativeName: string;
416
433
  static get observedAttributes() {
417
434
  return [
418
435
  ...super.observedAttributes,
419
- ...d(this.nativeName)
436
+ ...m(this.nativeName)
420
437
  ];
421
438
  }
422
439
  attributeChangedCallback(t, s, e) {
423
440
  super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
424
441
  }
425
- connectedCallback() {
442
+ get ctor() {
443
+ return Object.getPrototypeOf(this).constructor;
444
+ }
445
+ constructor(...t) {
446
+ super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = f(
447
+ this.ctor.nativeName
448
+ )), this.enhanceWithNativeProperties();
449
+ }
450
+ enhanceWithNativeProperties() {
426
451
  var t;
427
- for (const s of b(this.nativeName))
428
- if (!(s === "constructor" || this.accessorExclusions.includes(s)))
452
+ for (const s of this.ctor.supportedPropertyNames)
453
+ if (!(s === "constructor" || (((t = this.ctor) == null ? void 0 : t.accessorExclusions) ?? []).includes(s)))
429
454
  try {
430
455
  Object.defineProperty(this, s, {
431
456
  get() {
@@ -438,16 +463,25 @@ class y extends p {
438
463
  } catch (e) {
439
464
  console.warn(`Could not create property ${s} for`, this.$el, e);
440
465
  }
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
466
  }
446
467
  get $el() {
447
- return this.shadowRoot.querySelector(this.nativeName);
468
+ return this.shadowRoot.querySelector(this.ctor.nativeName);
469
+ }
470
+ _updateAttribute(t, s) {
471
+ s ? this.setAttribute(t, s) : this.removeAttribute(t);
472
+ }
473
+ _updateBooleanAttribute(t, s) {
474
+ s ? this.setAttribute(t, "") : this.removeAttribute(t);
475
+ }
476
+ };
477
+ b.accessorExclusions = [];
478
+ let p = b;
479
+ class j extends p {
480
+ connectedCallback() {
481
+ this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
448
482
  }
449
483
  }
450
- const w = ["", "default", "none", "l"], c = [
484
+ const C = ["", "default", "none", "l"], w = [
451
485
  "",
452
486
  "default",
453
487
  "auto",
@@ -456,21 +490,21 @@ const w = ["", "default", "none", "l"], c = [
456
490
  "center",
457
491
  "baseline",
458
492
  "stretch"
459
- ], g = [
493
+ ], y = [
460
494
  "",
461
495
  "default",
462
496
  "start",
463
497
  "end",
464
498
  "center",
465
499
  "stretch"
466
- ], f = [
500
+ ], A = [
467
501
  "",
468
502
  "default",
469
503
  "start",
470
504
  "end",
471
505
  "center",
472
506
  "stretch"
473
- ], m = [
507
+ ], S = [
474
508
  "",
475
509
  "1",
476
510
  "2",
@@ -484,7 +518,7 @@ const w = ["", "default", "none", "l"], c = [
484
518
  "10",
485
519
  "11",
486
520
  "12"
487
- ], k = [
521
+ ], $ = [
488
522
  "",
489
523
  "-1",
490
524
  "0",
@@ -500,7 +534,7 @@ const w = ["", "default", "none", "l"], c = [
500
534
  "10",
501
535
  "11",
502
536
  "12"
503
- ], A = [
537
+ ], L = [
504
538
  "",
505
539
  "default",
506
540
  "auto",
@@ -508,7 +542,7 @@ const w = ["", "default", "none", "l"], c = [
508
542
  "end",
509
543
  "center",
510
544
  "stretch"
511
- ], S = [
545
+ ], M = [
512
546
  "",
513
547
  "default",
514
548
  "inherit",
@@ -524,7 +558,7 @@ const w = ["", "default", "none", "l"], c = [
524
558
  "heading-l",
525
559
  "heading-m",
526
560
  "heading-s"
527
- ], $ = [
561
+ ], N = [
528
562
  "",
529
563
  "default",
530
564
  "inherit",
@@ -539,7 +573,7 @@ const w = ["", "default", "none", "l"], c = [
539
573
  "state-hover",
540
574
  "state-active",
541
575
  "state-disabled"
542
- ], x = [
576
+ ], D = [
543
577
  "",
544
578
  "default",
545
579
  "inherit",
@@ -547,11 +581,11 @@ const w = ["", "default", "none", "l"], c = [
547
581
  "title",
548
582
  "title-large",
549
583
  "subtitle"
550
- ], v = ["Xs", "S", "M", "L", "Xl"], j = [
584
+ ], x = ["Xs", "S", "M", "L", "Xl"], T = [
551
585
  "",
552
586
  "default",
553
- ...v.map((i) => i.toLowerCase())
554
- ], C = ["", "default", "left", "center", "right"], L = [
587
+ ...x.map((i) => i.toLowerCase())
588
+ ], O = ["", "default", "left", "center", "right"], _ = [
555
589
  "",
556
590
  "none",
557
591
  "3xs",
@@ -561,7 +595,7 @@ const w = ["", "default", "none", "l"], c = [
561
595
  "m",
562
596
  "l",
563
597
  "xl"
564
- ], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], D = [
598
+ ], P = ["", "none", "s", "m", "l"], q = ["", "none", "main", "pill"], G = [
565
599
  "none",
566
600
  "main",
567
601
  "brand",
@@ -572,7 +606,7 @@ const w = ["", "default", "none", "l"], c = [
572
606
  "purpose-warning",
573
607
  "purpose-error",
574
608
  "purpose-unlimited"
575
- ], N = [
609
+ ], E = [
576
610
  "",
577
611
  "all",
578
612
  "top",
@@ -581,7 +615,7 @@ const w = ["", "default", "none", "l"], c = [
581
615
  "left",
582
616
  "block",
583
617
  "inline"
584
- ], O = [
618
+ ], B = [
585
619
  "",
586
620
  "none",
587
621
  "surface-light",
@@ -607,8 +641,9 @@ const w = ["", "default", "none", "l"], c = [
607
641
  "purpose-promo",
608
642
  "purpose-info",
609
643
  "purpose-eco",
610
- "purpose-notification"
611
- ], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], E = [
644
+ "purpose-notification",
645
+ "footer"
646
+ ], V = ["", "cover", "contain", "default"], R = ["", "none", "s", "m", "l", "xl"], z = [
612
647
  "",
613
648
  "default",
614
649
  "title-4xl",
@@ -619,7 +654,7 @@ const w = ["", "default", "none", "l"], c = [
619
654
  "title-m",
620
655
  "title-s",
621
656
  "subtitle"
622
- ], P = [
657
+ ], H = [
623
658
  "",
624
659
  "purple-top-red",
625
660
  "purple-top-magenta",
@@ -669,7 +704,7 @@ const w = ["", "default", "none", "l"], c = [
669
704
  "color-bottom-right-blue",
670
705
  "color-bottom-right-turquoise",
671
706
  "color-bottom-right-green"
672
- ], R = [
707
+ ], I = [
673
708
  "none",
674
709
  "2xs",
675
710
  "xs",
@@ -679,14 +714,14 @@ const w = ["", "default", "none", "l"], c = [
679
714
  "heading-to-subtitle",
680
715
  "heading-to-content",
681
716
  "page-layout-between-sections"
682
- ], V = [
717
+ ], W = [
683
718
  "",
684
719
  "all",
685
720
  "top",
686
721
  "right",
687
722
  "bottom",
688
723
  "left"
689
- ], z = [
724
+ ], X = [
690
725
  "",
691
726
  "default",
692
727
  "xs",
@@ -695,20 +730,20 @@ const w = ["", "default", "none", "l"], c = [
695
730
  "l",
696
731
  "xl"
697
732
  ];
698
- function B(i) {
733
+ function F(i) {
699
734
  const t = document.createElement("style");
700
735
  t.innerHTML = i, document.head.appendChild(t);
701
736
  }
702
- function _(i) {
737
+ function U(i) {
703
738
  return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
704
739
  }
705
- function H() {
740
+ function J() {
706
741
  return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
707
742
  }
708
- function F(i, t) {
743
+ function K(i, t) {
709
744
  return i.includes(t);
710
745
  }
711
- function X(i, t, s = !0) {
746
+ function Q(i, t, s = !0) {
712
747
  var e;
713
748
  if ([
714
749
  "aria-label",
@@ -751,7 +786,7 @@ function X(i, t, s = !0) {
751
786
  t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
752
787
  }
753
788
  }
754
- function I(i, t, s, e = "", o) {
789
+ function Y(i, t, s, e = "", o) {
755
790
  const a = new CSSStyleSheet(), l = s.reduce(
756
791
  (n, r) => n + `
757
792
  ${t(i, r)} {
@@ -797,7 +832,7 @@ function I(i, t, s, e = "", o) {
797
832
  );
798
833
  return a.replaceSync(l), a;
799
834
  }
800
- class J {
835
+ class Z {
801
836
  constructor(t, s, e, o) {
802
837
  this.component = t, this.attributeName = s, this.cssVariable = o, 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(
803
838
  this.component,
@@ -878,41 +913,44 @@ class J {
878
913
  }
879
914
  }
880
915
  export {
881
- J as AttributeBreakpointHandlerDelegate,
882
- y as PxElement,
883
- p as WithExtraAttributes,
884
- B as addGlobalStylesheet,
885
- z as assetContainerImgWidthValues,
886
- O as backgroundColorValues,
887
- G as backgroundSizeValues,
888
- D as borderColorValues,
889
- T as borderRadiusValues,
890
- N as borderSideValues,
891
- M as borderValues,
892
- q as boxShadowValues,
893
- F as checkName,
894
- $ as colorValues,
895
- g as cssGridAlignSelfValues,
896
- m as cssGridColSpanValues,
897
- f as cssGridJustifySelfValues,
898
- k as cssGridOrderValues,
899
- A as cssGridPlaceSelfValues,
900
- I as cssTokenBreakpoints,
901
- c as flexboxAlignSelfValues,
902
- S as fontsizeValues,
903
- x as fontweightValues,
904
- R as gapValues,
905
- d as getSupportedAttributeNames,
906
- b as getSupportedPropertyNames,
907
- H as getViewportFormat,
908
- P as gradientValues,
909
- w as gridGapValues,
910
- E as headingValues,
911
- v as iconSizeValues,
912
- j as iconSizeValuesKC,
913
- _ as isFalsy,
914
- V as noBorderRadiusValues,
915
- L as paddingValues,
916
- C as textalignValues,
917
- X as transferAccessibilityAttributes
916
+ Z as AttributeBreakpointHandlerDelegate,
917
+ p as PxElement,
918
+ j as VerticallyExtendedElement,
919
+ u as WithExtraAttributes,
920
+ F as addGlobalStylesheet,
921
+ X as assetContainerImgWidthValues,
922
+ B as backgroundColorValues,
923
+ V as backgroundSizeValues,
924
+ G as borderColorValues,
925
+ q as borderRadiusValues,
926
+ E as borderSideValues,
927
+ P as borderValues,
928
+ R as boxShadowValues,
929
+ K as checkName,
930
+ N as colorValues,
931
+ y as cssGridAlignSelfValues,
932
+ S as cssGridColSpanValues,
933
+ A as cssGridJustifySelfValues,
934
+ $ as cssGridOrderValues,
935
+ L as cssGridPlaceSelfValues,
936
+ Y as cssTokenBreakpoints,
937
+ w as flexboxAlignSelfValues,
938
+ M as fontsizeValues,
939
+ D as fontweightValues,
940
+ I as gapValues,
941
+ m as getSupportedAttributeNames,
942
+ f as getSupportedPropertyNames,
943
+ J as getViewportFormat,
944
+ H as gradientValues,
945
+ C as gridGapValues,
946
+ z as headingValues,
947
+ x as iconSizeValues,
948
+ T as iconSizeValuesKC,
949
+ h as isComponentDebug,
950
+ U as isFalsy,
951
+ v as log,
952
+ W as noBorderRadiusValues,
953
+ _ as paddingValues,
954
+ O as textalignValues,
955
+ Q as transferAccessibilityAttributes
918
956
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-common",
3
- "version": "2.0.0-alpha.2",
3
+ "version": "2.0.0-alpha.20",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",