@proximus/lavender-light 2.0.0-alpha.46 → 2.0.0-alpha.48

package/dist/lavender-light.es.js

@@ -3360,9 +3360,15 @@ const styles$3 = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowr
 const styleSheet$1 = new CSSStyleSheet();
 styleSheet$1.replaceSync(styles$3);
 const CLOSE_EVENT = "px.lavender.modal.close";
+const statusValues = ["", "info", "success", "error", "warning"];
 class Modal extends HTMLElement {
   constructor() {
     super();
+    this.onOpenClick = () => this.show();
+    this.onCloseClick = () => this.close();
+    this.commandButtonCleanups = [];
+    this.openerElement = null;
+    this.closerElement = null;
     this.template = `<dialog>
     <div id="container">
       <div id="content-container">
@@ -3378,6 +3384,7 @@ class Modal extends HTMLElement {
             </px-vstack>
           </px-hstack>
           <div id="content">
+            <slot name="content"></slot>
             <slot></slot>
           </div>
           <px-separator size="m"></px-separator>
@@ -3404,18 +3411,14 @@ class Modal extends HTMLElement {
   }
   connectedCallback() {
     var _a, _b;
+    this.addEventListenersToCommandButtons();
     this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this);
     this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this);
     if (this.hasAttribute("open")) {
       this.show();
     }
     if (this.hasAttribute("closedby")) {
-      const $closer = document.querySelector(
-        `#${this.getAttribute("closedby")}`
-      );
-      $closer == null ? void 0 : $closer.addEventListener("click", () => {
-        this.close();
-      });
+      this.addCloseListener(this.getAttribute("closedby"));
     }
     if (this.hasAttribute("openedby")) {
       this.addOpenListener();
@@ -3435,7 +3438,7 @@ class Modal extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "status", "media-src", "openedby"];
+    return ["open", "status", "media-src", "openedby", "closedby", "id"];
   }
   attributeChangedCallback(attrName, oldValue, newValue) {
     switch (attrName) {
@@ -3451,14 +3454,49 @@ class Modal extends HTMLElement {
       case "openedby":
         this.addOpenListener();
         break;
+      case "closedby":
+        this.addCloseListener(newValue);
+        break;
+      case "id":
+        this.addEventListenersToCommandButtons();
+        break;
     }
   }
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
     (_a = this.$slotDescription) == null ? void 0 : _a.removeEventListener(
       "slotchange",
       this.toggleDescriptionVisibility
     );
+    (_b = this.$slotCloseButton) == null ? void 0 : _b.removeEventListener(
+      "slotchange",
+      this.toggleCloseButtonSafeArea
+    );
+    this.removeCommandButtonListeners();
+    this.removeOpenListener();
+    this.removeCloseListener();
+  }
+  addEventListenersToCommandButtons() {
+    this.removeCommandButtonListeners();
+    if (this.id) {
+      document.querySelectorAll(`[commandfor="${this.id}"]`).forEach(($clickable) => {
+        if ($clickable.getAttribute("command") === "show-modal") {
+          $clickable.addEventListener("click", this.onOpenClick);
+          this.commandButtonCleanups.push(
+            () => $clickable.removeEventListener("click", this.onOpenClick)
+          );
+        } else if ($clickable.getAttribute("command") === "close") {
+          $clickable.addEventListener("click", this.onCloseClick);
+          this.commandButtonCleanups.push(
+            () => $clickable.removeEventListener("click", this.onCloseClick)
+          );
+        }
+      });
+    }
+  }
+  removeCommandButtonListeners() {
+    this.commandButtonCleanups.forEach((cleanup) => cleanup());
+    this.commandButtonCleanups = [];
   }
   handleOpenChange() {
     if (this.hasAttribute("open")) {
@@ -3469,6 +3507,13 @@ class Modal extends HTMLElement {
   }
   handleStatusChange(oldStatus, newStatus) {
     var _a, _b, _c;
+    if (statusValues.includes(newStatus)) {
+      this.$titleContainer.setAttribute("color", `neutral`);
+    } else {
+      if (this.$titleContainer.hasAttribute("color")) {
+        this.$titleContainer.removeAttribute("color");
+      }
+    }
     if (newStatus === "info") {
       this.$container.classList.add("info");
     } else {
@@ -3524,11 +3569,31 @@ class Modal extends HTMLElement {
     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());
+    var _a;
+    this.removeOpenListener();
+    this.openerElement = this.$opener;
+    (_a = this.openerElement) == null ? void 0 : _a.addEventListener("click", this.onOpenClick);
+  }
+  removeOpenListener() {
+    var _a;
+    (_a = this.openerElement) == null ? void 0 : _a.removeEventListener("click", this.onOpenClick);
+    this.openerElement = null;
+  }
+  addCloseListener(value) {
+    var _a, _b;
+    if (value === "none") {
+      (_a = this.$dialog) == null ? void 0 : _a.setAttribute("closedby", "none");
     }
+    this.removeCloseListener();
+    if (value && value !== "none") {
+      this.closerElement = document.querySelector(`#${value}`);
+      (_b = this.closerElement) == null ? void 0 : _b.addEventListener("click", this.onCloseClick);
+    }
+  }
+  removeCloseListener() {
+    var _a;
+    (_a = this.closerElement) == null ? void 0 : _a.removeEventListener("click", this.onCloseClick);
+    this.closerElement = null;
   }
   toggleDescriptionVisibility() {
     if (!this.$slottedDescription) {
@@ -3568,6 +3633,9 @@ class Modal extends HTMLElement {
       'px-p[font-weight="title"]'
     );
   }
+  get $titleContainer() {
+    return this.shadowRoot.querySelector("px-h1");
+  }
   get $opener() {
     return document.querySelector(
       `px-button#${this.getAttribute("openedby")}`
@@ -3585,6 +3653,12 @@ class Modal extends HTMLElement {
   set openedby(value) {
     this.setAttribute("openedby", value);
   }
+  get closedby() {
+    return this.getAttribute("closedby");
+  }
+  set closedby(value) {
+    this.setAttribute("closedby", value);
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -5785,5 +5859,6 @@ export {
   Typography,
   contentAlignmentValues,
   gridColsValues,
-  itemsAlignmentValues
+  itemsAlignmentValues,
+  statusValues
 };