@proximus/lavender 1.4.7-alpha.4 → 1.4.7-alpha.6

package/dist/lavender.es.js

@@ -7873,7 +7873,7 @@ class CellRadio extends WithExtraAttributes {
   }
   connectedCallback() {
     var _a;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-cell-radio")) === this ? 0 : -1;
     this.role = "radio";
     if (this.internals) {
       this.internals.role = "radio";
@@ -9570,19 +9570,14 @@ class Drawer extends HTMLElement {
   connectedCallback() {
     var _a;
     this.toggleFooterVisibility = this.toggleFooterVisibility.bind(this);
-    if (!this.hasAttribute("showfrom")) {
-      this.setAttribute("showfrom", "bottom");
+    if (this.$opener) {
+      this.addOpenListener();
     }
-    if (this.hasAttribute("closedby")) {
-      const $closer = document.querySelector(
-        `#${this.getAttribute("closedby")}`
-      );
-      $closer == null ? void 0 : $closer.addEventListener("click", () => {
-        this.hide();
-      });
+    if (this.$closer) {
+      this.addCloseListener();
     }
-    if (this.hasAttribute("openedby")) {
-      this.addOpenListener();
+    if (!this.hasAttribute("showfrom")) {
+      this.setAttribute("showfrom", "bottom");
     }
     this.$closeButton.addEventListener("click", () => {
       this.hide();
@@ -9594,36 +9589,56 @@ class Drawer extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "aria-label-close-button", "openedby"];
+    return ["open", "aria-label-close-button", "openedby", "closedby"];
   }
-  attributeChangedCallback(name, oldValue, newValue) {
+  attributeChangedCallback(attrName, oldValue, newValue) {
     var _a, _b, _c;
-    if (name === "open") {
-      if (newValue !== null) {
-        this.show();
-      } else {
-        this.hide();
-      }
-    } else if (name === "aria-label-close-button") {
-      if (!newValue) {
-        (_a = this.$closeButton) == null ? void 0 : _a.removeAttribute("aria-label");
-      } else {
-        (_c = (_b = this.$closeButton) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(
-          _b,
-          "aria-label",
-          newValue || "Close drawer"
-        );
-      }
-    } else if (name === "openedby") {
-      this.addOpenListener();
+    switch (attrName) {
+      case "open":
+        if (newValue !== null) {
+          this.show();
+        } else {
+          this.hide();
+        }
+        break;
+      case "aria-label-close-button":
+        if (!newValue) {
+          (_a = this.$closeButton) == null ? void 0 : _a.removeAttribute("aria-label");
+        } else {
+          (_c = (_b = this.$closeButton) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(
+            _b,
+            "aria-label",
+            newValue || "Close drawer"
+          );
+        }
+        break;
+      case "openedby":
+        if (newValue !== oldValue) {
+          if (oldValue) {
+            const oldOpener = document.querySelector(`#${oldValue}`);
+            oldOpener == null ? void 0 : oldOpener.removeEventListener("click", () => this.show());
+          }
+          this.addOpenListener();
+        }
+        break;
+      case "closedby":
+        this.addCloseListener();
+        break;
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this.$slotFooter) == null ? void 0 : _a.removeEventListener(
       "slotchange",
       this.toggleFooterVisibility
     );
+    (_b = this.observer) == null ? void 0 : _b.disconnect();
+    if (this.$opener) {
+      this.$opener.removeEventListener("click", () => this.show());
+    }
+    if (this.$closer) {
+      this.$closer.removeEventListener("click", () => this.hide());
+    }
   }
   show() {
     var _a, _b;
@@ -9649,15 +9664,41 @@ class Drawer extends HTMLElement {
     }
   }
   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());
+    if (this.$opener) {
+      if (this.$opener.getAttribute("data-has-opener") !== "true") {
+        this.$opener.setAttribute("data-has-opener", "true");
+        this.$opener.addEventListener("click", () => this.show());
+      }
+    } else {
+      this.observer = new MutationObserver(() => {
+        if (this.$opener) {
+          this.observer.disconnect();
+          this.observer = null;
+          this.addOpenListener();
+        }
+      });
+      this.observer.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  addCloseListener() {
+    var _a;
+    if (this.$closer) {
+      (_a = this.$closer) == null ? void 0 : _a.addEventListener("click", () => {
+        this.hide();
+      });
     }
   }
   get $opener() {
     return document.querySelector(
-      `px-button#${this.getAttribute("openedby")}`
+      `#${this.getAttribute("openedby")}`
+    );
+  }
+  get $closer() {
+    return document.querySelector(
+      `#${this.getAttribute("closedby")}`
     );
   }
   get $closeButton() {
@@ -9687,10 +9728,10 @@ class Drawer extends HTMLElement {
       this.removeAttribute("open");
     }
   }
-  get ariaLabelCloseButton() {
+  get AriaLabelCloseButton() {
     return this.getAttribute("aria-label-close-button");
   }
-  set ariaLabelCloseButton(value) {
+  set AriaLabelCloseButton(value) {
     this.setAttribute("aria-label-close-button", value);
   }
   get openedby() {
@@ -9699,6 +9740,12 @@ class Drawer extends HTMLElement {
   set openedby(value) {
     this.setAttribute("openedby", value);
   }
+  get closedby() {
+    return this.getAttribute("closedby");
+  }
+  set closedby(value) {
+    this.setAttribute("closedby", value);
+  }
 }
 if (!customElements.get("px-drawer")) {
   customElements.define("px-drawer", Drawer);
@@ -12693,6 +12740,7 @@ class Modal extends HTMLElement {
     this.onOpenClick = () => this.show();
     this.onCloseClick = () => this.close();
     this.commandButtonCleanups = [];
+    this.opener = null;
     this.openerElement = null;
     this.closerElement = null;
     this.template = `<dialog>
@@ -12897,12 +12945,29 @@ class Modal extends HTMLElement {
   addOpenListener() {
     var _a;
     this.removeOpenListener();
-    this.openerElement = this.$opener;
-    (_a = this.openerElement) == null ? void 0 : _a.addEventListener("click", this.onOpenClick);
+    if (this.$opener) {
+      this.openerElement = this.$opener;
+      this.openerElement.addEventListener("click", this.onOpenClick);
+    } else {
+      (_a = this.opener) == null ? void 0 : _a.disconnect();
+      this.opener = new MutationObserver(() => {
+        if (this.$opener) {
+          this.opener.disconnect();
+          this.opener = null;
+          this.addOpenListener();
+        }
+      });
+      this.opener.observe(document.body, {
+        childList: true,
+        subtree: true
+      });
+    }
   }
   removeOpenListener() {
-    var _a;
-    (_a = this.openerElement) == null ? void 0 : _a.removeEventListener("click", this.onOpenClick);
+    var _a, _b;
+    (_a = this.opener) == null ? void 0 : _a.disconnect();
+    this.opener = null;
+    (_b = this.openerElement) == null ? void 0 : _b.removeEventListener("click", this.onOpenClick);
     this.openerElement = null;
   }
   addCloseListener(value) {
@@ -13829,7 +13894,7 @@ class SelectableBoxRadio extends WithExtraAttributes {
       this.internals.ariaChecked = `${this.checked}`;
     }
     this.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-selectable-box-radio")) === this ? 0 : -1;
     this.toggleFooterVisibility();
     this.$slotFooter.addEventListener(
       "slotchange",
@@ -16176,7 +16241,7 @@ class TileRadio extends WithExtraAttributes {
       this.internals.ariaChecked = `${this.checked}`;
     }
     this.ariaChecked = `${this.checked}`;
-    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.firstElementChild) === this ? 0 : -1;
+    this.tabIndex = ((_a = this.parentElement) == null ? void 0 : _a.querySelector("px-tile-radio")) === this ? 0 : -1;
     if (this.$slotPrefix) {
       const prefixImg = this.querySelector('px-img[slot="prefix"]');
       if (prefixImg) {