@proximus/lavender-layout 1.3.0-beta.1 → 1.3.0

package/dist/Spacer.d.ts

@@ -1,8 +1,18 @@
 export declare class Spacer extends HTMLElement {
+    private resizeObserver?;
+    private recheckHandle?;
+    private isZeroSized;
+    private growValue;
+    private isVertical;
     constructor();
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     get grow(): string;
     set grow(value: string);
+    private scheduleRecheck;
+    private recalculateVisibility;
+    private handleSizeChange;
+    private updateParticipation;
 }

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { WithExtraAttributes as c, AttributeBreakpointHandlerDelegate as b, gapValues as u, checkName as h, backgroundColorValues as f } from "@proximus/lavender-common";
+import { WithExtraAttributes as p, AttributeBreakpointHandlerDelegate as h, gapValues as u, checkName as b, backgroundColorValues as f } from "@proximus/lavender-common";
 const x = ':host{display:block}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-mobile) + var(--px-focus-offset-mobile))}.flex-container{display:flex;height:100%;width:100%;box-sizing:border-box;flex-direction:var(--flex-direction--mobile-value);gap:var(--flex-gap--mobile-value);flex-wrap:var(--flex-wrap--mobile-value);justify-content:var(--flex-justify-content--mobile-value);align-items:var(--flex-align-items--mobile-value);overflow-x:var(--overflow-x-all)}@media only screen and (max-width: 47.9375em){.flex-container{overflow-x:var(--overflow-x-all-mobile, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 48em){.flex-container{flex-direction:var(--flex-direction--tablet-value);gap:var(--flex-gap--tablet-value);flex-wrap:var(--flex-wrap--tablet-value);justify-content:var(--flex-justify-content--tablet-value);align-items:var(--flex-align-items--tablet-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-tablet) + var(--px-focus-offset-tablet))}}@media only screen and (min-width: 48em) and (max-width: 64em){.flex-container{overflow-x:var(--overflow-x-all-tablet, var(--overflow-x-all));scrollbar-width:none}.flex-container::-webkit-scrollbar{display:none}}@media only screen and (min-width: 64.0625em){.flex-container{flex-direction:var(--flex-direction--laptop-value);gap:var(--flex-gap--laptop-value);flex-wrap:var(--flex-wrap--laptop-value);justify-content:var(--flex-justify-content--laptop-value);align-items:var(--flex-align-items--laptop-value)}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-laptop) + var(--px-focus-offset-laptop))}}@media only screen and (min-width: 64.0625em) and (max-width: 90em){.flex-container{overflow-x:var(--overflow-x-all-laptop, var(--overflow-x-all))}}@media only screen and (min-width: 90.0625em){.flex-container{flex-direction:var(--flex-direction--desktop-value);gap:var(--flex-gap--desktop-value);flex-wrap:var(--flex-wrap--desktop-value);justify-content:var(--flex-justify-content--desktop-value);align-items:var(--flex-align-items--desktop-value);overflow-x:var(--overflow-x-all-desktop, var(--overflow-x-all))}:host([overflow-x="auto"]){margin:calc(calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop)) * -1)}:host([overflow-x="auto"]) .flex-container{padding:calc(var(--px-focus-outline-desktop) + var(--px-focus-offset-desktop))}}', d = new CSSStyleSheet();
 d.replaceSync(x);
 const m = [
@@ -26,9 +26,9 @@ const m = [
   "space-around",
   "space-evenly"
 ], w = ["", "default", "nowrap", "wrap", "wrap-reverse"], y = ["", "visible", "hidden", "scroll", "auto"];
-class l extends c {
+class l extends p {
   constructor() {
-    super(d), this.overflowXAttributeDelegate = new b(
+    super(d), this.overflowXAttributeDelegate = new h(
       this,
       "overflow-x",
       (t) => t,
@@ -130,7 +130,7 @@ class l extends c {
     }
   }
   updateOverflowX(t, i, e, o) {
-    if (!h(o, e)) {
+    if (!b(o, e)) {
       console.error(`${e} is not an allowed ${t} value`);
       return;
     }
@@ -142,14 +142,14 @@ class l extends c {
   }
   updateFlexProperties(t, i, e, o) {
     this.checkName(o, e) || console.error(`${e} is not a valid value for ${o}`);
-    const p = t.indexOf("--") > -1, a = p ? t.split("--")[0] : t, r = [];
-    if (!p)
-      this.getAttribute(a + "--mobile") || r.push("mobile"), this.getAttribute(a + "--tablet") || r.push("tablet"), this.getAttribute(a + "--laptop") || r.push("laptop"), this.getAttribute(a + "--desktop") || r.push("desktop"), r.forEach((s) => {
-        this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
+    const c = t.indexOf("--") > -1, a = c ? t.split("--")[0] : t, s = [];
+    if (!c)
+      this.getAttribute(a + "--mobile") || s.push("mobile"), this.getAttribute(a + "--tablet") || s.push("tablet"), this.getAttribute(a + "--laptop") || s.push("laptop"), this.getAttribute(a + "--desktop") || s.push("desktop"), s.forEach((r) => {
+        this.updateStyle(a, r, i, o), this.updateStyle(a, r, e, o);
       });
     else {
-      const s = t.split("--")[1];
-      this.updateStyle(a, s, i, o), this.updateStyle(a, s, e, o);
+      const r = t.split("--")[1];
+      this.updateStyle(a, r, i, o), this.updateStyle(a, r, e, o);
     }
   }
   updateStyle(t, i, e, o) {
@@ -366,16 +366,22 @@ class C extends l {
 customElements.get("px-hstack") || customElements.define("px-hstack", C);
 class $ extends HTMLElement {
   constructor() {
-    super();
+    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
   }
   static get observedAttributes() {
     return ["grow"];
   }
   attributeChangedCallback(t, i, e) {
-    t === "grow" && (this.style.flexGrow = e);
+    t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
   }
   connectedCallback() {
-    this.style.flexGrow = this.getAttribute("grow") || "1";
+    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver(() => {
+      this.handleSizeChange();
+    }), this.isVertical = this.parentElement.localName === "px-vstack" || this.parentElement.style.flexDirection === "column", this.resizeObserver.observe(this), this.scheduleRecheck();
+  }
+  disconnectedCallback() {
+    var t;
+    (t = this.resizeObserver) == null || t.disconnect(), this.recheckHandle && (cancelAnimationFrame(this.recheckHandle), this.recheckHandle = void 0);
   }
   get grow() {
     return this.getAttribute("grow");
@@ -383,11 +389,26 @@ class $ extends HTMLElement {
   set grow(t) {
     this.setAttribute("grow", t);
   }
+  scheduleRecheck() {
+    this.recheckHandle && cancelAnimationFrame(this.recheckHandle), this.recheckHandle = requestAnimationFrame(() => {
+      this.recheckHandle = void 0, this.recalculateVisibility();
+    });
+  }
+  recalculateVisibility() {
+    this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
+  }
+  handleSizeChange() {
+    const t = this.getBoundingClientRect(), i = t.width === 0 && !this.isVertical || t.height === 0 && this.isVertical;
+    this.isZeroSized !== i && (this.isZeroSized = i, this.updateParticipation());
+  }
+  updateParticipation() {
+    this.isZeroSized ? (this.style.display = "none", this.style.flexGrow = "0") : (this.style.display = "", this.style.flexGrow = this.growValue);
+  }
 }
 customElements.get("px-spacer") || customElements.define("px-spacer", $);
-const j = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", g = new CSSStyleSheet();
-g.replaceSync(j);
-class S extends c {
+const S = ":host{display:block;box-sizing:border-box}slot[name=body-container]{min-height:100vh}#image-sticky-box{margin-top:-2.5em}", g = new CSSStyleSheet();
+g.replaceSync(S);
+class j extends p {
   constructor() {
     super(g), this.template = (t) => `
     <px-container border-radius="none" padding="none">
@@ -586,10 +607,10 @@ class S extends c {
     this.$headerContainer.paddingLeft = t, this.$headerContainer.paddingRight = t, this.$bodyContainer.paddingLeft = t, this.$bodyContainer.paddingRight = t, this.$contactContainer.paddingLeft = t, this.$contactContainer.paddingRight = t, this.$footerContainer.paddingLeft = t, this.$footerContainer.paddingRight = t, this.$imageContainer.paddingLeft = t, this.$imageContainer.paddingRight = t;
   }
 }
-customElements.get("px-page") === void 0 && customElements.define("px-page", S);
+customElements.get("px-page") === void 0 && customElements.define("px-page", j);
 export {
   C as HStack,
-  S as Page,
+  j as Page,
   $ as Spacer,
   l as Stack,
   A as VStack,

package/package.json

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