@simplysm/angular 14.0.30 → 14.0.33

package/dist/core/modal/sd-modal.js

@@ -0,0 +1,299 @@
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, output, ViewEncapsulation, } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { NgIcon } from "@ng-icons/core";
+import { tablerX } from "@ng-icons/tabler-icons";
+import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
+import { SdSystemConfigProvider } from "../config/sd-system-config.provider";
+import { injectFocusTrap } from "./injectFocusTrap";
+import { injectDragResize } from "./injectDragResize";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function SdModal_Conditional_2_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function SdModal_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdModal_Conditional_2_Conditional_3_ng_container_0_Template, 1, 0, "ng-container", 7);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r1.actionTplRef());
+} }
+function SdModal_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 8);
+    i0.ɵɵlistener("click", function SdModal_Conditional_2_Conditional_4_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCloseButtonClick()); });
+    i0.ɵɵelement(1, "ng-icon", 9);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("svg", ctx_r1.tablerX);
+} }
+function SdModal_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_2_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onHeaderMouseDown($event)); });
+    i0.ɵɵelementStart(1, "span", 5);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(3, SdModal_Conditional_2_Conditional_3_Template, 1, 1, "ng-container");
+    i0.ɵɵconditionalCreate(4, SdModal_Conditional_2_Conditional_4_Template, 2, 1, "button", 6);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.title());
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.actionTplRef() ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.hideCloseButton() ? 4 : -1);
+} }
+function SdModal_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "top")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(1, "div", 11);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_1_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "bottom")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "div", 12);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "left")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 13);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_3_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "right")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 14);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "top-left")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 15);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_5_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "top-right")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 16);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_6_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "bottom-left")); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 17);
+    i0.ɵɵlistener("mousedown", function SdModal_Conditional_5_Template_div_mousedown_7_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeMouseDown($event, "bottom-right")); });
+    i0.ɵɵelementEnd();
+} }
+export class SdModal {
+    _elRef = inject((ElementRef));
+    _activatedModal = inject(SdActivatedModalProvider, { optional: true });
+    _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+    _focusTrap = injectFocusTrap();
+    tablerX = tablerX;
+    open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    key = input(undefined, ...(ngDevMode ? [{ debugName: "key" }] : /* istanbul ignore next */ []));
+    title = input("", ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    hideHeader = input(false, ...(ngDevMode ? [{ debugName: "hideHeader" }] : /* istanbul ignore next */ []));
+    hideCloseButton = input(false, ...(ngDevMode ? [{ debugName: "hideCloseButton" }] : /* istanbul ignore next */ []));
+    useCloseByBackdrop = input(true, ...(ngDevMode ? [{ debugName: "useCloseByBackdrop" }] : /* istanbul ignore next */ []));
+    useCloseByEscapeKey = input(true, ...(ngDevMode ? [{ debugName: "useCloseByEscapeKey" }] : /* istanbul ignore next */ []));
+    float = input(false, ...(ngDevMode ? [{ debugName: "float" }] : /* istanbul ignore next */ []));
+    fill = input(false, ...(ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []));
+    resizable = input(false, ...(ngDevMode ? [{ debugName: "resizable" }] : /* istanbul ignore next */ []));
+    movable = input(false, ...(ngDevMode ? [{ debugName: "movable" }] : /* istanbul ignore next */ []));
+    position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    minHeightPx = input(undefined, ...(ngDevMode ? [{ debugName: "minHeightPx" }] : /* istanbul ignore next */ []));
+    minWidthPx = input(undefined, ...(ngDevMode ? [{ debugName: "minWidthPx" }] : /* istanbul ignore next */ []));
+    heightPx = input(undefined, ...(ngDevMode ? [{ debugName: "heightPx" }] : /* istanbul ignore next */ []));
+    widthPx = input(undefined, ...(ngDevMode ? [{ debugName: "widthPx" }] : /* istanbul ignore next */ []));
+    headerStyle = input(undefined, ...(ngDevMode ? [{ debugName: "headerStyle" }] : /* istanbul ignore next */ []));
+    noFirstControlFocusing = input(false, ...(ngDevMode ? [{ debugName: "noFirstControlFocusing" }] : /* istanbul ignore next */ []));
+    actionTplRef = input(undefined, ...(ngDevMode ? [{ debugName: "actionTplRef" }] : /* istanbul ignore next */ []));
+    closeRequest = output();
+    _dragResize = injectDragResize({
+        getDialogEl: () => this._getDialogEl(),
+        minWidthPx: this.minWidthPx,
+        minHeightPx: this.minHeightPx,
+        onEnd: () => void this._saveConfig(),
+    });
+    constructor() {
+        // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
+        effect(() => {
+            this._elRef.nativeElement.setAttribute("data-sd-init", "");
+        });
+        // widthPx/heightPx를 dialog 스타일에 적용
+        effect(() => {
+            const dialogEl = this._getDialogEl();
+            if (dialogEl === null)
+                return;
+            const w = this.widthPx();
+            const h = this.heightPx();
+            if (w !== undefined) {
+                dialogEl.style.width = `${w}px`;
+            }
+            else {
+                dialogEl.style.width = "";
+            }
+            if (h !== undefined) {
+                dialogEl.style.height = `${h}px`;
+            }
+            else {
+                dialogEl.style.height = "";
+            }
+        });
+        // key 기반 설정 복원
+        effect(() => {
+            const k = this.key();
+            if (k === undefined || this._systemConfig == null)
+                return;
+            void this._restoreConfig(k);
+        });
+    }
+    onResizeMouseDown(event, dir) {
+        event.preventDefault();
+        this._dragResize.startResize(event, dir);
+    }
+    onHeaderMouseDown(event) {
+        if (!this.movable())
+            return;
+        if (event.target.closest("button") !== null)
+            return;
+        event.preventDefault();
+        this._dragResize.startDrag(event);
+    }
+    onBackdropClick() {
+        if (!this.useCloseByBackdrop())
+            return;
+        this._requestClose();
+    }
+    onCloseButtonClick() {
+        this._requestClose();
+    }
+    onDialogKeydown(event) {
+        if (event.key === "Escape") {
+            if (!this.useCloseByEscapeKey())
+                return;
+            this._requestClose();
+        }
+        else if (event.key === "Tab") {
+            this._focusTrap.handleTabTrap(event);
+        }
+    }
+    onDialogFocus() {
+        this._bringToFront();
+    }
+    _requestClose() {
+        if (this._activatedModal !== null && !this._activatedModal.canDeactiveFn()) {
+            return;
+        }
+        void this._saveConfig();
+        this.closeRequest.emit();
+    }
+    _bringToFront() {
+        const hostEl = this._elRef.nativeElement;
+        const allModals = document.body.findAll("sd-modal");
+        let maxZ = 4000;
+        for (const m of allModals) {
+            if (m === hostEl)
+                continue;
+            const z = parseInt(m.style.zIndex || "0", 10);
+            if (z > maxZ) {
+                maxZ = z;
+            }
+        }
+        const currentZ = parseInt(hostEl.style.zIndex !== "" ? hostEl.style.zIndex : "0", 10);
+        if (currentZ >= maxZ)
+            return;
+        hostEl.style.zIndex = String(maxZ + 1);
+    }
+    _getDialogEl() {
+        return this._elRef.nativeElement.querySelector("._dialog");
+    }
+    async _saveConfig() {
+        const k = this.key();
+        if (k === undefined || this._systemConfig == null)
+            return;
+        const dialogEl = this._getDialogEl();
+        if (dialogEl === null)
+            return;
+        const config = {};
+        if (dialogEl.style.width !== "")
+            config["width"] = dialogEl.style.width;
+        if (dialogEl.style.height !== "")
+            config["height"] = dialogEl.style.height;
+        if (dialogEl.style.left !== "")
+            config["left"] = dialogEl.style.left;
+        if (dialogEl.style.top !== "")
+            config["top"] = dialogEl.style.top;
+        await this._systemConfig.setAsync(`sd-modal.${k}`, config);
+    }
+    async _restoreConfig(k) {
+        if (this._systemConfig == null)
+            return;
+        const config = (await this._systemConfig.getAsync(`sd-modal.${k}`));
+        if (config == null)
+            return;
+        const dialogEl = this._getDialogEl();
+        if (dialogEl === null)
+            return;
+        if (config["width"] !== undefined)
+            dialogEl.style.width = config["width"];
+        if (config["height"] !== undefined)
+            dialogEl.style.height = config["height"];
+        if (config["left"] !== undefined)
+            dialogEl.style.left = config["left"];
+        if (config["top"] !== undefined)
+            dialogEl.style.top = config["top"];
+    }
+    static ɵfac = function SdModal_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdModal)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdModal, selectors: [["sd-modal"]], hostVars: 4, hostBindings: function SdModal_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵattribute("data-sd-open", ctx.open() || undefined)("data-sd-float", ctx.float() || undefined)("data-sd-fill", ctx.fill() || undefined)("data-sd-position", ctx.position() || undefined);
+        } }, inputs: { open: [1, "open"], key: [1, "key"], title: [1, "title"], hideHeader: [1, "hideHeader"], hideCloseButton: [1, "hideCloseButton"], useCloseByBackdrop: [1, "useCloseByBackdrop"], useCloseByEscapeKey: [1, "useCloseByEscapeKey"], float: [1, "float"], fill: [1, "fill"], resizable: [1, "resizable"], movable: [1, "movable"], position: [1, "position"], minHeightPx: [1, "minHeightPx"], minWidthPx: [1, "minWidthPx"], heightPx: [1, "heightPx"], widthPx: [1, "widthPx"], headerStyle: [1, "headerStyle"], noFirstControlFocusing: [1, "noFirstControlFocusing"], actionTplRef: [1, "actionTplRef"] }, outputs: { open: "openChange", closeRequest: "closeRequest" }, ngContentSelectors: _c0, decls: 6, vars: 2, consts: [[1, "_backdrop", 3, "mousedown"], ["tabindex", "-1", 1, "_dialog", 3, "keydown", "focus"], [1, "_header"], [1, "_content"], [1, "_header", 3, "mousedown"], [1, "_title"], [1, "_close-btn"], [4, "ngTemplateOutlet"], [1, "_close-btn", 3, "click"], [3, "svg"], ["data-resize-dir", "top", 1, "_resize-handle", "_resize-top", 3, "mousedown"], ["data-resize-dir", "bottom", 1, "_resize-handle", "_resize-bottom", 3, "mousedown"], ["data-resize-dir", "left", 1, "_resize-handle", "_resize-left", 3, "mousedown"], ["data-resize-dir", "right", 1, "_resize-handle", "_resize-right", 3, "mousedown"], ["data-resize-dir", "top-left", 1, "_resize-handle", "_resize-top-left", 3, "mousedown"], ["data-resize-dir", "top-right", 1, "_resize-handle", "_resize-top-right", 3, "mousedown"], ["data-resize-dir", "bottom-left", 1, "_resize-handle", "_resize-bottom-left", 3, "mousedown"], ["data-resize-dir", "bottom-right", 1, "_resize-handle", "_resize-bottom-right", 3, "mousedown"]], template: function SdModal_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("mousedown", function SdModal_Template_div_mousedown_0_listener() { return ctx.onBackdropClick(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵlistener("keydown", function SdModal_Template_div_keydown_1_listener($event) { return ctx.onDialogKeydown($event); })("focus", function SdModal_Template_div_focus_1_listener() { return ctx.onDialogFocus(); });
+            i0.ɵɵconditionalCreate(2, SdModal_Conditional_2_Template, 5, 3, "div", 2);
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵprojection(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, SdModal_Conditional_5_Template, 8, 0);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.hideHeader() ? 2 : -1);
+            i0.ɵɵadvance(3);
+            i0.ɵɵconditional(ctx.resizable() ? 5 : -1);
+        } }, dependencies: [NgTemplateOutlet, NgIcon], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gap-sm) var(--gap-default);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  background: var(--trans-lightest);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModal, [{
+        type: Component,
+        args: [{ selector: "sd-modal", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgTemplateOutlet, NgIcon], host: {
+                    "[attr.data-sd-open]": "open() || undefined",
+                    "[attr.data-sd-float]": "float() || undefined",
+                    "[attr.data-sd-fill]": "fill() || undefined",
+                    "[attr.data-sd-position]": "position() || undefined",
+                }, template: `
+    <div class="_backdrop" (mousedown)="onBackdropClick()"></div>
+    <div class="_dialog" tabindex="-1"
+         (keydown)="onDialogKeydown($event)"
+         (focus)="onDialogFocus()">
+      @if (!hideHeader()) {
+        <div class="_header" (mousedown)="onHeaderMouseDown($event)">
+          <span class="_title">{{ title() }}</span>
+          @if (actionTplRef()) {
+            <ng-container *ngTemplateOutlet="actionTplRef()!" />
+          }
+          @if (!hideCloseButton()) {
+            <button class="_close-btn" (click)="onCloseButtonClick()"><ng-icon [svg]="tablerX" /></button>
+          }
+        </div>
+      }
+      <div class="_content"><ng-content /></div>
+      @if (resizable()) {
+        <div class="_resize-handle _resize-top" data-resize-dir="top" (mousedown)="onResizeMouseDown($event, 'top')"></div>
+        <div class="_resize-handle _resize-bottom" data-resize-dir="bottom" (mousedown)="onResizeMouseDown($event, 'bottom')"></div>
+        <div class="_resize-handle _resize-left" data-resize-dir="left" (mousedown)="onResizeMouseDown($event, 'left')"></div>
+        <div class="_resize-handle _resize-right" data-resize-dir="right" (mousedown)="onResizeMouseDown($event, 'right')"></div>
+        <div class="_resize-handle _resize-top-left" data-resize-dir="top-left" (mousedown)="onResizeMouseDown($event, 'top-left')"></div>
+        <div class="_resize-handle _resize-top-right" data-resize-dir="top-right" (mousedown)="onResizeMouseDown($event, 'top-right')"></div>
+        <div class="_resize-handle _resize-bottom-left" data-resize-dir="bottom-left" (mousedown)="onResizeMouseDown($event, 'bottom-left')"></div>
+        <div class="_resize-handle _resize-bottom-right" data-resize-dir="bottom-right" (mousedown)="onResizeMouseDown($event, 'bottom-right')"></div>
+      }
+    </div>
+  `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--z-index-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--topbar-height) + var(--gap-sm));\n  opacity: 0;\n  transition: opacity var(--animation-duration) ease-in-out;\n  pointer-events: none;\n}\nsd-modal > ._backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--trans-default);\n}\nsd-modal > ._dialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  margin: 0 auto;\n  width: fit-content;\n  min-width: 200px;\n  background: var(--control-color);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border-radius: var(--border-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--animation-duration) ease-in-out;\n}\nsd-modal > ._dialog:focus {\n  outline: none;\n}\nsd-modal > ._dialog > ._header {\n  display: flex;\n  align-items: center;\n  user-select: none;\n  border-bottom: 1px solid var(--theme-gray-lightest);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gap-sm) var(--gap-default);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  font-size: inherit;\n  color: inherit;\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  background: var(--trans-lightest);\n}\nsd-modal > ._dialog > ._content {\n  flex: 1;\n  overflow: auto;\n}\nsd-modal > ._dialog > ._resize-handle {\n  position: absolute;\n}\nsd-modal > ._dialog > ._resize-handle._resize-left {\n  top: 0;\n  left: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-right {\n  top: 0;\n  right: 0;\n  width: var(--gap-sm);\n  height: 100%;\n  cursor: ew-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nesw-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-left {\n  left: 0;\n  top: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nwse-resize;\n  z-index: 1;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom {\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  z-index: 1;\n  cursor: nwse-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-left {\n  left: 0;\n  bottom: 0;\n  width: var(--gap-sm);\n  height: var(--gap-sm);\n  cursor: nesw-resize;\n  z-index: 1;\n}\nsd-modal[data-sd-open][data-sd-init] {\n  opacity: 1;\n  pointer-events: auto;\n}\nsd-modal[data-sd-open][data-sd-init] > ._dialog {\n  transform: none;\n}\nsd-modal[data-sd-float] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float] > ._backdrop {\n  display: none;\n}\nsd-modal[data-sd-float] > ._dialog {\n  pointer-events: auto;\n  opacity: 0;\n  box-shadow: 0 calc(4 * var(--elevation-size)) calc(4 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n  border: 1px solid var(--theme-gray-lighter);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--elevation-size)) calc(16 * 4 * var(--elevation-size)) var(--trans-lighter), 0 var(--elevation-size) var(--elevation-size) var(--trans-lighter);\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] {\n  pointer-events: none;\n}\nsd-modal[data-sd-float][data-sd-open][data-sd-init] > ._dialog {\n  pointer-events: auto;\n  opacity: 1;\n}\nsd-modal[data-sd-position=bottom-right] > ._dialog {\n  position: absolute;\n  right: calc(var(--gap-xxl) * 2);\n  bottom: var(--gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--gap-xxl);\n  top: var(--gap-xxl);\n}\nsd-modal[data-sd-fill] {\n  padding-top: 0;\n}\nsd-modal[data-sd-fill] > ._dialog {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: 0;\n}\nsd-modal[data-sd-fill] > ._dialog > ._header {\n  background: transparent;\n  color: var(--text-trans-lighter);\n}"] }]
+    }], () => [], { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], hideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideHeader", required: false }] }], hideCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideCloseButton", required: false }] }], useCloseByBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByBackdrop", required: false }] }], useCloseByEscapeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "useCloseByEscapeKey", required: false }] }], float: [{ type: i0.Input, args: [{ isSignal: true, alias: "float", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], movable: [{ type: i0.Input, args: [{ isSignal: true, alias: "movable", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], minHeightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeightPx", required: false }] }], minWidthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidthPx", required: false }] }], heightPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "heightPx", required: false }] }], widthPx: [{ type: i0.Input, args: [{ isSignal: true, alias: "widthPx", required: false }] }], headerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyle", required: false }] }], noFirstControlFocusing: [{ type: i0.Input, args: [{ isSignal: true, alias: "noFirstControlFocusing", required: false }] }], actionTplRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionTplRef", required: false }] }], closeRequest: [{ type: i0.Output, args: ["closeRequest"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 285, forbidOrphanRendering: true }); })();

