@simplysm/angular 14.2.2 → 14.2.3

package/dist/data/sheet/injectSheetDragSelection.js

@@ -0,0 +1,193 @@
+import { DestroyRef, inject } from "@angular/core";
+export function injectSheetDragSelection(options) {
+    const destroyRef = inject(DestroyRef);
+    let dragCleanup = null;
+    destroyRef.onDestroy(() => {
+        dragCleanup?.();
+    });
+    // 벗어난 1px 당 초당 스크롤 px, 그리고 초당 스크롤 상한
+    const AUTO_SCROLL_SPEED_PER_PX = 8;
+    const AUTO_SCROLL_MAX_SPEED = 2000;
+    // 고정 헤더에 가려지거나 컨테이너 밖에 있는 행은 소비자에게 안 보인다
+    function visibleBand() {
+        const containerRect = options.domAccessor.getContainer().getBoundingClientRect();
+        return {
+            top: containerRect.top + options.domAccessor.getTHead().offsetHeight,
+            bottom: containerRect.bottom,
+        };
+    }
+    function rowIndexOf(rowEl) {
+        const attr = rowEl.getAttribute("data-r");
+        const rowIdx = attr == null ? Number.NaN : parseInt(attr, 10);
+        if (Number.isNaN(rowIdx)) {
+            throw new Error(`시트 행 인덱스를 읽을 수 없습니다: data-r=${attr}`);
+        }
+        return rowIdx;
+    }
+    // 보이는 행 중 clientY 가 속한 행. 위아래로 벗어나면 가장 가까운 끝 행으로 맞춘다
+    function resolveRowIndex(clientY) {
+        const band = visibleBand();
+        const visibleRows = options.domAccessor.getRows().filter((rowEl) => {
+            const rect = rowEl.getBoundingClientRect();
+            return rect.bottom > band.top && rect.top < band.bottom;
+        });
+        if (visibleRows.length === 0)
+            return null;
+        const firstRect = visibleRows[0].getBoundingClientRect();
+        const lastRect = visibleRows[visibleRows.length - 1].getBoundingClientRect();
+        if (clientY < Math.max(firstRect.top, band.top))
+            return rowIndexOf(visibleRows[0]);
+        if (clientY >= Math.min(lastRect.bottom, band.bottom)) {
+            return rowIndexOf(visibleRows[visibleRows.length - 1]);
+        }
+        for (const rowEl of visibleRows) {
+            const rect = rowEl.getBoundingClientRect();
+            if (clientY < rect.top || clientY >= rect.bottom)
+                continue;
+            return rowIndexOf(rowEl);
+        }
+        return null;
+    }
+    // 가장자리를 넘어선 거리. 위로 벗어나면 음수, 아래로 벗어나면 양수
+    function overshootOf(clientY) {
+        const band = visibleBand();
+        if (clientY < band.top)
+            return clientY - band.top;
+        if (clientY >= band.bottom)
+            return clientY - band.bottom;
+        return 0;
+    }
+    function onSelectorPointerDown(event, r) {
+        if (event.button !== 0)
+            return;
+        if (event.shiftKey)
+            return;
+        if (event.pointerType === "touch")
+            return;
+        dragCleanup?.();
+        const startItem = options.displayItems()[r];
+        if (startItem == null)
+            return;
+        // 시작 행을 누른 결과 상태가 곧 페인트 목표. 체크박스 자체 토글보다 먼저 스냅샷해야 뒤집히지 않는다
+        const isSelectTarget = !options.selection.isSelected(startItem);
+        const startEl = event.currentTarget;
+        let dragged = false;
+        // 칠하기 전 상태. 드래그를 되돌려 범위를 벗어난 행은 이 값으로 복원한다
+        const stateBeforePaint = new Map();
+        const setSelected = (rowIdx, selected) => {
+            const item = options.displayItems()[rowIdx];
+            if (item == null)
+                return;
+            if (options.selection.getSelectable(item) !== true)
+                return;
+            if (selected) {
+                options.selection.select(item);
+            }
+            else {
+                options.selection.deselect(item);
+            }
+        };
+        const paint = (rowIdx) => {
+            const item = options.displayItems()[rowIdx];
+            if (item == null)
+                return;
+            if (options.selection.getSelectable(item) !== true)
+                return;
+            if (!stateBeforePaint.has(rowIdx)) {
+                stateBeforePaint.set(rowIdx, options.selection.isSelected(item));
+            }
+            setSelected(rowIdx, isSelectTarget);
+        };
+        // 시작 행부터 현재 행까지가 칠할 범위. 범위를 벗어난 행은 원래대로 되돌린다
+        const applyRange = (currentRow) => {
+            const from = Math.min(r, currentRow);
+            const to = Math.max(r, currentRow);
+            for (const rowIdx of [...stateBeforePaint.keys()]) {
+                if (rowIdx >= from && rowIdx <= to)
+                    continue;
+                setSelected(rowIdx, stateBeforePaint.get(rowIdx));
+                stateBeforePaint.delete(rowIdx);
+            }
+            for (let i = from; i <= to; i++) {
+                paint(i);
+            }
+        };
+        const applyRangeAt = (clientY) => {
+            const rowIdx = resolveRowIndex(clientY);
+            if (rowIdx == null)
+                return;
+            if (rowIdx === r && !dragged)
+                return;
+            dragged = true;
+            applyRange(rowIdx);
+        };
+        // 가장자리를 넘긴 동안 벗어난 거리에 비례해 스크롤하며 계속 칠한다
+        let pointerY = event.clientY;
+        let rafId = null;
+        let lastFrameTime = null;
+        const autoScrollFrame = (time) => {
+            const overshoot = overshootOf(pointerY);
+            if (overshoot === 0) {
+                rafId = null;
+                lastFrameTime = null;
+                return;
+            }
+            const elapsedSec = lastFrameTime == null ? 0 : (time - lastFrameTime) / 1000;
+            lastFrameTime = time;
+            const speed = Math.sign(overshoot) *
+                Math.min(Math.abs(overshoot) * AUTO_SCROLL_SPEED_PER_PX, AUTO_SCROLL_MAX_SPEED);
+            options.domAccessor.getContainer().scrollTop += speed * elapsedSec;
+            applyRangeAt(pointerY);
+            rafId = requestAnimationFrame(autoScrollFrame);
+        };
+        const onPointerMove = (e) => {
+            pointerY = e.clientY;
+            applyRangeAt(pointerY);
+            if (overshootOf(pointerY) !== 0 && rafId == null) {
+                rafId = requestAnimationFrame(autoScrollFrame);
+            }
+        };
+        const onPointerUp = () => {
+            dragCleanup?.();
+            if (!dragged)
+                return;
+            // 시작 행은 이미 페인트로 확정됐으므로 SdCheckbox 자체 토글이 되돌리지 못하게 막는다.
+            // capture 로 걸어야 SdCheckbox 의 host (click) 보다 먼저 실행된다
+            if (!(startEl instanceof HTMLElement))
+                return;
+            const blockClick = (e) => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            };
+            startEl.addEventListener("click", blockClick, { once: true, capture: true });
+            // 다른 행에서 뗀 드래그는 시작 체크박스에 click 이 오지 않는다.
+            // 남겨두면 이후의 정상 클릭 1회를 삼키므로 이번 턴이 지나면 걷어낸다
+            setTimeout(() => {
+                startEl.removeEventListener("click", blockClick, { capture: true });
+            });
+        };
+        // 드래그 중 브라우저 텍스트 선택 억제.
+        // pointerdown 을 preventDefault 하면 클릭 포커스까지 사라져 shift 범위 선택의 기준 행이 깨지므로,
+        // 선택 시작 자체만 막는다
+        const blockSelectStart = (e) => {
+            e.preventDefault();
+        };
+        document.addEventListener("selectstart", blockSelectStart);
+        document.addEventListener("pointermove", onPointerMove);
+        document.addEventListener("pointerup", onPointerUp);
+        // 브라우저발 강제 종료(창 전환, 시스템 제스처)도 뗀 것과 동일하게 확정 처리
+        document.addEventListener("pointercancel", onPointerUp);
+        dragCleanup = () => {
+            if (rafId != null) {
+                cancelAnimationFrame(rafId);
+                rafId = null;
+            }
+            document.removeEventListener("selectstart", blockSelectStart);
+            document.removeEventListener("pointermove", onPointerMove);
+            document.removeEventListener("pointerup", onPointerUp);
+            document.removeEventListener("pointercancel", onPointerUp);
+            dragCleanup = null;
+        };
+    }
+    return { onSelectorPointerDown };
+}

