@sellmate/design-system 1.0.67 → 1.0.68

package/dist/collection/components/sd-table/sd-table.stories.helpers.js

@@ -0,0 +1,146 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, LitElement, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+// React/Vue의 useSdTableVirtualScroll과 동일 역할:
+// sd-table의 sdVirtualUpdate를 listen해서 vsStart..vsEnd 슬라이스만 슬롯에 꽂는다.
+// Storybook(lit-html)에는 그 역할을 할 reactive 호스트가 없어서 wrapper로 제공.
+//
+// declare + constructor 초기화 패턴: tsconfig가 target es2022라
+// class field가 native define으로 컴파일되어 lit의 accessor를 overwrite하는 문제를 회피.
+let StoryVirtualTable = class StoryVirtualTable extends LitElement {
+    static styles = css `
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+    tableRef = createRef();
+    detachListener;
+    syncRafId = 0;
+    constructor() {
+        super();
+        this.columns = [];
+        this.rows = [];
+        this.stickyColumn = { left: 0, right: 0 };
+        this.stickyHeader = false;
+        this.selectable = false;
+        this.resizable = false;
+        this.height = '480px';
+        this.width = '100%';
+        this.rowHeight = 44;
+        this.rowKey = 'id';
+        this.range = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.detachListener?.();
+        if (this.syncRafId)
+            cancelAnimationFrame(this.syncRafId);
+    }
+    firstUpdated() {
+        const el = this.tableRef.value;
+        if (!el)
+            return;
+        const onUpdate = (e) => {
+            const detail = e.detail;
+            this.range = { from: detail.from, to: detail.to };
+        };
+        el.addEventListener('sdVirtualUpdate', onUpdate);
+        this.detachListener = () => el.removeEventListener('sdVirtualUpdate', onUpdate);
+        const trySync = () => {
+            const r = el
+                .getVirtualScrollRangeSync?.();
+            if (r && typeof r.from === 'number' && typeof r.to === 'number') {
+                this.range = { from: r.from, to: r.to };
+            }
+            else {
+                this.syncRafId = requestAnimationFrame(trySync);
+            }
+        };
+        trySync();
+    }
+    render() {
+        const from = this.range?.from ?? 0;
+        const to = this.range?.to ?? 0;
+        const slice = this.range ? this.rows.slice(from, to) : [];
+        return html `
+      <sd-table
+        ${ref(this.tableRef)}
+        .columns=${this.columns}
+        .rows=${this.rows}
+        row-key=${this.rowKey}
+        ?selectable=${this.selectable}
+        ?resizable=${this.resizable}
+        ?sticky-header=${this.stickyHeader}
+        .stickyColumn=${this.stickyColumn}
+        width=${this.width}
+        height=${this.height}
+        ?use-virtual-scroll=${true}
+        row-height=${this.rowHeight}
+      >
+        <sd-thead></sd-thead>
+        <sd-tbody>
+          ${repeat(slice, (_row, i) => from + i, (row, i) => {
+            const absoluteIndex = from + i;
+            return html `
+                <sd-tr row-key=${String(absoluteIndex)} .row=${row}>
+                  ${this.renderRow ? this.renderRow(row, absoluteIndex) : nothing}
+                </sd-tr>
+              `;
+        })}
+        </sd-tbody>
+      </sd-table>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "columns", void 0);
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "rows", void 0);
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "stickyColumn", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'sticky-header' })
+], StoryVirtualTable.prototype, "stickyHeader", void 0);
+__decorate([
+    property({ type: Boolean })
+], StoryVirtualTable.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean })
+], StoryVirtualTable.prototype, "resizable", void 0);
+__decorate([
+    property()
+], StoryVirtualTable.prototype, "height", void 0);
+__decorate([
+    property()
+], StoryVirtualTable.prototype, "width", void 0);
+__decorate([
+    property({ type: Number, attribute: 'row-height' })
+], StoryVirtualTable.prototype, "rowHeight", void 0);
+__decorate([
+    property({ attribute: 'row-key' })
+], StoryVirtualTable.prototype, "rowKey", void 0);
+__decorate([
+    property({ attribute: false })
+], StoryVirtualTable.prototype, "renderRow", void 0);
+__decorate([
+    state()
+], StoryVirtualTable.prototype, "range", void 0);
+StoryVirtualTable = __decorate([
+    customElement('story-virtual-table')
+], StoryVirtualTable);
+export { StoryVirtualTable };

package/dist/collection/components/sd-table/sd-tbody/sd-tbody.js

