@simplysm/angular 14.0.1 → 14.0.4

package/dist/ui/overlay/modal/sd-modal.control.js

@@ -0,0 +1,411 @@
+import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, model, output, ViewEncapsulation, } from "@angular/core";
+import { isTabbable } from "tabbable";
+import { NgTemplateOutlet } from "@angular/common";
+import { SdActivatedModalProvider } from "./sd-modal.provider";
+import { SdSystemConfigProvider } from "../../../core/providers/sd-system-config.provider";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+const _c0 = ["*"];
+function SdModalControl_Conditional_2_Conditional_3_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function SdModalControl_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, SdModalControl_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 SdModalControl_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 8);
+    i0.ɵɵlistener("click", function SdModalControl_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.ɵɵtext(1, "\u00D7");
+    i0.ɵɵelementEnd();
+} }
+function SdModalControl_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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, SdModalControl_Conditional_2_Conditional_3_Template, 1, 1, "ng-container");
+    i0.ɵɵconditionalCreate(4, SdModalControl_Conditional_2_Conditional_4_Template, 2, 0, "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 SdModalControl_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 10);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 11);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 12);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 13);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 14);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 15);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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", 16);
+    i0.ɵɵlistener("mousedown", function SdModalControl_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 SdModalControl {
+    _elRef = inject((ElementRef));
+    _activatedModal = inject(SdActivatedModalProvider, { optional: true });
+    _systemConfig = inject(SdSystemConfigProvider, { optional: true });
+    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();
+    _dragState;
+    _resizeState;
+    _onDocumentMouseMove;
+    _onDocumentMouseUp;
+    constructor() {
+        // 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`;
+            }
+            if (h !== undefined) {
+                dialogEl.style.height = `${h}px`;
+            }
+        });
+        // key 기반 설정 복원
+        effect(() => {
+            const k = this.key();
+            if (k === undefined || this._systemConfig == null)
+                return;
+            void this._restoreConfig(k);
+        });
+        // mousemove/mouseup을 document에 등록 (리사이즈 & 드래그 공용)
+        this._onDocumentMouseMove = (event) => {
+            if (this._resizeState !== undefined) {
+                this._applyResize(event);
+            }
+            if (this._dragState !== undefined) {
+                this._applyDrag(event);
+            }
+        };
+        this._onDocumentMouseUp = () => {
+            const hadState = this._resizeState !== undefined || this._dragState !== undefined;
+            this._resizeState = undefined;
+            this._dragState = undefined;
+            document.removeEventListener("mousemove", this._onDocumentMouseMove);
+            document.removeEventListener("mouseup", this._onDocumentMouseUp);
+            if (hadState) {
+                void this._saveConfig();
+            }
+        };
+    }
+    onResizeMouseDown(event, dir) {
+        event.preventDefault();
+        const dialogEl = this._getDialogEl();
+        if (dialogEl === null)
+            return;
+        this._resizeState = {
+            dir,
+            startX: event.clientX,
+            startY: event.clientY,
+            startWidth: dialogEl.offsetWidth,
+            startHeight: dialogEl.offsetHeight,
+            startLeft: dialogEl.offsetLeft,
+            startTop: dialogEl.offsetTop,
+        };
+        document.addEventListener("mousemove", this._onDocumentMouseMove);
+        document.addEventListener("mouseup", this._onDocumentMouseUp);
+    }
+    onHeaderMouseDown(event) {
+        if (!this.movable())
+            return;
+        if (event.target.closest("button") !== null)
+            return;
+        event.preventDefault();
+        const dialogEl = this._getDialogEl();
+        if (dialogEl === null)
+            return;
+        this._dragState = {
+            startX: event.clientX,
+            startY: event.clientY,
+            startLeft: dialogEl.offsetLeft,
+            startTop: dialogEl.offsetTop,
+        };
+        document.addEventListener("mousemove", this._onDocumentMouseMove);
+        document.addEventListener("mouseup", this._onDocumentMouseUp);
+    }
+    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._handleTabTrap(event);
+        }
+    }
+    onDialogFocus() {
+        this._bringToFront();
+    }
+    _requestClose() {
+        if (this._activatedModal !== null && !this._activatedModal.canDeactivefn()) {
+            return;
+        }
+        void this._saveConfig();
+        this.closeRequest.emit();
+    }
+    _handleTabTrap(event) {
+        const hostEl = this._elRef.nativeElement;
+        const focusableElements = this._getTabbableElements(hostEl);
+        if (focusableElements.length === 0)
+            return;
+        const first = focusableElements[0];
+        const last = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            // Shift+Tab: 첫 요소에서 → 마지막 요소로
+            if (document.activeElement === first) {
+                event.preventDefault();
+                last.focus();
+            }
+        }
+        else {
+            // Tab: 마지막 요소에서 → 첫 요소로
+            if (document.activeElement === last) {
+                event.preventDefault();
+                first.focus();
+            }
+        }
+    }
+    _getTabbableElements(container) {
+        const result = [];
+        const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT);
+        let node = walker.nextNode();
+        while (node !== null) {
+            if (node instanceof HTMLElement && isTabbable(node)) {
+                result.push(node);
+            }
+            node = walker.nextNode();
+        }
+        return result;
+    }
+    _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;
+            }
+        }
+        hostEl.style.zIndex = String(maxZ + 1);
+    }
+    _getDialogEl() {
+        return this._elRef.nativeElement.querySelector("._dialog");
+    }
+    _applyResize(event) {
+        const state = this._resizeState;
+        if (state === undefined)
+            return;
+        const dialogEl = this._getDialogEl();
+        if (dialogEl === null)
+            return;
+        const dx = event.clientX - state.startX;
+        const dy = event.clientY - state.startY;
+        const minW = this.minWidthPx() ?? 0;
+        const minH = this.minHeightPx() ?? 0;
+        let newWidth = state.startWidth;
+        let newHeight = state.startHeight;
+        let newLeft = state.startLeft;
+        let newTop = state.startTop;
+        if (state.dir.includes("right")) {
+            newWidth = Math.max(state.startWidth + dx, minW);
+        }
+        if (state.dir.includes("left")) {
+            const proposed = state.startWidth - dx;
+            if (proposed >= minW) {
+                newWidth = proposed;
+                newLeft = state.startLeft + dx;
+            }
+        }
+        if (state.dir.includes("bottom")) {
+            newHeight = Math.max(state.startHeight + dy, minH);
+        }
+        if (state.dir.includes("top")) {
+            const proposed = state.startHeight - dy;
+            if (proposed >= minH) {
+                newHeight = proposed;
+                newTop = state.startTop + dy;
+            }
+        }
+        dialogEl.style.width = `${newWidth}px`;
+        dialogEl.style.height = `${newHeight}px`;
+        dialogEl.style.left = `${newLeft}px`;
+        dialogEl.style.top = `${newTop}px`;
+    }
+    _applyDrag(event) {
+        const state = this._dragState;
+        if (state === undefined)
+            return;
+        const dialogEl = this._getDialogEl();
+        if (dialogEl === null)
+            return;
+        const dx = event.clientX - state.startX;
+        const dy = event.clientY - state.startY;
+        dialogEl.style.left = `${state.startLeft + dx}px`;
+        dialogEl.style.top = `${state.startTop + dy}px`;
+    }
+    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 SdModalControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdModalControl)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdModalControl, selectors: [["sd-modal"]], hostVars: 4, hostBindings: function SdModalControl_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"], ["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 SdModalControl_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵprojectionDef();
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵlistener("mousedown", function SdModalControl_Template_div_mousedown_0_listener() { return ctx.onBackdropClick(); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(1, "div", 1);
+            i0.ɵɵlistener("keydown", function SdModalControl_Template_div_keydown_1_listener($event) { return ctx.onDialogKeydown($event); })("focus", function SdModalControl_Template_div_focus_1_listener() { return ctx.onDialogFocus(); });
+            i0.ɵɵconditionalCreate(2, SdModalControl_Conditional_2_Template, 5, 3, "div", 2);
+            i0.ɵɵelementStart(3, "div", 3);
+            i0.ɵɵprojection(4);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(5, SdModalControl_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], encapsulation: 2, changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModalControl, [{
+        type: Component,
+        args: [{
+                selector: "sd-modal",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                encapsulation: ViewEncapsulation.None,
+                standalone: true,
+                imports: [NgTemplateOutlet],
+                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()">×</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>
+  `,
+            }]
+    }], () => [], { 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(SdModalControl, { className: "SdModalControl", filePath: "packages/angular/src/ui/overlay/modal/sd-modal.control.ts", lineNumber: 61 }); })();

package/dist/ui/overlay/modal/sd-modal.provider.d.ts

@@ -0,0 +1,65 @@
+import { type OutputEmitterRef, type Signal, type TemplateRef, type Type } from "@angular/core";
+import type { TDirectiveInputSignals } from "../../../core/utils/TDirectiveInputSignals";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+/**
+ * 모달 컴포넌트가 구현해야 하는 인터페이스
+ */
+export interface ISdModal<O> {
+    initialized: Signal<boolean>;
+    close: OutputEmitterRef<O | undefined>;
+    actionTplRef?: TemplateRef<any>;
+}
+/**
+ * 모달 생성 시 전달하는 정보
+ */
+export interface ISdModalInfo<T extends ISdModal<any>> {
+    title: string;
+    type: Type<T>;
+    inputs: Omit<TDirectiveInputSignals<T>, "initialized" | "close" | "actionTplRef">;
+}
+/**
+ * 모달 옵션
+ */
+export interface ISdModalOptions {
+    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;
+}
+/**
+ * 모달 내부에서 inject하여 사용하는 프로바이더
+ */
+export declare class SdActivatedModalProvider<T extends ISdModal<any> = ISdModal<any>> {
+    modalComponent: import("@angular/core").WritableSignal<any>;
+    contentComponent: import("@angular/core").WritableSignal<T | undefined>;
+    canDeactivefn: () => boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdActivatedModalProvider<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdActivatedModalProvider<any>>;
+}
+/**
+ * 모달을 프로그래밍 방식으로 생성하는 프로바이더
+ */
+export declare class SdModalProvider {
+    private readonly _appRef;
+    private readonly _envInjector;
+    private readonly _injector;
+    modalCount: import("@angular/core").WritableSignal<number>;
+    showAsync<T extends ISdModal<any>>(modal: ISdModalInfo<T>, options?: ISdModalOptions): Promise<Parameters<T["close"]["emit"]>[0] | undefined>;
+    private _assignZIndex;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdModalProvider, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SdModalProvider>;
+}
+//# sourceMappingURL=sd-modal.provider.d.ts.map

package/dist/ui/overlay/modal/sd-modal.provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-modal.provider.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\overlay\\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,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEzF,OAAO,wBAAwB,CAAC;;AAEhC;;GAEG;AACH,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,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;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,CAAC;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC;IACd,MAAM,EAAE,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,CAAC;CACnF;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,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,wBAAwB,CAAC,CAAC,SAAS,QAAQ,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC;IAC3E,cAAc,8CAA0B;IACxC,gBAAgB,wDAAoC;IACpD,aAAa,EAAE,MAAM,OAAO,CAAc;yCAH/B,wBAAwB;6CAAxB,wBAAwB;CAIpC;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,QAAQ,CAAC,GAAG,CAAC,EACrC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EACtB,OAAO,CAAC,EAAE,eAAe,GACxB,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAwHzD,OAAO,CAAC,aAAa;yCAlIV,eAAe;6CAAf,eAAe;CA6I3B"}

package/dist/ui/overlay/modal/sd-modal.provider.js

@@ -0,0 +1,146 @@
+import { ApplicationRef, createComponent, EnvironmentInjector, inject, Injectable, Injector, signal, } from "@angular/core";
+import { outputToObservable } from "@angular/core/rxjs-interop";
+import { Subscription } from "rxjs";
+import { SdModalControl } from "./sd-modal.control";
+import "@simplysm/core-browser";
+import * as i0 from "@angular/core";
+/**
+ * 모달 내부에서 inject하여 사용하는 프로바이더
+ */
+export class SdActivatedModalProvider {
+    modalComponent = signal(undefined, ...(ngDevMode ? [{ debugName: "modalComponent" }] : /* istanbul ignore next */ []));
+    contentComponent = signal(undefined, ...(ngDevMode ? [{ debugName: "contentComponent" }] : /* istanbul ignore next */ []));
+    canDeactivefn = () => true;
+    static ɵfac = function SdActivatedModalProvider_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdActivatedModalProvider)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: SdActivatedModalProvider, factory: SdActivatedModalProvider.ɵfac });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdActivatedModalProvider, [{
+        type: Injectable
+    }], null, null); })();
+/**
+ * 모달을 프로그래밍 방식으로 생성하는 프로바이더
+ */
+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. SdModalControl 생성 (projectableNodes로 컨텐츠 삽입)
+            const modalRef = createComponent(SdModalControl, {
+                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);
+            // 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();
+                // DOM에서 제거
+                const modalEl = modalRef.location.nativeElement;
+                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);
+            };
+            // 10. close output 구독 (컨텐츠 컴포넌트가 직접 close.emit 호출)
+            closeSub = outputToObservable(contentRef.instance.close).subscribe((result) => {
+                cleanup(result);
+            });
+            // 12. SdModalControl의 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/ui/overlay/modal/sd-prompt-modal.control.d.ts

@@ -0,0 +1,19 @@
+import type { ISdModal } from "./sd-modal.provider";
+import * as i0 from "@angular/core";
+/**
+ * 범용 프롬프트 모달.
+ * ISdModal<string> 구현. message를 표시하고, 텍스트 입력 후 확인/취소.
+ * 확인 시 입력값 emit, 취소 시 undefined emit.
+ */
+export declare class SdPromptModalControl implements ISdModal<string> {
+    initialized: import("@angular/core").WritableSignal<boolean>;
+    close: import("@angular/core").OutputEmitterRef<string | undefined>;
+    message: import("@angular/core").InputSignal<string>;
+    _inputValue: import("@angular/core").WritableSignal<string>;
+    onInputChange(event: Event): void;
+    onConfirm(): void;
+    onCancel(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdPromptModalControl, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdPromptModalControl, "sd-prompt-modal", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; }, { "close": "close"; }, never, never, true, never>;
+}
+//# sourceMappingURL=sd-prompt-modal.control.d.ts.map

package/dist/ui/overlay/modal/sd-prompt-modal.control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sd-prompt-modal.control.d.ts","sourceRoot":"","sources":["..\\..\\..\\..\\src\\ui\\overlay\\modal\\sd-prompt-modal.control.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;;AAGpD;;;;GAIG;AACH,qBAoDa,oBAAqB,YAAW,QAAQ,CAAC,MAAM,CAAC;IAC3D,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,oBAAoB;2CAApB,oBAAoB;CAuBhC"}