@sellmate/design-system 1.0.75 → 1.0.77

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var modalStack = require('./modal-stack-DucFLON7.js');
 
 const sdModalContainerCss = () => `sd-modal-container{display:block}sd-modal-container .sd-modal-container{position:fixed;inset:0;z-index:var(--sd-modal-container-z-index, 997);pointer-events:none}sd-modal-container .sd-modal-container__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}sd-modal-container .sd-modal-container__backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;transition:opacity 0.3s ease-out;pointer-events:none}sd-modal-container .sd-modal-container__backdrop--visible{opacity:1;pointer-events:auto}sd-modal-container .sd-modal-container__modal{position:relative;z-index:1;opacity:0;transform:scale(0);pointer-events:auto;transition:opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)}sd-modal-container .sd-modal-container__modal--visible{opacity:1;transform:scale(1)}sd-modal-container .sd-modal-container__modal--shake{animation:modal-shake 0.3s ease-out}@keyframes modal-shake{0%,100%{transform:scale(1)}25%{transform:scale(1.03)}50%{transform:scale(0.97)}75%{transform:scale(1.01)}}`;
@@ -13,10 +13,8 @@ const SdModalContainer = class {
     }
     get el() { return index.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);
@@ -27,6 +25,7 @@ const SdModalContainer = class {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -40,6 +39,7 @@ const SdModalContainer = class {
             modalRef,
             persistent: !!options.persistent,
             closing: false,
+            backdropVisible: false,
         });
         return id;
     }
@@ -54,91 +54,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)
-            modalStack.unregisterModal(this.entry.id);
+        for (const entry of this.entries ?? []) {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+            modalStack.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];
         modalStack.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);
-        modalStack.setModalInteractive(currentEntry.id, false);
-        this.entry = {
-            ...currentEntry,
-            closing: true,
-            dismissTimerId,
-        };
-        this.backdropVisible = false;
+        modalStack.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')
@@ -147,18 +149,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();
         modalStack.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();
         }
     }
@@ -179,8 +180,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', '');
@@ -226,11 +233,11 @@ const SdModalContainer = class {
         if (this.hasOwnProp(options, 'tagContents'))
             el.tagContents = options.tagContents;
     }
-    handleBackdropClick = () => {
-        if (!this.entry || !modalStack.isTopInteractiveModal(this.entry.id))
+    handleBackdropClick(id) {
+        if (!modalStack.isTopInteractiveModal(id))
             return;
-        modalStack.requestCloseForModal(this.entry.id);
-    };
+        modalStack.requestCloseForModal(id);
+    }
     shakeModal(modalEl) {
         const cls = 'sd-modal-container__modal--shake';
         modalEl.classList.remove(cls);
@@ -259,14 +266,15 @@ const SdModalContainer = class {
         el.setAttribute(name, value);
     }
     render() {
-        if (!this.isVisible || !this.entry)
+        if (!this.entries?.length)
             return null;
-        return (index.h("div", { class: "sd-modal-container" }, index.h("div", { class: "sd-modal-container__layer", "data-modal-id": this.entry.id, ref: el => {
-                this.layerRef = el;
+        return (index.h("div", { class: "sd-modal-container" }, this.entries.map((entry, index$1) => (index.h("div", { key: entry.id, class: "sd-modal-container__layer", style: { zIndex: String(index$1 + 1) }, "data-modal-id": entry.id, ref: el => {
+                if (el)
+                    this.layerRefs.set(entry.id, el);
             } }, index.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();

package/dist/cjs/sd-number-input.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Dptupbm0.js');
+var index = require('./index-CaGGRpd8.js');
 var index$1 = require('./index-BUvXpPc3.js');
 
 const numberInput = {
@@ -386,12 +386,12 @@ const SdNumberInput = class {
             '--sd-textinput-input-hint-typography-line-height': `${NUMBER_INPUT_HINT.typography.lineHeight}px`,
             '--sd-textinput-input-contents-gap': `${NUMBER_INPUT_CONTENTS_GAP}px`,
         };
-        return (index.h("sd-field", { key: 'a62a0abbef4e817173d3e627d61c36523c2db81a', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: 'd395366da25ef5ab333e4b314093a89e41519786', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'eb97c4c29165e6237064bbce54ea2031c756fe12', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: '7cd260e4356d320825a75350982174446b40e15c', name: "minus", size: iconSize, color: this.isDecrementDisabled()
+        return (index.h("sd-field", { key: '7f4012ec048ab69f3c6b241c7fc103fd798572ca', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, addonAlign: this.addonAlign, hint: this.hint, errorMessage: this.errorMessage, width: this.width, rules: this.rules, error: this.error, disabled: this.disabled, focused: this.focused, hovered: this.hovered, status: this.status, size: this.size, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, index.h("div", { key: '975c0800b1fd6e4ab3502fc966db8917fe60bb3e', class: "sd-number-input__content" }, this.useButton && (index.h("button", { key: 'f2a630109b883740362dd2946ceeeaa93bbfeb36', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--decrement", disabled: this.isDecrementDisabled(), onClick: this.handleDecrement, tabindex: -1 }, index.h("sd-icon", { key: 'dcd539c5035b1363edacadf7ed9c1096ef24714a', name: "minus", size: iconSize, color: this.isDecrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
-                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: 'a25c707b127f63239dbb92be5e9d569e1be58005', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '0dc0864a4434122a717041028c732aa5d370f65c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
+                : NUMBER_INPUT_STEPPER.icon.default }))), this.inputPrefix && (index.h("span", { key: '5acf113c5e60dd5f77fb1206a60d4b5ce14e2b7f', class: "sd-number-input__prefix" }, this.inputPrefix)), index.h("input", { key: '5dd0f9ba9643fce07de811b2a93c8763a3d84b2c', name: this.name, ref: el => (this.nativeEl = el), class: `sd-number-input__native ${this.inputClass}`, type: "text", inputMode: "numeric", value: this.displayValue, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, autofocus: this.autoFocus, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
                 textAlign: this.useButton ? 'center' : 'right',
                 ...this.inputStyle,
-            } }), this.inputSuffix && (index.h("span", { key: 'd31337cdacceb84ee6347a2c38210ad491667d2c', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '217fcbc2b75e76adb0ed969a719e632b5eb74b27', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: '48ff6d0417aadcd975a6863a0003e63ca525cdfd', name: "add", size: iconSize, color: this.isIncrementDisabled()
+            } }), this.inputSuffix && (index.h("span", { key: 'aa7e4dbb29d7e8de4e94f0411f2f4b622411a60a', class: "sd-number-input__suffix" }, this.inputSuffix)), this.useButton && (index.h("button", { key: '40deeadfcfe87cb61f09ee2959b6afb5757ff56b', type: "button", class: "sd-number-input__stepper sd-number-input__stepper--increment", disabled: this.isIncrementDisabled(), onClick: this.handleIncrement, tabindex: -1 }, index.h("sd-icon", { key: 'b8ffcbbf663bacb7249e696d3eabf8b9ac832ddc', name: "add", size: iconSize, color: this.isIncrementDisabled()
                 ? NUMBER_INPUT_STEPPER.icon.disabled
                 : NUMBER_INPUT_STEPPER.icon.default }))))));
     }