@proximus/lavender-modal 2.0.0-alpha.3 → 2.0.0-alpha.31

package/dist/Modal.d.ts

@@ -5,6 +5,7 @@ import '@proximus/lavender-icon';
 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 class Modal extends HTMLElement {
     template: string;
     constructor();
@@ -13,11 +14,17 @@ export declare class Modal extends HTMLElement {
     attributeChangedCallback(attrName: string, oldValue: string, newValue: string): void;
     handleOpenChange(): void;
     handleStatusChange(oldStatus: string, newStatus: string): void;
-    getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill";
+    getIcon(status: string): "checkmark_fill" | "exclamation_mark_fill" | "minus_fill" | "information_fill";
     show(): void;
     close(): void;
+    updateMediaSrc(src: string): void;
+    get status(): string;
+    set status(value: string);
     get $closeButton(): ButtonIcon;
-    get $statusIcon(): ButtonIcon;
+    get $statusIcon(): Icon;
+    get $mediaContainer(): HTMLDivElement;
+    get mediaSrc(): string;
+    set mediaSrc(value: string);
     get $container(): Element;
     get $iconContainer(): Element;
     get $dialog(): HTMLDialogElement;

package/dist/index.es.js

@@ -4,47 +4,49 @@ import "@proximus/lavender-layout";
 import "@proximus/lavender-icon";
 import "@proximus/lavender-heading";
 import "@proximus/lavender-paragraph";
-const n = "#container{width:1080px;display:block;border:0;border-radius:var(--px-radius-main);padding:var(--px-padding-m-desktop);background-color:var(--px-color-background-surface-default)}#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}::slotted(px-button-icon){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}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:90vh;overflow:auto}@media screen and (max-width: 1081px){#container{width:inherit;padding:var(--px-padding-m-mobile)}::slotted(px-button-icon){top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}", a = new CSSStyleSheet();
+const n = "*{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:1080px;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}#content-container{padding:var(--px-padding-m-mobile);flex-grow:1}#media-container{display:none}::slotted(px-button-icon){position:absolute;top:var(--px-padding-m-desktop);right:var(--px-padding-m-desktop)}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 screen and (max-width: 1081px){#container{width:inherit}#content-container{padding:var(--px-padding-m-mobile)}::slotted(px-button-icon){top:var(--px-padding-m-mobile);right:var(--px-padding-m-mobile)}}@media only screen and (min-width: 48em){::slotted(px-button-icon){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){:host([media-src]) #media-container{display:block;background-size:cover;background-position:center center;background-repeat:no-repeat;flex-basis:25em;flex-shrink:0}}@keyframes modalIn{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}", a = new CSSStyleSheet();
 a.replaceSync(n);
 const c = "px.lavender.modal.close";
-class l extends HTMLElement {
+class d extends HTMLElement {
   constructor() {
     super(), this.template = ` <dialog>
     <div id="container">
-      <px-vstack gap="default" >
-        <px-hstack id="icon-container" gap="s" align-items="flex-start">
-          ${this.getAttribute("status") ? `<px-icon size="l" name="checkmark_fill" from="lavender" color="purpose-${this.getAttribute("status")}"></px-icon>` : ""}
-
-          <px-vstack gap="s">
-            <px-h1 variant="title-l">
-              <slot name="title"></slot>
-            </px-h1>
-            <px-p font-weight="title">
-              <slot name="description"></slot>
-            </px-p>
-          </px-vstack>
-        </px-hstack>
-        <div id="content">
-          <slot></slot>
-        </div>
-        <px-separator size="m"></px-separator>
-        <px-stack
-          gap="s"
-          justify-content="flex-end"
-          align-items="center"
-          align-items--mobile="stretch"
-          direction="row"
-          direction--mobile="column-reverse"
-        >
-          <slot name="footer"></slot>
-        </px-stack>
-      </px-vstack>
-      <slot name="close-button"></slot>
+      <div id="content-container">
+        <px-vstack gap="default" >
+          <px-hstack id="icon-container" gap="s" align-items="flex-start">
+            <px-vstack gap="s">
+              <px-h1 variant="title-l">
+                <slot name="title"></slot>
+              </px-h1>
+              <px-p font-weight="title">
+                <slot name="description"></slot>
+              </px-p>
+            </px-vstack>
+          </px-hstack>
+          <div id="content">
+            <slot></slot>
+          </div>
+          <px-separator size="m"></px-separator>
+          <px-stack
+            gap="s"
+            justify-content="flex-end"
+            align-items="center"
+            align-items--mobile="stretch"
+            direction="row"
+            direction--mobile="column-reverse"
+          >
+            <slot name="footer"></slot>
+          </px-stack>
+        </px-vstack>
+        <slot name="close-button"></slot>
+      </div>
+      <div id="media-container">
+      </div>
     </div>
   </dialog>`, this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = this.template, this.shadowRoot.adoptedStyleSheets = [a];
   }
   connectedCallback() {
-    if (this.hasAttribute("open") && this.show(), this.handleStatusChange("notnull", this.getAttribute("status")), this.hasAttribute("closedby")) {
+    if (this.hasAttribute("open") && this.show(), this.hasAttribute("closedby")) {
       const t = document.querySelector(
         `#${this.getAttribute("closedby")}`
       );
@@ -60,9 +62,10 @@ class l extends HTMLElement {
         this.show();
       });
     }
+    this.hasAttribute("media-src") && this.updateMediaSrc(this.getAttribute("media-src"));
   }
   static get observedAttributes() {
-    return ["open", "status"];
+    return ["open", "status", "media-src"];
   }
   attributeChangedCallback(t, e, o) {
     switch (t) {
@@ -72,23 +75,26 @@ class l extends HTMLElement {
       case "status":
         this.handleStatusChange(e, o);
         break;
+      case "media-src":
+        this.updateMediaSrc(o);
+        break;
     }
   }
   handleOpenChange() {
     this.hasAttribute("open") ? this.show() : this.close();
   }
   handleStatusChange(t, e) {
-    var o, i, r;
-    if (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)
+    var o, s, r;
+    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)
       (o = this.$statusIcon) == null || o.remove();
     else if (t === null && e && !this.$statusIcon) {
-      const s = document.createElement("px-icon");
-      s.setAttribute("name", this.getIcon(e)), s.setAttribute("from", "lavender"), s.setAttribute("color", `purpose-${e}`), this.$iconContainer.appendChild(s);
+      const i = document.createElement("px-icon");
+      i.setAttribute("name", this.getIcon(e)), i.setAttribute("from", "lavender"), i.setAttribute("color", `purpose-${e}`), i.setAttribute("size", "l"), this.$iconContainer.prepend(i);
     } else
-      (i = this.$statusIcon) == null || i.setAttribute("name", this.getIcon(e)), (r = this.$statusIcon) == null || r.setAttribute("color", `purpose-${e}`);
+      (s = this.$statusIcon) == null || s.setAttribute("name", this.getIcon(e)), (r = this.$statusIcon) == null || r.setAttribute("color", `purpose-${e}`);
   }
   getIcon(t) {
-    return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : "minus_fill";
+    return t === "success" ? "checkmark_fill" : t === "warning" ? "exclamation_mark_fill" : t === "error" ? "minus_fill" : "information_fill";
   }
   show() {
     this.$dialog.showModal();
@@ -101,6 +107,15 @@ class l extends HTMLElement {
       })
     );
   }
+  updateMediaSrc(t) {
+    this.$mediaContainer.style.backgroundImage = `url(${t})`;
+  }
+  get status() {
+    return this.getAttribute("status");
+  }
+  set status(t) {
+    this.setAttribute("status", t);
+  }
   get $closeButton() {
     return this.shadowRoot.querySelector("px-button-icon");
   }
@@ -109,6 +124,15 @@ class l extends HTMLElement {
       "#icon-container > px-icon"
     );
   }
+  get $mediaContainer() {
+    return this.shadowRoot.querySelector("#media-container");
+  }
+  get mediaSrc() {
+    return this.getAttribute("media-src");
+  }
+  set mediaSrc(t) {
+    t === null ? this.removeAttribute("media-src") : this.setAttribute("media-src", t);
+  }
   get $container() {
     return this.shadowRoot.querySelector("#container");
   }
@@ -122,7 +146,7 @@ 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
 };

package/package.json

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