@proximus/lavender-light 1.2.0-alpha.35 → 1.2.0-alpha.39

package/dist/lavender-light.es.js

@@ -2285,17 +2285,41 @@ if (!customElements.get("px-hstack")) {
 class Spacer extends HTMLElement {
   constructor() {
     super();
+    this.isZeroSized = false;
+    this.growValue = `${1}`;
   }
   static get observedAttributes() {
     return ["grow"];
   }
   attributeChangedCallback(name, oldValue, newValue) {
     if (name === "grow") {
-      this.style.flexGrow = newValue;
+      this.growValue = newValue || `${1}`;
+      if (!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((entries) => {
+      entries.forEach((entry) => {
+        this.handleSizeChange(
+          entry.contentRect.width === 0 || entry.contentRect.height === 0
+        );
+      });
+    });
+    this.resizeObserver.observe(this);
+    this.scheduleRecheck();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    if (this.recheckHandle) {
+      cancelAnimationFrame(this.recheckHandle);
+      this.recheckHandle = void 0;
+    }
   }
   get grow() {
     return this.getAttribute("grow");
@@ -2303,6 +2327,41 @@ class Spacer extends HTMLElement {
   set grow(value) {
     this.setAttribute("grow", value);
   }
+  scheduleRecheck() {
+    if (this.recheckHandle) {
+      cancelAnimationFrame(this.recheckHandle);
+    }
+    this.recheckHandle = requestAnimationFrame(() => {
+      this.recheckHandle = void 0;
+      this.recalculateVisibility();
+    });
+  }
+  recalculateVisibility() {
+    if (!this.isConnected) {
+      return;
+    }
+    this.style.display = "";
+    this.style.flexGrow = this.growValue;
+    const rect = this.getBoundingClientRect();
+    const hasZeroSize = rect.width === 0 || rect.height === 0;
+    this.handleSizeChange(hasZeroSize);
+  }
+  handleSizeChange(hasZeroSize) {
+    if (this.isZeroSized === hasZeroSize) {
+      return;
+    }
+    this.isZeroSized = hasZeroSize;
+    this.updateParticipation();
+  }
+  updateParticipation() {
+    if (this.isZeroSized) {
+      this.style.display = "none";
+      this.style.flexGrow = `${0}`;
+    } else {
+      this.style.display = "";
+      this.style.flexGrow = this.growValue;
+    }
+  }
 }
 if (!customElements.get("px-spacer")) {
   customElements.define("px-spacer", Spacer);