@proximus/lavender-common 1.4.6-beta.2 → 1.4.6

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