package/dist/data/sheet/sd-sheet.d.ts

@@ -44,6 +44,7 @@ export declare class SdSheet<TItem> {
         getSelectRowIndicators: () => HTMLElement[];
         getColumnResizeIndicator: () => HTMLElement;
         getRow: (r: number) => HTMLTableRowElement | null;
+        getRows: () => HTMLTableRowElement[];
         getCell: (r: number, c: number) => HTMLTableCellElement | null;
     };
     cellAgent: {
@@ -119,6 +120,7 @@ export declare class SdSheet<TItem> {
         toggleAll(): void;
         isSelected(item: TItem): boolean;
     };
+    private readonly _dragSelection;
     icons: {
         tablerSettings: string;
         tablerCaretRight: string;
@@ -153,6 +155,7 @@ export declare class SdSheet<TItem> {
     onContainerScroll(): void;
     onTableResize(event: SdResizeEvent): void;
     onFixedCellResize(event: SdResizeEvent, key: number): void;
+    onSelectorPointerDown(event: PointerEvent, r: number): void;
     onSelectorMouseDown(event: MouseEvent, r: number): void;
     private _autoScrollOnFocus;
     onItemKeydown(event: KeyboardEvent, item: TItem): void;

package/dist/data/sheet/sd-sheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-sheet.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/sd-sheet.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"sd-sheet.d.ts","sourceRoot":"","sources":["../../../src/data/sheet/sd-sheet.ts"],"names":[],"mappings":"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"}

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

@@ -20,6 +20,7 @@ import { useSheetDisplayPipeline } from "./useSheetDisplayPipeline";
 import { useSheetCellStyling } from "./useSheetCellStyling";
 import { useSheetFocusIndicator } from "./useSheetFocusIndicator";
 import { injectSheetSelectRowIndicator } from "./injectSheetSelectRowIndicator";
+import { injectSheetDragSelection } from "./injectSheetDragSelection";
 import { SdModalProvider } from "../../core/modal/sd-modal.provider";
 import { SdSheetConfigModal } from "./sd-sheet-config.modal";
 import { SdEvents } from "../../core/events/sd-events";
@@ -279,7 +280,7 @@ function SdSheet_Conditional_6_Template(rf, ctx) { if (rf & 1) {
 function SdSheet_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "sd-checkbox", 35);
-    i0.ɵɵlistener("valueChange", function SdSheet_For_9_Conditional_2_Template_sd_checkbox_valueChange_0_listener() { i0.ɵɵrestoreView(_r21); const item_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selection.toggle(item_r20)); })("mousedown", function SdSheet_For_9_Conditional_2_Template_sd_checkbox_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r21); const ɵ$index_95_r22 = i0.ɵɵnextContext().$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectorMouseDown($event, ɵ$index_95_r22)); });
+    i0.ɵɵlistener("valueChange", function SdSheet_For_9_Conditional_2_Template_sd_checkbox_valueChange_0_listener() { i0.ɵɵrestoreView(_r21); const item_r20 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selection.toggle(item_r20)); })("mousedown", function SdSheet_For_9_Conditional_2_Template_sd_checkbox_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r21); const ɵ$index_95_r22 = i0.ɵɵnextContext().$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectorMouseDown($event, ɵ$index_95_r22)); })("pointerdown", function SdSheet_For_9_Conditional_2_Template_sd_checkbox_pointerdown_0_listener($event) { i0.ɵɵrestoreView(_r21); const ɵ$index_95_r22 = i0.ɵɵnextContext().$index; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSelectorPointerDown($event, ɵ$index_95_r22)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r20 = i0.ɵɵnextContext().$implicit;
@@ -545,6 +546,12 @@ export class SdSheet {
         getItemSelectableFn: this.getItemSelectableFn,
         trackByFn: this.trackByFn,
     });
+    // Drag(paint) selection
+    _dragSelection = injectSheetDragSelection({
+        domAccessor: this.domAccessor,
+        displayItems: this.displayItems,
+        selection: this.selection,
+    });
     // Icons
     icons = {
         tablerSettings,
@@ -669,6 +676,9 @@ export class SdSheet {
             return newMap;
         });
     }
