@simplysm/angular 14.2.7 → 14.2.9

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);
@@ -326,7 +373,7 @@ export class SdModal {
             i0.ɵɵconditional(!ctx.hideHeader() ? 2 : -1);
             i0.ɵɵadvance(3);
             i0.ɵɵconditional(ctx.resizable() ? 5 : -1);
-        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], 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}"], encapsulation: 2 });
+        } }, dependencies: [NgTemplateOutlet, NgIcon, SdAnchor, SdResizeDirective], styles: ["sd-modal {\n  display: block;\n  position: fixed;\n  z-index: var(--%NS%sd-z-modal);\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-top: calc(var(--%NS%sd-topbar-height) + var(--%NS%sd-gap-sm));\n  opacity: 0;\n  transition: opacity var(--%NS%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(--%NS%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(--%NS%sd-bg-elevated);\n  border: 1px solid var(--%NS%sd-modal-bd);\n  overflow: hidden;\n  box-shadow: 0 calc(16 * var(--%NS%sd-shadow-size)) calc(16 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color);\n  border-radius: var(--%NS%sd-radius-default);\n  transform: translateY(-25px);\n  transition: transform var(--%NS%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(--%NS%sd-bd-hairline);\n  background-color: var(--%NS%sd-modal-header-bg);\n  color: var(--%NS%sd-modal-header-tx);\n}\nsd-modal > ._dialog > ._header > ._title {\n  flex: 1;\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n}\nsd-modal > ._dialog > ._header > ._close-btn {\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n  color: var(--%NS%sd-modal-header-tx-muted);\n}\nsd-modal > ._dialog > ._header > ._close-btn:hover {\n  color: var(--%NS%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(--%NS%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(--%NS%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(--%NS%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(--%NS%sd-gap-sm);\n  height: var(--%NS%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(--%NS%sd-gap-sm);\n  height: var(--%NS%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(--%NS%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(--%NS%sd-gap-sm);\n  height: var(--%NS%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(--%NS%sd-gap-sm);\n  height: var(--%NS%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(--%NS%sd-shadow-size)) calc(4 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color);\n  border: 1px solid var(--%NS%sd-bd-hairline);\n}\nsd-modal[data-sd-float] > ._dialog:focus {\n  box-shadow: 0 calc(16 * var(--%NS%sd-shadow-size)) calc(16 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%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(--%NS%sd-gap-xxl) * 2);\n  bottom: var(--%NS%sd-gap-xxl);\n}\nsd-modal[data-sd-position=top-right] > ._dialog {\n  position: absolute;\n  right: var(--%NS%sd-gap-xxl);\n  top: var(--%NS%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(--%NS%sd-tx-faint);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdModal, [{
         type: Component,
@@ -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/dist/core/toast/sd-toast-container.js

@@ -5,7 +5,7 @@ export class SdToastContainer {
     static ɵfac = function SdToastContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdToastContainer)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdToastContainer, selectors: [["sd-toast-container"]], hostVars: 1, hostBindings: function SdToastContainer_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("data-sd-overlap", ctx.overlap() || undefined);
-        } }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--sd-gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--sd-gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--sd-gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--sd-gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--sd-gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--sd-gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--sd-gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--sd-gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--sd-gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--sd-gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--sd-gap-xxl);\n  left: var(--sd-gap-xxl);\n  right: var(--sd-gap-xxl);\n  width: auto;\n}"], encapsulation: 2 });
+        } }, inputs: { overlap: [1, "overlap"] }, decls: 0, vars: 0, template: function SdToastContainer_Template(rf, ctx) { }, styles: ["sd-toast-container {\n  display: flex;\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  padding: var(--%NS%sd-gap-xxl);\n  z-index: 9999;\n  flex-direction: column;\n}\n@supports not (appearance: auto) {\n  sd-toast-container.gap-xxs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxs > * + * {\n    margin-top: var(--%NS%sd-gap-xxs);\n  }\n  sd-toast-container.gap-xs {\n    gap: 0;\n  }\n  sd-toast-container.gap-xs > * + * {\n    margin-top: var(--%NS%sd-gap-xs);\n  }\n  sd-toast-container.gap-sm {\n    gap: 0;\n  }\n  sd-toast-container.gap-sm > * + * {\n    margin-top: var(--%NS%sd-gap-sm);\n  }\n  sd-toast-container.gap-default {\n    gap: 0;\n  }\n  sd-toast-container.gap-default > * + * {\n    margin-top: var(--%NS%sd-gap-default);\n  }\n  sd-toast-container.gap-lg {\n    gap: 0;\n  }\n  sd-toast-container.gap-lg > * + * {\n    margin-top: var(--%NS%sd-gap-lg);\n  }\n  sd-toast-container.gap-xl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xl > * + * {\n    margin-top: var(--%NS%sd-gap-xl);\n  }\n  sd-toast-container.gap-xxl {\n    gap: 0;\n  }\n  sd-toast-container.gap-xxl > * + * {\n    margin-top: var(--%NS%sd-gap-xxl);\n  }\n  sd-toast-container.gap-0 {\n    gap: 0;\n  }\n  sd-toast-container.gap-0 > * + * {\n    margin-top: var(--%NS%sd-gap-0);\n  }\n  sd-toast-container.gap-auto {\n    gap: 0;\n  }\n  sd-toast-container.gap-auto > * + * {\n    margin-top: var(--%NS%sd-gap-auto);\n  }\n}\n@media all and (max-width: 520px) {\n  sd-toast-container {\n    flex-direction: column-reverse;\n  }\n}\nsd-toast-container[data-sd-overlap] {\n  display: block;\n}\nsd-toast-container[data-sd-overlap] > sd-toast {\n  position: absolute;\n  bottom: var(--%NS%sd-gap-xxl);\n  left: var(--%NS%sd-gap-xxl);\n  right: var(--%NS%sd-gap-xxl);\n  width: auto;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToastContainer, [{
         type: Component,

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

@@ -64,7 +64,7 @@ export class SdToast {
             i0.ɵɵconditional(ctx.message() != undefined ? 2 : 3);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.useProgress() ? 4 : -1);
-        } }, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--sd-gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  transform: translateY(-100%);\n  border-radius: var(--sd-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--sd-shadow-size)) calc(12 * 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  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n  height: 4px;\n  border-radius: var(--sd-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--sd-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background-color: var(--sd-bg-blue-gray-solid);\n  color: var(--sd-tx-blue-gray-solid);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-blue-gray-subtle);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-primary-subtle);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background-color: var(--sd-bg-info-solid);\n  color: var(--sd-tx-info-solid);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-info-subtle);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background-color: var(--sd-bg-success-solid);\n  color: var(--sd-tx-success-solid);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-success-subtle);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background-color: var(--sd-bg-warning-solid);\n  color: var(--sd-tx-warning-solid);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-warning-subtle);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background-color: var(--sd-bg-danger-solid);\n  color: var(--sd-tx-danger-solid);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--sd-bg-state-active);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--sd-bg-danger-subtle);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--sd-animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--sd-animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--sd-line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--sd-gap-xs) var(--sd-gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2 });
+        } }, styles: ["sd-toast {\n  display: block;\n  margin-bottom: var(--%NS%sd-gap-sm);\n  text-align: center;\n  width: 100%;\n  pointer-events: none;\n}\nsd-toast > ._sd-toast-block {\n  display: inline-block;\n  text-align: left;\n  transform: translateY(-100%);\n  border-radius: var(--%NS%sd-radius-lg);\n  opacity: 0;\n  box-shadow: 0 calc(12 * var(--%NS%sd-shadow-size)) calc(12 * 4 * var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color), 0 var(--%NS%sd-shadow-size) calc(var(--%NS%sd-shadow-size) * var(--%NS%sd-shadow-blur-mult)) var(--%NS%sd-shadow-color);\n  pointer-events: auto;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-message {\n  padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n  word-break: break-all;\n  white-space: pre-wrap;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n  height: 4px;\n  border-radius: var(--%NS%sd-radius-xl);\n  margin: 0 4px 4px 4px;\n}\nsd-toast > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  border-radius: var(--%NS%sd-radius-xl);\n  height: 4px;\n  transition: width 1s ease-out;\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-gray-solid);\n  color: var(--%NS%sd-tx-gray-solid);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-gray-subtle);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-blue-gray-solid);\n  color: var(--%NS%sd-tx-blue-gray-solid);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=blue-gray] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-blue-gray-subtle);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-primary-solid);\n  color: var(--%NS%sd-tx-primary-solid);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=primary] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-primary-subtle);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-info-solid);\n  color: var(--%NS%sd-tx-info-solid);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=info] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-info-subtle);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-success-solid);\n  color: var(--%NS%sd-tx-success-solid);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=success] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-success-subtle);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-warning-solid);\n  color: var(--%NS%sd-tx-warning-solid);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=warning] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-warning-subtle);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block {\n  background-color: var(--%NS%sd-bg-danger-solid);\n  color: var(--%NS%sd-tx-danger-solid);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress {\n  background-color: var(--%NS%sd-bg-state-active);\n}\nsd-toast[data-sd-theme=danger] > ._sd-toast-block > ._sd-toast-progress > ._sd-toast-progress-bar {\n  background-color: var(--%NS%sd-bg-danger-subtle);\n}\nsd-toast[data-sd-open=true] > ._sd-toast-block {\n  transform: none;\n  transition: var(--%NS%sd-animation-duration) ease-out;\n  transition-property: transform, opacity;\n  opacity: 1;\n}\nsd-toast[data-sd-open=false] > ._sd-toast-block {\n  transform: translateY(-100%);\n  transition: var(--%NS%sd-animation-duration) ease-in;\n  transition-property: transform, opacity;\n  opacity: 0;\n}\n@media all and (max-width: 520px) {\n  sd-toast > ._sd-toast-block {\n    border-radius: calc(var(--%NS%sd-line-height) / 2);\n    transform: translateY(100%);\n  }\n  sd-toast > ._sd-toast-block > ._sd-toast-message {\n    padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n  }\n  sd-toast[data-sd-open=false] > ._sd-toast-block {\n    transform: translateY(100%);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdToast, [{
         type: Component,

package/dist/data/kanban/sd-kanban-board.js

@@ -26,7 +26,7 @@ export class SdKanbanBoard {
         } }, inputs: { selectedValues: [1, "selectedValues"] }, outputs: { selectedValues: "selectedValuesChange", drop: "drop" }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdKanbanBoard_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--sd-gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--sd-gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--sd-gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--sd-gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--sd-gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--sd-gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--sd-gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--sd-gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--sd-gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--sd-gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--sd-gap-auto);\n  }\n}"], encapsulation: 2 });
