@sellmate/design-system 1.0.74 → 1.0.76

package/dist/esm/sd-modal-container.entry.js

@@ -11,10 +11,8 @@ const SdModalContainer = class {
     }
     get el() { return getElement(this); }
     autoRemove = false;
-    entry;
-    isVisible = false;
-    backdropVisible = false;
-    layerRef;
+    entries = [];
+    layerRefs = new Map();
     async open(options, modalRef) {
         const id = `modal-${++modalIdCounter}`;
         const modalEl = this.createConfirmModal(id, options);
@@ -25,6 +23,7 @@ const SdModalContainer = class {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -38,6 +37,7 @@ const SdModalContainer = class {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -52,91 +52,93 @@ const SdModalContainer = class {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
     componentDidRender() {
-        if (!this.entry || this.entry.closing || !this.layerRef)
+        if (!Array.isArray(this.entries))
             return;
-        if (this.entry.modalEl.isConnected)
-            return;
-        const { id, modalEl } = this.entry;
-        this.layerRef.appendChild(modalEl);
-        this.waitForModalReady(modalEl).then(() => {
-            requestAnimationFrame(() => {
-                if (!this.entry || this.entry.id !== id || this.entry.closing || !modalEl.isConnected)
-                    return;
-                this.backdropVisible = true;
-                modalEl.classList.add('sd-modal-container__modal--visible');
+        for (const entry of this.entries) {
+            if (entry.closing || entry.modalEl.isConnected)
+                continue;
+            const layerRef = this.layerRefs.get(entry.id);
+            if (!layerRef)
+                continue;
+            const { id, modalEl } = entry;
+            layerRef.appendChild(modalEl);
+            this.waitForModalReady(modalEl).then(() => {
+                requestAnimationFrame(() => {
+                    const current = this.entries.find(e => e.id === id);
+                    if (!current || current.closing || !modalEl.isConnected)
+                        return;
+                    this.entries = this.entries.map(e => e.id === id ? { ...e, backdropVisible: true } : e);
+                    modalEl.classList.add('sd-modal-container__modal--visible');
+                });
             });
-        });
+        }
     }
     disconnectedCallback() {
-        if (this.entry?.dismissTimerId)
-            clearTimeout(this.entry.dismissTimerId);
-        if (this.entry)
-            unregisterModal(this.entry.id);
+        for (const entry of this.entries ?? []) {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+            unregisterModal(entry.id);
+        }
     }
     async dismissById(id, reason) {
-        if (this.entry?.id !== id)
+        const entry = this.entries.find(e => e.id === id);
+        if (!entry)
             return;
-        this.requestDismiss(reason);
+        this.requestDismiss(id, reason);
     }
     async update(id, props) {
-        if (!this.entry || this.entry.id !== id || this.entry.closing)
+        const entry = this.entries.find(e => e.id === id && !e.closing);
+        if (!entry)
             return;
-        const tag = this.entry.modalEl.tagName.toLowerCase();
+        const tag = entry.modalEl.tagName.toLowerCase();
         if (tag === 'sd-loading-modal') {
-            this.applyLoadingProps(this.entry.modalEl, props);
+            this.applyLoadingProps(entry.modalEl, props);
             return;
         }
-        this.applyProps(this.entry.modalEl, props);
+        this.applyProps(entry.modalEl, props);
     }
     mountEntry(entry) {
-        if (this.entry) {
-            throw new Error('[sd-modal-container] This instance already manages an active modal.');
-        }
-        this.entry = entry;
-        this.backdropVisible = false;
-        this.isVisible = true;
+        this.entries = [...(this.entries ?? []), entry];
         registerModal({
             id: entry.id,
             persistent: entry.persistent,
-            requestClose: () => this.dispatchClose(),
+            requestClose: () => this.dispatchClose(entry.id),
             shake: () => this.shakeModal(entry.modalEl),
             setZIndex: zIndex => {
                 this.el.style.setProperty('--sd-modal-container-z-index', String(zIndex));
             },
         });
     }
-    attachModalEventListeners(_id, modalEl) {
-        modalEl.addEventListener('sdOk', () => this.requestDismiss('confirm'));
-        modalEl.addEventListener('sdCancel', () => this.requestDismiss('cancel'));
-        modalEl.addEventListener('sdClose', () => this.requestDismiss('close'));
+    attachModalEventListeners(id, modalEl) {
+        modalEl.addEventListener('sdOk', () => this.requestDismiss(id, 'confirm'));
+        modalEl.addEventListener('sdCancel', () => this.requestDismiss(id, 'cancel'));
+        modalEl.addEventListener('sdClose', () => this.requestDismiss(id, 'close'));
     }
-    attachLoadingModalEventListeners(_id, modalEl) {
+    attachLoadingModalEventListeners(id, modalEl) {
         modalEl.addEventListener('sdClick', () => {
-            this.entry?.modalRef._triggerClick?.();
+            const entry = this.entries.find(e => e.id === id);
+            entry?.modalRef._triggerClick?.();
         });
     }
-    dispatchClose() {
-        this.entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
+    dispatchClose(id) {
+        const entry = this.entries.find(e => e.id === id);
+        entry?.modalEl.dispatchEvent(new CustomEvent('sdClose'));
     }
-    requestDismiss(reason) {
-        const currentEntry = this.entry;
+    requestDismiss(id, reason) {
+        const currentEntry = this.entries.find(e => e.id === id);
         if (!currentEntry || currentEntry.closing)
             return;
         currentEntry.modalEl.classList.remove('sd-modal-container__modal--visible');
         const dismissTimerId = setTimeout(() => {
-            this.finalizeDismiss(currentEntry.id);
+            this.finalizeDismiss(id);
         }, ANIMATION_DURATION);
-        setModalInteractive(currentEntry.id, false);
-        this.entry = {
-            ...currentEntry,
-            closing: true,
-            dismissTimerId,
-        };
-        this.backdropVisible = false;
+        setModalInteractive(id, false);
+        this.entries = (this.entries ?? []).map(e => e.id === id ? { ...e, closing: true, dismissTimerId, backdropVisible: false } : e);
         if (reason === 'confirm')
             currentEntry.modalRef._triggerOk();
         else if (reason === 'cancel')
@@ -145,18 +147,17 @@ const SdModalContainer = class {
             currentEntry.modalRef._triggerClose();
     }
     finalizeDismiss(id) {
-        const currentEntry = this.entry;
-        if (!currentEntry || currentEntry.id !== id)
+        const currentEntry = this.entries.find(e => e.id === id);
+        if (!currentEntry)
             return;
         if (currentEntry.dismissTimerId)
             clearTimeout(currentEntry.dismissTimerId);
         currentEntry.modalEl.remove();
         unregisterModal(id);
         currentEntry.modalRef._triggerDismissed();
-        this.entry = undefined;
-        this.backdropVisible = false;
-        this.isVisible = false;
-        if (this.autoRemove) {
+        this.layerRefs.delete(id);
+        this.entries = (this.entries ?? []).filter(e => e.id !== id);
+        if (this.autoRemove && this.entries.length === 0) {
             this.el.remove();
         }
     }
@@ -177,8 +178,14 @@ const SdModalContainer = class {
     applyLoadingProps(el, options) {
         if (this.hasOwnProp(options, 'state'))
             this.setAttr(el, 'state', options.state);
-        if (this.hasOwnProp(options, 'message'))
-            this.setAttr(el, 'message', options.message);
+        if (this.hasOwnProp(options, 'message')) {
+            if (Array.isArray(options.message)) {
+                el.message = options.message;
+            }
+            else {
+                this.setAttr(el, 'message', options.message);
+            }
+        }
         if (this.hasOwnProp(options, 'useButton')) {
             if (options.useButton)
                 el.setAttribute('use-button', '');
@@ -224,11 +231,11 @@ const SdModalContainer = class {
         if (this.hasOwnProp(options, 'tagContents'))
             el.tagContents = options.tagContents;
     }
-    handleBackdropClick = () => {
-        if (!this.entry || !isTopInteractiveModal(this.entry.id))
+    handleBackdropClick(id) {
+        if (!isTopInteractiveModal(id))
             return;
-        requestCloseForModal(this.entry.id);
-    };
+        requestCloseForModal(id);
+    }
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
         modalEl.classList.remove(cls);
@@ -257,14 +264,15 @@ const SdModalContainer = class {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.isVisible || !this.entry)
+        if (!this.entries?.length)
             return null;
-        return (h("div", { class: "sd-modal-container" }, h("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
-                this.layerRef = el;
+        return (h("div", { class: "sd-modal-container" }, this.entries.map((entry, index) => (h("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index + 1) }, "data-modal-id": entry.id, ref: el => {
+                if (el)
+                    this.layerRefs.set(entry.id, el);
             } }, h("div", { class: {
                 'sd-modal-container__backdrop': true,
-                'sd-modal-container__backdrop--visible': this.backdropVisible,
-            }, onClick: this.handleBackdropClick }))));
+                'sd-modal-container__backdrop--visible': entry.backdropVisible,
+            }, onClick: () => this.handleBackdropClick(entry.id) }))))));
     }
 };
 SdModalContainer.style = sdModalContainerCss();