+    onSelectorPointerDown(event, r) {
+        this._dragSelection.onSelectorPointerDown(event, r);
+    }
     onSelectorMouseDown(event, r) {
         if (!event.shiftKey)
             return;
@@ -758,7 +768,7 @@ export class SdSheet {
             i0.ɵɵlistener("keydown.capture", function SdSheet_keydown_capture_HostBindingHandler($event) { return ctx.onKeydownCapture($event); })("focus.capture", function SdSheet_focus_capture_HostBindingHandler($event) { return ctx.onFocusCapture($event); })("dblclick", function SdSheet_dblclick_HostBindingHandler($event) { return ctx.onDblClick($event); })("blur.capture", function SdSheet_blur_capture_HostBindingHandler($event) { return ctx.onBlurCapture($event); });
         } if (rf & 2) {
             i0.ɵɵattribute("data-sd-inset", ctx.inset())("data-sd-focus-mode", ctx.focusMode());
-        } }, inputs: { key: [1, "key"], items: [1, "items"], trackByFn: [1, "trackByFn"], selectMode: [1, "selectMode"], autoSelect: [1, "autoSelect"], getItemSelectableFn: [1, "getItemSelectableFn"], getChildrenFn: [1, "getChildrenFn"], useAutoSort: [1, "useAutoSort"], visiblePageCount: [1, "visiblePageCount"], totalPageCount: [1, "totalPageCount"], itemsPerPage: [1, "itemsPerPage"], focusMode: [1, "focusMode"], inset: [1, "inset"], contentStyle: [1, "contentStyle"], getItemCellClassFn: [1, "getItemCellClassFn"], getItemCellStyleFn: [1, "getItemCellStyleFn"], hideConfigBar: [1, "hideConfigBar"], selectedKeys: [1, "selectedKeys"], expandedItems: [1, "expandedItems"], sorts: [1, "sorts"], currentPage: [1, "currentPage"], columnControlsInput: [1, "columnControlsInput"] }, outputs: { itemKeydown: "itemKeydown", cellKeydown: "cellKeydown", selectedKeys: "selectedKeysChange", expandedItems: "expandedItemsChange", sorts: "sortsChange", currentPage: "currentPageChange" }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.SdEvents, outputs: ["keydown.capture", "keydown.capture", "focus.capture", "focus.capture", "blur.capture", "blur.capture"] }])], decls: 14, vars: 8, consts: [[1, "_tool", "flex-row", "gap-sm", "p-xs"], [1, "_sheet-container", "flex-fill", 3, "scroll.passive"], [3, "sdResize"], [1, "_summary-row"], [1, "_focus-row-indicator"], [1, "_focus-cell-indicator"], [1, "_resize-indicator"], [1, "_select-row-indicator-container"], [3, "theme", "size"], [1, "flex-fill", 3, "currentPage", "totalPageCount", "visiblePageCount"], [3, "click", "theme", "size"], [3, "svg"], [1, "flex-fill", 3, "currentPageChange", "currentPage", "totalPageCount", "visiblePageCount"], [1, "_fixed", "_feature-cell", "_last-depth", 3, "sdResize"], [3, "value", "inline", "theme"], [1, "_fixed", "_feature-cell", "_last-depth", 3, "left"], [3, "valueChange", "value", "inline", "theme"], [3, "click", "svg"], [3, "_fixed", "left"], [1, "_last-depth", 3, "_fixed", "_sort", "help", "style"], [1, "_p-sheet"], [1, "_last-depth", 3, "sdResize", "click"], [1, "_headerContent", "flex-row"], [1, "flex-fill"], [1, "flex-fill", "_p-sheet"], [1, "_sort-icon"], [1, "_resizer"], [3, "ngTemplateOutlet"], [1, "tx-faint", 3, "svg"], [1, "_resizer", 3, "mousedown", "dblclick"], [1, "_fixed", "_feature-cell"], [1, "_fixed", "_feature-cell", 3, "left"], [3, "click", "keydown"], [3, "value", "canChangeFn", "inline", "theme", "disabled"], ["tabindex", "0", 3, "_fixed", "class", "style"], [3, "valueChange", "mousedown", "value", "canChangeFn", "inline", "theme", "disabled"], [3, "theme"], [3, "pointerdown", "click", "theme"], [1, "_depth-indicator", 3, "margin-left"], [3, "svg", "transform", "tx-primary"], [1, "_depth-indicator"], ["tabindex", "0", 3, "click", "focus", "keydown"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSheet_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { key: [1, "key"], items: [1, "items"], trackByFn: [1, "trackByFn"], selectMode: [1, "selectMode"], autoSelect: [1, "autoSelect"], getItemSelectableFn: [1, "getItemSelectableFn"], getChildrenFn: [1, "getChildrenFn"], useAutoSort: [1, "useAutoSort"], visiblePageCount: [1, "visiblePageCount"], totalPageCount: [1, "totalPageCount"], itemsPerPage: [1, "itemsPerPage"], focusMode: [1, "focusMode"], inset: [1, "inset"], contentStyle: [1, "contentStyle"], getItemCellClassFn: [1, "getItemCellClassFn"], getItemCellStyleFn: [1, "getItemCellStyleFn"], hideConfigBar: [1, "hideConfigBar"], selectedKeys: [1, "selectedKeys"], expandedItems: [1, "expandedItems"], sorts: [1, "sorts"], currentPage: [1, "currentPage"], columnControlsInput: [1, "columnControlsInput"] }, outputs: { itemKeydown: "itemKeydown", cellKeydown: "cellKeydown", selectedKeys: "selectedKeysChange", expandedItems: "expandedItemsChange", sorts: "sortsChange", currentPage: "currentPageChange" }, features: [i0.ɵɵHostDirectivesFeature([{ directive: i1.SdEvents, outputs: ["keydown.capture", "keydown.capture", "focus.capture", "focus.capture", "blur.capture", "blur.capture"] }])], decls: 14, vars: 8, consts: [[1, "_tool", "flex-row", "gap-sm", "p-xs"], [1, "_sheet-container", "flex-fill", 3, "scroll.passive"], [3, "sdResize"], [1, "_summary-row"], [1, "_focus-row-indicator"], [1, "_focus-cell-indicator"], [1, "_resize-indicator"], [1, "_select-row-indicator-container"], [3, "theme", "size"], [1, "flex-fill", 3, "currentPage", "totalPageCount", "visiblePageCount"], [3, "click", "theme", "size"], [3, "svg"], [1, "flex-fill", 3, "currentPageChange", "currentPage", "totalPageCount", "visiblePageCount"], [1, "_fixed", "_feature-cell", "_last-depth", 3, "sdResize"], [3, "value", "inline", "theme"], [1, "_fixed", "_feature-cell", "_last-depth", 3, "left"], [3, "valueChange", "value", "inline", "theme"], [3, "click", "svg"], [3, "_fixed", "left"], [1, "_last-depth", 3, "_fixed", "_sort", "help", "style"], [1, "_p-sheet"], [1, "_last-depth", 3, "sdResize", "click"], [1, "_headerContent", "flex-row"], [1, "flex-fill"], [1, "flex-fill", "_p-sheet"], [1, "_sort-icon"], [1, "_resizer"], [3, "ngTemplateOutlet"], [1, "tx-faint", 3, "svg"], [1, "_resizer", 3, "mousedown", "dblclick"], [1, "_fixed", "_feature-cell"], [1, "_fixed", "_feature-cell", 3, "left"], [3, "click", "keydown"], [3, "value", "canChangeFn", "inline", "theme", "disabled"], ["tabindex", "0", 3, "_fixed", "class", "style"], [3, "valueChange", "mousedown", "pointerdown", "value", "canChangeFn", "inline", "theme", "disabled"], [3, "theme"], [3, "pointerdown", "click", "theme"], [1, "_depth-indicator", 3, "margin-left"], [3, "svg", "transform", "tx-primary"], [1, "_depth-indicator"], ["tabindex", "0", 3, "click", "focus", "keydown"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"]], template: function SdSheet_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, SdSheet_Conditional_0_Template, 3, 2, "div", 0);
             i0.ɵɵelementStart(1, "div", 1);
             i0.ɵɵlistener("scroll.passive", function SdSheet_Template_div_scroll_passive_1_listener() { return ctx.onContainerScroll(); });
@@ -794,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-control);\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-control);\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(--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 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdSheet, [{
         type: Component,
@@ -809,7 +819,7 @@ export class SdSheet {
                 ], hostDirectives: [
                     { directive: SdEvents, outputs: ["keydown.capture", "focus.capture", "blur.capture"] },
                 ], host: {
-                    "class": "flex-column fill",
+                    class: "flex-column fill",
                     "[attr.data-sd-inset]": "inset()",
                     "[attr.data-sd-focus-mode]": "focusMode()",
                     "(keydown.capture)": "onKeydownCapture($event)",
@@ -1002,6 +1012,7 @@ export class SdSheet {
                     [canChangeFn]="selection.getCanChangeFn(item)"
                     (valueChange)="selection.toggle(item)"
                     (mousedown)="onSelectorMouseDown($event, rowIdx)"
+                    (pointerdown)="onSelectorPointerDown($event, rowIdx)"
                     [inline]="true"
                     [theme]="'white'"
                     [disabled]="_selectable !== true"
@@ -1087,6 +1098,6 @@ export class SdSheet {
       ></div>
       <div class="_select-row-indicator-container"></div>
     </div>
-  `, 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-control);\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-control);\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}"] }]
+  `, 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}"] }]
     }], null, { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "key", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], autoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoSelect", required: false }] }], getItemSelectableFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemSelectableFn", required: false }] }], getChildrenFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildrenFn", required: false }] }], useAutoSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAutoSort", required: false }] }], visiblePageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePageCount", required: false }] }], totalPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPageCount", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], focusMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusMode", required: false }] }], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], contentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentStyle", required: false }] }], getItemCellClassFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellClassFn", required: false }] }], getItemCellStyleFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "getItemCellStyleFn", required: false }] }], hideConfigBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideConfigBar", required: false }] }], itemKeydown: [{ type: i0.Output, args: ["itemKeydown"] }], cellKeydown: [{ type: i0.Output, args: ["cellKeydown"] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }, { type: i0.Output, args: ["selectedKeysChange"] }], expandedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedItems", required: false }] }, { type: i0.Output, args: ["expandedItemsChange"] }], sorts: [{ type: i0.Input, args: [{ isSignal: true, alias: "sorts", required: false }] }, { type: i0.Output, args: ["sortsChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], columnControls: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => SdSheetColumn), { isSignal: true }] }], columnControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnControlsInput", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheet, { className: "SdSheet", filePath: "packages/angular/src/data/sheet/sd-sheet.ts", lineNumber: 587 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheet, { className: "SdSheet", filePath: "packages/angular/src/data/sheet/sd-sheet.ts", lineNumber: 589 }); })();

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

