@simplysm/angular 14.2.7 → 14.2.8

package/dist/core/modal/injectDragResize.d.ts

@@ -5,6 +5,16 @@ interface DragResizeOptions {
     minHeightPx: Signal<number | undefined>;
     onEnd: () => void;
 }
+/**
+ * `._dialog` 는 평소 CSS 로 중앙 정렬(`position: relative` + `margin: 0 auto`)되어 있어
+ * `left`/`top` 이 "정상 배치 위치 대비 상대 offset" 으로 해석된다.
+ * 드래그, 리사이즈는 절대 좌표로 계산하므로 시작 시점에 절대 좌표계로 전환한다.
+ * 전환만으로는 위치, 크기가 변하지 않으며, 이미 전환된 요소에 다시 적용해도 결과가 같다.
+ */
+export declare function pinDialogAbsolute(dialogEl: HTMLElement): {
+    left: number;
+    top: number;
+};
 export declare function injectDragResize(opt: DragResizeOptions): {
     startDrag: (event: MouseEvent) => void;
     startResize: (event: MouseEvent, dir: string) => void;

package/dist/core/modal/injectDragResize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"injectDragResize.d.ts","sourceRoot":"","sources":["../../../src/core/modal/injectDragResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAsB,MAAM,eAAe,CAAC;AAEhE,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CAiJA"}
+{"version":3,"file":"injectDragResize.d.ts","sourceRoot":"","sources":["../../../src/core/modal/injectDragResize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAsB,MAAM,eAAe,CAAC;AAEhE,UAAU,iBAAiB;IACzB,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAC;IACxC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAuBD;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,WAAW,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAiCtF;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,iBAAiB,GAAG;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD,CA8IA"}

package/dist/core/modal/injectDragResize.js

@@ -1,4 +1,53 @@
 import { inject, DestroyRef } from "@angular/core";
+/** `auto`, `none` 등 길이가 아닌 값은 하한 없음(0)으로 본다. */
+function parseCssMinPx(value) {
+    const parsed = parseFloat(value);
+    return Number.isNaN(parsed) ? 0 : parsed;
+}
+function shiftPercentSize(dialogStyle, prop, padPx) {
+    if (padPx === 0)
+        return;
+    const value = dialogStyle[prop];
+    if (!value.includes("%"))
+        return;
+    dialogStyle[prop] = `calc(${value} - ${padPx}px)`;
+}
+/**
+ * `._dialog` 는 평소 CSS 로 중앙 정렬(`position: relative` + `margin: 0 auto`)되어 있어
+ * `left`/`top` 이 "정상 배치 위치 대비 상대 offset" 으로 해석된다.
+ * 드래그, 리사이즈는 절대 좌표로 계산하므로 시작 시점에 절대 좌표계로 전환한다.
+ * 전환만으로는 위치, 크기가 변하지 않으며, 이미 전환된 요소에 다시 적용해도 결과가 같다.
+ */
+export function pinDialogAbsolute(dialogEl) {
+    const wasRelative = getComputedStyle(dialogEl).position === "relative";
+    const parentEl = dialogEl.offsetParent;
+    const beforeRect = dialogEl.getBoundingClientRect();
+    const roundedLeft = dialogEl.offsetLeft;
+    const roundedTop = dialogEl.offsetTop;
+    dialogEl.style.position = "absolute";
+    dialogEl.style.margin = "0";
+    dialogEl.style.right = "auto";
+    dialogEl.style.bottom = "auto";
+    dialogEl.style.left = `${roundedLeft}px`;
+    dialogEl.style.top = `${roundedTop}px`;
+    if (wasRelative && parentEl != null) {
+        // 백분율 크기의 기준 박스가 부모 content box 에서 offsetParent padding box 로 바뀐다.
+        const parentStyle = getComputedStyle(parentEl);
+        const padX = parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight);
+        const padY = parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom);
+        shiftPercentSize(dialogEl.style, "width", padX);
+        shiftPercentSize(dialogEl.style, "maxWidth", padX);
+        shiftPercentSize(dialogEl.style, "height", padY);
+        shiftPercentSize(dialogEl.style, "maxHeight", padY);
+    }
+    // offsetLeft/offsetTop 은 정수로 반올림되므로, 전환 전후 실제 위치 차이만큼 되돌린다.
+    const afterRect = dialogEl.getBoundingClientRect();
+    const pinnedLeft = roundedLeft - (afterRect.left - beforeRect.left);
+    const pinnedTop = roundedTop - (afterRect.top - beforeRect.top);
+    dialogEl.style.left = `${pinnedLeft}px`;
+    dialogEl.style.top = `${pinnedTop}px`;
+    return { left: pinnedLeft, top: pinnedTop };
+}
 export function injectDragResize(opt) {
     const destroyRef = inject(DestroyRef);
     let dragState;
@@ -22,8 +71,8 @@ export function injectDragResize(opt) {
             return;
         const dx = event.clientX - resizeState.startX;
         const dy = event.clientY - resizeState.startY;
-        const minW = opt.minWidthPx() ?? 0;
-        const minH = opt.minHeightPx() ?? 0;
+        const minW = resizeState.minWidth;
+        const minH = resizeState.minHeight;
         let newWidth = resizeState.startWidth;
         let newHeight = resizeState.startHeight;
         let newLeft = resizeState.startLeft;
@@ -71,23 +120,16 @@ export function injectDragResize(opt) {
             opt.onEnd();
         }
     }
-    function getParentRect(dialogEl) {
-        return dialogEl.offsetParent?.getBoundingClientRect() ?? {
-            left: 0,
-            top: 0,
-        };
-    }
     function startDrag(event) {
         const dialogEl = opt.getDialogEl();
         if (dialogEl == null)
             return;
-        const dialogRect = dialogEl.getBoundingClientRect();
-        const parentRect = getParentRect(dialogEl);
+        const pinned = pinDialogAbsolute(dialogEl);
         dragState = {
             startX: event.clientX,
             startY: event.clientY,
-            startLeft: dialogRect.left - parentRect.left,
-            startTop: dialogRect.top - parentRect.top,
+            startLeft: pinned.left,
+            startTop: pinned.top,
         };
         document.addEventListener("mousemove", onDocumentMouseMove);
         document.addEventListener("mouseup", onDocumentMouseUp);
@@ -96,16 +138,19 @@ export function injectDragResize(opt) {
         const dialogEl = opt.getDialogEl();
         if (dialogEl == null)
             return;
-        const dialogRect = dialogEl.getBoundingClientRect();
-        const parentRect = getParentRect(dialogEl);
+        const pinned = pinDialogAbsolute(dialogEl);
+        const dialogStyle = getComputedStyle(dialogEl);
         resizeState = {
             dir,
             startX: event.clientX,
             startY: event.clientY,
             startWidth: dialogEl.offsetWidth,
             startHeight: dialogEl.offsetHeight,
-            startLeft: dialogRect.left - parentRect.left,
-            startTop: dialogRect.top - parentRect.top,
+            startLeft: pinned.left,
+            startTop: pinned.top,
+            // CSS 하한을 넘겨 줄이면 실제 크기는 안 줄고 반대쪽 변만 밀려나므로, 실제 제약을 하한으로 삼는다.
+            minWidth: Math.max(opt.minWidthPx() ?? 0, parseCssMinPx(dialogStyle.minWidth)),
+            minHeight: Math.max(opt.minHeightPx() ?? 0, parseCssMinPx(dialogStyle.minHeight)),
         };
         document.addEventListener("mousemove", onDocumentMouseMove);
         document.addEventListener("mouseup", onDocumentMouseUp);

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

@@ -30,8 +30,12 @@ export declare class SdModal {
     actionTplRef: import("@angular/core").InputSignal<TemplateRef<any> | undefined>;
     closeRequest: import("@angular/core").OutputEmitterRef<void>;
     private readonly _dragResize;
+    /** 화면 넘침 클램프로 덮기 직전의 크기. 클램프 중이 아니면 undefined. */
+    private _clampedWidth;
+    private _clampedHeight;
     constructor();
     onResizeMouseDown(event: MouseEvent, dir: string): void;
+    onDialogMouseDown(): void;
     onHeaderMouseDown(event: MouseEvent): void;
     onBackdropClick(): void;
     onCloseButtonClick(): void;
@@ -40,8 +44,10 @@ export declare class SdModal {
     onHostResize(event: SdResizeEvent): void;
     onDialogResize(event: SdResizeEvent): void;
     onWindowResize(): void;
+    private _clampIntoHost;
     private _requestClose;
     private _bringToFront;
+    private _forgetClampedSize;
     private _calcHeight;
     private _calcWidth;
     private _getDialogEl;

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

@@ -1 +1 @@
-{"version":3,"file":"sd-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,wBAAwB,CAAC;;;AAEhC,qBAkTa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAC1F,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEc;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,WAAW,0DAAwC;IACnD,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;;IAoCH,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAKvD,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKxC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAK1C,cAAc,IAAI,IAAI;IAYtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;YAIN,WAAW;YAgBX,cAAc;yCAjMjB,OAAO;2CAAP,OAAO;CAgNnB"}
+{"version":3,"file":"sd-modal.d.ts","sourceRoot":"","sources":["../../../src/core/modal/sd-modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAWL,KAAK,WAAW,EAEjB,MAAM,eAAe,CAAC;AASvB,OAAO,EAAqB,KAAK,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,wBAAwB,CAAC;;;AAEhC,qBAmTa,OAAO;IAClB,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAwD;IAC1F,OAAO,CAAC,QAAQ,CAAC,eAAe,CAEc;IAC9C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAwB;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAqB;IAEhD,SAAS,CAAC,QAAQ,CAAC,OAAO,yVAAW;IAErC,IAAI,+CAAgB;IACpB,GAAG,0DAAwC;IAC3C,KAAK,8CAAa;IAClB,UAAU,+CAAgB;IAC1B,eAAe,+CAAgB;IAC/B,WAAW,0DAAwC;IACnD,kBAAkB,+CAAe;IACjC,mBAAmB,+CAAe;IAClC,KAAK,+CAAgB;IACrB,IAAI,+CAAgB;IACpB,SAAS,+CAAgB;IACzB,OAAO,+CAAgB;IACvB,QAAQ,gFAA8D;IACtE,WAAW,0DAAwC;IACnD,UAAU,0DAAwC;IAClD,QAAQ,0DAAwC;IAChD,OAAO,0DAAwC;IAC/C,YAAY,oEAAkD;IAE9D,YAAY,iDAAkB;IAE9B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAKzB;IAEH,kDAAkD;IAClD,OAAO,CAAC,aAAa,CAAqB;IAC1C,OAAO,CAAC,cAAc,CAAqB;;IAqC3C,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAOvD,iBAAiB,IAAI,IAAI;IAIzB,iBAAiB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;IAO1C,eAAe,IAAI,IAAI;IAKvB,kBAAkB,IAAI,IAAI;IAI1B,eAAe,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAS3C,aAAa,IAAI,IAAI;IAIrB,YAAY,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAKxC,cAAc,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI;IAK1C,cAAc,IAAI,IAAI;IAQtB,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,WAAW;IAsBnB,OAAO,CAAC,UAAU;IAoBlB,OAAO,CAAC,YAAY;YAIN,WAAW;YAoBX,cAAc;yCAnPjB,OAAO;2CAAP,OAAO;CAyQnB"}

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

@@ -5,7 +5,7 @@ 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 { injectDragResize, pinDialogAbsolute } from "./injectDragResize";
 import { SdAnchor } from "../../controls/button/sd-anchor";
 import { SdResizeDirective } from "../events/sd-resize";
 import "@simplysm/core-browser";
@@ -130,6 +130,9 @@ export class SdModal {
         minHeightPx: this.minHeightPx,
         onEnd: () => void this._saveConfig().catch((err) => this._errorHandler.handleError(err)),
     });
+    /** 화면 넘침 클램프로 덮기 직전의 크기. 클램프 중이 아니면 undefined. */
+    _clampedWidth;
+    _clampedHeight;
     constructor() {
         // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
         afterNextRender(() => {
@@ -154,6 +157,7 @@ export class SdModal {
             else {
                 dialogEl.style.height = "";
             }
+            this._forgetClampedSize();
         });
         // key 기반 설정 복원
         effect(() => {
@@ -165,8 +169,13 @@ export class SdModal {
     }
     onResizeMouseDown(event, dir) {
         event.preventDefault();
+        // 사용자가 직접 정하는 크기가 자동 클램프 이전 크기보다 우선한다.
+        this._forgetClampedSize();
         this._dragResize.startResize(event, dir);
     }
+    onDialogMouseDown() {
+        this._bringToFront();
+    }
     onHeaderMouseDown(event) {
         if (!this.movable())
             return;
@@ -212,12 +221,20 @@ export class SdModal {
         const dialogEl = this._getDialogEl();
         if (dialogEl == null)
             return;
+        // 위치를 잡지 않은 모달은 CSS 중앙 정렬이 창 크기를 따라가므로 보정 대상이 아니다.
+        if (dialogEl.style.left === "" && dialogEl.style.top === "")
+            return;
+        this._clampIntoHost(dialogEl);
+    }
+    _clampIntoHost(dialogEl) {
         const hostEl = this._elRef.nativeElement;
-        if (dialogEl.offsetLeft > hostEl.offsetWidth - 100) {
-            dialogEl.style.left = hostEl.offsetWidth - 100 + "px";
+        const maxLeft = Math.max(0, hostEl.offsetWidth - 100);
+        if (dialogEl.offsetLeft > maxLeft) {
+            dialogEl.style.left = `${maxLeft}px`;
         }
-        if (dialogEl.offsetTop > hostEl.offsetHeight - 100) {
-            dialogEl.style.top = hostEl.offsetHeight - 100 + "px";
+        const maxTop = Math.max(0, hostEl.offsetHeight - 100);
+        if (dialogEl.offsetTop > maxTop) {
+            dialogEl.style.top = `${maxTop}px`;
         }
     }
     _requestClose() {
@@ -244,25 +261,47 @@ export class SdModal {
             return;
         hostEl.style.zIndex = String(maxZ + 1);
     }
+    _forgetClampedSize() {
+        this._clampedWidth = undefined;
+        this._clampedHeight = undefined;
+    }
     _calcHeight() {
         const dialogEl = this._getDialogEl();
         if (dialogEl == null)
             return;
-        const style = getComputedStyle(this._elRef.nativeElement);
-        const paddingTop = style.paddingTop === "" ? 0 : parseInt(style.paddingTop, 10) || 0;
-        if (dialogEl.offsetHeight > this._elRef.nativeElement.offsetHeight - paddingTop) {
+        // 클램프 중이면 dialog 높이가 호스트에 맞춰져 있어 실제 필요 높이를 알 수 없다. 먼저 되돌려 잰다.
+        if (this._clampedHeight != null) {
+            dialogEl.style.height = this._clampedHeight;
+            dialogEl.style.maxHeight = "";
+        }
+        const hostEl = this._elRef.nativeElement;
+        const paddingTop = parseFloat(getComputedStyle(hostEl).paddingTop) || 0;
+        if (dialogEl.offsetHeight > hostEl.offsetHeight - paddingTop) {
+            this._clampedHeight ??= dialogEl.style.height;
             dialogEl.style.maxHeight = "100%";
             dialogEl.style.height = "100%";
         }
+        else {
+            this._clampedHeight = undefined;
+        }
     }
     _calcWidth() {
         const dialogEl = this._getDialogEl();
         if (dialogEl == null)
             return;
-        if (dialogEl.offsetWidth > this._elRef.nativeElement.offsetWidth) {
+        if (this._clampedWidth != null) {
+            dialogEl.style.width = this._clampedWidth;
+            dialogEl.style.maxWidth = "";
+        }
+        const hostEl = this._elRef.nativeElement;
+        if (dialogEl.offsetWidth > hostEl.offsetWidth) {
+            this._clampedWidth ??= dialogEl.style.width;
             dialogEl.style.maxWidth = "100%";
             dialogEl.style.width = "100%";
         }
+        else {
+            this._clampedWidth = undefined;
+        }
     }
     _getDialogEl() {
         return this._elRef.nativeElement.querySelector("._dialog");
@@ -274,11 +313,14 @@ export class SdModal {
         const dialogEl = this._getDialogEl();
         if (dialogEl == null)
             return;
+        // 클램프 중이면 화면에 맞춘 값이 아니라 그 직전 크기를 저장해야 다시 열 때 원래 크기로 뜬다.
+        const savedWidth = this._clampedWidth ?? dialogEl.style.width;
+        const savedHeight = this._clampedHeight ?? dialogEl.style.height;
         const config = {};
-        if (dialogEl.style.width !== "")
-            config["width"] = dialogEl.style.width;
-        if (dialogEl.style.height !== "")
-            config["height"] = dialogEl.style.height;
+        if (savedWidth !== "")
+            config["width"] = savedWidth;
+        if (savedHeight !== "")
+            config["height"] = savedHeight;
         if (dialogEl.style.left !== "")
             config["left"] = dialogEl.style.left;
         if (dialogEl.style.top !== "")
@@ -298,23 +340,28 @@ export class SdModal {
             dialogEl.style.width = config["width"];
         if (config["height"] != null)
             dialogEl.style.height = config["height"];
-        if (config["left"] != null)
-            dialogEl.style.left = config["left"];
-        if (config["top"] != null)
-            dialogEl.style.top = config["top"];
+        this._forgetClampedSize();
+        if (config["left"] != null || config["top"] != null) {
+            pinDialogAbsolute(dialogEl);
+            if (config["left"] != null)
+                dialogEl.style.left = config["left"];
+            if (config["top"] != null)
+                dialogEl.style.top = config["top"];
+            this._clampIntoHost(dialogEl);
+        }
     }
     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 & 1) {
             i0.ɵɵlistener("sdResize", function SdModal_sdResize_HostBindingHandler($event) { return ctx.onHostResize($event); })("resize", function SdModal_resize_HostBindingHandler() { return ctx.onWindowResize(); }, i0.ɵɵresolveWindow);
         } 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"], headerStyle: [1, "headerStyle"], 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"], actionTplRef: [1, "actionTplRef"] }, outputs: { open: "openChange", closeRequest: "closeRequest" }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.SdResizeDirective, outputs: ["sdResize", "sdResize"] }])], ngContentSelectors: _c0, decls: 6, vars: 2, consts: [["tabindex", "-1", "role", "button", 1, "_backdrop", 3, "click", "keydown.enter"], ["tabindex", "-1", 1, "_dialog", 3, "keydown", "focus", "sdResize"], [1, "_header", 3, "style"], [1, "_content"], [1, "_header", 3, "mousedown"], [1, "_title"], [1, "_close-btn", 3, "theme"], [4, "ngTemplateOutlet"], [1, "_close-btn", 3, "click", "theme"], [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) {
+        } }, inputs: { open: [1, "open"], key: [1, "key"], title: [1, "title"], hideHeader: [1, "hideHeader"], hideCloseButton: [1, "hideCloseButton"], headerStyle: [1, "headerStyle"], 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"], actionTplRef: [1, "actionTplRef"] }, outputs: { open: "openChange", closeRequest: "closeRequest" }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.SdResizeDirective, outputs: ["sdResize", "sdResize"] }])], ngContentSelectors: _c0, decls: 6, vars: 2, consts: [["tabindex", "-1", "role", "button", 1, "_backdrop", 3, "click", "keydown.enter"], ["tabindex", "-1", 1, "_dialog", 3, "mousedown", "keydown", "focus", "sdResize"], [1, "_header", 3, "style"], [1, "_content"], [1, "_header", 3, "mousedown"], [1, "_title"], [1, "_close-btn", 3, "theme"], [4, "ngTemplateOutlet"], [1, "_close-btn", 3, "click", "theme"], [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("click", function SdModal_Template_div_click_0_listener() { return ctx.onBackdropClick(); })("keydown.enter", function SdModal_Template_div_keydown_enter_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(); })("sdResize", function SdModal_Template_div_sdResize_1_listener($event) { return ctx.onDialogResize($event); });
+            i0.ɵɵlistener("mousedown", function SdModal_Template_div_mousedown_1_listener() { return ctx.onDialogMouseDown(); })("keydown", function SdModal_Template_div_keydown_1_listener($event) { return ctx.onDialogKeydown($event); })("focus", function SdModal_Template_div_focus_1_listener() { return ctx.onDialogFocus(); })("sdResize", function SdModal_Template_div_sdResize_1_listener($event) { return ctx.onDialogResize($event); });
             i0.ɵɵconditionalCreate(2, SdModal_Conditional_2_Template, 5, 5, "div", 2);
             i0.ɵɵelementStart(3, "div", 3);
             i0.ɵɵprojection(4);
@@ -348,6 +395,7 @@ export class SdModal {
     <div
       class="_dialog"
       tabindex="-1"
+      (mousedown)="onDialogMouseDown()"
       (keydown)="onDialogKeydown($event)"
       (focus)="onDialogFocus()"
       (sdResize)="onDialogResize($event)"
@@ -411,4 +459,4 @@ export class SdModal {
     </div>
   `, styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--sd-z-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--sd-topbar-height) + var(--sd-gap-sm));\n  opacity: 0;\n  transition: opacity var(--sd-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-color: var(--sd-bg-backdrop);\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-color: var(--sd-bg-elevated);\n  border: 1px solid var(--sd-modal-bd);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--sd-shadow-size)) calc(16 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n  border-radius: var(--sd-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--sd-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(--sd-bd-hairline);\n  background-color: var(--sd-modal-header-bg);\n  color: var(--sd-modal-header-tx);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  color: var(--sd-modal-header-tx-muted);\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  color: var(--sd-modal-header-tx);\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(--sd-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(--sd-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(--sd-gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-top-right {\n  right: 0;\n  top: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-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(--sd-gap-sm);\n  height: var(--sd-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(--sd-gap-sm);\n  cursor: ns-resize;\n}\nsd-modal > ._dialog > ._resize-handle._resize-bottom-right {\n  right: 0;\n  bottom: 0;\n  width: var(--sd-gap-sm);\n  height: var(--sd-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(--sd-gap-sm);\n  height: var(--sd-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(--sd-shadow-size)) calc(4 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\n  border: 1px solid var(--sd-bd-hairline);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--sd-shadow-size)) calc(16 * 4 * var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color), 0 var(--sd-shadow-size) calc(var(--sd-shadow-size) * var(--sd-shadow-blur-mult)) var(--sd-shadow-color);\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(--sd-gap-xxl) * 2);\n  bottom: var(--sd-gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--sd-gap-xxl);\n  top: var(--sd-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-color: transparent;\n  color: var(--sd-tx-faint);\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 }] }], headerStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerStyle", 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 }] }], 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: 332 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdModal, { className: "SdModal", filePath: "packages/angular/src/core/modal/sd-modal.ts", lineNumber: 333 }); })();

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

@@ -1 +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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,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;IAkKzD,OAAO,CAAC,aAAa;yCA5KV,eAAe;6CAAf,eAAe;CAuL3B"}
+{"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,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAGtF,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,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,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,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;IAkKzD,OAAO,CAAC,aAAa;yCA5KV,eAAe;6CAAf,eAAe;CAuL3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/angular",
-  "version": "14.2.7",
+  "version": "14.2.8",
   "description": "심플리즘 패키지 - Angular",
   "license": "Apache-2.0",
   "author": "심플리즘",
@@ -58,10 +58,10 @@
     "jspdf": "^4.2.1",
     "rxjs": "^7.8.2",
     "tabbable": "^6.5.0",
-    "@simplysm/service-client": "14.2.7",
-    "@simplysm/core-browser": "14.2.7",
-    "@simplysm/core-common": "14.2.7",
-    "@simplysm/service-common": "14.2.7"
+    "@simplysm/core-common": "14.2.8",
+    "@simplysm/core-browser": "14.2.8",
+    "@simplysm/service-common": "14.2.8",
+    "@simplysm/service-client": "14.2.8"
   },
   "devDependencies": {
     "@angular/compiler": "^22.0.8"

package/src/core/modal/injectDragResize.ts

@@ -7,6 +7,68 @@ interface DragResizeOptions {
   onEnd: () => void;
 }
 
+type SizeStyleProp = "width" | "height" | "maxWidth" | "maxHeight";
+
+/** `auto`, `none` 등 길이가 아닌 값은 하한 없음(0)으로 본다. */
+function parseCssMinPx(value: string): number {
+  const parsed = parseFloat(value);
+  return Number.isNaN(parsed) ? 0 : parsed;
+}
+
+function shiftPercentSize(
+  dialogStyle: CSSStyleDeclaration,
+  prop: SizeStyleProp,
+  padPx: number,
+): void {
+  if (padPx === 0) return;
+
+  const value = dialogStyle[prop];
+  if (!value.includes("%")) return;
+
+  dialogStyle[prop] = `calc(${value} - ${padPx}px)`;
+}
+
+/**
+ * `._dialog` 는 평소 CSS 로 중앙 정렬(`position: relative` + `margin: 0 auto`)되어 있어
+ * `left`/`top` 이 "정상 배치 위치 대비 상대 offset" 으로 해석된다.
+ * 드래그, 리사이즈는 절대 좌표로 계산하므로 시작 시점에 절대 좌표계로 전환한다.
+ * 전환만으로는 위치, 크기가 변하지 않으며, 이미 전환된 요소에 다시 적용해도 결과가 같다.
+ */
+export function pinDialogAbsolute(dialogEl: HTMLElement): { left: number; top: number } {
+  const wasRelative = getComputedStyle(dialogEl).position === "relative";
+  const parentEl = dialogEl.offsetParent as HTMLElement | null;
+  const beforeRect = dialogEl.getBoundingClientRect();
+  const roundedLeft = dialogEl.offsetLeft;
+  const roundedTop = dialogEl.offsetTop;
+
+  dialogEl.style.position = "absolute";
+  dialogEl.style.margin = "0";
+  dialogEl.style.right = "auto";
+  dialogEl.style.bottom = "auto";
+  dialogEl.style.left = `${roundedLeft}px`;
+  dialogEl.style.top = `${roundedTop}px`;
+
+  if (wasRelative && parentEl != null) {
+    // 백분율 크기의 기준 박스가 부모 content box 에서 offsetParent padding box 로 바뀐다.
+    const parentStyle = getComputedStyle(parentEl);
+    const padX = parseFloat(parentStyle.paddingLeft) + parseFloat(parentStyle.paddingRight);
+    const padY = parseFloat(parentStyle.paddingTop) + parseFloat(parentStyle.paddingBottom);
+    shiftPercentSize(dialogEl.style, "width", padX);
+    shiftPercentSize(dialogEl.style, "maxWidth", padX);
+    shiftPercentSize(dialogEl.style, "height", padY);
+    shiftPercentSize(dialogEl.style, "maxHeight", padY);
+  }
+
+  // offsetLeft/offsetTop 은 정수로 반올림되므로, 전환 전후 실제 위치 차이만큼 되돌린다.
+  const afterRect = dialogEl.getBoundingClientRect();
+  const pinnedLeft = roundedLeft - (afterRect.left - beforeRect.left);
+  const pinnedTop = roundedTop - (afterRect.top - beforeRect.top);
+  dialogEl.style.left = `${pinnedLeft}px`;
+  dialogEl.style.top = `${pinnedTop}px`;
+
+  return { left: pinnedLeft, top: pinnedTop };
+}
+
 export function injectDragResize(opt: DragResizeOptions): {
   startDrag: (event: MouseEvent) => void;
   startResize: (event: MouseEvent, dir: string) => void;
@@ -26,6 +88,8 @@ export function injectDragResize(opt: DragResizeOptions): {
         startHeight: number;
         startLeft: number;
         startTop: number;
+        minWidth: number;
+        minHeight: number;
       }
     | undefined;
 
@@ -50,8 +114,8 @@ export function injectDragResize(opt: DragResizeOptions): {
 
     const dx = event.clientX - resizeState.startX;
     const dy = event.clientY - resizeState.startY;
-    const minW = opt.minWidthPx() ?? 0;
-    const minH = opt.minHeightPx() ?? 0;
+    const minW = resizeState.minWidth;
+    const minH = resizeState.minHeight;
 
     let newWidth = resizeState.startWidth;
     let newHeight = resizeState.startHeight;
@@ -105,25 +169,17 @@ export function injectDragResize(opt: DragResizeOptions): {
     }
   }
 
-  function getParentRect(dialogEl: HTMLElement): { left: number; top: number } {
-    return (dialogEl.offsetParent as HTMLElement | null)?.getBoundingClientRect() ?? {
-      left: 0,
-      top: 0,
-    };
-  }
-
   function startDrag(event: MouseEvent): void {
     const dialogEl = opt.getDialogEl();
     if (dialogEl == null) return;
 
-    const dialogRect = dialogEl.getBoundingClientRect();
-    const parentRect = getParentRect(dialogEl);
+    const pinned = pinDialogAbsolute(dialogEl);
 
     dragState = {
       startX: event.clientX,
       startY: event.clientY,
-      startLeft: dialogRect.left - parentRect.left,
-      startTop: dialogRect.top - parentRect.top,
+      startLeft: pinned.left,
+      startTop: pinned.top,
     };
     document.addEventListener("mousemove", onDocumentMouseMove);
     document.addEventListener("mouseup", onDocumentMouseUp);
@@ -133,8 +189,8 @@ export function injectDragResize(opt: DragResizeOptions): {
     const dialogEl = opt.getDialogEl();
     if (dialogEl == null) return;
 
-    const dialogRect = dialogEl.getBoundingClientRect();
-    const parentRect = getParentRect(dialogEl);
+    const pinned = pinDialogAbsolute(dialogEl);
+    const dialogStyle = getComputedStyle(dialogEl);
 
     resizeState = {
       dir,
@@ -142,8 +198,11 @@ export function injectDragResize(opt: DragResizeOptions): {
       startY: event.clientY,
       startWidth: dialogEl.offsetWidth,
       startHeight: dialogEl.offsetHeight,
-      startLeft: dialogRect.left - parentRect.left,
-      startTop: dialogRect.top - parentRect.top,
+      startLeft: pinned.left,
+      startTop: pinned.top,
+      // CSS 하한을 넘겨 줄이면 실제 크기는 안 줄고 반대쪽 변만 밀려나므로, 실제 제약을 하한으로 삼는다.
+      minWidth: Math.max(opt.minWidthPx() ?? 0, parseCssMinPx(dialogStyle.minWidth)),
+      minHeight: Math.max(opt.minHeightPx() ?? 0, parseCssMinPx(dialogStyle.minHeight)),
     };
     document.addEventListener("mousemove", onDocumentMouseMove);
     document.addEventListener("mouseup", onDocumentMouseUp);

package/src/core/modal/sd-modal.provider.ts

@@ -14,10 +14,7 @@ import {
 } from "@angular/core";
 import { outputToObservable } from "@angular/core/rxjs-interop";
 import { Subscription } from "rxjs";
-import type {
-  DirectiveInputSignals,
-  WithOptional,
-} from "../directive-input-signals";
+import type { DirectiveInputSignals, WithOptional } from "../directive-input-signals";
 import { SdModal } from "./sd-modal";
 import { SdActivatedModalProvider } from "./sd-activated-modal.provider";
 import "@simplysm/core-browser";

package/src/core/modal/sd-modal.ts

@@ -18,7 +18,7 @@ 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 { injectDragResize, pinDialogAbsolute } from "./injectDragResize";
 import { SdAnchor } from "../../controls/button/sd-anchor";
 import { SdResizeDirective, type SdResizeEvent } from "../events/sd-resize";
 import "@simplysm/core-browser";
@@ -49,6 +49,7 @@ import "@simplysm/core-browser";
     <div
       class="_dialog"
       tabindex="-1"
+      (mousedown)="onDialogMouseDown()"
       (keydown)="onDialogKeydown($event)"
       (focus)="onDialogFocus()"
       (sdResize)="onDialogResize($event)"
@@ -368,6 +369,10 @@ export class SdModal {
     onEnd: () => void this._saveConfig().catch((err) => this._errorHandler.handleError(err)),
   });
 
+  /** 화면 넘침 클램프로 덮기 직전의 크기. 클램프 중이 아니면 undefined. */
+  private _clampedWidth: string | undefined;
+  private _clampedHeight: string | undefined;
+
   constructor() {
     // data-sd-init: 첫 렌더 후 설정하여 CSS transition 트리거 허용
     afterNextRender(() => {
@@ -391,6 +396,7 @@ export class SdModal {
       } else {
         dialogEl.style.height = "";
       }
+      this._forgetClampedSize();
     });
 
     // key 기반 설정 복원
@@ -404,9 +410,15 @@ export class SdModal {
 
   onResizeMouseDown(event: MouseEvent, dir: string): void {
     event.preventDefault();
+    // 사용자가 직접 정하는 크기가 자동 클램프 이전 크기보다 우선한다.
+    this._forgetClampedSize();
     this._dragResize.startResize(event, dir);
   }
 
+  onDialogMouseDown(): void {
+    this._bringToFront();
+  }
+
   onHeaderMouseDown(event: MouseEvent): void {
     if (!this.movable()) return;
     if ((event.target as HTMLElement).closest("button, sd-anchor") != null) return;
@@ -449,12 +461,20 @@ export class SdModal {
   onWindowResize(): void {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
+    // 위치를 잡지 않은 모달은 CSS 중앙 정렬이 창 크기를 따라가므로 보정 대상이 아니다.
+    if (dialogEl.style.left === "" && dialogEl.style.top === "") return;
+    this._clampIntoHost(dialogEl);
+  }
+
+  private _clampIntoHost(dialogEl: HTMLElement): void {
     const hostEl = this._elRef.nativeElement;
-    if (dialogEl.offsetLeft > hostEl.offsetWidth - 100) {
-      dialogEl.style.left = hostEl.offsetWidth - 100 + "px";
+    const maxLeft = Math.max(0, hostEl.offsetWidth - 100);
+    if (dialogEl.offsetLeft > maxLeft) {
+      dialogEl.style.left = `${maxLeft}px`;
     }
-    if (dialogEl.offsetTop > hostEl.offsetHeight - 100) {
-      dialogEl.style.top = hostEl.offsetHeight - 100 + "px";
+    const maxTop = Math.max(0, hostEl.offsetHeight - 100);
+    if (dialogEl.offsetTop > maxTop) {
+      dialogEl.style.top = `${maxTop}px`;
     }
   }
 
@@ -482,23 +502,50 @@ export class SdModal {
     hostEl.style.zIndex = String(maxZ + 1);
   }
 
+  private _forgetClampedSize(): void {
+    this._clampedWidth = undefined;
+    this._clampedHeight = undefined;
+  }
+
   private _calcHeight(): void {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
-    const style = getComputedStyle(this._elRef.nativeElement);
-    const paddingTop = style.paddingTop === "" ? 0 : parseInt(style.paddingTop, 10) || 0;
-    if (dialogEl.offsetHeight > this._elRef.nativeElement.offsetHeight - paddingTop) {
+
+    // 클램프 중이면 dialog 높이가 호스트에 맞춰져 있어 실제 필요 높이를 알 수 없다. 먼저 되돌려 잰다.
+    if (this._clampedHeight != null) {
+      dialogEl.style.height = this._clampedHeight;
+      dialogEl.style.maxHeight = "";
+    }
+
+    const hostEl = this._elRef.nativeElement;
+    const paddingTop = parseFloat(getComputedStyle(hostEl).paddingTop) || 0;
+
+    if (dialogEl.offsetHeight > hostEl.offsetHeight - paddingTop) {
+      this._clampedHeight ??= dialogEl.style.height;
       dialogEl.style.maxHeight = "100%";
       dialogEl.style.height = "100%";
+    } else {
+      this._clampedHeight = undefined;
     }
   }
 
   private _calcWidth(): void {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
-    if (dialogEl.offsetWidth > this._elRef.nativeElement.offsetWidth) {
+
+    if (this._clampedWidth != null) {
+      dialogEl.style.width = this._clampedWidth;
+      dialogEl.style.maxWidth = "";
+    }
+
+    const hostEl = this._elRef.nativeElement;
+
+    if (dialogEl.offsetWidth > hostEl.offsetWidth) {
+      this._clampedWidth ??= dialogEl.style.width;
       dialogEl.style.maxWidth = "100%";
       dialogEl.style.width = "100%";
+    } else {
+      this._clampedWidth = undefined;
     }
   }
 
@@ -513,9 +560,13 @@ export class SdModal {
     const dialogEl = this._getDialogEl();
     if (dialogEl == null) return;
 
+    // 클램프 중이면 화면에 맞춘 값이 아니라 그 직전 크기를 저장해야 다시 열 때 원래 크기로 뜬다.
+    const savedWidth = this._clampedWidth ?? dialogEl.style.width;
+    const savedHeight = this._clampedHeight ?? dialogEl.style.height;
+
     const config: Record<string, string> = {};
-    if (dialogEl.style.width !== "") config["width"] = dialogEl.style.width;
-    if (dialogEl.style.height !== "") config["height"] = dialogEl.style.height;
+    if (savedWidth !== "") config["width"] = savedWidth;
+    if (savedHeight !== "") config["height"] = savedHeight;
     if (dialogEl.style.left !== "") config["left"] = dialogEl.style.left;
     if (dialogEl.style.top !== "") config["top"] = dialogEl.style.top;
 
@@ -526,7 +577,8 @@ export class SdModal {
     if (this._sdSystemConfig == null) return;
 
     const config = (await this._sdSystemConfig.getAsync(`sd-modal.${k}`)) as
-      Record<string, string | undefined> | undefined;
+      | Record<string, string | undefined>
+      | undefined;
     if (config == null) return;
 
     const dialogEl = this._getDialogEl();
@@ -534,7 +586,13 @@ export class SdModal {
 
     if (config["width"] != null) dialogEl.style.width = config["width"];
     if (config["height"] != null) dialogEl.style.height = config["height"];
-    if (config["left"] != null) dialogEl.style.left = config["left"];
-    if (config["top"] != null) dialogEl.style.top = config["top"];
+    this._forgetClampedSize();
+
+    if (config["left"] != null || config["top"] != null) {
+      pinDialogAbsolute(dialogEl);
+      if (config["left"] != null) dialogEl.style.left = config["left"];
+      if (config["top"] != null) dialogEl.style.top = config["top"];
+      this._clampIntoHost(dialogEl);
+    }
   }
 }