@proximus/lavender-common 2.0.0-alpha.58 → 2.0.0-alpha.59

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 (3) hide show
  1. package/dist/breakpoints.d.ts +1 -1
  2. package/dist/index.es.js +121 -121
  3. package/package.json +1 -1
package/dist/breakpoints.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare function cssTokenBreakpoints(attributeName: string, selector: (attributeName: string, attribute: string, device?: 'mobile' | 'tablet' | 'laptop' | 'desktop') => string, attributeValues: string[], cssPropertyPrefix?: string, generatedCssPropertyName?: string): CSSStyleSheet;
1
+ export declare function cssTokenBreakpoints(attributeName: string, selector: (attributeName: string, attribute: string, device?: 'mobile' | 'tablet' | 'laptop' | 'desktop') => string, attributeValues: string[], cssPropertyPrefix?: string, generatedCssPropertyName?: string, selectorAttributeName?: string): CSSStyleSheet;
2
2
  export declare class AttributeBreakpointHandlerDelegate {
3
3
  private readonly component;
4
4
  private readonly attributeName;
package/dist/index.es.js CHANGED
@@ -1,23 +1,23 @@
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
- const t = document.createElement(i), s = Object.getPrototypeOf(t);
1
+ const g = ":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}}", f = {};
2
+ function m(o) {
3
+ const t = document.createElement(o), s = Object.getPrototypeOf(t);
4
4
  return Object.getOwnPropertyNames(s);
5
5
  }
6
- function m(i) {
7
- const t = document.createElement(i), s = Object.getPrototypeOf(t);
6
+ function k(o) {
7
+ const t = document.createElement(o), s = Object.getPrototypeOf(t);
8
8
  return Object.getOwnPropertyNames(s).map(
9
9
  (e) => e.toLowerCase()
10
10
  );
11
11
  }
12
12
  const d = new CSSStyleSheet();
13
- d.replaceSync(c);
14
- const k = typeof import.meta < "u" && typeof g < "u" && !0;
13
+ d.replaceSync(g);
14
+ const v = typeof import.meta < "u" && typeof f < "u" && !0;
15
15
  typeof window < "u" && (window.isComponentDebug = h);
16
16
  function h() {
17
- return k;
17
+ return v;
18
18
  }
19
- function v(i) {
20
- h() && console.error(i);
19
+ function w(o) {
20
+ h() && console.error(o);
21
21
  }
22
22
  typeof window < "u" && (window.isComponentDebug = h);
23
23
  class u extends HTMLElement {
@@ -77,7 +77,7 @@ class u extends HTMLElement {
77
77
  ];
78
78
  }
79
79
  attributeChangedCallback(t, s, e) {
80
- var o;
80
+ var i;
81
81
  if (u.observedAttributes.indexOf(t) !== -1)
82
82
  switch (t) {
83
83
  case "grow":
@@ -106,7 +106,7 @@ class u extends HTMLElement {
106
106
  t,
107
107
  s,
108
108
  e,
109
- ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? y : w
109
+ ((i = this.parentElement) == null ? void 0 : i.localName) === "px-grid" ? A : y
110
110
  );
111
111
  break;
112
112
  case "justify-self":
@@ -118,7 +118,7 @@ class u extends HTMLElement {
118
118
  t,
119
119
  s,
120
120
  e,
121
- A
121
+ S
122
122
  );
123
123
  break;
124
124
  case "col-span":
@@ -126,20 +126,20 @@ class u extends HTMLElement {
126
126
  case "col-span--tablet":
127
127
  case "col-span--laptop":
128
128
  case "col-span--desktop":
129
- this.updateProperties(t, s, e, S);
129
+ this.updateProperties(t, s, e, $);
130
130
  break;
131
131
  case "order":
132
132
  case "order--mobile":
133
133
  case "order--tablet":
134
134
  case "order--laptop":
135
135
  case "order--desktop":
136
- this.updateProperties(t, s, e, $);
136
+ this.updateProperties(t, s, e, x);
137
137
  break;
138
138
  }
139
139
  }
140
- updateProperties(t, s, e, o) {
141
- o && (this.checkName(o, e) || v(
142
- `${e} is not an allowed ${o} value for ${this.tagName.toLowerCase()}`
140
+ updateProperties(t, s, e, i) {
141
+ i && (this.checkName(i, e) || w(
142
+ `${e} is not an allowed ${i} value for ${this.tagName.toLowerCase()}`
143
143
  ));
144
144
  const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
145
145
  if (!a)
@@ -430,7 +430,7 @@ const b = class b extends u {
430
430
  static get observedAttributes() {
431
431
  return [
432
432
  ...super.observedAttributes,
433
- ...m(this.nativeName)
433
+ ...k(this.nativeName)
434
434
  ];
435
435
  }
436
436
  attributeChangedCallback(t, s, e) {
@@ -440,7 +440,7 @@ const b = class b extends u {
440
440
  return Object.getPrototypeOf(this).constructor;
441
441
  }
442
442
  constructor(...t) {
443
- super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = f(
443
+ super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = m(
444
444
  this.ctor.nativeName
445
445
  )), this.enhanceWithNativeProperties();
446
446
  }
@@ -473,12 +473,12 @@ const b = class b extends u {
473
473
  };
474
474
  b.accessorExclusions = [];
475
475
  let p = b;
476
- class j extends p {
476
+ class C extends p {
477
477
  connectedCallback() {
478
478
  this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
479
479
  }
480
480
  }
481
- const C = ["", "default", "none", "l"], w = [
481
+ const L = ["", "default", "none", "l"], y = [
482
482
  "",
483
483
  "default",
484
484
  "auto",
@@ -487,21 +487,21 @@ const C = ["", "default", "none", "l"], w = [
487
487
  "center",
488
488
  "baseline",
489
489
  "stretch"
490
- ], y = [
490
+ ], A = [
491
491
  "",
492
492
  "default",
493
493
  "start",
494
494
  "end",
495
495
  "center",
496
496
  "stretch"
497
- ], A = [
497
+ ], S = [
498
498
  "",
499
499
  "default",
500
500
  "start",
501
501
  "end",
502
502
  "center",
503
503
  "stretch"
504
- ], S = [
504
+ ], $ = [
505
505
  "",
506
506
  "1",
507
507
  "2",
@@ -515,7 +515,7 @@ const C = ["", "default", "none", "l"], w = [
515
515
  "10",
516
516
  "11",
517
517
  "12"
518
- ], $ = [
518
+ ], x = [
519
519
  "",
520
520
  "-1",
521
521
  "0",
@@ -531,7 +531,7 @@ const C = ["", "default", "none", "l"], w = [
531
531
  "10",
532
532
  "11",
533
533
  "12"
534
- ], L = [
534
+ ], M = [
535
535
  "",
536
536
  "default",
537
537
  "auto",
@@ -539,7 +539,7 @@ const C = ["", "default", "none", "l"], w = [
539
539
  "end",
540
540
  "center",
541
541
  "stretch"
542
- ], M = [
542
+ ], N = [
543
543
  "",
544
544
  "default",
545
545
  "inherit",
@@ -555,7 +555,7 @@ const C = ["", "default", "none", "l"], w = [
555
555
  "heading-l",
556
556
  "heading-m",
557
557
  "heading-s"
558
- ], N = [
558
+ ], D = [
559
559
  "",
560
560
  "default",
561
561
  "inherit",
@@ -570,7 +570,7 @@ const C = ["", "default", "none", "l"], w = [
570
570
  "state-hover",
571
571
  "state-active",
572
572
  "state-disabled"
573
- ], D = [
573
+ ], T = [
574
574
  "",
575
575
  "default",
576
576
  "inherit",
@@ -578,11 +578,11 @@ const C = ["", "default", "none", "l"], w = [
578
578
  "title",
579
579
  "title-large",
580
580
  "subtitle"
581
- ], x = ["Xs", "S", "M", "L", "Xl"], T = [
581
+ ], j = ["Xs", "S", "M", "L", "Xl"], O = [
582
582
  "",
583
583
  "default",
584
- ...x.map((i) => i.toLowerCase())
585
- ], O = ["", "default", "left", "center", "right"], _ = [
584
+ ...j.map((o) => o.toLowerCase())
585
+ ], _ = ["", "default", "left", "center", "right"], P = [
586
586
  "",
587
587
  "none",
588
588
  "3xs",
@@ -592,7 +592,7 @@ const C = ["", "default", "none", "l"], w = [
592
592
  "m",
593
593
  "l",
594
594
  "xl"
595
- ], P = ["", "none", "s", "m", "l"], q = ["", "none", "main", "pill"], G = [
595
+ ], q = ["", "none", "s", "m", "l"], G = ["", "none", "main", "pill"], E = [
596
596
  "none",
597
597
  "main",
598
598
  "brand",
@@ -603,7 +603,7 @@ const C = ["", "default", "none", "l"], w = [
603
603
  "purpose-warning",
604
604
  "purpose-error",
605
605
  "purpose-unlimited"
606
- ], E = [
606
+ ], B = [
607
607
  "",
608
608
  "all",
609
609
  "top",
@@ -612,7 +612,7 @@ const C = ["", "default", "none", "l"], w = [
612
612
  "left",
613
613
  "block",
614
614
  "inline"
615
- ], B = [
615
+ ], V = [
616
616
  "",
617
617
  "none",
618
618
  "surface-light",
@@ -640,7 +640,7 @@ const C = ["", "default", "none", "l"], w = [
640
640
  "purpose-eco",
641
641
  "purpose-notification",
642
642
  "footer-sitemap"
643
- ], V = ["", "cover", "contain", "default"], R = ["", "none", "s", "m", "l", "xl"], z = [
643
+ ], R = ["", "cover", "contain", "default"], z = ["", "none", "s", "m", "l", "xl"], H = [
644
644
  "",
645
645
  "default",
646
646
  "title-4xl",
@@ -651,7 +651,7 @@ const C = ["", "default", "none", "l"], w = [
651
651
  "title-m",
652
652
  "title-s",
653
653
  "subtitle"
654
- ], H = [
654
+ ], I = [
655
655
  "",
656
656
  "purple-top-red",
657
657
  "purple-top-magenta",
@@ -701,7 +701,7 @@ const C = ["", "default", "none", "l"], w = [
701
701
  "color-bottom-right-blue",
702
702
  "color-bottom-right-turquoise",
703
703
  "color-bottom-right-green"
704
- ], I = [
704
+ ], W = [
705
705
  "none",
706
706
  "2xs",
707
707
  "xs",
@@ -711,14 +711,14 @@ const C = ["", "default", "none", "l"], w = [
711
711
  "heading-to-subtitle",
712
712
  "heading-to-content",
713
713
  "page-layout-between-sections"
714
- ], W = [
714
+ ], X = [
715
715
  "",
716
716
  "all",
717
717
  "top",
718
718
  "right",
719
719
  "bottom",
720
720
  "left"
721
- ], X = [
721
+ ], F = [
722
722
  "",
723
723
  "default",
724
724
  "xs",
@@ -727,20 +727,20 @@ const C = ["", "default", "none", "l"], w = [
727
727
  "l",
728
728
  "xl"
729
729
  ];
730
- function F(i) {
730
+ function U(o) {
731
731
  const t = document.createElement("style");
732
- t.innerHTML = i, document.head.appendChild(t);
732
+ t.innerHTML = o, document.head.appendChild(t);
733
733
  }
734
- function U(i) {
735
- return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
734
+ function J(o) {
735
+ return typeof o == "string" && (o === "false" || o === "0" || o === "null") || typeof o == "boolean" && !o;
736
736
  }
737
- function J() {
737
+ function K() {
738
738
  return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
739
739
  }
740
- function K(i, t) {
741
- return i.includes(t);
740
+ function Q(o, t) {
741
+ return o.includes(t);
742
742
  }
743
- function Q(i, t, s = !0) {
743
+ function Y(o, t, s = !0) {
744
744
  var e;
745
745
  if ([
746
746
  "aria-label",
@@ -776,62 +776,62 @@ function Q(i, t, s = !0) {
776
776
  "aria-invalid",
777
777
  "aria-busy",
778
778
  "aria-owns"
779
- ].forEach((o) => {
780
- i.getAttribute(o) && (t.setAttribute(o, i.getAttribute(o)), i.removeAttribute(o));
779
+ ].forEach((i) => {
780
+ o.getAttribute(i) && (t.setAttribute(i, o.getAttribute(i)), o.removeAttribute(i));
781
781
  }), s) {
782
- const o = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
783
- t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
782
+ const i = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
783
+ t.setAttribute("id", i), o.setAttribute("aria-labelledby", i);
784
784
  }
785
785
  }
786
- function Y(i, t, s, e = "", o) {
787
- const a = new CSSStyleSheet(), l = s.reduce(
788
- (n, r) => n + `
789
- ${t(i, r)} {
790
- ${i}: var(--${e}-${r}-desktop);
791
- ${o ? `${o}:var(--${e}-${r}-desktop)` : ""}
786
+ function Z(o, t, s, e = "", i, a = o) {
787
+ const l = new CSSStyleSheet(), n = s.reduce(
788
+ (c, r) => c + `
789
+ ${t(a, r)} {
790
+ ${o}: var(--${e}-${r}-desktop);
791
+ ${i ? `${i}:var(--${e}-${r}-desktop)` : ""}
792
792
  }
793
793
  /* Mobile only - max 767px */
794
794
  @media only screen and (max-width: 47.938em) {
795
- ${t(i, r)} {
796
- ${i}: var(--${e}-${r}-mobile);
797
- ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
795
+ ${t(a, r)} {
796
+ ${o}: var(--${e}-${r}-mobile);
797
+ ${i ? `${i}: var(--${e}-${r}-mobile)` : ""}
798
798
  }
799
799
  }
800
- ${t(i, r, "mobile")} {
800
+ ${t(a, r, "mobile")} {
801
801
  /* Mobile only - max 767px */
802
802
  @media only screen and (max-width: 47.938em) {
803
- ${i}: var(--${e}-${r}-mobile) !important;
804
- ${o ? `${o}: var(--${e}-${r}-mobile)` : ""}
803
+ ${o}: var(--${e}-${r}-mobile) !important;
804
+ ${i ? `${i}: var(--${e}-${r}-mobile)` : ""}
805
805
  }
806
806
  }
807
- ${t(i, r, "tablet")} {
807
+ ${t(a, r, "tablet")} {
808
808
  /* Tablet - min 768px max 1024px */
809
809
  @media only screen and (min-width: 48em) and (max-width: 64em) {
810
- ${i}: var(--${e}-${r}-desktop) !important;
811
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
810
+ ${o}: var(--${e}-${r}-desktop) !important;
811
+ ${i ? `${i}: var(--${e}-${r}-desktop)` : ""}
812
812
  }
813
813
  }
814
- ${t(i, r, "laptop")} {
814
+ ${t(a, r, "laptop")} {
815
815
  /* Laptop - 1025px*/
816
816
  @media only screen and (min-width: 64.0625em) {
817
- ${i}: var(--${e}-${r}-desktop) !important;
818
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
817
+ ${o}: var(--${e}-${r}-desktop) !important;
818
+ ${i ? `${i}: var(--${e}-${r}-desktop)` : ""}
819
819
  }
820
820
  }
821
- ${t(i, r, "desktop")} {
821
+ ${t(a, r, "desktop")} {
822
822
  /* Desktop - 1025px*/
823
823
  @media only screen and (min-width: 64.0625em) {
824
- ${i}: var(--${e}-${r}-desktop) !important;
825
- ${o ? `${o}: var(--${e}-${r}-desktop)` : ""}
824
+ ${o}: var(--${e}-${r}-desktop) !important;
825
+ ${i ? `${i}: var(--${e}-${r}-desktop)` : ""}
826
826
  }
827
827
  }`,
828
828
  ""
829
829
  );
830
- return a.replaceSync(l), a;
830
+ return l.replaceSync(n), l;
831
831
  }
832
- class Z {
833
- constructor(t, s, e, o) {
834
- 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(
832
+ class tt {
833
+ constructor(t, s, e, i) {
834
+ 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(
835
835
  this.component,
836
836
  this.toCamelCase(this.attributeName),
837
837
  {
@@ -863,10 +863,10 @@ class Z {
863
863
  }
864
864
  }
865
865
  setCSSProperty(t, s, e = !0) {
866
- const [, o = ""] = t.split("--");
866
+ const [, i = ""] = t.split("--");
867
867
  this.component.style.setProperty(
868
- `${this.cssVariable}${e ? "-all" : ""}${o ? `-${o}` : ""}`,
869
- `${this._attributeValue(s, o)}`
868
+ `${this.cssVariable}${e ? "-all" : ""}${i ? `-${i}` : ""}`,
869
+ `${this._attributeValue(s, i)}`
870
870
  );
871
871
  }
872
872
  setCSSProperties() {
@@ -888,12 +888,12 @@ class Z {
888
888
  e,
889
889
  !1
890
890
  );
891
- const o = this.component.getAttribute(
891
+ const i = this.component.getAttribute(
892
892
  this.attributeNameLaptop
893
893
  );
894
- o && this.setCSSProperty(
894
+ i && this.setCSSProperty(
895
895
  this.attributeNameLaptop,
896
- o,
896
+ i,
897
897
  !1
898
898
  );
899
899
  const a = this.component.getAttribute(
@@ -910,44 +910,44 @@ class Z {
910
910
  }
911
911
  }
912
912
  export {
913
- Z as AttributeBreakpointHandlerDelegate,
913
+ tt as AttributeBreakpointHandlerDelegate,
914
914
  p as PxElement,
915
- j as VerticallyExtendedElement,
915
+ C as VerticallyExtendedElement,
916
916
  u as WithExtraAttributes,
917
- F as addGlobalStylesheet,
918
- X as assetContainerImgWidthValues,
919
- B as backgroundColorValues,
920
- V as backgroundSizeValues,
921
- G as borderColorValues,
922
- q as borderRadiusValues,
923
- E as borderSideValues,
924
- P as borderValues,
925
- R as boxShadowValues,
926
- K as checkName,
927
- N as colorValues,
928
- y as cssGridAlignSelfValues,
929
- S as cssGridColSpanValues,
930
- A as cssGridJustifySelfValues,
931
- $ as cssGridOrderValues,
932
- L as cssGridPlaceSelfValues,
933
- Y as cssTokenBreakpoints,
934
- w as flexboxAlignSelfValues,
935
- M as fontsizeValues,
936
- D as fontweightValues,
937
- I as gapValues,
938
- m as getSupportedAttributeNames,
939
- f as getSupportedPropertyNames,
940
- J as getViewportFormat,
941
- H as gradientValues,
942
- C as gridGapValues,
943
- z as headingValues,
944
- x as iconSizeValues,
945
- T as iconSizeValuesKC,
917
+ U as addGlobalStylesheet,
918
+ F as assetContainerImgWidthValues,
919
+ V as backgroundColorValues,
920
+ R as backgroundSizeValues,
921
+ E as borderColorValues,
922
+ G as borderRadiusValues,
923
+ B as borderSideValues,
924
+ q as borderValues,
925
+ z as boxShadowValues,
926
+ Q as checkName,
927
+ D as colorValues,
928
+ A as cssGridAlignSelfValues,
929
+ $ as cssGridColSpanValues,
930
+ S as cssGridJustifySelfValues,
931
+ x as cssGridOrderValues,
932
+ M as cssGridPlaceSelfValues,
933
+ Z as cssTokenBreakpoints,
934
+ y as flexboxAlignSelfValues,
935
+ N as fontsizeValues,
936
+ T as fontweightValues,
937
+ W as gapValues,
938
+ k as getSupportedAttributeNames,
939
+ m as getSupportedPropertyNames,
940
+ K as getViewportFormat,
941
+ I as gradientValues,
942
+ L as gridGapValues,
943
+ H as headingValues,
944
+ j as iconSizeValues,
945
+ O as iconSizeValuesKC,
946
946
  h as isComponentDebug,
947
- U as isFalsy,
948
- v as log,
949
- W as noBorderRadiusValues,
950
- _ as paddingValues,
951
- O as textalignValues,
952
- Q as transferAccessibilityAttributes
947
+ J as isFalsy,
948
+ w as log,
949
+ X as noBorderRadiusValues,
950
+ P as paddingValues,
951
+ _ as textalignValues,
952
+ Y as transferAccessibilityAttributes
953
953
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-common",
3
- "version": "2.0.0-alpha.58",
3
+ "version": "2.0.0-alpha.59",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",