package/dist/core/modal/sd-modal.provider.d.ts

@@ -0,0 +1,61 @@
+import { type OutputEmitterRef, type Signal, type TemplateRef, type Type } from "@angular/core";
+import type { DirectiveInputSignals, WithOptional } from "../directive-input-signals";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+/**
+ * 모달 컴포넌트가 구현해야 하는 인터페이스
+ */
+export interface SdModalContentDef<O> {
+    initialized: Signal<boolean>;
+    close: OutputEmitterRef<O | undefined>;
+    actionTplRef?: TemplateRef<any>;
+    readonly _optionalModalInputs?: string;
+}
+type SdModalExcludeKeys = "initialized" | "close" | "actionTplRef" | "_optionalModalInputs";
+type SdModalOptionalKeys<T> = T extends {
+    _optionalModalInputs?: infer K extends string;
+} ? K : never;
+/**
+ * 모달 생성 시 전달하는 정보
+ */
+export interface SdModalInfo<T extends SdModalContentDef<any>, X extends keyof any = ""> {
+    title: string;
+    type: Type<T>;
+    inputs: WithOptional<Omit<DirectiveInputSignals<T>, SdModalExcludeKeys | X>, SdModalOptionalKeys<T> & keyof Omit<DirectiveInputSignals<T>, SdModalExcludeKeys | X>>;
+}
+/**
+ * 모달 옵션
+ */
+export interface SdModalOptions {
+    key?: string;
+    hideHeader?: boolean;
+    hideCloseButton?: boolean;
+    useCloseByBackdrop?: boolean;
+    useCloseByEscapeKey?: boolean;
+    float?: boolean;
+    fill?: boolean;
+    resizable?: boolean;
+    movable?: boolean;
+    position?: "bottom-right" | "top-right";
+    minHeightPx?: number;
+    minWidthPx?: number;
+    heightPx?: number;
+    widthPx?: number;
+    headerStyle?: string;
+    noFirstControlFocusing?: boolean;
+}
+/**
+ * 모달을 프로그래밍 방식으로 생성하는 프로바이더
+ */
+export declare class SdModalProvider {
+    private readonly _appRef;
+    private readonly _envInjector;
+    private readonly _injector;
+    modalCount: import("@angular/core").WritableSignal<number>;
+    showAsync<T extends SdModalContentDef<any>>(modal: SdModalInfo<T>, options?: SdModalOptions): Promise<Parameters<T["close"]["emit"]>[0] | undefined>;
+    private _assignZIndex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdModalProvider, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdModalProvider>;
+}
+export {};
+//# sourceMappingURL=sd-modal.provider.d.ts.map

