@proximus/lavender-common 1.3.0 → 1.4.1-alpha.10

package/dist/common.d.ts

@@ -9,8 +9,7 @@ export declare class WithExtraAttributes extends HTMLElement {
     checkName<T extends readonly string[]>(values: T, value: string): boolean;
     get $el(): Element;
     get $parentElementName(): string;
-    get isGrid(): boolean;
-    get isStack(): boolean;
+    get isInsideGridOrStack(): boolean;
     get grow(): string;
     set grow(value: string);
     get growMobile(): string;

package/dist/index.es.js

@@ -68,6 +68,7 @@ class p extends HTMLElement {
     ];
   }
   attributeChangedCallback(t, s, e) {
+    var o;
     if (p.observedAttributes.indexOf(t) !== -1)
       switch (t) {
         case "grow":
@@ -96,7 +97,7 @@ class p extends HTMLElement {
             t,
             s,
             e,
-            this.isGrid ? g : c
+            ((o = this.parentElement) == null ? void 0 : o.localName) === "px-grid" ? g : c
           );
           break;
         case "justify-self":
@@ -168,11 +169,18 @@ class p extends HTMLElement {
     var t;
     return (t = this.parentElement) == null ? void 0 : t.tagName.toLowerCase();
   }
-  get isGrid() {
-    return this.$parentElementName === "px-grid";
-  }
-  get isStack() {
-    return this.$parentElementName === "px-stack";
+  get isInsideGridOrStack() {
+    let t = this.parentElement;
+    for (; t; ) {
+      if (t.localName === "px-grid" || t.localName === "px-stack" && (t == null ? void 0 : t.getAttribute("direction")) === "row")
+        return !0;
+      if (window.getComputedStyle(t).display === "contents") {
+        t = t.parentElement;
+        continue;
+      }
+      break;
+    }
+    return !1;
   }
   get grow() {
     return this.getAttribute("grow");
@@ -423,25 +431,21 @@ class y extends p {
     super.attributeChangedCallback(t, s, e), e === null ? this.$el.toggleAttribute(t) : this.$el.setAttribute(t, e);
   }
   connectedCallback() {
-    var t;
-    for (const s of b(this.nativeName))
-      if (!(s === "constructor" || this.accessorExclusions.includes(s)))
+    for (const t of b(this.nativeName))
+      if (!(t === "constructor" || this.accessorExclusions.includes(t)))
         try {
-          Object.defineProperty(this, s, {
+          Object.defineProperty(this, t, {
             get() {
-              return this.$el[s];
+              return this.$el[t];
             },
-            set(e) {
-              this.$el[s] !== e && (this.$el[s] = e);
+            set(s) {
+              this.$el[t] !== s && (this.$el[t] = s);
             }
           });
-        } catch (e) {
-          console.warn(`Could not create property ${s} for`, this.$el, e);
+        } catch (s) {
+          console.warn(`Could not create property ${t} for`, this.$el, s);
         }
-    if (this.isGrid || this.isStack) {
-      const s = (t = this.parentElement) == null ? void 0 : t.getAttribute("direction");
-      this.$el.style.display = "block", (this.isGrid || this.isStack && s === "row") && (this.$el.style.height = "100%");
-    }
+    this.isInsideGridOrStack && (this.$el.style.display = "block", this.$el.style.height = "100%");
   }
   get $el() {
     return this.shadowRoot.querySelector(this.nativeName);
@@ -567,7 +571,7 @@ const w = ["", "default", "none", "l"], c = [
   "m",
   "l",
   "xl"
-], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], D = [
+], M = ["", "none", "s", "m", "l"], T = ["", "none", "main", "pill"], N = [
   "none",
   "main",
   "brand",
@@ -578,7 +582,7 @@ const w = ["", "default", "none", "l"], c = [
   "purpose-warning",
   "purpose-error",
   "purpose-unlimited"
-], N = [
+], D = [
   "",
   "all",
   "top",
@@ -615,7 +619,7 @@ const w = ["", "default", "none", "l"], c = [
   "purpose-eco",
   "purpose-notification",
   "footer"
-], G = ["", "cover", "contain", "default"], q = ["", "none", "s", "m", "l", "xl"], E = [
+], q = ["", "cover", "contain", "default"], E = ["", "none", "s", "m", "l", "xl"], G = [
   "",
   "default",
   "title-4xl",
@@ -712,10 +716,10 @@ function z(i) {
 function H() {
   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 I(i, t) {
   return i.includes(t);
 }
-function X(i, t, s = !0) {
+function F(i, t, s = !0) {
   var e;
   if ([
     "aria-label",
@@ -758,7 +762,7 @@ function X(i, t, s = !0) {
     t.setAttribute("id", o), i.setAttribute("aria-labelledby", o);
   }
 }
-function I(i, t, s, e = "", o) {
+function X(i, t, s, e = "", o) {
   const a = new CSSStyleSheet(), l = s.reduce(
     (n, r) => n + `
   ${t(i, r)} {
@@ -891,20 +895,20 @@ export {
   V as addGlobalStylesheet,
   R as assetContainerImgWidthValues,
   O as backgroundColorValues,
-  G as backgroundSizeValues,
-  D as borderColorValues,
+  q as backgroundSizeValues,
+  N as borderColorValues,
   T as borderRadiusValues,
-  N as borderSideValues,
+  D as borderSideValues,
   M as borderValues,
-  q as boxShadowValues,
-  F as checkName,
+  E as boxShadowValues,
+  I as checkName,
   $ as colorValues,
   g as cssGridAlignSelfValues,
   m as cssGridColSpanValues,
   f as cssGridJustifySelfValues,
   k as cssGridOrderValues,
   A as cssGridPlaceSelfValues,
-  I as cssTokenBreakpoints,
+  X as cssTokenBreakpoints,
   c as flexboxAlignSelfValues,
   S as fontsizeValues,
   x as fontweightValues,
@@ -914,12 +918,12 @@ export {
   H as getViewportFormat,
   P as gradientValues,
   w as gridGapValues,
-  E as headingValues,
+  G as headingValues,
   v as iconSizeValues,
   j as iconSizeValuesKC,
   z as isFalsy,
   B as noBorderRadiusValues,
   L as paddingValues,
   C as textalignValues,
-  X as transferAccessibilityAttributes
+  F as transferAccessibilityAttributes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-common",
-  "version": "1.3.0",
+  "version": "1.4.1-alpha.10",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",