@proximus/lavender-layout 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/Spacer.d.ts

@@ -3,6 +3,7 @@ export declare class Spacer extends HTMLElement {
     private recheckHandle?;
     private isZeroSized;
     private growValue;
+    private isVertical;
     constructor();
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;

package/dist/index.es.js

@@ -366,7 +366,7 @@ class C extends l {
 customElements.get("px-hstack") || customElements.define("px-hstack", C);
 class $ extends HTMLElement {
   constructor() {
-    super(), this.isZeroSized = !1, this.growValue = "1";
+    super(), this.isZeroSized = !1, this.growValue = "1", this.isVertical = !1;
   }
   static get observedAttributes() {
     return ["grow"];
@@ -375,13 +375,9 @@ class $ extends HTMLElement {
     t === "grow" && (this.growValue = e || "1", this.isZeroSized || (this.style.flexGrow = this.growValue), this.scheduleRecheck());
   }
   connectedCallback() {
-    this.growValue = this.getAttribute("grow") || "1", this.style.flexGrow = this.growValue, this.resizeObserver = new ResizeObserver((t) => {
-      t.forEach((i) => {
-        this.handleSizeChange(
-          i.contentRect.width === 0 || i.contentRect.height === 0
-        );
-      });
-    }), this.resizeObserver.observe(this), this.scheduleRecheck();
+    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;
@@ -399,14 +395,11 @@ class $ extends HTMLElement {
     });
   }
   recalculateVisibility() {
-    if (!this.isConnected)
-      return;
-    this.style.display = "", this.style.flexGrow = this.growValue;
-    const t = this.getBoundingClientRect(), i = t.width === 0 || t.height === 0;
-    this.handleSizeChange(i);
+    this.isConnected && (this.style.display = "", this.style.flexGrow = this.growValue, this.handleSizeChange());
   }
-  handleSizeChange(t) {
-    this.isZeroSized !== t && (this.isZeroSized = t, this.updateParticipation());
+  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);

package/package.json

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