@proximus/lavender-common 1.4.2-beta.1 → 1.4.3-alpha.2

package/dist/common.d.ts

@@ -1,5 +1,16 @@
 export declare function getSupportedPropertyNames(htmlElementName: string): string[];
 export declare function getSupportedAttributeNames(htmlElementName: string): string[];
+declare global {
+    interface Window {
+        isComponentDebug?: () => boolean;
+    }
+}
+export declare function isComponentDebug(): boolean;
+/**
+ * Logs an error message to the console if the global debug flag is set.
+ * Usage: log('message')
+ */
+export declare function log(message: string): void;
 export declare class WithExtraAttributes extends HTMLElement {
     static get observedAttributes(): string[];
     constructor(...adoptedStylesheets: CSSStyleSheet[]);

package/dist/index.es.js

@@ -1,17 +1,26 @@
-const d = ":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}}";
-function c(i) {
+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 = {};
+function f(i) {
   const t = document.createElement(i), s = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(s);
 }
-function g(i) {
+function m(i) {
   const t = document.createElement(i), s = Object.getPrototypeOf(t);
   return Object.getOwnPropertyNames(s).map(
     (e) => e.toLowerCase()
   );
 }
-const b = new CSSStyleSheet();
-b.replaceSync(d);
-class h extends HTMLElement {
+const d = new CSSStyleSheet();
+d.replaceSync(c);
+const k = typeof import.meta < "u" && typeof g < "u" && !0;
+typeof window < "u" && (window.isComponentDebug = h);
+function h() {
+  return k;
+}
+function v(i) {
+  h() && console.error(i);
+}
+typeof window < "u" && (window.isComponentDebug = h);
+class u extends HTMLElement {
   static get observedAttributes() {
     return [
       "grow",
@@ -63,13 +72,13 @@ class h extends HTMLElement {
   }
   constructor(...t) {
     super(), this.shadowRoot || this.attachShadow({ mode: "open" }), this.shadowRoot.adoptedStyleSheets = [
-      b,
+      d,
       ...t
     ];
   }
   attributeChangedCallback(t, s, e) {
     var o;
-    if (h.observedAttributes.indexOf(t) !== -1)
+    if (u.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
         case "grow--mobile":
@@ -97,7 +106,7 @@ class h extends HTMLElement {
             t,
             s,
             e,
-            ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? m : f
+            ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? y : w
           );
           break;
         case "justify-self":
@@ -109,7 +118,7 @@ class h extends HTMLElement {
             t,
             s,
             e,
-            k
+            A
           );
           break;
         case "col-span":
@@ -117,20 +126,22 @@ class h extends HTMLElement {
         case "col-span--tablet":
         case "col-span--laptop":
         case "col-span--desktop":
-          this.updateProperties(t, s, e, v);
+          this.updateProperties(t, s, e, S);
           break;
         case "order":
         case "order--mobile":
         case "order--tablet":
         case "order--laptop":
         case "order--desktop":
-          this.updateProperties(t, s, e, y);
+          this.updateProperties(t, s, e, $);
           break;
       }
   }
   updateProperties(t, s, e, o) {
     if (o && !this.checkName(o, e)) {
-      console.error(`${e} is not a valid value for ${o}`);
+      v(
+        `${e} is not an allowed ${o} value for ${this.tagName.toLowerCase()}`
+      );
       return;
     }
     const a = t.indexOf("--") > -1, l = a ? t.split("--")[0] : t;
@@ -417,12 +428,12 @@ class h extends HTMLElement {
     this.setAttribute("order--desktop", t);
   }
 }
-const u = class u extends h {
+const b = class b extends u {
   // nativeName: string;
   static get observedAttributes() {
     return [
       ...super.observedAttributes,
-      ...g(this.nativeName)
+      ...m(this.nativeName)
     ];
   }
   attributeChangedCallback(t, s, e) {
@@ -432,7 +443,7 @@ const u = class u extends h {
     return Object.getPrototypeOf(this).constructor;
   }
   constructor(...t) {
-    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = c(
+    super(...t), this.ctor.supportedPropertyNames || (this.ctor.supportedPropertyNames = f(
       this.ctor.nativeName
     )), this.enhanceWithNativeProperties();
   }
@@ -463,14 +474,14 @@ const u = class u extends h {
     s ? this.setAttribute(t, "") : this.removeAttribute(t);
   }
 };
-u.accessorExclusions = [];
-let p = u;
-class A extends p {
+b.accessorExclusions = [];
+let p = b;
+class j extends p {
   connectedCallback() {
     this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
   }
 }
-const S = ["", "default", "none", "l"], f = [
+const C = ["", "default", "none", "l"], w = [
   "",
   "default",
   "auto",
@@ -479,21 +490,21 @@ const S = ["", "default", "none", "l"], f = [
   "center",
   "baseline",
   "stretch"
-], m = [
+], y = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], k = [
+], A = [
   "",
   "default",
   "start",
   "end",
   "center",
   "stretch"
-], v = [
+], S = [
   "",
   "1",
   "2",
@@ -507,7 +518,7 @@ const S = ["", "default", "none", "l"], f = [
   "10",
   "11",
   "12"
-], y = [
+], $ = [
   "",
   "-1",
   "0",
@@ -523,7 +534,7 @@ const S = ["", "default", "none", "l"], f = [
   "10",
   "11",
   "12"
-], $ = [
+], L = [
   "",
   "default",
   "auto",
@@ -531,7 +542,7 @@ const S = ["", "default", "none", "l"], f = [
   "end",
   "center",
   "stretch"
-], x = [
+], M = [
   "",
   "default",
   "inherit",
@@ -547,7 +558,7 @@ const S = ["", "default", "none", "l"], f = [
   "heading-l",
   "heading-m",
   "heading-s"
-], j = [
+], N = [
   "",
   "default",
   "inherit",
@@ -562,7 +573,7 @@ const S = ["", "default", "none", "l"], f = [
   "state-hover",
   "state-active",
   "state-disabled"
-], C = [
+], D = [
   "",
   "default",
   "inherit",
@@ -570,11 +581,11 @@ const S = ["", "default", "none", "l"], f = [
   "title",
   "title-large",
   "subtitle"
-], w = ["Xs", "S", "M", "L", "Xl"], L = [
+], x = ["Xs", "S", "M", "L", "Xl"], T = [
   "",
   "default",
-  ...w.map((i) => i.toLowerCase())
-], M = ["", "default", "left", "center", "right"], N = [
+  ...x.map((i) => i.toLowerCase())
+], O = ["", "default", "left", "center", "right"], _ = [
   "",
   "none",
   "3xs",
@@ -584,7 +595,7 @@ const S = ["", "default", "none", "l"], f = [
   "m",
   "l",
   "xl"
-], T = ["", "none", "s", "m", "l"], D = ["", "none", "main", "pill"], O = [
+], P = ["", "none", "s", "m", "l"], q = ["", "none", "main", "pill"], G = [
   "none",
   "main",
   "brand",
@@ -595,7 +606,7 @@ const S = ["", "default", "none", "l"], f = [
   "purpose-warning",
   "purpose-error",
   "purpose-unlimited"
-], q = [
+], E = [
   "",
   "all",
   "top",
@@ -604,7 +615,7 @@ const S = ["", "default", "none", "l"], f = [
   "left",
   "block",
   "inline"
-], G = [
+], B = [
   "",
   "none",
   "surface-light",
@@ -632,7 +643,7 @@ const S = ["", "default", "none", "l"], f = [
   "purpose-eco",
   "purpose-notification",
   "footer"
-], P = ["", "cover", "contain", "default"], E = ["", "none", "s", "m", "l", "xl"], V = [
+], V = ["", "cover", "contain", "default"], R = ["", "none", "s", "m", "l", "xl"], z = [
   "",
   "default",
   "title-4xl",
@@ -643,7 +654,7 @@ const S = ["", "default", "none", "l"], f = [
   "title-m",
   "title-s",
   "subtitle"
-], B = [
+], H = [
   "",
   "purple-top-red",
   "purple-top-magenta",
@@ -693,7 +704,7 @@ const S = ["", "default", "none", "l"], f = [
   "color-bottom-right-blue",
   "color-bottom-right-turquoise",
   "color-bottom-right-green"
-], R = [
+], I = [
   "none",
   "2xs",
   "xs",
@@ -703,14 +714,14 @@ const S = ["", "default", "none", "l"], f = [
   "heading-to-subtitle",
   "heading-to-content",
   "page-layout-between-sections"
-], _ = [
+], W = [
   "",
   "all",
   "top",
   "right",
   "bottom",
   "left"
-], z = [
+], X = [
   "",
   "default",
   "xs",
@@ -719,20 +730,20 @@ const S = ["", "default", "none", "l"], f = [
   "l",
   "xl"
 ];
-function H(i) {
+function F(i) {
   const t = document.createElement("style");
   t.innerHTML = i, document.head.appendChild(t);
 }
-function I(i) {
+function U(i) {
   return typeof i == "string" && (i === "false" || i === "0" || i === "null") || typeof i == "boolean" && !i;
 }
-function W() {
+function J() {
   return window.matchMedia("only screen and (min-width: 768px)").matches ? "tablet" : window.matchMedia("only screen and (min-width: 1025px)").matches ? "laptop" : "mobile";
 }
-function F(i, t) {
+function K(i, t) {
   return i.includes(t);
 }
-function X(i, t, s = !0) {
+function Q(i, t, s = !0) {
   var e;
   if ([
     "aria-label",
@@ -775,7 +786,7 @@ function X(i, t, s = !0) {
     t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
   }
 }
-function J(i, t, s, e = "", o) {
+function Y(i, t, s, e = "", o) {
   const a = new CSSStyleSheet(), l = s.reduce(
     (n, r) => n + `
   ${t(i, r)} {
@@ -821,7 +832,7 @@ function J(i, t, s, e = "", o) {
   );
   return a.replaceSync(l), a;
 }
-class K {
+class Z {
   constructor(t, s, e, o) {
     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(
       this.component,
@@ -902,42 +913,44 @@ class K {
   }
 }
 export {
-  K as AttributeBreakpointHandlerDelegate,
+  Z as AttributeBreakpointHandlerDelegate,
   p as PxElement,
-  A as VerticallyExtendedElement,
-  h as WithExtraAttributes,
-  H as addGlobalStylesheet,
-  z as assetContainerImgWidthValues,
-  G as backgroundColorValues,
-  P as backgroundSizeValues,
-  O as borderColorValues,
-  D as borderRadiusValues,
-  q as borderSideValues,
-  T as borderValues,
-  E as boxShadowValues,
-  F as checkName,
-  j as colorValues,
-  m as cssGridAlignSelfValues,
-  v as cssGridColSpanValues,
-  k as cssGridJustifySelfValues,
-  y as cssGridOrderValues,
-  $ as cssGridPlaceSelfValues,
-  J as cssTokenBreakpoints,
-  f as flexboxAlignSelfValues,
-  x as fontsizeValues,
-  C as fontweightValues,
-  R as gapValues,
-  g as getSupportedAttributeNames,
-  c as getSupportedPropertyNames,
-  W as getViewportFormat,
-  B as gradientValues,
-  S as gridGapValues,
-  V as headingValues,
-  w as iconSizeValues,
-  L as iconSizeValuesKC,
-  I as isFalsy,
-  _ as noBorderRadiusValues,
-  N as paddingValues,
-  M as textalignValues,
-  X as transferAccessibilityAttributes
+  j as VerticallyExtendedElement,
+  u as WithExtraAttributes,
+  F as addGlobalStylesheet,
+  X as assetContainerImgWidthValues,
+  B as backgroundColorValues,
+  V as backgroundSizeValues,
+  G as borderColorValues,
+  q as borderRadiusValues,
+  E as borderSideValues,
+  P as borderValues,
+  R as boxShadowValues,
+  K as checkName,
+  N as colorValues,
+  y as cssGridAlignSelfValues,
+  S as cssGridColSpanValues,
+  A as cssGridJustifySelfValues,
+  $ as cssGridOrderValues,
+  L as cssGridPlaceSelfValues,
+  Y as cssTokenBreakpoints,
+  w as flexboxAlignSelfValues,
+  M as fontsizeValues,
+  D as fontweightValues,
+  I as gapValues,
+  m as getSupportedAttributeNames,
+  f as getSupportedPropertyNames,
+  J as getViewportFormat,
+  H as gradientValues,
+  C as gridGapValues,
+  z as headingValues,
+  x as iconSizeValues,
+  T as iconSizeValuesKC,
+  h as isComponentDebug,
+  U as isFalsy,
+  v as log,
+  W as noBorderRadiusValues,
+  _ as paddingValues,
+  O as textalignValues,
+  Q as transferAccessibilityAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "1.4.2-beta.1",
+  "version": "1.4.3-alpha.2",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",