@proximus/lavender-light 1.4.4-alpha.9 → 1.4.4-beta.2

package/dist/lavender-light.es.js

@@ -3415,19 +3415,14 @@ class Modal extends HTMLElement {
       });
     }
     if (this.hasAttribute("openedby")) {
-      const $opener = document.querySelector(
-        `px-button#${this.getAttribute("openedby")}`
-      );
-      $opener == null ? void 0 : $opener.addEventListener("click", () => {
-        this.show();
-      });
+      this.addOpenListener();
     }
     if (this.hasAttribute("media-src")) {
       this.updateMediaSrc(this.getAttribute("media-src"));
     }
   }
   static get observedAttributes() {
-    return ["open", "status", "media-src"];
+    return ["open", "status", "media-src", "openedby"];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     switch (attrName) {
@@ -3440,6 +3435,9 @@ class Modal extends HTMLElement {
       case "media-src":
         this.updateMediaSrc(newValue);
         break;
+      case "openedby":
+        this.addOpenListener();
+        break;
     }
   }
   handleOpenChange() {
@@ -3503,12 +3501,30 @@ class Modal extends HTMLElement {
   updateMediaSrc(src) {
     this.$mediaContainer.style.backgroundImage = `url(${src})`;
   }
+  addOpenListener() {
+    var _a, _b, _c;
+    if (((_a = this.$opener) == null ? void 0 : _a.getAttribute("data-has-opener")) !== "true") {
+      (_b = this.$opener) == null ? void 0 : _b.setAttribute("data-has-opener", "true");
+      (_c = this.$opener) == null ? void 0 : _c.addEventListener("click", () => this.show());
+    }
+  }
+  get $opener() {
+    return document.querySelector(
+      `px-button#${this.getAttribute("openedby")}`
+    );
+  }
   get status() {
     return this.getAttribute("status");
   }
   set status(value) {
     this.setAttribute("status", value);
   }
+  get openedby() {
+    return this.getAttribute("openedby");
+  }
+  set openedby(value) {
+    this.setAttribute("openedby", value);
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -5515,20 +5531,20 @@ const _ContentHeader = class _ContentHeader extends PxElement {
   }
   createGridding(value) {
     const breakpoints = [
-      { prop: "hasGridding", gridAttr: "grid-cols", attr: "col-span" },
+      { prop: "hasGridding", gridProp: "gridCols", attr: "col-span" },
       {
         prop: "hasGriddingMobile",
-        gridAttr: "grid-cols--mobile",
+        gridProp: "gridColsMobile",
         attr: "col-span--mobile"
       },
       {
         prop: "hasGriddingTablet",
-        gridAttr: "grid-cols--tablet",
+        gridProp: "gridColsTablet",
         attr: "col-span--tablet"
       },
       {
         prop: "hasGriddingLaptop",
-        gridAttr: "grid-cols--laptop",
+        gridProp: "gridColsLaptop",
         attr: "col-span--laptop"
       }
     ];
@@ -5536,16 +5552,16 @@ const _ContentHeader = class _ContentHeader extends PxElement {
       "px-grid > px-container"
     );
     if (value !== null) {
-      breakpoints.forEach(({ prop, gridAttr, attr }) => {
+      breakpoints.forEach(({ prop, gridProp, attr }) => {
         if (this[prop]) {
-          this.$grid.setAttribute(gridAttr, "3");
-          spanElement == null ? void 0 : spanElement.setAttribute(attr, "2");
+          this.$grid[gridProp] = "3";
+          spanElement.setAttribute(attr, "2");
         }
       });
     } else {
-      breakpoints.forEach(({ gridAttr, attr }) => {
-        this.$grid.setAttribute(gridAttr, "1");
-        spanElement == null ? void 0 : spanElement.setAttribute(attr, "1");
+      breakpoints.forEach(({ gridProp, attr }) => {
+        this.$grid[gridProp] = "1";
+        spanElement.removeAttribute(attr);
       });
     }
   }