@@ -336,7 +336,7 @@ export class SdTiptapEditor {
             i0.ɵɵdomElement(1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.disabled() ? 0 : -1);
-        } }, styles: ["sd-tiptap-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-tiptap-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-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-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-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-control);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2 });
+        } }, styles: ["sd-tiptap-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-tiptap-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-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-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-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-content);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdTiptapEditor, [{
         type: Component,
@@ -512,6 +512,6 @@ export class SdTiptapEditor {
   `, host: {
                     "[attr.data-sd-disabled]": "disabled()",
                     "[attr.data-sd-readonly]": "readonly()",
-                }, styles: ["sd-tiptap-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-tiptap-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-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-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-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-control);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"] }]
+                }, styles: ["sd-tiptap-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-tiptap-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-tiptap-editor > ._toolbar > ._btn-group {\n  display: flex;\n  gap: 1px;\n}\nsd-tiptap-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-tiptap-editor > ._toolbar > ._btn-group > button._active {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button:hover {\n  background-color: var(--sd-bg-state-hover);\n}\nsd-tiptap-editor > ._toolbar > ._btn-group > button._active:hover {\n  background-color: var(--sd-bg-primary-solid);\n}\nsd-tiptap-editor > ._color-picker {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2px;\n  padding: var(--sd-gap-xs);\n  border-bottom: 1px solid var(--sd-bd-hairline);\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch {\n  width: 1.25rem;\n  height: 1.25rem;\n  border: 1px solid var(--sd-bd-hairline);\n  border-radius: 2px;\n  cursor: pointer;\n  padding: 0;\n}\nsd-tiptap-editor > ._color-picker > ._color-swatch._no-color {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--sd-bg-content);\n  font-size: 0.625rem;\n}\nsd-tiptap-editor > ._editor-container {\n  padding: var(--sd-gap-sm);\n  min-height: 6.25rem;\n  font-family: var(--sd-font-family-field);\n}\nsd-tiptap-editor > ._editor-container > .tiptap {\n  outline: none;\n}\nsd-tiptap-editor > ._editor-container > .tiptap:focus {\n  outline: none;\n}\nsd-tiptap-editor[data-sd-disabled=true] {\n  background-color: var(--sd-bg-disabled);\n  color: var(--sd-tx-disabled);\n}\nsd-tiptap-editor[data-sd-disabled=true] > ._editor-container > .tiptap {\n  cursor: not-allowed;\n}\nsd-tiptap-editor[data-sd-readonly=true] > ._editor-container > .tiptap {\n  cursor: default;\n}\nsd-tiptap-editor ._color-btn {\n  position: relative;\n}\nsd-tiptap-editor ._color-btn > ._color-indicator {\n  display: block;\n  height: 2px;\n  width: 100%;\n  position: absolute;\n  bottom: 2px;\n  left: 0;\n}"] }]
     }], () => [], { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], validatorFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "validatorFn", required: false }] }], extensions: [{ type: i0.Input, args: [{ isSignal: true, alias: "extensions", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdTiptapEditor, { className: "SdTiptapEditor", filePath: "packages/angular/src/features/editor/sd-tiptap-editor.ts", lineNumber: 335 }); })();

package/dist/features/theme/sd-theme-provider.d.ts

@@ -10,14 +10,12 @@ export declare const SD_THEMES: readonly [{
     readonly label: "IDE 다크";
 }];
 export type SdThemeName = (typeof SD_THEMES)[number]["value"];
-export type SdDensity = "normal" | "compact";
 export declare class SdThemeProvider {
     readonly themes: readonly {
         value: SdThemeName;
         label: string;
     }[];
     theme: import("@angular/core").WritableSignal<"light" | "blueprint" | "ide-dark">;
-    density: import("@angular/core").WritableSignal<SdDensity>;
     readonly fontSizePresets: readonly number[];
     fontSize: import("@angular/core").WritableSignal<number>;
     constructor();

package/dist/features/theme/sd-theme-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,SAAS;;;;;;;;;EAIZ,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE7C,qBACa,eAAe;IAC1B,QAAQ,CAAC,MAAM,EAAE,SAAS;QAAE,KAAK,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAa;IAG9E,KAAK,6EAAgC;IAErC,OAAO,oDAA+B;IAEtC,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAsB9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCAvCb,eAAe;6CAAf,eAAe;CAmD3B"}
+{"version":3,"file":"sd-theme-provider.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-provider.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,SAAS;;;;;;;;;EAIZ,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;AAE9D,qBACa,eAAe;IAC1B,QAAQ,CAAC,MAAM,EAAE,SAAS;QAAE,KAAK,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAa;IAG9E,KAAK,6EAAgC;IAErC,QAAQ,CAAC,eAAe,EAAE,SAAS,MAAM,EAAE,CAA4B;IAEvE,QAAQ,iDAAsB;;IAkB9B,gBAAgB,IAAI,IAAI;IAOxB,gBAAgB,IAAI,IAAI;yCAjCb,eAAe;6CAAf,eAAe;CA6C3B"}

package/dist/features/theme/sd-theme-provider.js

@@ -14,8 +14,6 @@ export class SdThemeProvider {
     // 라이트(기본) / 블루프린트(도면) / IDE 다크
     theme = signal("light", /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
-    density = signal("normal", /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
     fontSizePresets = [12, 14, 16, 20, 24, 28];
     fontSize = signal(12, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "fontSize" }] : /* istanbul ignore next */ []));
@@ -29,9 +27,6 @@ export class SdThemeProvider {
                 document.body.classList.toggle(`sd-theme-${def.value}`, def.value === theme);
             }
         });
-        effect(() => {
-            document.body.classList.toggle("sd-density-compact", this.density() === "compact");
-        });
         effect(() => {
             document.documentElement.style.fontSize = `${this.fontSize()}px`;
         });

package/dist/features/theme/sd-theme-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAGtD,qBAkEa,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kBAA2B;IAEtD,aAAa,0CAAgF;IAE7F,aAAa,0CAIX;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,uVAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,yTAAe;IAC7C,SAAS,CAAC,QAAQ,CAAC,aAAa,wnBAAiB;yCAbtC,eAAe;2CAAf,eAAe;CAc3B"}
+{"version":3,"file":"sd-theme-selector.d.ts","sourceRoot":"","sources":["../../../src/features/theme/sd-theme-selector.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;;AAGtD,qBA0Da,eAAe;IAC1B,SAAS,CAAC,QAAQ,CAAC,QAAQ,kBAA2B;IAEtD,aAAa,0CAAgF;IAE7F,aAAa,0CAIX;IAEF,SAAS,CAAC,QAAQ,CAAC,UAAU,uVAAc;IAC3C,SAAS,CAAC,QAAQ,CAAC,WAAW,yTAAe;IAC7C,SAAS,CAAC,QAAQ,CAAC,aAAa,wnBAAiB;yCAbtC,eAAe;2CAAf,eAAe;CAc3B"}

package/dist/features/theme/sd-theme-selector.js

@@ -2,7 +2,6 @@ import { ChangeDetectionStrategy, Component, computed, inject, ViewEncapsulation
 import { SdDropdown } from "../../controls/dropdown/sd-dropdown";
 import { SdDropdownPopup } from "../../controls/dropdown/sd-dropdown-popup";
 import { SdButton } from "../../controls/button/sd-button";
-import { SdSwitch } from "../../controls/checkbox/sd-switch";
 import { NgIcon } from "@ng-icons/core";
 import { SdThemeProvider } from "./sd-theme-provider";
 import { tablerMinus, tablerPalette, tablerPlus } from "@ng-icons/tabler-icons";
@@ -10,7 +9,7 @@ import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.value;
 function SdThemeSelector_For_20_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "sd-button", 8);
+    i0.ɵɵelementStart(0, "sd-button", 7);
     i0.ɵɵlistener("click", function SdThemeSelector_For_20_Template_sd_button_click_0_listener() { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2._sdTheme.theme.set(item_r2.value)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -32,7 +31,7 @@ export class SdThemeSelector {
     tablerMinus = tablerMinus;
     tablerPalette = tablerPalette;
     static ɵfac = function SdThemeSelector_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdThemeSelector)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls: 25, vars: 16, consts: [[3, "inline", "theme"], [3, "svg"], [1, "p-default"], [1, "flex-row", "gap-sm", "cross-align-center"], [1, "flex-row", "gap-xs", "cross-align-center"], [3, "click", "inline", "theme", "size", "disabled"], [3, "inline", "size", "theme"], [3, "valueChange", "inline", "value"], [3, "click", "inline", "size", "theme"]], template: function SdThemeSelector_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdThemeSelector, selectors: [["sd-theme-selector"]], decls: 21, vars: 14, consts: [[3, "inline", "theme"], [3, "svg"], [1, "p-default"], [1, "flex-row", "gap-sm", "cross-align-center"], [1, "flex-row", "gap-xs", "cross-align-center"], [3, "click", "inline", "theme", "size", "disabled"], [3, "inline", "size", "theme"], [3, "click", "inline", "size", "theme"]], template: function SdThemeSelector_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "sd-dropdown")(1, "sd-button", 0);
             i0.ɵɵelement(2, "ng-icon", 1);
             i0.ɵɵelementEnd();
@@ -55,12 +54,6 @@ export class SdThemeSelector {
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(18, "div", 4);
             i0.ɵɵrepeaterCreate(19, SdThemeSelector_For_20_Template, 2, 4, "sd-button", 6, _forTrack0);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(21, "div", 3)(22, "span");
-            i0.ɵɵtext(23, "compact");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "sd-switch", 7);
-            i0.ɵɵlistener("valueChange", function SdThemeSelector_Template_sd_switch_valueChange_24_listener($event) { return ctx._sdTheme.density.set($event ? "compact" : "normal"); });
             i0.ɵɵelementEnd()()()()();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -79,13 +72,11 @@ export class SdThemeSelector {
             i0.ɵɵproperty("svg", ctx.tablerPlus);
             i0.ɵɵadvance(5);
             i0.ɵɵrepeater(ctx._sdTheme.themes);
-            i0.ɵɵadvance(5);
-            i0.ɵɵproperty("inline", true)("value", ctx._sdTheme.density() === "compact");
-        } }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], encapsulation: 2 });
+        } }, dependencies: [SdDropdown, SdDropdownPopup, SdButton, NgIcon], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdThemeSelector, [{
         type: Component,
-        args: [{ selector: "sd-theme-selector", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdDropdown, SdDropdownPopup, SdButton, SdSwitch, NgIcon], template: `
+        args: [{ selector: "sd-theme-selector", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [SdDropdown, SdDropdownPopup, SdButton, NgIcon], template: `
     <sd-dropdown>
       <sd-button [inline]="true" [theme]="'link-gray'">
         <ng-icon [svg]="tablerPalette" />
@@ -131,17 +122,9 @@ export class SdThemeSelector {
               }
             </div>
           </div>
-          <div class="flex-row gap-sm cross-align-center">
-            <span>compact</span>
-            <sd-switch
-              [inline]="true"
-              [value]="_sdTheme.density() === 'compact'"
-              (valueChange)="_sdTheme.density.set($event ? 'compact' : 'normal')"
-            />
-          </div>
         </div>
       </sd-dropdown-popup>
     </sd-dropdown>
   ` }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 82 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdThemeSelector, { className: "SdThemeSelector", filePath: "packages/angular/src/features/theme/sd-theme-selector.ts", lineNumber: 73 }); })();