+        } }, styles: ["sd-kanban-board {\n  display: inline-flex;\n  flex-wrap: nowrap;\n  white-space: nowrap;\n  height: 100%;\n  flex-direction: row;\n  gap: var(--%NS%sd-gap-lg);\n}\n@supports not (appearance: auto) {\n  sd-kanban-board {\n    gap: 0;\n  }\n  sd-kanban-board > * + * {\n    margin-left: var(--%NS%sd-gap-lg);\n  }\n  sd-kanban-board.gap-xxs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxs > * + * {\n    margin-left: var(--%NS%sd-gap-xxs);\n  }\n  sd-kanban-board.gap-xs {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xs > * + * {\n    margin-left: var(--%NS%sd-gap-xs);\n  }\n  sd-kanban-board.gap-sm {\n    gap: 0;\n  }\n  sd-kanban-board.gap-sm > * + * {\n    margin-left: var(--%NS%sd-gap-sm);\n  }\n  sd-kanban-board.gap-default {\n    gap: 0;\n  }\n  sd-kanban-board.gap-default > * + * {\n    margin-left: var(--%NS%sd-gap-default);\n  }\n  sd-kanban-board.gap-lg {\n    gap: 0;\n  }\n  sd-kanban-board.gap-lg > * + * {\n    margin-left: var(--%NS%sd-gap-lg);\n  }\n  sd-kanban-board.gap-xl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xl > * + * {\n    margin-left: var(--%NS%sd-gap-xl);\n  }\n  sd-kanban-board.gap-xxl {\n    gap: 0;\n  }\n  sd-kanban-board.gap-xxl > * + * {\n    margin-left: var(--%NS%sd-gap-xxl);\n  }\n  sd-kanban-board.gap-0 {\n    gap: 0;\n  }\n  sd-kanban-board.gap-0 > * + * {\n    margin-left: var(--%NS%sd-gap-0);\n  }\n  sd-kanban-board.gap-auto {\n    gap: 0;\n  }\n  sd-kanban-board.gap-auto > * + * {\n    margin-left: var(--%NS%sd-gap-auto);\n  }\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanBoard, [{
         type: Component,

package/dist/data/kanban/sd-kanban-lane.js

@@ -174,7 +174,7 @@ export class SdKanbanLane {
             i0.ɵɵconditional(!ctx.collapse() ? 4 : -1);
             i0.ɵɵadvance();
             i0.ɵɵstyleProp("height", ctx.dragOvered() ? (ctx.dragKanban()?.heightOnDrag() ?? 0) + "px" : "0px")("display", ctx.dragKanban() ? "block" : "none");
-        } }, dependencies: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon], styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--sd-gap-xl) var(--sd-gap-lg);\n  background-color: var(--sd-bg-gray-subtle);\n  border-radius: var(--sd-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-state-active);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--sd-animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--sd-gap-lg);\n  visibility: visible;\n}"], encapsulation: 2 });
+        } }, dependencies: [SdBusyContainer, SdCheckbox, NgTemplateOutlet, SdAnchor, NgIcon], styles: ["sd-kanban-lane > .flex-fill > sd-busy-container {\n  padding: var(--%NS%sd-gap-xl) var(--%NS%sd-gap-lg);\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  border-radius: var(--%NS%sd-radius-default);\n  height: 100%;\n}\nsd-kanban-lane > .flex-fill > sd-busy-container > ._drop-position {\n  pointer-events: none;\n  border-radius: var(--%NS%sd-radius-default);\n  background-color: var(--%NS%sd-bg-state-active);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--%NS%sd-animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban-lane[data-sd-drag-over=true] > .flex-fill > sd-busy-container > ._drop-position {\n  margin-bottom: var(--%NS%sd-gap-lg);\n  visibility: visible;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanbanLane, [{
         type: Component,

package/dist/data/kanban/sd-kanban.js

@@ -117,7 +117,7 @@ export class SdKanban {
             i0.ɵɵadvance();
             i0.ɵɵclassMap(ctx.contentClass());
             i0.ɵɵproperty("draggable", ctx.draggable());
-        } }, dependencies: [SdResizeDirective], styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > .card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-state-active);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--sd-animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--sd-gap-lg);\n  visibility: visible;\n}\nsd-kanban > .card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--sd-gap-lg);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdResizeDirective], styles: ["sd-kanban {\n  position: relative;\n  display: block;\n}\nsd-kanban[data-sd-dragging-this=true] {\n  display: none;\n}\nsd-kanban > ._drag-position {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  pointer-events: none;\n}\nsd-kanban[data-sd-dragging=true] > ._drag-position {\n  pointer-events: auto;\n}\nsd-kanban[data-sd-dragging=true] > .card {\n  pointer-events: none;\n  cursor: pointer;\n}\nsd-kanban > ._drop-position {\n  border-radius: var(--%NS%sd-radius-default);\n  background-color: var(--%NS%sd-bg-state-active);\n  height: 0;\n  margin-bottom: 0;\n  visibility: hidden;\n  transition: var(--%NS%sd-animation-duration) linear;\n  transition-property: height, margin-bottom, visibility;\n}\nsd-kanban[data-sd-drag-over=true] > ._drop-position {\n  margin-bottom: var(--%NS%sd-gap-lg);\n  visibility: visible;\n}\nsd-kanban > .card {\n  white-space: normal;\n  user-select: none;\n  margin-bottom: var(--%NS%sd-gap-lg);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdKanban, [{
         type: Component,

package/dist/data/permission-table/sd-permission-table.js

@@ -369,7 +369,7 @@ export class SdPermissionTable {
             i0.ɵɵrepeater(ctx.items());
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("typed", ctx.itemTemplateType);
-        } }, dependencies: [SdTypedTemplate, NgTemplateOutlet, SdCollapseIcon, SdCheckbox, SdAnchor], styles: ["sd-permission-table table {\n  border-collapse: collapse;\n}\nsd-permission-table table > * > tr > * {\n  padding: var(--sd-gap-sm) var(--sd-gap-lg);\n  position: sticky;\n  top: 0;\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  color: var(--sd-tx-default);\n}\nsd-permission-table table > * > tr > * > * {\n  color: var(--sd-tx-default) !important;\n}\nsd-permission-table table > * > tr > *._title {\n  border-top-left-radius: 14px;\n  border-bottom-left-radius: 14px;\n  padding-left: var(--sd-gap-lg);\n}\nsd-permission-table table > * > tr[data-sd-collapse=true] {\n  display: none;\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title, sd-permission-table table > * > tr[data-sd-theme=first] > *._after {\n  background-color: var(--sd-permission-group-bg);\n  color: var(--sd-permission-group-tx);\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title > *, sd-permission-table table > * > tr[data-sd-theme=first] > *._after > * {\n  color: var(--sd-permission-group-tx) !important;\n}\nsd-permission-table table > * > tr[data-sd-theme=info] > *._title, sd-permission-table table > * > tr[data-sd-theme=info] > *._after {\n  background-color: var(--sd-bg-info-subtle);\n}\nsd-permission-table table > * > tr[data-sd-theme=warning] > *._title, sd-permission-table table > * > tr[data-sd-theme=warning] > *._after {\n  background-color: var(--sd-bg-warning-subtle);\n}\nsd-permission-table table > * > tr[data-sd-theme=success] > *._title, sd-permission-table table > * > tr[data-sd-theme=success] > *._after {\n  background-color: var(--sd-bg-success-subtle);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdTypedTemplate, NgTemplateOutlet, SdCollapseIcon, SdCheckbox, SdAnchor], styles: ["sd-permission-table table {\n  border-collapse: collapse;\n}\nsd-permission-table table > * > tr > * {\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-lg);\n  position: sticky;\n  top: 0;\n  border-top: 1px solid transparent;\n  border-bottom: 1px solid transparent;\n  color: var(--%NS%sd-tx-default);\n}\nsd-permission-table table > * > tr > * > * {\n  color: var(--%NS%sd-tx-default) !important;\n}\nsd-permission-table table > * > tr > *._title {\n  border-top-left-radius: 14px;\n  border-bottom-left-radius: 14px;\n  padding-left: var(--%NS%sd-gap-lg);\n}\nsd-permission-table table > * > tr[data-sd-collapse=true] {\n  display: none;\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title, sd-permission-table table > * > tr[data-sd-theme=first] > *._after {\n  background-color: var(--%NS%sd-permission-group-bg);\n  color: var(--%NS%sd-permission-group-tx);\n}\nsd-permission-table table > * > tr[data-sd-theme=first] > *._title > *, sd-permission-table table > * > tr[data-sd-theme=first] > *._after > * {\n  color: var(--%NS%sd-permission-group-tx) !important;\n}\nsd-permission-table table > * > tr[data-sd-theme=info] > *._title, sd-permission-table table > * > tr[data-sd-theme=info] > *._after {\n  background-color: var(--%NS%sd-bg-info-subtle);\n}\nsd-permission-table table > * > tr[data-sd-theme=warning] > *._title, sd-permission-table table > * > tr[data-sd-theme=warning] > *._after {\n  background-color: var(--%NS%sd-bg-warning-subtle);\n}\nsd-permission-table table > * > tr[data-sd-theme=success] > *._title, sd-permission-table table > * > tr[data-sd-theme=success] > *._after {\n  background-color: var(--%NS%sd-bg-success-subtle);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdPermissionTable, [{
         type: Component,

package/dist/data/sheet/sd-sheet.js

@@ -804,7 +804,7 @@ export class SdSheet {
             SdPagination,
             SdAnchor,
             SdButton,
-            SdResizeDirective], styles: ["sd-sheet {\n  border: 1px solid var(--sd-bd-soft);\n  border-radius: var(--sd-radius-default);\n}\nsd-sheet > ._tool {\n  background-color: var(--sd-bg-canvas);\n  border-top-left-radius: var(--sd-radius-default);\n  border-top-right-radius: var(--sd-radius-default);\n  border-bottom: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background-color: var(--sd-bg-sheet);\n  background-image: var(--sd-bg-sheet-image);\n  border-bottom-left-radius: var(--sd-radius-default);\n  border-bottom-right-radius: var(--sd-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--sd-radius-default);\n  box-shadow: var(--sd-sheet-shadow);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--sd-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--sd-bd-soft);\n  border-bottom: 1px solid var(--sd-bd-soft);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background-color: var(--sd-bg-gray-subtle);\n  min-width: calc(var(--sd-font-size-default) + 2px + var(--sd-sheet-ph) * 2);\n  padding: var(--sd-sheet-pv) var(--sd-sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--sd-tx-faint);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background-color: var(--sd-bg-gray-subtle);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--sd-gap-xs) var(--sd-gap-xs) var(--sd-gap-xs) 0;\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background-color: var(--sd-bg-warning-subtle);\n  text-align: left;\n  border-bottom: 1px solid var(--sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  font-family: var(--sd-font-family-field);\n  background-color: var(--sd-bg-content);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid currentColor;\n  border-bottom: 1px solid currentColor;\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background-color: var(--sd-bg-state-active);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--sd-focus-ring-color);\n  border-radius: var(--sd-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--sd-bd-default);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background-color: var(--sd-bg-primary-solid);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--sd-sheet-pv) var(--sd-sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\n}"], encapsulation: 2 });
+            SdResizeDirective], styles: ["sd-sheet {\n  border: 1px solid var(--%NS%sd-bd-soft);\n  border-radius: var(--%NS%sd-radius-default);\n}\nsd-sheet > ._tool {\n  background-color: var(--%NS%sd-bg-canvas);\n  border-top-left-radius: var(--%NS%sd-radius-default);\n  border-top-right-radius: var(--%NS%sd-radius-default);\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container {\n  position: relative;\n  background-color: var(--%NS%sd-bg-sheet);\n  background-image: var(--%NS%sd-bg-sheet-image);\n  border-bottom-left-radius: var(--%NS%sd-radius-default);\n  border-bottom-right-radius: var(--%NS%sd-radius-default);\n  overflow: auto;\n}\nsd-sheet > ._sheet-container > table {\n  border-spacing: 0;\n  table-layout: fixed;\n  margin-right: 2px;\n  margin-bottom: 2px;\n  border-bottom-right-radius: var(--%NS%sd-radius-default);\n  box-shadow: var(--%NS%sd-sheet-shadow);\n}\nsd-sheet > ._sheet-container > table > * > tr > *:last-child {\n  border-right: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > * > tr:last-child > * {\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > *:last-child > tr:last-child > td:last-child {\n  border-bottom-right-radius: var(--%NS%sd-radius-default);\n  overflow: hidden;\n}\nsd-sheet > ._sheet-container > table > * > tr > * {\n  border-right: 1px solid var(--%NS%sd-bd-soft);\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n  white-space: nowrap;\n  overflow: hidden;\n  padding: 0;\n  position: relative;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) + :not(._fixed):not([data-c=\"0\"]) {\n  border-left: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell {\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  min-width: calc(var(--%NS%sd-font-size-default) + 2px + var(--%NS%sd-sheet-ph) * 2);\n  padding: var(--%NS%sd-sheet-pv) var(--%NS%sd-sheet-ph);\n  text-align: left;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._feature-cell > ng-icon {\n  cursor: pointer;\n  color: var(--%NS%sd-tx-faint);\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed {\n  position: sticky;\n  left: 0;\n}\nsd-sheet > ._sheet-container > table > * > tr > *._fixed:has(+ :not(._fixed)) {\n  border-right: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead {\n  position: sticky;\n  top: 0;\n  z-index: 3;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th {\n  position: relative;\n  background-color: var(--%NS%sd-bg-gray-subtle);\n  vertical-align: middle;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._fixed {\n  z-index: 4;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._last-depth {\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._feature-cell {\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort {\n  cursor: pointer;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th._sort:hover {\n  text-decoration: underline;\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._headerContent > ._sort-icon {\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-xs) var(--%NS%sd-gap-xs) 0;\n  background-color: var(--%NS%sd-bg-gray-subtle);\n}\nsd-sheet > ._sheet-container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 2px;\n  cursor: ew-resize;\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr > th._last-depth {\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > thead:has(> tr._summary-row) > tr._summary-row > th {\n  background-color: var(--%NS%sd-bg-warning-subtle);\n  text-align: left;\n  border-bottom: 1px solid var(--%NS%sd-bd-soft);\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td {\n  font-family: var(--%NS%sd-font-family-field);\n  background-color: var(--%NS%sd-bg-content);\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td._fixed {\n  z-index: 2;\n}\nsd-sheet > ._sheet-container > table > tbody > tr > td > ._depth-indicator {\n  display: inline-block;\n  margin-top: 0.4em;\n  width: 0.5em;\n  height: 0.5em;\n  border-left: 1px solid currentColor;\n  border-bottom: 1px solid currentColor;\n  vertical-align: top;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  background-color: var(--%NS%sd-bg-state-active);\n  z-index: 6;\n}\nsd-sheet > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  position: absolute;\n  border: 2px solid var(--%NS%sd-focus-ring-color);\n  border-radius: var(--%NS%sd-radius-default);\n}\nsd-sheet > ._sheet-container > ._resize-indicator {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  height: 100%;\n  border: 1px dotted var(--%NS%sd-bd-default);\n  z-index: 7;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container {\n  display: none;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 5;\n}\nsd-sheet > ._sheet-container > ._select-row-indicator-container > ._select-row-indicator {\n  display: block;\n  left: 0;\n  position: absolute;\n  pointer-events: none;\n  background-color: var(--%NS%sd-bg-primary-solid);\n  opacity: 0.1;\n}\nsd-sheet ._p-sheet {\n  padding: var(--%NS%sd-sheet-pv) var(--%NS%sd-sheet-ph);\n}\nsd-sheet[data-sd-focus-mode=row] > ._sheet-container > ._focus-row-indicator > ._focus-cell-indicator {\n  display: none !important;\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n  border-radius: 0;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSheet, [{
         type: Component,

package/dist/data/state-preset/sd-state-preset.js

@@ -112,7 +112,7 @@ export class SdStatePreset {
             i0.ɵɵproperty("svg", ctx.tablerStar);
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx._presets());
-        } }, dependencies: [SdAnchor, NgIcon], styles: ["sd-state-preset {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-state-preset > ._sd-state-preset {\n  display: flex;\n  align-items: center;\n  gap: var(--sd-gap-sm);\n  flex-wrap: wrap;\n}\nsd-state-preset > ._sd-state-preset > ._add-btn {\n  line-height: var(--sd-line-height);\n  border: 1px solid transparent;\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--sd-gap-xs);\n  line-height: var(--sd-line-height);\n  border: 1px solid transparent;\n  border-radius: var(--sd-radius-lg);\n  padding: var(--sd-gap-sm) var(--sd-gap-default);\n  background-color: var(--sd-bg-gray-subtle);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item:hover {\n  background-color: var(--sd-bg-gray-subtle-hover);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item > sd-anchor {\n  padding: 0 var(--sd-gap-sm);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._add-btn {\n  padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._preset-item {\n  padding: var(--sd-gap-xs) var(--sd-gap-default);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._add-btn {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._preset-item {\n  padding: var(--sd-gap-default) var(--sd-gap-lg);\n}"], encapsulation: 2 });
+        } }, dependencies: [SdAnchor, NgIcon], styles: ["sd-state-preset {\n  display: inline-block;\n  vertical-align: top;\n}\nsd-state-preset > ._sd-state-preset {\n  display: flex;\n  align-items: center;\n  gap: var(--%NS%sd-gap-sm);\n  flex-wrap: wrap;\n}\nsd-state-preset > ._sd-state-preset > ._add-btn {\n  line-height: var(--%NS%sd-line-height);\n  border: 1px solid transparent;\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--%NS%sd-gap-xs);\n  line-height: var(--%NS%sd-line-height);\n  border: 1px solid transparent;\n  border-radius: var(--%NS%sd-radius-lg);\n  padding: var(--%NS%sd-gap-sm) var(--%NS%sd-gap-default);\n  background-color: var(--%NS%sd-bg-gray-subtle);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item:hover {\n  background-color: var(--%NS%sd-bg-gray-subtle-hover);\n}\nsd-state-preset > ._sd-state-preset > ._preset-item > sd-anchor {\n  padding: 0 var(--%NS%sd-gap-sm);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._add-btn {\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n}\nsd-state-preset[data-sd-size=sm] > ._sd-state-preset > ._preset-item {\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-default);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._add-btn {\n  padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n}\nsd-state-preset[data-sd-size=lg] > ._sd-state-preset > ._preset-item {\n  padding: var(--%NS%sd-gap-default) var(--%NS%sd-gap-lg);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdStatePreset, [{
         type: Component,

package/dist/features/editor/sd-markdown-editor.js

@@ -203,7 +203,7 @@ export class SdMarkdownEditor {
             i0.ɵɵdomElement(1, "div", 1);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.disabled() && !ctx.readonly() ? 0 : -1);
-        } }, styles: ["sd-markdown-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--sd-bd-field);\n  border-radius: var(--sd-radius-default);\n  background-color: var(--sd-bg-field);\n}\nsd-markdown-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--sd-gap-xs);\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button {\n  padding: var(--sd-gap-xs) var(--sd-gap-sm);\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: var(--sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--sd-font-size-default);\n  line-height: 1;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-markdown-editor {\n  display: block;\n  position: relative;\n  border: 1px solid var(--%NS%sd-bd-field);\n  border-radius: var(--%NS%sd-radius-default);\n  background-color: var(--%NS%sd-bg-field);\n}\nsd-markdown-editor > ._toolbar {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--%NS%sd-gap-xs);\n  padding: var(--%NS%sd-gap-xs);\n  border-bottom: 1px solid var(--%NS%sd-bd-hairline);\n}\nsd-markdown-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button {\n  padding: var(--%NS%sd-gap-xs) var(--%NS%sd-gap-sm);\n  border: 1px solid var(--%NS%sd-bd-hairline);\n  border-radius: var(--%NS%sd-radius-default);\n  background-color: transparent;\n  cursor: pointer;\n  font-size: var(--%NS%sd-font-size-default);\n  line-height: 1;\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--%NS%sd-bg-primary-solid);\n  color: var(--%NS%sd-tx-primary-solid);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--%NS%sd-bg-state-hover);\n}\nsd-markdown-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--%NS%sd-bg-primary-solid);\n}\nsd-markdown-editor > ._editor-container {\n  padding: var(--%NS%sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--%NS%sd-font-family-field);\n}\nsd-markdown-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-markdown-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-markdown-editor[data-sd-disabled=true] {\n  background-color: var(--%NS%sd-bg-disabled);\n  color: var(--%NS%sd-tx-disabled);\n}\nsd-markdown-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-markdown-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdMarkdownEditor, [{
         type: Component,