@proximus/lavender-light 1.4.5-alpha.9 → 1.4.5

package/dist/lavender-light.es.js

@@ -27,7 +27,7 @@ function getSupportedAttributeNames(htmlElementName) {
 }
 const commonStyleSheet = new CSSStyleSheet();
 commonStyleSheet.replaceSync(commonStyles);
-const PX_COMPONENT_DEBUG = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" && true;
+const PX_COMPONENT_DEBUG = typeof import.meta !== "undefined" && typeof __vite_import_meta_env__ !== "undefined" && false;
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
 }
@@ -35,9 +35,6 @@ function isComponentDebug() {
   return PX_COMPONENT_DEBUG;
 }
 function log(message) {
-  if (isComponentDebug()) {
-    console.error(message);
-  }
 }
 if (typeof window !== "undefined") {
   window.isComponentDebug = isComponentDebug;
@@ -3360,9 +3357,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 +3381,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 +3408,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 +3435,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 +3451,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 +3504,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,12 +3566,32 @@ 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) {
       this.$descriptionContainer.style.display = "none";
@@ -3568,6 +3630,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 +3650,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");
   }
@@ -5587,20 +5658,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"
       }
     ];
@@ -5608,16 +5679,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);
       });
     }
   }
@@ -5785,5 +5856,6 @@ export {
   Typography,
   contentAlignmentValues,
   gridColsValues,
-  itemsAlignmentValues
+  itemsAlignmentValues,
+  statusValues
 };