@proximus/lavender-common 0.1.0-alpha.61 → 1.0.0-alpha.62

package/dist/index.js

@@ -5,7 +5,7 @@ function d(o) {
 }
 const b = new CSSStyleSheet();
 b.replaceSync(u);
-class n extends HTMLElement {
+class p extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
@@ -58,7 +58,7 @@ class n extends HTMLElement {
     ];
   }
   attributeChangedCallback(t, s, e) {
-    if (n.observedAttributes.indexOf(t) !== -1)
+    if (p.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
         case "grow--mobile":
@@ -122,32 +122,32 @@ class n extends HTMLElement {
       console.error(`Bad ${t} value for`, this.$el);
       return;
     }
-    const a = t.indexOf("--") > -1, r = a ? t.split("--")[0] : t, l = [];
+    const a = t.indexOf("--") > -1, r = a ? t.split("--")[0] : t, n = [];
     if (!a)
-      this.getAttribute(r + "--mobile") || l.push("mobile"), this.getAttribute(r + "--tablet") || l.push("tablet"), this.getAttribute(r + "--laptop") || l.push("laptop"), this.getAttribute(r + "--desktop") || l.push("desktop"), l.forEach((p) => {
-        n.prototype.updateStyle.call(
+      this.getAttribute(r + "--mobile") || n.push("mobile"), this.getAttribute(r + "--tablet") || n.push("tablet"), this.getAttribute(r + "--laptop") || n.push("laptop"), this.getAttribute(r + "--desktop") || n.push("desktop"), n.forEach((l) => {
+        p.prototype.updateStyle.call(
           this,
           r,
-          p,
+          l,
           s
-        ), n.prototype.updateStyle.call(
+        ), p.prototype.updateStyle.call(
           this,
           r,
-          p,
+          l,
           e
         );
       });
     else {
-      const p = t.split("--")[1];
-      n.prototype.updateStyle.call(
+      const l = t.split("--")[1];
+      p.prototype.updateStyle.call(
         this,
         r,
-        p,
+        l,
         s
-      ), n.prototype.updateStyle.call(
+      ), p.prototype.updateStyle.call(
         this,
         r,
-        p,
+        l,
         e
       );
     }
@@ -409,7 +409,7 @@ class n extends HTMLElement {
     this.setAttribute("order--desktop", t);
   }
 }
-class k extends n {
+class k extends p {
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
@@ -523,7 +523,7 @@ const y = [
   "heading-l",
   "heading-m",
   "heading-s"
-], S = [
+], v = [
   "",
   "default",
   "inherit",
@@ -541,7 +541,7 @@ const y = [
   "purpose-error",
   "purpose-unlimited",
   "purpose-promo"
-], v = [
+], S = [
   "",
   "default",
   "inherit",
@@ -549,7 +549,7 @@ const y = [
   "bold",
   "extrabold",
   "light"
-], x = [
+], $ = [
   "",
   "default",
   "2xs",
@@ -559,7 +559,7 @@ const y = [
   "l",
   "xl",
   "2xl"
-], j = ["", "default", "left", "center", "right"], $ = ["", "none", "2xs", "xs", "s", "m", "l"], C = ["", "none", "s", "m", "l"], N = ["", "none", "main", "pill"], M = [
+], j = ["", "default", "left", "center", "right"], x = ["", "none", "2xs", "xs", "s", "m", "l"], C = ["", "none", "s", "m", "l"], M = ["", "none", "main", "pill"], L = [
   "none",
   "container-main",
   "container-brand",
@@ -570,7 +570,7 @@ const y = [
   "purpose-warning",
   "purpose-error",
   "purpose-unlimited"
-], L = [
+], T = [
   "",
   "all",
   "top",
@@ -579,7 +579,7 @@ const y = [
   "left",
   "block",
   "inline"
-], T = [
+], D = [
   "",
   "none",
   "container-neutral-bare",
@@ -606,7 +606,7 @@ const y = [
   "purpose-info",
   "purpose-eco",
   "purpose-notification"
-], D = ["", "cover", "contain", "default"], P = ["", "none", "s", "m", "l", "xl"], V = [
+], N = ["", "cover", "contain", "default"], G = ["", "none", "s", "m", "l", "xl"], O = [
   "",
   "default",
   "title-4xl",
@@ -617,7 +617,7 @@ const y = [
   "title-m",
   "title-s",
   "subtitle"
-], G = [
+], q = [
   "",
   "purple-top-red",
   "purple-top-magenta",
@@ -667,7 +667,7 @@ const y = [
   "color-bottom-right-blue",
   "color-bottom-right-turquoise",
   "color-bottom-right-green"
-], O = [
+], V = [
   "after-element-none",
   "after-element-2xs",
   "after-element-xs",
@@ -682,35 +682,35 @@ const y = [
   "inside-section-default",
   "inside-section-l",
   "between-sections"
-], q = [
+], B = [
   "",
   "all",
   "top",
   "right",
   "bottom",
   "left"
-], B = [
+], R = [
   "",
   "default",
   "xs",
   "s",
   "l",
   "2xl"
-], R = ["", "default", "s", "m", "l"];
-function z(o) {
+], z = ["", "default", "s", "m", "l"];
+function H(o) {
   const t = document.createElement("style");
   t.innerHTML = o, document.head.appendChild(t);
 }
-function H(o) {
+function E(o) {
   return typeof o == "string" && (o === "false" || o === "0" || o === "null") || typeof o == "boolean" && !o;
 }
-function E() {
+function F() {
   return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function F(o, t) {
+function I(o, t) {
   return o.includes(t);
 }
-function I(o, t) {
+function J(o, t) {
   var e;
   [
     "aria-label",
@@ -752,40 +752,46 @@ function I(o, t) {
   const s = `px-${((e = t.localName) == null ? void 0 : e.toLowerCase()) ?? "component"}-${Math.random().toString(36).substring(2, 15)}`;
   t.setAttribute("id", s), o.setAttribute("aria-labelledby", s);
 }
-function J(o, t, s, e = "") {
-  const i = new CSSStyleSheet(), a = s.reduce(
-    (r, l) => r + `
+function U(o, t, s, e = "", i) {
+  const a = new CSSStyleSheet(), r = s.reduce(
+    (n, l) => n + `
   ${t(o, l)} {
-    ${o}: var(--${e}-${l}-desktop);
-    @media only screen and (max-width: 768px) {
+    @media only screen and (max-width: 767px) {
       ${o}: var(--${e}-${l}-mobile);
+      ${i ? `${i}: var(--${e}-${l}-mobile)` : ""}
     }
+    ${o}: var(--${e}-${l}-desktop);
+    ${i ? `${i}:var(--${e}-${l}-desktop)` : ""}
   }
   ${t(o, l, "mobile")} {
-    @media only screen and (max-width: 768px) {
+    @media only screen and (max-width: 767px) {
       ${o}: var(--${e}-${l}-mobile) !important;
+      ${i ? `${i}: var(--${e}-${l}-mobile)` : ""}
     }
   }
   ${t(o, l, "tablet")} {
-    @media only screen and (min-width: 769px) {
-      ${o}: var(--${e}-${l}-tablet) !important;
+    @media only screen and (min-width: 768px) {
+      ${o}: var(--${e}-${l}-desktop) !important;
+      ${i ? `${i}: var(--${e}-${l}-desktop)` : ""}
     }
   }
   ${t(o, l, "laptop")} {
-    @media only screen and (min-width: 769px) {
-      ${o}: var(--${e}-${l}-laptop) !important;
+    @media only screen and (min-width: 768px) {
+      ${o}: var(--${e}-${l}-desktop) !important;
+      ${i ? `${i}: var(--${e}-${l}-desktop)` : ""}
     }
   }
   ${t(o, l, "desktop")} {
-    @media only screen and (min-width: 769px) {
+    @media only screen and (min-width: 768px) {
       ${o}: var(--${e}-${l}-desktop) !important;
+      ${i ? `${i}: var(--${e}-${l}-desktop)` : ""}
     }
   }`,
     ""
   );
-  return i.replaceSync(a), i;
+  return a.replaceSync(r), a;
 }
-class U {
+class K {
   constructor(t, s, e, i) {
     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(
       this.component,
@@ -866,40 +872,40 @@ class U {
   }
 }
 export {
-  U as AttributeBreakpointHandlerDelegate,
+  K as AttributeBreakpointHandlerDelegate,
   k as PxElement,
-  n as WithExtraAttributes,
-  z as addGlobalStylesheet,
-  B as assetContainerIconSizeValues,
-  R as assetContainerImgWidthValues,
-  T as backgroundColorValues,
-  D as backgroundSizeValues,
-  M as borderColorValues,
-  N as borderRadiusValues,
-  L as borderSideValues,
+  p as WithExtraAttributes,
+  H as addGlobalStylesheet,
+  R as assetContainerIconSizeValues,
+  z as assetContainerImgWidthValues,
+  D as backgroundColorValues,
+  N as backgroundSizeValues,
+  L as borderColorValues,
+  M as borderRadiusValues,
+  T as borderSideValues,
   C as borderValues,
-  P as boxShadowValues,
-  F as checkName,
-  S as colorValues,
+  G as boxShadowValues,
+  I as checkName,
+  v as colorValues,
   c as cssGridAlignSelfValues,
   f as cssGridColSpanValues,
   g as cssGridJustifySelfValues,
   m as cssGridOrderValues,
   A as cssGridPlaceSelfValues,
-  J as cssTokenBreakpoints,
+  U as cssTokenBreakpoints,
   h as flexboxAlignSelfValues,
   w as fontsizeValues,
-  v as fontweightValues,
-  O as gapValues,
+  S as fontweightValues,
+  V as gapValues,
   d as getSupportedAttributeNames,
-  E as getViewportFormat,
-  G as gradientValues,
+  F as getViewportFormat,
+  q as gradientValues,
   y as gridGapValues,
-  V as headingValues,
-  x as iconSizeValues,
-  H as isFalsy,
-  q as noBorderRadiusValues,
-  $ as paddingValues,
+  O as headingValues,
+  $ as iconSizeValues,
+  E as isFalsy,
+  B as noBorderRadiusValues,
+  x as paddingValues,
   j as textalignValues,
-  I as transferAccessibilityAttributes
+  J as transferAccessibilityAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "0.1.0-alpha.61",
+  "version": "1.0.0-alpha.62",
   "description": "",
   "main": "dist/index.js",
   "exports": {
@@ -24,7 +24,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2373cc5b922977abc7f827fbb6e8051e7662d07c",
+  "gitHead": "ea5946118576717674836f6a121d6daea77d2a09",
   "lerna": {
     "command": {
       "publish": {