package/dist/core/modal/sd-modal.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-modal.provider.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.provider.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,gBAAgB,EACrB,KAAK,MAAM,EACX,KAAK,WAAW,EAChB,KAAK,IAAI,EACV,MAAM,eAAe,CAAC;AAGvB,OAAO,KAAK,EACV,qBAAqB,EACrB,YAAY,EACb,MAAM,4BAA4B,CAAC;AAGpC,OAAO,wBAAwB,CAAC;;AAEhC;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,CAAC;IAClC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC7B,KAAK,EAAE,gBAAgB,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC;IAChC,QAAQ,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACxC;AAED,KAAK,kBAAkB,GAAG,aAAa,GAAG,OAAO,GAAG,cAAc,GAAG,sBAAsB,CAAC;AAC5F,KAAK,mBAAmB,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,oBAAoB,CAAC,EAAE,MAAM,CAAC,SAAS,MAAM,CAAA;CAAE,GACrF,CAAC,GACD,KAAK,CAAC;AAEV;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,iBAAiB,CAAC,GAAG,CAAC,EAAE,CAAC,SAAS,MAAM,GAAG,GAAG,EAAE;IACrF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,MAAM,EAAE,YAAY,CAClB,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC,CAAC,EACtD,mBAAmB,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,kBAAkB,GAAG,CAAC,CAAC,CACtF,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,cAAc,GAAG,WAAW,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED;;GAEG;AACH,qBACa,eAAe;IAC1B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA0B;IAClD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA+B;IAC5D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoB;IAE9C,UAAU,iDAAa;IAEjB,SAAS,CAAC,CAAC,SAAS,iBAAiB,CAAC,GAAG,CAAC,EAC9C,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAmJzD,OAAO,CAAC,aAAa;yCA7JV,eAAe;6CAAf,eAAe;CAwK3B"}

