@proximus/lavender-drawer 1.4.3-beta.1 → 1.4.3-beta.3

package/dist/Drawer.d.ts

@@ -15,6 +15,8 @@ export declare class Drawer extends HTMLElement {
     show(): void;
     hide(): void;
     toggleFooterVisibility(): void;
+    addOpenListener(): void;
+    get $opener(): HTMLButtonElement;
     get $closeButton(): Icon;
     get $dialog(): HTMLDialogElement;
     get open(): boolean;
@@ -24,4 +26,6 @@ export declare class Drawer extends HTMLElement {
     set open(value: boolean);
     get ariaLabelCloseButton(): string;
     set ariaLabelCloseButton(value: string);
+    get openedby(): string;
+    set openedby(value: string);
 }

package/dist/index.es.js

@@ -50,15 +50,7 @@ class d extends HTMLElement {
         this.hide();
       });
     }
-    if (this.hasAttribute("openedby")) {
-      const e = document.querySelector(
-        `px-button#${this.getAttribute("openedby")}`
-      );
-      e == null || e.addEventListener("click", () => {
-        this.show();
-      });
-    }
-    this.$closeButton.addEventListener("click", () => {
+    this.hasAttribute("openedby") && this.addOpenListener(), this.$closeButton.addEventListener("click", () => {
       this.hide();
     }), this.toggleFooterVisibility(), (t = this.$slotFooter) == null || t.addEventListener(
       "slotchange",
@@ -66,15 +58,15 @@ class d extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "aria-label-close-button"];
+    return ["open", "aria-label-close-button", "openedby"];
   }
-  attributeChangedCallback(t, e, i) {
-    var a, o, r;
-    t === "open" ? i !== null ? this.show() : this.hide() : t === "aria-label-close-button" && (i ? (r = (o = this.$closeButton) == null ? void 0 : o.setAttribute) == null || r.call(
-      o,
+  attributeChangedCallback(t, e, o) {
+    var a, i, r;
+    t === "open" ? o !== null ? this.show() : this.hide() : t === "aria-label-close-button" ? o ? (r = (i = this.$closeButton) == null ? void 0 : i.setAttribute) == null || r.call(
+      i,
       "aria-label",
-      i || "Close drawer"
-    ) : (a = this.$closeButton) == null || a.removeAttribute("aria-label"));
+      o || "Close drawer"
+    ) : (a = this.$closeButton) == null || a.removeAttribute("aria-label") : t === "openedby" && this.addOpenListener();
   }
   disconnectedCallback() {
     var t;
@@ -99,6 +91,15 @@ class d extends HTMLElement {
   toggleFooterVisibility() {
     this.$slottedFooter ? this.$footer.style.display = "block" : this.$footer.style.display = "none";
   }
+  addOpenListener() {
+    var t, e, o;
+    ((t = this.$opener) == null ? void 0 : t.getAttribute("data-has-opener")) !== "true" && ((e = this.$opener) == null || e.setAttribute("data-has-opener", "true"), (o = this.$opener) == null || o.addEventListener("click", () => this.show()));
+  }
+  get $opener() {
+    return document.querySelector(
+      `px-button#${this.getAttribute("openedby")}`
+    );
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -128,6 +129,12 @@ class d extends HTMLElement {
   set ariaLabelCloseButton(t) {
     this.setAttribute("aria-label-close-button", t);
   }
+  get openedby() {
+    return this.getAttribute("openedby");
+  }
+  set openedby(t) {
+    this.setAttribute("openedby", t);
+  }
 }
 customElements.get("px-drawer") || customElements.define("px-drawer", d);
 export {

package/package.json

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