package/dist/features/visual/sd-label.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class SdLabel {
-    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
     color: import("@angular/core").InputSignal<string | undefined>;
     clickable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdLabel, never>;

package/dist/features/visual/sd-label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sd-label.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-label.ts"],"names":[],"mappings":";AAQA,qBAkDa,OAAO;IAClB,KAAK,8IAED;IACJ,KAAK,0DAAmB;IACxB,SAAS,qEAAiD;yCAL/C,OAAO;2CAAP,OAAO;CAMnB"}
+{"version":3,"file":"sd-label.d.ts","sourceRoot":"","sources":["../../../src/features/visual/sd-label.ts"],"names":[],"mappings":";AAQA,qBAkDa,OAAO;IAClB,KAAK,gIAAyF;IAC9F,KAAK,0DAAmB;IACxB,SAAS,qEAAiD;yCAH/C,OAAO;2CAAP,OAAO;CAInB"}

package/dist/features/visual/sd-label.js

@@ -14,7 +14,7 @@ export class SdLabel {
         } }, inputs: { theme: [1, "theme"], color: [1, "color"], clickable: [1, "clickable"] }, ngContentSelectors: _c0, decls: 1, vars: 0, template: function SdLabel_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵprojection(0);
-        } }, styles: ["sd-label {\n  display: inline-block;\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n  padding: 0 var(--sd-gap-sm);\n  border-radius: var(--sd-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid);\n  color: var(--sd-tx-blue-gray-solid);\n}\nsd-label[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-label[data-sd-theme=secondary] {\n  background-color: var(--sd-bg-secondary-solid);\n  color: var(--sd-tx-secondary-solid);\n}\nsd-label[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid);\n  color: var(--sd-tx-info-solid);\n}\nsd-label[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid);\n  color: var(--sd-tx-success-solid);\n}\nsd-label[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid);\n  color: var(--sd-tx-warning-solid);\n}\nsd-label[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid);\n  color: var(--sd-tx-danger-solid);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background-color: var(--sd-bg-secondary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid-hover);\n}"], encapsulation: 2 });
+        } }, styles: ["sd-label {\n  display: inline-block;\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n  padding: 0 var(--sd-gap-sm);\n  border-radius: var(--sd-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid);\n  color: var(--sd-tx-blue-gray-solid);\n}\nsd-label[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-label[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid);\n  color: var(--sd-tx-info-solid);\n}\nsd-label[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid);\n  color: var(--sd-tx-success-solid);\n}\nsd-label[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid);\n  color: var(--sd-tx-warning-solid);\n}\nsd-label[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid);\n  color: var(--sd-tx-danger-solid);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid-hover);\n}"], encapsulation: 2 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SdLabel, [{
         type: Component,
@@ -24,6 +24,6 @@ export class SdLabel {
                     "[attr.data-sd-clickable]": "clickable()",
                 }, template: `
     <ng-content></ng-content>
-  `, styles: ["sd-label {\n  display: inline-block;\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n  padding: 0 var(--sd-gap-sm);\n  border-radius: var(--sd-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid);\n  color: var(--sd-tx-blue-gray-solid);\n}\nsd-label[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-label[data-sd-theme=secondary] {\n  background-color: var(--sd-bg-secondary-solid);\n  color: var(--sd-tx-secondary-solid);\n}\nsd-label[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid);\n  color: var(--sd-tx-info-solid);\n}\nsd-label[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid);\n  color: var(--sd-tx-success-solid);\n}\nsd-label[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid);\n  color: var(--sd-tx-warning-solid);\n}\nsd-label[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid);\n  color: var(--sd-tx-danger-solid);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=secondary] {\n  background-color: var(--sd-bg-secondary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid-hover);\n}"] }]
+  `, styles: ["sd-label {\n  display: inline-block;\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n  padding: 0 var(--sd-gap-sm);\n  border-radius: var(--sd-radius-default);\n  text-indent: 0;\n}\nsd-label[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid);\n  color: var(--sd-tx-gray-solid);\n}\nsd-label[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid);\n  color: var(--sd-tx-blue-gray-solid);\n}\nsd-label[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid);\n  color: var(--sd-tx-primary-solid);\n}\nsd-label[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid);\n  color: var(--sd-tx-info-solid);\n}\nsd-label[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid);\n  color: var(--sd-tx-success-solid);\n}\nsd-label[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid);\n  color: var(--sd-tx-warning-solid);\n}\nsd-label[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid);\n  color: var(--sd-tx-danger-solid);\n}\nsd-label[data-sd-clickable=true] {\n  cursor: pointer;\n}\nsd-label[data-sd-clickable=true]:hover {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=gray] {\n  background-color: var(--sd-bg-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=blue-gray] {\n  background-color: var(--sd-bg-blue-gray-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=primary] {\n  background-color: var(--sd-bg-primary-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=info] {\n  background-color: var(--sd-bg-info-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=success] {\n  background-color: var(--sd-bg-success-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=warning] {\n  background-color: var(--sd-bg-warning-solid-hover);\n}\nsd-label[data-sd-clickable=true]:hover[data-sd-theme=danger] {\n  background-color: var(--sd-bg-danger-solid-hover);\n}"] }]
     }], null, { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdLabel, { className: "SdLabel", filePath: "packages/angular/src/features/visual/sd-label.ts", lineNumber: 59 }); })();

package/dist/features/visual/sd-note.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class SdNote {
-    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "secondary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
+    theme: import("@angular/core").InputSignal<"info" | "success" | "primary" | "warning" | "danger" | "gray" | "blue-gray" | undefined>;
     size: import("@angular/core").InputSignal<"sm" | "lg" | undefined>;
     inset: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdNote, never>;