@@ -41,7 +41,7 @@ export class SdTbody {
     }
     render() {
         const hasRows = this.rows.length > 0;
-        return (h(Host, { key: 'aaa6a5a3ae24728e004c769f8652c838f852aefc', slot: `${this.tableId}-body` }, h("tbody", { key: 'de2909b4fe23293abd69778aed02abdab4ee8120', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
+        return (h(Host, { key: '82a437ddf0cb3c34877b9dbcb47b5406c20a0c0e', slot: `${this.tableId}-body` }, h("tbody", { key: '0f0257720491c781eda0479fb0c08d7dffc4f734', class: { 'tbody': true, 'tbody--empty': !hasRows } }, hasRows ? ([
             this.topSpacerHeight > 0 && (h("tr", { key: "spacer-top", class: "tbody__spacer", style: { height: `${this.topSpacerHeight}px`, display: 'block' } })),
             h("slot", null),
             this.bottomSpacerHeight > 0 && (h("tr", { key: "spacer-bottom", class: "tbody__spacer", style: { height: `${this.bottomSpacerHeight}px`, display: 'block' } })),

package/dist/collection/components/sd-table/sd-td/sd-td.js

@@ -34,7 +34,7 @@ export class SdTd {
         }
     }
     render() {
-        return (h(Host, { key: '9fdf1f552785399ec47244f1d534d49070dd6fa1', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '845eddc0d15fd8bb2f2f93e146aa8fa1eb9d194f' })));
+        return (h(Host, { key: 'c6ddb546268b573694b827509ebdfe74fff8a15a', class: { [`align-${this.align}`]: Boolean(this.align) } }, h("slot", { key: '0b59fb8a0cfa1ef628f50496af96aa2f39fdc89a' })));
     }
     static get is() { return "sd-td"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-table/sd-thead/sd-thead.js

@@ -128,16 +128,16 @@ export class SdThead {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: '5ccdb84a8876df2af0d73424be3f5a7fdb1979a5', slot: `${this.tableId}-head` }, h("thead", { key: '6517b6f3baf56173f27b8194de7bd1de625ea304', class: {
+        return (h(Host, { key: '97badde9634e2e7363eace5a402fc49a587459c3', slot: `${this.tableId}-head` }, h("thead", { key: 'd1ce731f6082679d8d61f4b74ac122f28f344909', class: {
                 'thead': true,
                 'thead--sticky': this._stickyHeader,
-            } }, h("tr", { key: '8a9c268a3195376a8c9986411b29724896ff36d8', class: "tr" }, this._selectable && (h("th", { key: 'f0fae86684bbef173019ddb1dd23a5f57956fb04', class: {
+            } }, h("tr", { key: 'd0f8b1e8b8a7174cc9b39fabf782eddf2e2accaa', class: "tr" }, this._selectable && (h("th", { key: 'c422f5bd9f9a045785d2d91dd9e2dee6e8f91185', class: {
                 'th': true,
                 'th--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: 'cde120ec02f8bf03fa869eadbc0d91b4fde8e1ba', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '32cea740457b21d4d6fd53a8f1c10b505a24a481', value: this.getIsAllChecked(), disabled: !safeRows.length, onSdUpdate: (e) => this.handleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => (h("th", { key: col.name, class: {
                 'th': true,
                 [`${col.thClass}`]: Boolean(col.thClass),
                 'sticky-left': true,

package/dist/collection/components/sd-table/sd-tr/sd-tr.js

@@ -123,13 +123,13 @@ export class SdTr {
         const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
         const middleCols = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
         const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
-        return (h(Host, { key: 'e0b035db61ba424f4a33cdb470c839cb23c696cc', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '224e8c360e01f81dee44d8c93f9e6724c3e87b4f', class: "tr" }, this._selectable && (h("td", { key: '34afbe37ae3f86054cc6151c31a9de4f20296aef', class: {
+        return (h(Host, { key: '3bc910f3afa801d7824eee2e73456ef152c7dc93', style: { display: this.isVisible ? '' : 'none' } }, h("tr", { key: '93b1f4113ae63aa1c0cf79addaa9e8d15c9e8287', class: "tr" }, this._selectable && (h("td", { key: '0caba47c216126f4b7407dfe26afb9f0c75f6450', class: {
                 'td': true,
                 'td--selected': true,
                 'sticky-left': true,
                 'sticky-left-edge': stickyLeftCount === 0,
                 'is-scrolled-left': stickyLeftCount === 0 && this._scrolledLeft,
-            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '29ad82d0b043964fdfc68cb250deddeda8029b39', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
+            }, style: { '--sticky-left-offset': '0px' } }, h("sd-checkbox", { key: '2e41b3902f489877b624266e588221698aaa8f12', value: this.isSelected(), onSdUpdate: () => this.handleSelect() }))), stickyLeftCols.map((col, idx) => (h("td", { key: col.name, class: {
                 'td': true,
                 [`td--${col.align || 'left'}`]: true,
                 'sticky-left': true,

package/dist/collection/components/sd-tabs/sd-tabs.js

@@ -39,7 +39,7 @@ export class SdTabs {
         return `square_xs_${color}`;
     }
     render() {
-        return (h("div", { key: '3ac46ee8a763ba5a4a566fb25d4e32366ff8288b', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
+        return (h("div", { key: '62ace36515932f8889fc35121b6a8cf98fd9a314', class: this.getContainerClasses() }, this.tabs.map((tab, index) => {
             const badgeName = this.getBadgeName(tab);
             return (h("div", { key: `tab-${index}`, class: this.getTabClasses(tab), "aria-label": tab.label || 'tab', onClick: () => this.handleTabClick(tab.value) }, h("span", { "data-label": tab.label, class: "sd-tabs__label" }, tab.label), tab.badge && h("sd-tag", { name: badgeName, label: tab.badge.toString() })));
         })));

package/dist/collection/components/sd-tag/sd-tag.js

@@ -19,7 +19,7 @@ export class SdTag {
     render() {
         const config = this.resolvedConfig;
         const iconNode = this.renderIcon(config.icon, config.iconSize);
-        return (h("span", { key: '773056b7cd351f05ec4c4b9fed8db790a8ab83d0', class: "sd-tag", style: {
+        return (h("span", { key: '3e3bf735f8d832e75f1061eac69ccd8972b9f40f', class: "sd-tag", style: {
                 '--sd-tag-background': config.background,
                 '--sd-tag-content': config.content,
                 '--sd-tag-height': config.height,
@@ -29,7 +29,7 @@ export class SdTag {
                 '--sd-tag-font-weight': config.fontWeight,
                 '--sd-tag-line-height': config.lineHeight,
                 '--sd-tag-radius': config.radius,
-            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: '6271ce5e0f6cda83e668119e846a18cee3db3a16', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
+            }, "aria-label": this.label || 'tag' }, this.icon && this.isLeft && iconNode, h("span", { key: 'a06237d1d29bb64b4b830294f5385a9b9b909624', class: "sd-tag__label" }, this.label), this.icon && !this.isLeft && iconNode));
     }
     static get is() { return "sd-tag"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-text-link/sd-text-link.js

@@ -26,16 +26,16 @@ export class SdTextLink {
             '--sd-text-link-text-decoration': typo.textDecoration,
             ...(this.disabled ? { '--sd-text-link-color': TEXT_LINK_COLORS.content.disabled } : {}),
         };
-        return (h("span", { key: '348dc67e12982d74cd3f8b02d8e02071ad074c3f', class: {
+        return (h("span", { key: 'c485091d0a9d7f8aa946ac54d96baab50bcaa3c7', class: {
                 'sd-text-link': true,
                 'sd-text-link--disabled': this.disabled,
-            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '26c20691fd307e58b59339cf3b4fc1f3aab8c668', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: 'a767802a3df9fc15f7523d811d7dc69cc77404a1', class: labelClassName }, this.label), this.useArrow && (h("span", { key: 'a831f73d04cdfb970dcb78740889b6c5b242b880', class: "sd-text-link__arrow", style: {
+            }, style: cssVars, onClick: this.handleClick }, this.icon && (h("sd-icon", { key: '98a2df9a2ba9b5d77eb73c0989cdf38383cfcd15', name: this.icon, size: TEXT_LINK_LAYOUT.iconSize, color: iconColor, class: "sd-text-link__icon" })), h("span", { key: '3c6867611e0d970855897b06f7e9368a8588ff76', class: labelClassName }, this.label), this.useArrow && (h("span", { key: '460bebf92782560d64e41b47ea9ef42b66cc08c0', class: "sd-text-link__arrow", style: {
                 width: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 height: `${TEXT_LINK_LAYOUT.arrowFrame}px`,
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
-            } }, h("sd-icon", { key: 'a87e70e4977a2392de9876eb27904737c61b9e23', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
+            } }, h("sd-icon", { key: 'fee7c74359e683829ad3fa802191b651aa9e94da', name: "chevronRight", size: TEXT_LINK_LAYOUT.arrowIconSize, color: arrowColor })))));
     }
     static get is() { return "sd-text-link"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-textarea/sd-textarea.js

@@ -104,7 +104,7 @@ export class SdTextarea {
             '--sd-system-size-field-sm-height': 'auto',
             '--sd-system-radius-field-sm': `${TEXTAREA_TOKENS.radius}px`,
         };
-        return (h("sd-field", { key: '6b2360f01a356db14659e1ebc53d8c4d8c4f671f', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'f43279ee861d3502c9130f1de0c47cba61ad0866', class: "sd-textarea__content" }, h("textarea", { key: '0600b577417019ae36a0daba637168ebc5685220', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
+        return (h("sd-field", { key: '4c93d887429d6790d2d49c951be64e4be1496fd4', name: this.name, label: this.label, labelWidth: this.labelWidth, addonLabel: this.addonLabel, 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, icon: this.icon, labelTooltip: this.labelTooltip, labelTooltipProps: this.labelTooltipProps, ref: el => (this.formField = el), onMouseEnter: () => (this.hovered = true), onMouseLeave: () => (this.hovered = false), style: cssVars }, h("div", { key: 'b64aa1b2f02c1f68db57e5e36e0a7146257629e1', class: "sd-textarea__content" }, h("textarea", { key: 'b2baff1d99b9c2347f0b0bb751fc51268d2c48c7', name: this.name, ref: el => (this.nativeEl = el), class: `sd-textarea__native ${this.textareaClass}`, value: this.internalValue || '', placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, autofocus: this.autoFocus, maxLength: this.maxLength, rows: this.rows, spellcheck: this.spellcheck, onInput: this.handleInput, onFocus: event => this.handleFocus('focus', event), onBlur: event => this.handleFocus('blur', event), style: this.textareaStyle }))));
     }
     static get is() { return "sd-textarea"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast/sd-toast.js

@@ -11,10 +11,10 @@ export class SdToast {
     render() {
         const typeConfig = TOAST_TYPE_CONFIG[this.type] ?? TOAST_TYPE_CONFIG.default;
         const iconSize = Number(TOAST_LAYOUT.iconSize);
-        return (h("div", { key: '0ae35299510680fdb91dcb7c6ef841cba1287c1a', style: {
+        return (h("div", { key: 'a041d5561d09ef56f4afd722e141b0a2e3a9453f', style: {
                 '--sd-toast-bg': typeConfig.bg,
                 '--sd-toast-text': typeConfig.content,
-            } }, h("div", { key: 'c0b4fb4e820e7e2435ce5516cebab1c3132dfe75', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '7c0b531a069b6fde7895b886603ceaf54f0a0a50', class: "sd-toast__icon" }, h("sd-icon", { key: '059de7e478b66a7e12c3e0560341311333e83b90', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '46911d81bc1cd24b541b6da71ec45a90237ea5a9', class: "sd-toast__content" }, h("span", { key: 'e5e80c82cda36042ad078bf35d2fdcf1d8556497', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '95882e33b93d391fc00a92540c5f85d1235c0b8a', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: 'e65eede91a5160ec3a0f4cab9f1f4bb02dc695f3', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
+            } }, h("div", { key: 'bf2a397484ec5938c0442ee0ee98f0ce00ad1ec0', class: "sd-toast", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.icon && (h("div", { key: '4ea8468b31909e3aea1a293c393621e1815dea5c', class: "sd-toast__icon" }, h("sd-icon", { key: '407a0be71e36a6dca30f5cfb300f2c9ebf6b32c2', name: this.icon, size: iconSize, color: typeConfig.content }))), h("div", { key: '756ca54899ec4d6c3543f8fb1f681d09181674c9', class: "sd-toast__content" }, h("span", { key: 'f0e66dbd5e99bc3921a354ac51294a3c29fe9ea0', class: "sd-toast__message" }, this.message)), this.link && (h("a", { key: '9f4a1a938b7559b03d7dd824c7f2fdbcb093e6fe', href: this.link, class: "sd-toast__link", target: "_blank", rel: "noopener noreferrer" }, this.linkLabel || this.link)), this.useClose && (h("sd-ghost-button", { key: '03d64765901bc8a93f09642b09ae733fa9da0db4', class: "sd-toast__close", icon: "close", intent: this.type === 'caution' ? 'default' : 'inverse', ariaLabel: "close", size: "xs", onClick: () => this.close.emit() })))));
     }
     static get is() { return "sd-toast"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-toast-container/sd-toast-container.config.js

@@ -1,7 +1,7 @@
 export const DEFAULT_DURATION = 4000;
 export const DEFAULT_MAX_VISIBLE = 3;
 export const DEFAULT_GAP = 8;
-export const DEFAULT_Z_INDEX = 10000;
+export const DEFAULT_Z_INDEX = 999;
 export const TRANSITION_DURATION = 400;
 export const TRANSITION_FALLBACK_BUFFER = 100;
 export const COLLAPSED_SCALE_STEP = 0.05;

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

@@ -216,7 +216,7 @@ export class SdToastContainer {
         const activeToasts = toasts.filter(t => t.state !== 'exiting').reverse();
         const indexMap = new Map();
         activeToasts.forEach((t, i) => indexMap.set(t.id, i));
-        return (h("div", { key: '8a63cb5f1e62fea7f562eac000743bb59ec69fda', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
+        return (h("div", { key: '4660dd2f2626d391bbcca7da59e16e6c4204d80d', class: "sd-toast-container", style: this.getContainerStyles(), onMouseEnter: () => {
                 this.expanded = true;
                 this.pauseTimers();
             }, onMouseLeave: () => {

package/dist/collection/components/sd-toggle/sd-toggle.js

@@ -45,7 +45,7 @@ export class SdToggle {
             '--sd-toggle-content-select': TOGGLE_COLORS.content.select,
             '--sd-toggle-content-disabled': TOGGLE_COLORS.content.disabled,
         };
-        return (h("label", { key: 'ec38c0ca834e5208d2cc5eb1fc32f959eacbb46d', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '2b47036dbd0cb880a7b7973523c985ae13e0cf22', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
+        return (h("label", { key: '1e0864450b0447ec08643290d1050e4d0ee0c4a4', class: this.toggleClasses, style: cssVars, "aria-label": this.label || 'toggle' }, this.label, h("input", { key: '7e44e8569de24839c41e8c28f579923e3a837366', style: { display: 'none' }, type: "checkbox", onInput: this.handleChange })));
     }
     static get is() { return "sd-toggle"; }
     static get originalStyleUrls() {

package/dist/collection/components/sd-tooltip/sd-tooltip.js

@@ -81,14 +81,14 @@ export class SdTooltip {
         const toggleTooltip = () => (this.showTooltip = !this.showTooltip);
         const divTrigger = trigger === 'hover' ? hoverTrigger : this.label ? {} : { onClick: toggleTooltip };
         const buttonClickTrigger = trigger === 'click' && this.label ? { onSdClick: toggleTooltip } : {};
-        return (h(Fragment, { key: '097722e57d6a808193e8fc0d48cebc80ee13848a' }, h("div", { key: '92c6fd83098faec1cfa405ace12530d0cb408395', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: 'd05d011181a8c183690607c974208e708ccba184', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '281c3994d52fcd1d6194edd12bd64ac9a42f5e71', ref: el => (this.menuEl = el), class: {
+        return (h(Fragment, { key: 'aade7a4be8e9955ca4dc437845ee8de9d212fd61' }, h("div", { key: '332c4872541bea334c1f0b6f06de8a1789dc10b8', class: `sd-tooltip-trigger ${this.sdClass || ''}`, ...divTrigger }, this.label ? (h("sd-button", { ref: el => (this.buttonEl = el), label: this.label, icon: icon, size: this.buttonSize ?? 'sm', color: color, variant: this.buttonVariant ?? 'primary', class: "sd-tooltip", ...buttonClickTrigger })) : (h("sd-icon", { ref: el => (this.buttonEl = el), name: icon, size: this.iconSize ?? 12, color: color, class: "sd-tooltip" }))), this.showTooltip && (h("sd-floating-portal", { key: '96f19d91f765020ae5663f216011e2000617c9d1', parentRef: this.buttonEl, onSdClose: this.handleClose.bind(this), placement: placement, offset: this.tooltipOffset }, h("div", { key: '12c2f1fbf59dc1a790016da071805164b0426419', ref: el => (this.menuEl = el), class: {
                 'sd-floating-menu': true,
                 [`sd-floating-menu--${tooltipType}`]: true,
                 [`sd-floating-menu--${placement}`]: true,
             }, style: {
                 '--sd-floating-bg': typeConfig.bg,
                 '--sd-floating-content': typeConfig.content,
-            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: '87374c0a423bc037decdc820e118c65ea7b3f75f', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '9cdd8215849973011a2339ed80bfb2863b1e374e' })), h("div", { key: '4f764958e07a8b2ed0ea093609f5a42d86fa3f3c', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
+            }, onMouseEnter: () => this.show(), onMouseLeave: () => this.startHideTimer() }, h("i", { key: 'f69c0cb66d5be975f60bfa7cdbd46e0283d4af2b', class: `sd-floating-menu__arrow sd-floating-menu__arrow--${placement}` }, h(TooltipArrow, { key: '3fbc2c3baa903e80d525225ab1f1aa4b3ec6ad4b' })), h("div", { key: 'a2286ef4e9f5d6c1b1a26ea044ddf1051900c5a2', class: "sd-floating-menu__content", innerHTML: this.slotContentHTML }))))));
     }
     static get is() { return "sd-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/components/table-test/table-test.js

@@ -71,7 +71,7 @@ export class DataTable {
         return el.innerHTML;
     }
     render() {
-        return (h("div", { key: '6d2ff3676d082540cc70939363b0f07ff7252e8c', class: "table-wrapper" }, h("table", { key: '3995aead06dfce42ea4e918486b1473c1740b96e', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: '9cbe03cbe1f69d7546ba5037489d20d85bd4a534' }, h("tr", { key: '7ab64e3e3ef214a19a010501d3ec9778c5594990' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '660707fb4d5075b98698718e8cfa8ed903f3d1e2' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: '9aabf030b814c340b2f4a1d66644516ed320f31b', class: "templates-slot", hidden: true }, h("slot", { key: '532e40bf658706a99b57dc89c056d977db3e4d83' }))));
+        return (h("div", { key: 'eb6246d49bb46a1c2b2b9d93cff90e7c0d6788b4', class: "table-wrapper" }, h("table", { key: '584d752e51f252f2dd7a29868ae4300b55c47065', class: { 'data-table': true, 'bordered': this.bordered, 'striped': this.striped } }, h("thead", { key: 'fd35de9ad1cb79cf77ab9f7a806d2d7258d8b11b' }, h("tr", { key: '39a42d9fc76571aa5ef6073ec554471d5fd1b4c1' }, this.columns.map(column => (h("th", { key: column.field, style: { width: column.width } }, this.renderHeaderContent(column)))))), h("tbody", { key: '5c3a2b5853f619666b20145e0f7a221c75969071' }, this.rows.map((row, rowIndex) => (h("tr", { key: rowIndex }, this.columns.map(column => (h("td", { key: `${rowIndex}-${column.field}` }, this.renderCellContent(column, row, rowIndex))))))))), h("div", { key: 'bbbd15c2d1b517774340dbcdfb59338f260df21b', class: "templates-slot", hidden: true }, h("slot", { key: '28733f09dd4a90976d9bb60102039981c736cf87' }))));
     }
     static get is() { return "table-test"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/modal-stack.js

@@ -0,0 +1,109 @@
+const DEFAULT_BASE_Z_INDEX = 997;
+let baseZIndex = DEFAULT_BASE_Z_INDEX;
+let entries = [];
+let bodyScrollLocked = false;
+let previousBodyOverflow = null;
+let isKeydownAttached = false;
+function isBrowserEnvironment() {
+    return typeof window !== 'undefined' && typeof document !== 'undefined';
+}
+function getTopInteractiveEntry() {
+    return [...entries].reverse().find(entry => entry.interactive);
+}
+function syncBodyScrollLock() {
+    if (!isBrowserEnvironment())
+        return;
+    const shouldLock = entries.length > 0;
+    if (shouldLock === bodyScrollLocked)
+        return;
+    if (shouldLock) {
+        previousBodyOverflow = document.body.style.overflow || '';
+        document.body.style.overflow = 'hidden';
+    }
+    else {
+        document.body.style.overflow = previousBodyOverflow ?? '';
+        previousBodyOverflow = null;
+    }
+    bodyScrollLocked = shouldLock;
+}
+function updateEntryZIndices() {
+    entries.forEach(entry => {
+        entry.setZIndex(baseZIndex);
+    });
+}
+function detachKeydownListener() {
+    if (!isBrowserEnvironment() || !isKeydownAttached)
+        return;
+    window.removeEventListener('keydown', handleWindowKeydown);
+    isKeydownAttached = false;
+}
+function attachKeydownListener() {
+    if (!isBrowserEnvironment() || isKeydownAttached)
+        return;
+    window.addEventListener('keydown', handleWindowKeydown);
+    isKeydownAttached = true;
+}
+function syncGlobalState() {
+    updateEntryZIndices();
+    syncBodyScrollLock();
+    if (entries.length > 0)
+        attachKeydownListener();
+    else
+        detachKeydownListener();
+}
+function handleWindowKeydown(e) {
+    if (e.key !== 'Escape')
+        return;
+    const topEntry = getTopInteractiveEntry();
+    if (!topEntry)
+        return;
+    if (topEntry.persistent) {
+        topEntry.shake();
+        return;
+    }
+    topEntry.requestClose('close');
+}
+export function configureModalStack(options = {}) {
+    if (options.zIndex != null) {
+        baseZIndex = options.zIndex;
+    }
+    syncGlobalState();
+}
+export function registerModal(entry) {
+    entries = [
+        ...entries.filter(item => item.id !== entry.id),
+        {
+            ...entry,
+            interactive: true,
+        },
+    ];
+    syncGlobalState();
+}
+export function unregisterModal(id) {
+    entries = entries.filter(entry => entry.id !== id);
+    syncGlobalState();
+}
+export function setModalInteractive(id, interactive) {
+    entries = entries.map(entry => (entry.id === id ? { ...entry, interactive } : entry));
+    syncGlobalState();
+}
+export function isTopInteractiveModal(id) {
+    return getTopInteractiveEntry()?.id === id;
+}
+export function requestCloseForModal(id) {
+    const topEntry = getTopInteractiveEntry();
+    if (!topEntry || topEntry.id !== id)
+        return false;
+    if (topEntry.persistent) {
+        topEntry.shake();
+        return true;
+    }
+    topEntry.requestClose('close');
+    return true;
+}
+export function resetModalStackManagerForTests() {
+    entries = [];
+    baseZIndex = DEFAULT_BASE_Z_INDEX;
+    syncBodyScrollLock();
+    detachKeydownListener();
+}

package/dist/collection/utils/modal.js

@@ -1,3 +1,4 @@
+import { configureModalStack } from "./modal-stack";
 const MODAL_CONTAINER_TAG = 'sd-modal-container';
 const REASON_TO_CONTAINER = {
     ok: 'confirm',
@@ -84,21 +85,17 @@ class ModalDialogRefImpl {
         this.pendingActions = [];
         pendingActions.forEach(action => action());
     }
+    _setContainer(containerRef) {
+        this.containerRef = containerRef;
+    }
     runOrQueue(action) {
-        if (this.modalId) {
+        if (this.modalId && this.containerRef) {
             action();
             return;
         }
         this.pendingActions.push(action);
     }
 }
-let containerEl = null;
-function applyGlobalOptions(container, options) {
-    if (!options)
-        return;
-    if (options.zIndex != null)
-        container.style.setProperty('--sd-modal-container-z-index', String(options.zIndex));
-}
 function assertBrowserEnvironment() {
     if (typeof window === 'undefined' ||
         typeof document === 'undefined' ||
@@ -111,17 +108,13 @@ function assertModalContainerDefined() {
         throw new Error('[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.');
     }
 }
-function getContainer(options) {
+function createContainer() {
     assertBrowserEnvironment();
     assertModalContainerDefined();
-    if (containerEl && document.body.contains(containerEl)) {
-        applyGlobalOptions(containerEl, options);
-        return containerEl;
-    }
-    containerEl = document.createElement(MODAL_CONTAINER_TAG);
-    applyGlobalOptions(containerEl, options);
-    document.body.appendChild(containerEl);
-    return containerEl;
+    const container = document.createElement(MODAL_CONTAINER_TAG);
+    container.setAttribute('auto-remove', '');
+    document.body.appendChild(container);
+    return container;
 }
 async function whenReady(el) {
     await customElements.whenDefined(MODAL_CONTAINER_TAG);
@@ -136,13 +129,13 @@ async function whenReady(el) {
  * 시그니처가 바뀔 수 있습니다.
  */
 export function _createSdModalRef() {
-    const container = getContainer();
-    return new ModalDialogRefImpl('', container);
+    return new ModalDialogRefImpl('');
 }
 export function _attachSdModalWithRef(modalRef, input) {
     const { component, persistent } = input;
-    const container = getContainer();
+    const container = createContainer();
     const options = { persistent };
+    modalRef._setContainer(container);
     whenReady(container).then(async () => {
         const id = await container.createCustom(component, options, modalRef);
         modalRef._setId(id);
@@ -150,7 +143,7 @@ export function _attachSdModalWithRef(modalRef, input) {
 }
 export const sdModal = {
     confirm(options) {
-        const container = getContainer();
+        const container = createContainer();
         const modalRef = new ModalDialogRefImpl('', container);
         whenReady(container).then(async () => {
             const id = await container.open(options, modalRef);
@@ -168,7 +161,7 @@ export const sdModal = {
      *   로 에러 상태로 전환할 수 있습니다.
      */
     loading(options = {}) {
-        const container = getContainer();
+        const container = createContainer();
         const modalRef = new ModalDialogRefImpl('', container);
         whenReady(container).then(async () => {
             const id = await container.openLoading(options, modalRef);
@@ -182,6 +175,7 @@ export const sdModal = {
         return modalRef;
     },
     configure(options) {
-        getContainer(options);
+        assertBrowserEnvironment();
+        configureModalStack(options);
     },
 };

package/dist/components/index.js

@@ -1 +1 @@
-export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-CCHce_Dt.js";let n=null;function t(n,t){t&&(t.position&&n.setAttribute("position",t.position),null!=t.maxVisible&&n.setAttribute("max-visible",t.maxVisible+""),null!=t.defaultDuration&&n.setAttribute("default-duration",t.defaultDuration+""),null!=t.zIndex&&n.setAttribute("z-index",t.zIndex+""))}function e(e){return n&&document.body.contains(n)?(t(n,e),n):(n=document.createElement("sd-toast-container"),t(n,e),document.body.appendChild(n),n)}function o(n){return"function"==typeof n.create?Promise.resolve():new Promise((t=>{const e=()=>{"function"==typeof n.create?t():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const i={async create(n,t,s){const{globalOptions:i,...r}=s??{},c=e(i);return await o(c),c.create({message:n,type:t,...r})},async dismiss(t){if(n)return await o(n),n.dismiss(t)},async dismissAll(){if(n)return await o(n),n.dismissAll()},configure(n){e(n)}},c="sd-modal-container",u={ok:"confirm",cancel:"cancel",close:"close"};class d{modalId;okFn;cancelFn;closeFn;clickFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(n,t){this.modalId=n,this.containerRef=t}onOk(n){return this.okFn=n,this}onCancel(n){return this.cancelFn=n,this}onClose(n){return this.closeFn=n,this}onClick(n){return this.clickFn=n,this}onDismissed(n){return this.dismissedFn=n,this}update(n){return this.runOrQueue((()=>{this.containerRef.update?.(this.modalId,n)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(n="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const t=u[n];return this.runOrQueue((()=>{this.containerRef.dismissById?.(this.modalId,t)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(n){this.modalId=n;const t=[...this.pendingActions];this.pendingActions=[],t.forEach((n=>n()))}runOrQueue(n){this.modalId?n():this.pendingActions.push(n)}}let l=null;function m(n,t){t&&null!=t.zIndex&&n.style.setProperty("--sd-modal-container-z-index",t.zIndex+"")}function f(n){return function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}(),function(){if(!customElements.get(c))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}(),l&&document.body.contains(l)?(m(l,n),l):(l=document.createElement(c),m(l,n),document.body.appendChild(l),l)}async function h(n){if(await customElements.whenDefined(c),"function"==typeof n.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function w(){const n=f();return new d("",n)}function p(n,t){const{component:e,persistent:s}=t,o=f(),i={persistent:s};h(o).then((async()=>{const t=await o.createCustom(e,i,n);n._setId(t)}))}const y={confirm(n){const t=f(),e=new d("",t);return h(t).then((async()=>{const s=await t.open(n,e);e._setId(s)})),e},loading(n={}){const t=f(),e=new d("",t);return h(t).then((async()=>{const s=await t.openLoading(n,e);e._setId(s)})),e},create(n){const t=w();return p(t,n),t},configure(n){f(n)}},E="sd-loading-container";let C=null;async function k(n){const t=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(E))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),C&&document.body.contains(C)||(C=document.createElement(E),document.body.appendChild(C)),C);await customElements.whenDefined(E),n(t)}const A={show(n={}){k((t=>{t.show?.(n)}))},hide(){C&&k((n=>{n.hide?.()}))}};export{p as _attachSdModalWithRef,w as _createSdModalRef,A as sdLoading,y as sdModal,i as sdToast}
+export{g as getAssetPath,r as render,s as setAssetPath,a as setNonce,b as setPlatformOptions}from"./p-C0VkfKIA.js";import{c as t}from"./p-DRVnqiWc.js";let n=null;function e(t,n){n&&(n.position&&t.setAttribute("position",n.position),null!=n.maxVisible&&t.setAttribute("max-visible",n.maxVisible+""),null!=n.defaultDuration&&t.setAttribute("default-duration",n.defaultDuration+""),null!=n.zIndex&&t.setAttribute("z-index",n.zIndex+""))}function o(t){return n&&document.body.contains(n)?(e(n,t),n):(n=document.createElement("sd-toast-container"),e(n,t),document.body.appendChild(n),n)}function i(t){return"function"==typeof t.create?Promise.resolve():new Promise((n=>{const e=()=>{"function"==typeof t.create?n():requestAnimationFrame(e)};requestAnimationFrame(e)}))}const c={async create(t,n,e){const{globalOptions:s,...r}=e??{},c=o(s);return await i(c),c.create({message:t,type:n,...r})},async dismiss(t){if(n)return await i(n),n.dismiss(t)},async dismissAll(){if(n)return await i(n),n.dismissAll()},configure(t){o(t)}},u="sd-modal-container",d={ok:"confirm",cancel:"cancel",close:"close"};class l{modalId;okFn;cancelFn;closeFn;clickFn;dismissedFn;containerRef;pendingActions=[];dismissRequested=!1;constructor(t,n){this.modalId=t,this.containerRef=n}onOk(t){return this.okFn=t,this}onCancel(t){return this.cancelFn=t,this}onClose(t){return this.closeFn=t,this}onClick(t){return this.clickFn=t,this}onDismissed(t){return this.dismissedFn=t,this}update(t){return this.runOrQueue((()=>{this.containerRef.update?.(this.modalId,t)})),this}ok(){return this.dismiss("ok")}cancel(){return this.dismiss("cancel")}close(){return this.dismiss("close")}dismiss(t="close"){if(this.dismissRequested)return this;this.dismissRequested=!0;const n=d[t];return this.runOrQueue((()=>{this.containerRef.dismissById?.(this.modalId,n)})),this}_triggerOk(){this.okFn?.()}_triggerCancel(){this.cancelFn?.()}_triggerClose(){this.closeFn?.()}_triggerClick(){this.clickFn?.()}_triggerDismissed(){this.dismissedFn?.()}_setId(t){this.modalId=t;const n=[...this.pendingActions];this.pendingActions=[],n.forEach((t=>t()))}_setContainer(t){this.containerRef=t}runOrQueue(t){this.modalId&&this.containerRef?t():this.pendingActions.push(t)}}function m(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdModal] Browser APIs are unavailable. Use `sdModal` only on the client.")}function f(){m(),function(){if(!customElements.get(u))throw Error("[sdModal] `sd-modal-container` is not registered. Call `defineCustomElements(window)` before using `sdModal`.")}();const t=document.createElement(u);return t.setAttribute("auto-remove",""),document.body.appendChild(t),t}async function h(t){if(await customElements.whenDefined(u),"function"==typeof t.open)return Promise.resolve();throw Error("[sdModal] `sd-modal-container` is registered but not ready to open dialogs.")}function w(){return new l("")}function p(t,n){const{component:e,persistent:s}=n,o=f(),i={persistent:s};t._setContainer(o),h(o).then((async()=>{const n=await o.createCustom(e,i,t);t._setId(n)}))}const y={confirm(t){const n=f(),e=new l("",n);return h(n).then((async()=>{const s=await n.open(t,e);e._setId(s)})),e},loading(t={}){const n=f(),e=new l("",n);return h(n).then((async()=>{const s=await n.openLoading(t,e);e._setId(s)})),e},create(t){const n=w();return p(n,t),n},configure(n){m(),t(n)}},E="sd-loading-container";let C=null;async function k(t){const n=(function(){if("undefined"==typeof window||"undefined"==typeof document||"undefined"==typeof customElements)throw Error("[sdLoading] Browser APIs are unavailable. Use `sdLoading` only on the client.")}(),function(){if(!customElements.get(E))throw Error("[sdLoading] `sd-loading-container` is not registered. Call `defineCustomElements(window)` before using `sdLoading`.")}(),C&&document.body.contains(C)||(C=document.createElement(E),document.body.appendChild(C)),C);await customElements.whenDefined(E),t(n)}const A={show(t={}){k((n=>{n.show?.(t)}))},hide(){C&&k((t=>{t.hide?.()}))}};export{p as _attachSdModalWithRef,w as _createSdModalRef,A as sdLoading,y as sdModal,c as sdToast}

package/dist/components/{p-DHh_uT9m.js → p-B1j9ZWLJ.js}

@@ -1 +1 @@
-import{p as d,H as e,c as a,h as s,d as o,t as i}from"./p-CCHce_Dt.js";import{m as t}from"./p-DOXMJi-V.js";import{d as l}from"./p-DlsWuYWL.js";import{d as n}from"./p-hN9rpxkR.js";import{d as m}from"./p-BF4hokOY.js";const g={minWidth:Number(t.modal.loading.width),minHeight:Number(t.modal.loading.height),gap:Number(t.modal.loading.gap),contentSize:Number(t.modal.loading.content),radius:Number(t.modal.radius)},r={bg:t.modal.bg,messageColor:t.modal.loading.message.color,errorIcon:t.modal.confirm.negative.icon},c=t.modal.loading.message.typography.fontFamily,h=Number(t.modal.loading.message.typography.fontSize),u=Number(t.modal.loading.message.typography.fontWeight),b=Number(t.modal.loading.message.typography.lineHeight),p={loading:"작업을 진행하고 있습니다. 잠시만 기다려 주세요.",error:"작업에 실패하였습니다. 다시 시도해 주세요."},f={loading:"작업 취소",error:"다시 시도"},x=d(class extends e{constructor(d){super(),!1!==d&&this.__registerHost(),this.click=a(this,"sdClick",7)}state="loading";message="";useButton=!1;buttonLabel="";width;height;click;get resolvedMessage(){return this.message||p[this.state]}get resolvedButtonLabel(){return this.buttonLabel||f[this.state]}handleClick=()=>{this.click.emit()};toCssSize(d){if(null!=d&&""!==d)return"number"==typeof d?`${d}px`:d}render(){const d={"--sd-loading-modal-min-width":`${g.minWidth}px`,"--sd-loading-modal-min-height":`${g.minHeight}px`,"--sd-loading-modal-gap":`${g.gap}px`,"--sd-loading-modal-content-size":`${g.contentSize}px`,"--sd-loading-modal-radius":`${g.radius}px`,"--sd-loading-modal-bg":r.bg,"--sd-loading-modal-message-color":r.messageColor,"--sd-loading-modal-message-font-family":c,"--sd-loading-modal-message-font-size":`${h}px`,"--sd-loading-modal-message-font-weight":`${u}`,"--sd-loading-modal-message-line-height":`${b}px`,"--sd-loading-modal-error-color":r.errorIcon,"--sd-loading-modal-width":this.toCssSize(this.width)??`${g.minWidth}px`,"--sd-loading-modal-height":this.toCssSize(this.height)??`${g.minHeight}px`};return s(o,{key:"19735a93969986e8af39ae1dbe6b2373936e8304",style:d},s("div",{key:"d82512e430460c47619ce54ceab5961637e43bc0",class:"sd-loading-modal"},s("div",{key:"265d697fe23e64366ce43ffc489c7c9a62c9a72c",class:"sd-loading-modal__content"},"loading"===this.state?s("sd-circle-progress",{indeterminate:!0}):s("sd-icon",{class:"sd-loading-modal__icon",name:"warningOutline",size:g.contentSize,color:r.errorIcon})),s("p",{key:"17800ecf73823075c5efb694e244f986c07759be",class:"sd-loading-modal__message"},this.resolvedMessage),this.useButton&&s("div",{key:"03b7d5599356974df47546e4256bd093a1a3c991",class:"sd-loading-modal__button"},s("sd-button-v2",{key:"5dc71e51cc524a3dc01d7c020b763117718ec170",name:"neutral_outline_sm",label:this.resolvedButtonLabel,onSdClick:this.handleClick}))))}static get style(){return"sd-loading-modal{display:inline-block}sd-loading-modal .sd-loading-modal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sd-loading-modal-gap);min-width:var(--sd-loading-modal-min-width);min-height:var(--sd-loading-modal-min-height);width:var(--sd-loading-modal-width, auto);height:var(--sd-loading-modal-height, auto);border-radius:var(--sd-loading-modal-radius);background:var(--sd-loading-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-loading-modal .sd-loading-modal__content{display:flex;align-items:center;justify-content:center;width:var(--sd-loading-modal-content-size);height:var(--sd-loading-modal-content-size)}sd-loading-modal .sd-loading-modal__message{margin:0;color:var(--sd-loading-modal-message-color);font-family:var(--sd-loading-modal-message-font-family);font-size:var(--sd-loading-modal-message-font-size);font-weight:var(--sd-loading-modal-message-font-weight);line-height:var(--sd-loading-modal-message-line-height);text-align:center}sd-loading-modal .sd-loading-modal__button{display:flex;justify-content:center}"}},[512,"sd-loading-modal",{state:[513],message:[1],useButton:[516,"use-button"],buttonLabel:[1,"button-label"],width:[8],height:[8]}]);function v(){"undefined"!=typeof customElements&&["sd-loading-modal","sd-button-v2","sd-circle-progress","sd-icon"].forEach((d=>{switch(d){case"sd-loading-modal":customElements.get(i(d))||customElements.define(i(d),x);break;case"sd-button-v2":customElements.get(i(d))||l();break;case"sd-circle-progress":customElements.get(i(d))||n();break;case"sd-icon":customElements.get(i(d))||m()}}))}export{x as S,v as d}
+import{p as d,H as a,c as e,h as s,d as o,t as i}from"./p-C0VkfKIA.js";import{m as t}from"./p-DOXMJi-V.js";import{d as l}from"./p-Cb1M05mf.js";import{d as n}from"./p-T5BGXHZg.js";import{d as m}from"./p-YgnF5oje.js";const g={minWidth:Number(t.modal.loading.width),minHeight:Number(t.modal.loading.height),gap:Number(t.modal.loading.gap),contentSize:Number(t.modal.loading.content),radius:Number(t.modal.radius)},r={bg:t.modal.bg,messageColor:t.modal.loading.message.color,errorIcon:t.modal.confirm.negative.icon},c=t.modal.loading.message.typography.fontFamily,b=Number(t.modal.loading.message.typography.fontSize),h=Number(t.modal.loading.message.typography.fontWeight),u=Number(t.modal.loading.message.typography.lineHeight),f={loading:"작업을 진행하고 있습니다. 잠시만 기다려 주세요.",error:"작업에 실패하였습니다. 다시 시도해 주세요."},p={loading:"작업 취소",error:"다시 시도"},v=d(class extends a{constructor(d){super(),!1!==d&&this.__registerHost(),this.click=e(this,"sdClick",7)}state="loading";message="";useButton=!1;buttonLabel="";width;height;click;get resolvedMessage(){return this.message||f[this.state]}get resolvedButtonLabel(){return this.buttonLabel||p[this.state]}handleClick=()=>{this.click.emit()};toCssSize(d){if(null!=d&&""!==d)return"number"==typeof d?`${d}px`:d}render(){const d={"--sd-loading-modal-min-width":`${g.minWidth}px`,"--sd-loading-modal-min-height":`${g.minHeight}px`,"--sd-loading-modal-gap":`${g.gap}px`,"--sd-loading-modal-content-size":`${g.contentSize}px`,"--sd-loading-modal-radius":`${g.radius}px`,"--sd-loading-modal-bg":r.bg,"--sd-loading-modal-message-color":r.messageColor,"--sd-loading-modal-message-font-family":c,"--sd-loading-modal-message-font-size":`${b}px`,"--sd-loading-modal-message-font-weight":`${h}`,"--sd-loading-modal-message-line-height":`${u}px`,"--sd-loading-modal-error-color":r.errorIcon,"--sd-loading-modal-width":this.toCssSize(this.width)??`${g.minWidth}px`,"--sd-loading-modal-height":this.toCssSize(this.height)??`${g.minHeight}px`};return s(o,{key:"8ecd5db2ffde201dd0c7d3c58b1da6b85b5a4116",style:d},s("div",{key:"61f79b16b22d5ab4bb4dca03f88568174cfcfb1f",class:"sd-loading-modal"},s("div",{key:"bc373cfebab5949bee9c024bd86ca92d8294ff7b",class:"sd-loading-modal__content"},"loading"===this.state?s("sd-circle-progress",{indeterminate:!0}):s("sd-icon",{class:"sd-loading-modal__icon",name:"warningOutline",size:g.contentSize,color:r.errorIcon})),s("p",{key:"e9015b9c9813b1968c8ca7991d654761eb3ee9b3",class:"sd-loading-modal__message"},this.resolvedMessage),this.useButton&&s("div",{key:"4ed941961611fe9533bd2b989c9b68ef6c7ca741",class:"sd-loading-modal__button"},s("sd-button-v2",{key:"13f4c5ef5ad5285d846716e5dd72d9f2565c08f9",name:"neutral_outline_sm",label:this.resolvedButtonLabel,onSdClick:this.handleClick}))))}static get style(){return"sd-loading-modal{display:inline-block}sd-loading-modal .sd-loading-modal{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sd-loading-modal-gap);min-width:var(--sd-loading-modal-min-width);min-height:var(--sd-loading-modal-min-height);width:var(--sd-loading-modal-width, auto);height:var(--sd-loading-modal-height, auto);border-radius:var(--sd-loading-modal-radius);background:var(--sd-loading-modal-bg);box-shadow:4px 4px 24px 4px rgba(0, 0, 0, 0.2)}sd-loading-modal .sd-loading-modal__content{display:flex;align-items:center;justify-content:center;width:var(--sd-loading-modal-content-size);height:var(--sd-loading-modal-content-size)}sd-loading-modal .sd-loading-modal__message{margin:0;color:var(--sd-loading-modal-message-color);font-family:var(--sd-loading-modal-message-font-family);font-size:var(--sd-loading-modal-message-font-size);font-weight:var(--sd-loading-modal-message-font-weight);line-height:var(--sd-loading-modal-message-line-height);text-align:center}sd-loading-modal .sd-loading-modal__button{display:flex;justify-content:center}"}},[512,"sd-loading-modal",{state:[513],message:[1],useButton:[516,"use-button"],buttonLabel:[1,"button-label"],width:[8],height:[8]}]);function x(){"undefined"!=typeof customElements&&["sd-loading-modal","sd-button-v2","sd-circle-progress","sd-icon"].forEach((d=>{switch(d){case"sd-loading-modal":customElements.get(i(d))||customElements.define(i(d),v);break;case"sd-button-v2":customElements.get(i(d))||l();break;case"sd-circle-progress":customElements.get(i(d))||n();break;case"sd-icon":customElements.get(i(d))||m()}}))}export{v as S,x as d}