package/dist/core/modal/sd-modal.provider.js

@@ -0,0 +1,158 @@
+import { ApplicationRef, createComponent, EnvironmentInjector, inject, Injectable, Injector, signal, } from "@angular/core";
+import { outputToObservable } from "@angular/core/rxjs-interop";
+import { Subscription } from "rxjs";
+import { SdModal } from "./sd-modal";
+import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+/**
+ * 모달을 프로그래밍 방식으로 생성하는 프로바이더
+ */
+export class SdModalProvider {
+    _appRef = inject(ApplicationRef);
+    _envInjector = inject(EnvironmentInjector);
+    _injector = inject(Injector);
+    modalCount = signal(0, ...(ngDevMode ? [{ debugName: "modalCount" }] : /* istanbul ignore next */ []));
+    async showAsync(modal, options) {
+        return new Promise((resolve) => {
+            // 1. modalCount 증가
+            this.modalCount.update((v) => v + 1);
+            // 2. SdActivatedModalProvider 인스턴스 생성
+            const activatedModal = new SdActivatedModalProvider();
+            // 3. 컨텐츠 컴포넌트 생성 (elementInjector에 SdActivatedModalProvider 주입)
+            const contentInjector = Injector.create({
+                providers: [{ provide: SdActivatedModalProvider, useValue: activatedModal }],
+                parent: this._injector,
+            });
+            const contentRef = createComponent(modal.type, {
+                environmentInjector: this._envInjector,
+                elementInjector: contentInjector,
+            });
+            // 4. setInput으로 inputs 바인딩
+            for (const [key, value] of Object.entries(modal.inputs)) {
+                contentRef.setInput(key, value);
+            }
+            // 5. SdModal 생성 (projectableNodes로 컨텐츠 삽입)
+            const modalRef = createComponent(SdModal, {
+                environmentInjector: this._envInjector,
+                elementInjector: contentInjector,
+                projectableNodes: [[contentRef.location.nativeElement]],
+            });
+            // 6. 옵션 바인딩
+            modalRef.setInput("title", modal.title);
+            if (options !== undefined) {
+                for (const [key, value] of Object.entries(options)) {
+                    if (value !== undefined) {
+                        modalRef.setInput(key, value);
+                    }
+                }
+            }
+            // 7. SdActivatedModalProvider에 컴포넌트 참조 설정
+            activatedModal.modalComponent.set(modalRef.instance);
+            activatedModal.contentComponent.set(contentRef.instance);
+            // 7-1. actionTplRef 브릿지: 컨텐츠 컴포넌트 → 모달 컴포넌트
+            if ("actionTplRef" in contentRef.instance) {
+                let _actionTplRef = contentRef.instance.actionTplRef;
+                Object.defineProperty(contentRef.instance, "actionTplRef", {
+                    get: () => _actionTplRef,
+                    set: (value) => {
+                        _actionTplRef = value;
+                        modalRef.setInput("actionTplRef", value);
+                    },
+                    configurable: true,
+                });
+            }
+            // 8. appRef에 뷰 등록 + body에 삽입
+            this._appRef.attachView(contentRef.hostView);
+            this._appRef.attachView(modalRef.hostView);
+            document.body.appendChild(modalRef.location.nativeElement);
+            // 9. open 설정 + z-index
+            modalRef.instance.open.set(true);
+            this._assignZIndex(modalRef.location.nativeElement);
+            // 10. 포커스 저장 및 설정
+            const prevActiveEl = document.activeElement;
+            // 지연된 포커스 설정 (DOM 삽입 후 렌더링 완료 대기)
+            queueMicrotask(() => {
+                const modalEl = modalRef.location.nativeElement;
+                const dialogEl = modalEl.querySelector("._dialog");
+                if (dialogEl == null)
+                    return;
+                if (options?.noFirstControlFocusing === true) {
+                    dialogEl.focus();
+                }
+                else {
+                    // 컨텐츠 영역에서 첫 포커스 가능 요소 검색
+                    const contentEl = modalEl.querySelector("._content");
+                    const firstFocusable = contentEl?.findFirstFocusableChild();
+                    if (firstFocusable !== undefined) {
+                        firstFocusable.focus();
+                    }
+                    else {
+                        dialogEl.focus();
+                    }
+                }
+            });
+            // cleanup 함수
+            let closeSub;
+            let closeRequestSub;
+            const cleanup = (result) => {
+                closeSub?.unsubscribe();
+                closeRequestSub?.unsubscribe();
+                // 닫힘 애니메이션 트리거: open(false) → CSS transition 시작
+                modalRef.instance.open.set(false);
+                const modalEl = modalRef.location.nativeElement;
+                const doDestroy = () => {
+                    // DOM에서 제거
+                    if (modalEl.parentNode !== null) {
+                        modalEl.parentNode.removeChild(modalEl);
+                    }
+                    // 뷰 분리 + 파괴
+                    this._appRef.detachView(modalRef.hostView);
+                    this._appRef.detachView(contentRef.hostView);
+                    modalRef.destroy();
+                    contentRef.destroy();
+                    // modalCount 감소
+                    this.modalCount.update((v) => v - 1);
+                    // 포커스 복귀
+                    if (prevActiveEl !== null && prevActiveEl.isConnected) {
+                        prevActiveEl.focus();
+                    }
+                    resolve(result);
+                };
+                // transition duration 확인 후 대기 또는 즉시 destroy
+                const duration = parseFloat(getComputedStyle(modalEl).transitionDuration || "0");
+                if (duration > 0) {
+                    modalEl.addEventListener("transitionend", doDestroy, { once: true });
+                }
+                else {
+                    doDestroy();
+                }
+            };
+            // 10. close output 구독 (컨텐츠 컴포넌트가 직접 close.emit 호출)
+            closeSub = outputToObservable(contentRef.instance.close).subscribe((result) => {
+                cleanup(result);
+            });
+            // 12. SdModal의 closeRequest 구독 (배경 클릭, ESC, 닫기 버튼)
+            closeRequestSub = outputToObservable(modalRef.instance.closeRequest).subscribe(() => {
+                cleanup(undefined);
+            });
+        });
+    }
+    _assignZIndex(el) {
+        const allModals = document.body.findAll("sd-modal");
+        let maxZ = 4000;
+        for (const m of allModals) {
+            const z = parseInt(m.style.zIndex || "0", 10);
+            if (z > maxZ) {
+                maxZ = z;
+            }
+        }
+        el.style.zIndex = String(maxZ + 1);
+    }
+    static ɵfac = function SdModalProvider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdModalProvider)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SdModalProvider, factory: SdModalProvider.ɵfac, providedIn: "root" });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalProvider, [{
+        type: Injectable,
+        args: [{ providedIn: "root" }]
+    }], null, null); })();

