@proximus/lavender-modal 2.0.0-alpha.46 → 2.0.0-alpha.47

package/dist/Modal.d.ts

@@ -6,13 +6,21 @@ import '@proximus/lavender-heading';
 import '@proximus/lavender-paragraph';
 import { type ButtonIcon } from '@proximus/lavender-button-icon';
 import { type Icon } from '@proximus/lavender-icon';
+export declare const statusValues: string[];
 export declare class Modal extends HTMLElement {
+    private onOpenClick;
+    private onCloseClick;
+    private commandButtonCleanups;
+    private openerElement;
+    private closerElement;
     template: string;
     constructor();
     connectedCallback(): void;
     static get observedAttributes(): string[];
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     disconnectedCallback(): void;
+    addEventListenersToCommandButtons(): void;
+    private removeCommandButtonListeners;
     handleOpenChange(): void;
     handleStatusChange(oldStatus: string, newStatus: string): void;
     getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill" | "information_fill";
@@ -20,6 +28,9 @@ export declare class Modal extends HTMLElement {
     close(): void;
     updateMediaSrc(src: string): void;
     addOpenListener(): void;
+    private removeOpenListener;
+    addCloseListener(value: string): void;
+    private removeCloseListener;
     toggleDescriptionVisibility(): void;
     toggleCloseButtonSafeArea(): void;
     get $slottedCloseButton(): HTMLSlotElement;
@@ -27,11 +38,14 @@ export declare class Modal extends HTMLElement {
     get $slottedDescription(): HTMLSlotElement;
     get $slotDescription(): HTMLSlotElement;
     get $descriptionContainer(): HTMLParagraphElement;
+    get $titleContainer(): HTMLHeadingElement;
     get $opener(): HTMLButtonElement;
     get status(): string;
     set status(value: string);
     get openedby(): string;
     set openedby(value: string);
+    get closedby(): string;
+    set closedby(value: string);
     get $closeButton(): ButtonIcon;
     get $statusIcon(): Icon;
     get $mediaContainer(): HTMLDivElement;

package/dist/index.es.js

@@ -6,10 +6,10 @@ import "@proximus/lavender-heading";
 import "@proximus/lavender-paragraph";
 const a = '*{box-sizing:border-box}#container{display:flex;flex-wrap:nowrap;font-family:var(--px-font-family);font-size:var(--px-font-size-base);color:var(--px-color-text-neutral-default);width:inherit;border-radius:var(--px-radius-main);background-color:var(--px-color-background-surface-default);overflow:hidden}#container.info{border-left:5px var(--px-color-icon-brand-default) solid}#container.success{border-left:5px var(--px-color-icon-purpose-success-default) solid}#container.warning{border-left:5px var(--px-color-icon-purpose-warning-default) solid}#container.error{border-left:5px var(--px-color-icon-purpose-error-default) solid}#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-mobile)))}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}dialog{background:transparent;border-radius:0;box-shadow:none;padding:0;border:0;box-sizing:border-box;transform:scale(.95);animation:modalIn .3s ease-out forwards}::backdrop{background:#0000004d;-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px)}#content{max-height:12.5em;overflow:auto}@media only screen and (min-width: 48em){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-tablet)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-tablet);right:var(--px-padding-m-tablet)}#content{max-height:25em}}@media only screen and (min-width: 64.0625em){#container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-laptop)))}::slotted(px-button-icon[slot="close-button"]){top:var(--px-padding-m-laptop);right:var(--px-padding-m-laptop)}:host([media-src]) #container.has-close-button #icon-container{max-width:100%}:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25em;flex-shrink:0}}@media screen and (min-width: 1118px){#container{width:1080px}}@media only screen and (min-width: 90.0625em){:host(:not([media-src])) #container.has-close-button #icon-container{max-width:calc(100% - (var(--px-size-m) + var(--px-spacing-s-desktop)))}::slotted(px-button-icon[slot="close-button"]){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}', r = new CSSStyleSheet();
 r.replaceSync(a);
-const c = "px.lavender.modal.close";
-class l extends HTMLElement {
+const l = "px.lavender.modal.close", c = ["", "info", "success", "error", "warning"];
+class d extends HTMLElement {
   constructor() {
-    super(), this.template = `<dialog>
+    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">
         <px-vstack gap="default" >
@@ -24,6 +24,7 @@ class l extends HTMLElement {
             </px-vstack>
           </px-hstack>
           <div id="content">
+            <slot name="content"></slot>
             <slot></slot>
           </div>
           <px-separator size="m"></px-separator>
@@ -47,15 +48,7 @@ class l extends HTMLElement {
   }
   connectedCallback() {
     var t, e;
-    if (this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this), this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this), this.hasAttribute("open") && this.show(), this.hasAttribute("closedby")) {
-      const o = document.querySelector(
-        `#${this.getAttribute("closedby")}`
-      );
-      o == null || o.addEventListener("click", () => {
-        this.close();
-      });
-    }
-    this.hasAttribute("openedby") && this.addOpenListener(), this.hasAttribute("media-src") && this.updateMediaSrc(this.getAttribute("media-src")), this.toggleDescriptionVisibility(), (t = this.$slotDescription) == null || t.addEventListener(
+    this.addEventListenersToCommandButtons(), this.toggleDescriptionVisibility = this.toggleDescriptionVisibility.bind(this), this.toggleCloseButtonSafeArea = this.toggleCloseButtonSafeArea.bind(this), this.hasAttribute("open") && this.show(), this.hasAttribute("closedby") && this.addCloseListener(this.getAttribute("closedby")), this.hasAttribute("openedby") && this.addOpenListener(), this.hasAttribute("media-src") && this.updateMediaSrc(this.getAttribute("media-src")), this.toggleDescriptionVisibility(), (t = this.$slotDescription) == null || t.addEventListener(
       "slotchange",
       this.toggleDescriptionVisibility
     ), this.toggleCloseButtonSafeArea(), (e = this.$slotCloseButton) == null || e.addEventListener(
@@ -64,7 +57,7 @@ class l extends HTMLElement {
     );
   }
   static get observedAttributes() {
-    return ["open", "status", "media-src", "openedby"];
+    return ["open", "status", "media-src", "openedby", "closedby", "id"];
   }
   attributeChangedCallback(t, e, o) {
     switch (t) {
@@ -80,21 +73,42 @@ class l extends HTMLElement {
       case "openedby":
         this.addOpenListener();
         break;
+      case "closedby":
+        this.addCloseListener(o);
+        break;
+      case "id":
+        this.addEventListenersToCommandButtons();
+        break;
     }
   }
   disconnectedCallback() {
-    var t;
+    var t, e;
     (t = this.$slotDescription) == null || t.removeEventListener(
       "slotchange",
       this.toggleDescriptionVisibility
-    );
+    ), (e = this.$slotCloseButton) == null || e.removeEventListener(
+      "slotchange",
+      this.toggleCloseButtonSafeArea
+    ), this.removeCommandButtonListeners(), this.removeOpenListener(), this.removeCloseListener();
+  }
+  addEventListenersToCommandButtons() {
+    this.removeCommandButtonListeners(), this.id && document.querySelectorAll(`[commandfor="${this.id}"]`).forEach((t) => {
+      t.getAttribute("command") === "show-modal" ? (t.addEventListener("click", this.onOpenClick), this.commandButtonCleanups.push(
+        () => t.removeEventListener("click", this.onOpenClick)
+      )) : t.getAttribute("command") === "close" && (t.addEventListener("click", this.onCloseClick), this.commandButtonCleanups.push(
+        () => t.removeEventListener("click", this.onCloseClick)
+      ));
+    });
+  }
+  removeCommandButtonListeners() {
+    this.commandButtonCleanups.forEach((t) => t()), this.commandButtonCleanups = [];
   }
   handleOpenChange() {
     this.hasAttribute("open") ? this.show() : this.close();
   }
   handleStatusChange(t, e) {
     var o, s, n;
-    if (e === "info" ? this.$container.classList.add("info") : this.$container.classList.remove("info"), e === "success" ? this.$container.classList.add("success") : this.$container.classList.remove("success"), e === "error" ? this.$container.classList.add("error") : this.$container.classList.remove("error"), e === "warning" ? this.$container.classList.add("warning") : this.$container.classList.remove("warning"), e === null && this.$statusIcon)
+    if (c.includes(e) ? this.$titleContainer.setAttribute("color", "neutral") : this.$titleContainer.hasAttribute("color") && this.$titleContainer.removeAttribute("color"), e === "info" ? this.$container.classList.add("info") : this.$container.classList.remove("info"), e === "success" ? this.$container.classList.add("success") : this.$container.classList.remove("success"), e === "error" ? this.$container.classList.add("error") : this.$container.classList.remove("error"), e === "warning" ? this.$container.classList.add("warning") : this.$container.classList.remove("warning"), e === null && this.$statusIcon)
       (o = this.$statusIcon) == null || o.remove();
     else if (t === null && e && !this.$statusIcon) {
       const i = document.createElement("px-icon");
@@ -110,7 +124,7 @@ class l extends HTMLElement {
   }
   close() {
     this.$dialog.close(), document.body.style.overflow = "", this.dispatchEvent(
-      new CustomEvent(c, {
+      new CustomEvent(l, {
         bubbles: !0,
         composed: !0
       })
@@ -120,8 +134,20 @@ class l extends HTMLElement {
     this.$mediaContainer.style.backgroundImage = `url(${t})`;
   }
   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()));
+    var t;
+    this.removeOpenListener(), this.openerElement = this.$opener, (t = this.openerElement) == null || t.addEventListener("click", this.onOpenClick);
+  }
+  removeOpenListener() {
+    var t;
+    (t = this.openerElement) == null || t.removeEventListener("click", this.onOpenClick), this.openerElement = null;
+  }
+  addCloseListener(t) {
+    var e, o;
+    t === "none" && ((e = this.$dialog) == null || e.setAttribute("closedby", "none")), this.removeCloseListener(), t && t !== "none" && (this.closerElement = document.querySelector(`#${t}`), (o = this.closerElement) == null || o.addEventListener("click", this.onCloseClick));
+  }
+  removeCloseListener() {
+    var t;
+    (t = this.closerElement) == null || t.removeEventListener("click", this.onCloseClick), this.closerElement = null;
   }
   toggleDescriptionVisibility() {
     this.$slottedDescription ? this.$descriptionContainer.style.display = "block" : this.$descriptionContainer.style.display = "none";
@@ -151,6 +177,9 @@ class l 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")}`
@@ -168,6 +197,12 @@ class l extends HTMLElement {
   set openedby(t) {
     this.setAttribute("openedby", t);
   }
+  get closedby() {
+    return this.getAttribute("closedby");
+  }
+  set closedby(t) {
+    this.setAttribute("closedby", t);
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -198,7 +233,8 @@ class l extends HTMLElement {
     return this.$dialog.open;
   }
 }
-customElements.get("px-modal") || customElements.define("px-modal", l);
+customElements.get("px-modal") || customElements.define("px-modal", d);
 export {
-  l as Modal
+  d as Modal,
+  c as statusValues
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proximus/lavender-modal",
-  "version": "2.0.0-alpha.46",
+  "version": "2.0.0-alpha.47",
   "description": "",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",