@sellmate/design-system 1.0.37 → 1.0.39

package/dist/collection/components/sd-modal-container/sd-modal-container.js

@@ -0,0 +1,399 @@
+import { h } from "@stencil/core";
+let modalIdCounter = 0;
+const ANIMATION_DURATION = 350;
+export class SdModalContainer {
+    el;
+    entries = [];
+    isVisible = false;
+    isBackdropVisible = false;
+    contentRef;
+    containerDismissTimerId;
+    handleKeydown(e) {
+        if (e.key === 'Escape') {
+            const top = this.getTopEntry();
+            if (!top)
+                return;
+            if (top.persistent) {
+                this.shakeModal(top.modalEl);
+                return;
+            }
+            this.requestDismiss(top.id, 'cancel');
+        }
+    }
+    async open(options, chain) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createConfirmModal(id, options);
+        if (this.containerDismissTimerId) {
+            clearTimeout(this.containerDismissTimerId);
+            this.containerDismissTimerId = undefined;
+        }
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.isVisible = true;
+        // Append after the container renders, then wait until the modal can paint before starting transitions.
+        requestAnimationFrame(() => {
+            if (this.contentRef) {
+                this.contentRef.appendChild(modalEl);
+                this.waitForModalReady(modalEl).then(() => {
+                    requestAnimationFrame(() => {
+                        const currentEntry = (this.entries ?? []).find(item => item.id === id);
+                        if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
+                            return;
+                        this.isBackdropVisible = true;
+                        modalEl.classList.add('sd-modal-container__modal--visible');
+                    });
+                });
+            }
+        });
+        return id;
+    }
+    async openNotice(options, chain) {
+        const id = `modal-${++modalIdCounter}`;
+        const modalEl = this.createNoticeModal(id, options);
+        if (this.containerDismissTimerId) {
+            clearTimeout(this.containerDismissTimerId);
+            this.containerDismissTimerId = undefined;
+        }
+        this.entries = [...(this.entries ?? []), { id, modalEl, chain, persistent: !!options.persistent, closing: false }];
+        this.isVisible = true;
+        requestAnimationFrame(() => {
+            if (this.contentRef) {
+                this.contentRef.appendChild(modalEl);
+                this.waitForModalReady(modalEl).then(() => {
+                    requestAnimationFrame(() => {
+                        const currentEntry = (this.entries ?? []).find(item => item.id === id);
+                        if (!currentEntry || currentEntry.closing || !modalEl.isConnected)
+                            return;
+                        this.isBackdropVisible = true;
+                        modalEl.classList.add('sd-modal-container__modal--visible');
+                    });
+                });
+            }
+        });
+        return id;
+    }
+    async update(id, props) {
+        const entry = (this.entries ?? []).find(e => e.id === id);
+        if (!entry || entry.closing)
+            return;
+        this.applyProps(entry.modalEl, props);
+    }
+    createConfirmModal(id, options) {
+        const el = document.createElement('sd-confirm-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyProps(el, options);
+        el.addEventListener('sdConfirm', () => {
+            this.requestDismiss(id, 'confirm');
+        });
+        el.addEventListener('sdClose', () => {
+            this.requestDismiss(id, 'cancel');
+        });
+        return el;
+    }
+    applyProps(el, options) {
+        if (this.hasOwnProp(options, 'type'))
+            this.setAttr(el, 'type', options.type);
+        if (this.hasOwnProp(options, 'title'))
+            this.setAttr(el, 'modal-title', options.title);
+        if (this.hasOwnProp(options, 'titleClass'))
+            this.setAttr(el, 'title-class', options.titleClass);
+        if (this.hasOwnProp(options, 'mainButtonLabel')) {
+            this.setAttr(el, 'main-button-label', options.mainButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'mainButtonName')) {
+            this.setAttr(el, 'main-button-name', options.mainButtonName);
+        }
+        if (this.hasOwnProp(options, 'subButtonLabel')) {
+            this.setAttr(el, 'sub-button-label', options.subButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'tagPreset'))
+            this.setAttr(el, 'tag-preset', options.tagPreset);
+        if (this.hasOwnProp(options, 'tagLabel'))
+            this.setAttr(el, 'tag-label', options.tagLabel);
+        if (this.hasOwnProp(options, 'slotLabel'))
+            this.setAttr(el, 'slot-label', options.slotLabel);
+        if (this.hasOwnProp(options, 'topMessage'))
+            el.topMessage = options.topMessage ?? [];
+        if (this.hasOwnProp(options, 'bottomMessage'))
+            el.bottomMessage = options.bottomMessage ?? [];
+        if (this.hasOwnProp(options, 'tagContents'))
+            el.tagContents = options.tagContents;
+    }
+    createNoticeModal(id, options) {
+        const el = document.createElement('sd-notice-modal');
+        el.setAttribute('data-modal-id', id);
+        el.classList.add('sd-modal-container__modal');
+        this.applyNoticeProps(el, options);
+        el.addEventListener('sdConfirm', () => {
+            this.requestDismiss(id, 'confirm');
+        });
+        el.addEventListener('sdClose', () => {
+            this.requestDismiss(id, 'cancel');
+        });
+        return el;
+    }
+    applyNoticeProps(el, options) {
+        if (this.hasOwnProp(options, 'title'))
+            this.setAttr(el, 'modal-title', options.title);
+        if (this.hasOwnProp(options, 'titleClass'))
+            this.setAttr(el, 'title-class', options.titleClass);
+        if (this.hasOwnProp(options, 'mainButtonLabel')) {
+            this.setAttr(el, 'main-button-label', options.mainButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'subButtonLabel')) {
+            this.setAttr(el, 'sub-button-label', options.subButtonLabel);
+        }
+        if (this.hasOwnProp(options, 'tagPreset'))
+            this.setAttr(el, 'tag-preset', options.tagPreset);
+        if (this.hasOwnProp(options, 'tagLabel'))
+            this.setAttr(el, 'tag-label', options.tagLabel);
+        if (this.hasOwnProp(options, 'slotLabel'))
+            this.setAttr(el, 'slot-label', options.slotLabel);
+        if (this.hasOwnProp(options, 'topMessage'))
+            el.topMessage = options.topMessage ?? [];
+        if (this.hasOwnProp(options, 'bottomMessage'))
+            el.bottomMessage = options.bottomMessage ?? [];
+        if (this.hasOwnProp(options, 'tagContents'))
+            el.tagContents = options.tagContents;
+    }
+    handleBackdropClick = () => {
+        const top = this.getTopEntry();
+        if (!top)
+            return;
+        if (top.persistent) {
+            this.shakeModal(top.modalEl);
+            return;
+        }
+        this.requestDismiss(top.id, 'cancel');
+    };
+    shakeModal(modalEl) {
+        const cls = 'sd-modal-container__modal--shake';
+        modalEl.classList.remove(cls);
+        modalEl.addEventListener('animationend', () => modalEl.classList.remove(cls), { once: true });
+        requestAnimationFrame(() => {
+            modalEl.classList.add(cls);
+        });
+    }
+    disconnectedCallback() {
+        (this.entries ?? []).forEach(entry => {
+            if (entry.dismissTimerId)
+                clearTimeout(entry.dismissTimerId);
+        });
+        if (this.containerDismissTimerId)
+            clearTimeout(this.containerDismissTimerId);
+    }
+    getTopEntry() {
+        return [...(this.entries ?? [])].reverse().find(entry => !entry.closing);
+    }
+    requestDismiss(id, reason) {
+        const entry = (this.entries ?? []).find(item => item.id === id);
+        if (!entry || entry.closing)
+            return;
+        entry.modalEl.classList.remove('sd-modal-container__modal--visible');
+        // fade out backdrop simultaneously if this is the last active modal
+        const remainingActive = (this.entries ?? []).filter(item => item.id !== id && !item.closing);
+        if (remainingActive.length === 0) {
+            this.isBackdropVisible = false;
+        }
+        const dismissTimerId = setTimeout(() => {
+            this.finalizeDismiss(id);
+        }, ANIMATION_DURATION);
+        this.entries = (this.entries ?? []).map(item => item.id === id ? { ...item, closing: true, dismissTimerId } : item);
+        if (reason === 'confirm')
+            entry.chain._triggerOk();
+        if (reason === 'cancel')
+            entry.chain._triggerCancel();
+    }
+    finalizeDismiss(id) {
+        const entry = (this.entries ?? []).find(item => item.id === id);
+        if (!entry)
+            return;
+        if (entry.dismissTimerId)
+            clearTimeout(entry.dismissTimerId);
+        entry.modalEl.remove();
+        const nextEntries = (this.entries ?? []).filter(item => item.id !== id);
+        this.entries = nextEntries;
+        if (nextEntries.length === 0) {
+            this.containerDismissTimerId = setTimeout(() => {
+                if ((this.entries ?? []).length === 0) {
+                    this.isVisible = false;
+                }
+                this.containerDismissTimerId = undefined;
+            }, ANIMATION_DURATION);
+        }
+    }
+    waitForModalReady(modalEl) {
+        const componentOnReady = modalEl.componentOnReady;
+        if (typeof componentOnReady === 'function') {
+            return componentOnReady.call(modalEl).then(() => undefined);
+        }
+        return new Promise(resolve => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => resolve());
+            });
+        });
+    }
+    hasOwnProp(options, key) {
+        return Object.prototype.hasOwnProperty.call(options, key);
+    }
+    setAttr(el, name, value) {
+        if (value == null)
+            return;
+        el.setAttribute(name, value);
+    }
+    render() {
+        if (!this.isVisible)
+            return null;
+        return (h("div", { class: "sd-modal-container" }, h("div", { class: {
+                'sd-modal-container__backdrop': true,
+                'sd-modal-container__backdrop--visible': this.isBackdropVisible,
+            }, onClick: this.handleBackdropClick }), h("div", { class: "sd-modal-container__content", ref: el => { this.contentRef = el; } })));
+    }
+    static get is() { return "sd-modal-container"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["sd-modal-container.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["sd-modal-container.css"]
+        };
+    }
+    static get states() {
+        return {
+            "entries": {},
+            "isVisible": {},
+            "isBackdropVisible": {}
+        };
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "(options: ConfirmModalOptions, chain: ModalDialogChainLike) => Promise<string>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "ConfirmModalOptions",
+                            "docs": ""
+                        }, {
+                            "name": "chain",
+                            "type": "ModalDialogChainLike",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ConfirmModalOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ConfirmModalOptions",
+                            "referenceLocation": "ConfirmModalOptions"
+                        },
+                        "ModalDialogChainLike": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
+                            "referenceLocation": "ModalDialogChainLike"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openNotice": {
+                "complexType": {
+                    "signature": "(options: NoticeModalOptions, chain: ModalDialogChainLike) => Promise<string>",
+                    "parameters": [{
+                            "name": "options",
+                            "type": "NoticeModalOptions",
+                            "docs": ""
+                        }, {
+                            "name": "chain",
+                            "type": "ModalDialogChainLike",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "NoticeModalOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::NoticeModalOptions",
+                            "referenceLocation": "NoticeModalOptions"
+                        },
+                        "ModalDialogChainLike": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ModalDialogChainLike",
+                            "referenceLocation": "ModalDialogChainLike"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "update": {
+                "complexType": {
+                    "signature": "(id: string, props: Partial<ConfirmModalOptions & NoticeModalOptions>) => Promise<void>",
+                    "parameters": [{
+                            "name": "id",
+                            "type": "string",
+                            "docs": ""
+                        }, {
+                            "name": "props",
+                            "type": "{ type?: ConfirmModalType | undefined; title?: string | undefined; titleClass?: string | undefined; topMessage?: string[] | undefined; bottomMessage?: string[] | undefined; mainButtonName?: ConfirmModalMainButton | undefined; mainButtonLabel?: string | undefined; subButtonLabel?: string | undefined; tagPreset?: \"square_xs_red\" | \"square_xs_orange\" | \"square_xs_yellow\" | \"square_xs_green\" | \"square_xs_blue\" | \"square_xs_darkblue\" | \"square_xs_indigo\" | \"square_xs_grey\" | \"square_sm_red\" | \"square_sm_orange\" | \"square_sm_yellow\" | \"square_sm_green\" | \"square_sm_blue\" | \"square_sm_darkblue\" | \"square_sm_indigo\" | \"square_sm_grey\" | \"square_md_red\" | \"square_md_orange\" | \"square_md_yellow\" | \"square_md_green\" | \"square_md_blue\" | \"square_md_darkblue\" | \"square_md_indigo\" | \"square_md_grey\" | \"pill_xs_red\" | \"pill_xs_orange\" | \"pill_xs_yellow\" | \"pill_xs_green\" | \"pill_xs_blue\" | \"pill_xs_darkblue\" | \"pill_xs_indigo\" | \"pill_xs_grey\" | \"pill_sm_red\" | \"pill_sm_orange\" | \"pill_sm_yellow\" | \"pill_sm_green\" | \"pill_sm_blue\" | \"pill_sm_darkblue\" | \"pill_sm_indigo\" | \"pill_sm_grey\" | \"pill_md_red\" | \"pill_md_orange\" | \"pill_md_yellow\" | \"pill_md_green\" | \"pill_md_blue\" | \"pill_md_darkblue\" | \"pill_md_indigo\" | \"pill_md_grey\" | undefined; tagLabel?: string | undefined; slotLabel?: string | undefined; tagContents?: HTMLElement | undefined; persistent?: boolean | undefined; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "ConfirmModalOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::ConfirmModalOptions",
+                            "referenceLocation": "ConfirmModalOptions"
+                        },
+                        "NoticeModalOptions": {
+                            "location": "import",
+                            "path": "./sd-modal-container.config",
+                            "id": "src/components/sd-modal-container/sd-modal-container.config.ts::NoticeModalOptions",
+                            "referenceLocation": "NoticeModalOptions"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeydown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/sd-notice-modal/sd-notice-modal.config.js

@@ -0,0 +1,3 @@
+import { CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, } from "../sd-confirm-modal/sd-confirm-modal.config";
+export const NOTICE_BUTTON_PRESET = 'neutral_outline_md';
+export { CLOSE_ICON_SIZE, CLOSE_ICON_COLOR, };

package/dist/collection/components/sd-notice-modal/sd-notice-modal.css

@@ -0,0 +1,61 @@
+sd-notice-modal {
+  display: block;
+  width: fit-content;
+  min-width: 520px;
+}
+sd-notice-modal .sd-notice-modal {
+  position: relative;
+  padding: var(--sd-modal-modal-padding-y) var(--sd-modal-modal-padding-x);
+  border-radius: var(--sd-modal-modal-radius);
+  box-shadow: 4px 4px 24px 4px rgba(0, 0, 0, 0.2);
+  background: var(--sd-modal-modal-bg);
+}
+sd-notice-modal .sd-notice-modal__close-button {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  cursor: pointer;
+}
+sd-notice-modal .sd-notice-modal__title {
+  color: var(--sd-modal-modal-title-color);
+  font-size: var(--sd-modal-modal-title-typography-font-size);
+  font-weight: var(--sd-modal-modal-title-typography-font-weight);
+  line-height: var(--sd-modal-modal-title-typography-line-height);
+  text-align: center;
+  margin: 0 0 var(--sd-modal-modal-body-gap) 0;
+}
+sd-notice-modal .sd-notice-modal__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sd-modal-modal-body-gap);
+}
+sd-notice-modal .sd-notice-modal__message-text {
+  color: var(--sd-modal-modal-message-color);
+  font-size: var(--sd-modal-modal-message-typography-font-size);
+  font-weight: var(--sd-modal-modal-message-typography-font-weight);
+  line-height: var(--sd-modal-modal-message-typography-line-height);
+  text-align: center;
+  margin: 0;
+}
+sd-notice-modal .sd-notice-modal__content-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid #e1e1e1;
+  border-radius: 8px;
+  background: white;
+}
+sd-notice-modal .sd-notice-modal__slot-label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: var(--sd-modal-modal-message-typography-line-height);
+  color: var(--sd-modal-modal-message-color);
+}
+sd-notice-modal .sd-notice-modal__button {
+  display: flex;
+  justify-content: center;
+  gap: var(--sd-modal-modal-button-gap);
+  margin-top: 32px;
+}