package/dist/core/modal/sd-prompt-modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-prompt-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-prompt-modal.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;;AAI7D;;;;GAIG;AACH,qBAyBa,aAAc,YAAW,iBAAiB,CAAC,MAAM,CAAC;IAC7D,WAAW,kDAAgB;IAC3B,KAAK,+DAAgC;IAErC,OAAO,8CAA4B;IAEnC,WAAW,iDAAc;IAEzB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAKjC,SAAS,IAAI,IAAI;IAOjB,QAAQ,IAAI,IAAI;yCApBL,aAAa;2CAAb,aAAa;CAuBzB"}

package/dist/core/modal/sd-prompt-modal.js

@@ -0,0 +1,78 @@
+import { ChangeDetectionStrategy, Component, input, output, signal, ViewEncapsulation, } from "@angular/core";
+import { SdButton } from "../../controls/button/sd-button";
+import { SdTextfield } from "../../controls/input/sd-textfield";
+import * as i0 from "@angular/core";
+/**
+ * 범용 프롬프트 모달.
+ * SdModalContentDef<string> 구현. message를 표시하고, 텍스트 입력 후 확인/취소.
+ * 확인 시 입력값 emit, 취소 시 undefined emit.
+ */
+export class SdPromptModal {
+    initialized = signal(true, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
+    close = output();
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    _inputValue = signal("", ...(ngDevMode ? [{ debugName: "_inputValue" }] : /* istanbul ignore next */ []));
+    onInputChange(event) {
+        const inputEl = event.target;
+        this._inputValue.set(inputEl.value);
+    }
+    onConfirm() {
+        const val = this._inputValue();
+        if (val !== "") {
+            this.close.emit(val);
+        }
+    }
+    onCancel() {
+        this.close.emit(undefined);
+    }
+    static ɵfac = function SdPromptModal_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdPromptModal)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdPromptModal, selectors: [["sd-prompt-modal"]], hostAttrs: [1, "p-default", 2, "display", "block"], inputs: { message: [1, "message"] }, outputs: { close: "close" }, decls: 7, vars: 4, consts: [[1, "mb-default", 3, "innerHTML"], [1, "mb-default", 3, "input", "keydown.enter", "type", "value"], [1, "flex-row", "main-align-end", "gap-sm"], [3, "click", "theme"], [3, "click"]], template: function SdPromptModal_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "p", 0);
+            i0.ɵɵelementStart(1, "sd-textfield", 1);
+            i0.ɵɵlistener("input", function SdPromptModal_Template_sd_textfield_input_1_listener($event) { return ctx.onInputChange($event); })("keydown.enter", function SdPromptModal_Template_sd_textfield_keydown_enter_1_listener() { return ctx.onConfirm(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "div", 2)(3, "sd-button", 3);
+            i0.ɵɵlistener("click", function SdPromptModal_Template_sd_button_click_3_listener() { return ctx.onConfirm(); });
+            i0.ɵɵtext(4, "\uD655\uC778");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "sd-button", 4);
+            i0.ɵɵlistener("click", function SdPromptModal_Template_sd_button_click_5_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(6, "\uCDE8\uC18C");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵproperty("innerHTML", ctx.message(), i0.ɵɵsanitizeHtml);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("type", "text")("value", ctx._inputValue());
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("theme", "primary");
+        } }, dependencies: [SdButton, SdTextfield], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPromptModal, [{
+        type: Component,
+        args: [{
+                selector: "sd-prompt-modal",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [SdButton, SdTextfield],
+                host: {
+                    style: "display: block",
+                    class: "p-default",
+                },
+                template: `
+    <p class="mb-default" [innerHTML]="message()"></p>
+    <sd-textfield
+      [type]="'text'"
+      [value]="_inputValue()"
+      (input)="onInputChange($event)"
+      (keydown.enter)="onConfirm()"
+      class="mb-default"
+    />
+    <div class="flex-row main-align-end gap-sm">
+      <sd-button [theme]="'primary'" (click)="onConfirm()">확인</sd-button>
+      <sd-button (click)="onCancel()">취소</sd-button>
+    </div>
+  `,
+            }]
+    }], null, { close: [{ type: i0.Output, args: ["close"] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdPromptModal, { className: "SdPromptModal", filePath: "packages/angular/src/core/modal/sd-prompt-modal.ts", lineNumber: 43, forbidOrphanRendering: true }); })();