@simplysm/angular 14.0.19 → 14.0.21

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

@@ -1,4 +1,4 @@
-import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChildren, DestroyRef, inject, input, model, output, signal, ViewEncapsulation, } from "@angular/core";
+import { booleanAttribute, ChangeDetectionStrategy, Component, computed, contentChildren, inject, input, model, output, ViewEncapsulation, } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { SdSheetColumnDirective } from "./sd-sheet-column.directive";
 import { SdCheckboxControl } from "../../form/checkbox/sd-checkbox.control";
@@ -8,13 +8,15 @@ import { useSheetLayoutEngine } from "./useSheetLayoutEngine";
 import { useSheetColumnFixing } from "./useSheetColumnFixing";
 import { useSelectionManager } from "../../../core/utils/useSelectionManager";
 import { useSortingManager } from "../../../core/utils/useSortingManager";
-import { useExpandingManager } from "../../../core/utils/useExpandingManager";
 import { SdPaginationControl } from "../../navigation/pagination/sd-pagination.control";
 import { SdAnchorControl } from "../../form/button/sd-anchor.control";
 import { SdButtonControl } from "../../form/button/sd-button.control";
 import { useSdSystemConfigResource } from "../../../core/utils/useSdSystemConfigResource";
 import { useSheetDomAccessor } from "./useSheetDomAccessor";
 import { useSheetCellAgent } from "./useSheetCellAgent";
+import { useSheetColumnResizing } from "./useSheetColumnResizing";
+import { useSheetDisplayPipeline } from "./useSheetDisplayPipeline";
+import { useSheetCellStyling } from "./useSheetCellStyling";
 import { SdModalProvider } from "../../overlay/modal/sd-modal.provider";
 import { SdSheetConfigModal } from "./sd-sheet-config.modal";
 import * as i0 from "@angular/core";
@@ -306,24 +308,22 @@ export class SdSheetControl {
     columnControls = contentChildren(SdSheetColumnDirective, ...(ngDevMode ? [{ debugName: "columnControls" }] : /* istanbul ignore next */ []));
     // Injected providers
     _modalProvider = inject(SdModalProvider);
-    _destroyRef = inject(DestroyRef);
     // DOM accessor & cell agent
     domAccessor = useSheetDomAccessor();
     cellAgent = useSheetCellAgent({ domAccessor: this.domAccessor });
-    constructor() {
-        this._destroyRef.onDestroy(() => {
-            this._resizingCleanup?.();
-        });
-    }
-    // Resizing state
-    _isResizing = signal(false, ...(ngDevMode ? [{ debugName: "_isResizing" }] : /* istanbul ignore next */ []));
-    _resizeIndicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "_resizeIndicatorLeft" }] : /* istanbul ignore next */ []));
-    _lastResizeEndTimeStamp = 0;
-    _resizingCleanup = null;
     // Config resource
     _configResource = useSdSystemConfigResource({
         key: this.key,
     });
+    // Resizing composable
+    _resizing = useSheetColumnResizing({
+        domAccessor: this.domAccessor,
+        configResource: this._configResource,
+    });
+    _isResizing = this._resizing.isResizing;
+    _resizeIndicatorLeft = this._resizing.indicatorLeft;
+    onResizerMousedown = this._resizing.onMousedown;
+    onResizerDblClick = this._resizing.onDblClick;
     // Layout engine
     layout = useSheetLayoutEngine({
         columnControls: this.columnControls,
@@ -337,65 +337,35 @@ export class SdSheetControl {
     sorting = useSortingManager({
         sorts: this.sorts,
     });
-    // Effective page count (from totalPageCount or computed from items/itemsPerPage)
-    effectivePageCount = computed(() => {
-        const total = this.totalPageCount();
-        if (total > 0)
-            return total;
-        const perPage = this.itemsPerPage();
-        if (perPage <= 0)
-            return 0;
-        return Math.ceil(this.items().length / perPage);
-    }, ...(ngDevMode ? [{ debugName: "effectivePageCount" }] : /* istanbul ignore next */ []));
-    // Icons
-    icons = {
-        tablerArrowUp,
-        tablerArrowDown,
-        tablerChevronRight,
-        tablerChevronDown,
-        tablerChevronsRight,
-        tablerChevronsDown,
-        tablerSettings,
-    };
-    // Sorted items
-    _sortedItems = computed(() => {
-        const items = this.items();
-        if (this.useAutoSort()) {
-            return this.sorting.sort(items);
-        }
-        return items;
-    }, ...(ngDevMode ? [{ debugName: "_sortedItems" }] : /* istanbul ignore next */ []));
-    // Paged items (root-level only)
-    _pagedItems = computed(() => {
-        const items = this._sortedItems();
-        const perPage = this.itemsPerPage();
-        if (perPage <= 0)
-            return items;
-        const page = this.currentPage();
-        const start = page * perPage;
-        return items.slice(start, start + perPage);
-    }, ...(ngDevMode ? [{ debugName: "_pagedItems" }] : /* istanbul ignore next */ []));
-    // Expanding manager
-    expanding = useExpandingManager({
-        items: this._pagedItems,
+    // Display pipeline (sort → page → expand → display)
+    _pipeline = useSheetDisplayPipeline({
+        items: this.items,
+        useAutoSort: this.useAutoSort,
+        sortItems: (items) => this.sorting.sort(items),
+        itemsPerPage: this.itemsPerPage,
+        currentPage: this.currentPage,
+        totalPageCount: this.totalPageCount,
         expandedItems: this.expandedItems,
         getChildrenFn: this.getChildrenFn,
-        sort: (items) => {
-            if (this.useAutoSort()) {
-                return this.sorting.sort(items);
-            }
-            return items;
-        },
     });
-    // Final display items (sorted → paged → expanded)
-    displayItems = computed(() => {
-        const getChildrenFn = this.getChildrenFn();
-        if (getChildrenFn != null) {
-            // With tree: only show visible items (parent expanded)
-            return this.expanding.displayItems().filter((item) => this.expanding.isVisible(item));
-        }
-        return this._pagedItems();
-    }, ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+    effectivePageCount = this._pipeline.effectivePageCount;
+    expanding = this._pipeline.expanding;
+    displayItems = this._pipeline.displayItems;
+    // Cell styling composable
+    _styling = useSheetCellStyling({
+        columnDefs: this.layout.columnDefs,
+        fixedLeftMap: this.fixing.fixedLeftMap,
+        getItemCellStyleFn: this.getItemCellStyleFn,
+        getItemCellClassFn: this.getItemCellClassFn,
+        getChildrenFn: this.getChildrenFn,
+        expandingDef: (item) => this.expanding.def(item),
+        isCellEditMode: (addr) => this.cellAgent.isCellEditMode(addr),
+    });
+    getHeaderCellStyle = this._styling.getHeaderCellStyle;
+    getCellStyle = this._styling.getCellStyle;
+    getFixedCellStyle = this._styling.getFixedCellStyle;
+    getCellStyleWithIndent = this._styling.getCellStyleWithIndent;
+    getDataCellClass = this._styling.getDataCellClass;
     // Selection manager
     selection = useSelectionManager({
         displayItems: this.displayItems,
@@ -403,6 +373,16 @@ export class SdSheetControl {
         selectMode: this.selectMode,
         getItemSelectableFn: this.getItemSelectableFn,
     });
+    // Icons
+    icons = {
+        tablerArrowUp,
+        tablerArrowDown,
+        tablerChevronRight,
+        tablerChevronDown,
+        tablerChevronsRight,
+        tablerChevronsDown,
+        tablerSettings,
+    };
     _columnControlMap = computed(() => {
         const map = new Map();
         for (const col of this.columnControls()) {
@@ -418,52 +398,6 @@ export class SdSheetControl {
         const col = this._columnControlMap().get(key);
         return col?.summaryTplRef() ?? null;
     }
-    // Pre-computed column styles: header/footer (fixed z-index:3)
-    _headerColumnStyles = computed(() => {
-        const map = new Map();
-        for (const colDef of this.layout.columnDefs()) {
-            const parts = [];
-            const colStyle = this._getColDefStyle(colDef);
-            if (colStyle != null)
-                parts.push(colStyle);
-            const fixedStyle = this._getFixedStyle(colDef, 3, "var(--theme-secondary-lightest)");
-            if (fixedStyle != null)
-                parts.push(fixedStyle);
-            map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "_headerColumnStyles" }] : /* istanbul ignore next */ []));
-    // Pre-computed column styles: body (fixed z-index:1)
-    _dataColumnBaseStyles = computed(() => {
-        const map = new Map();
-        for (const colDef of this.layout.columnDefs()) {
-            const parts = [];
-            const colStyle = this._getColDefStyle(colDef);
-            if (colStyle != null)
-                parts.push(colStyle);
-            const fixedStyle = this._getFixedStyle(colDef);
-            if (fixedStyle != null)
-                parts.push(fixedStyle);
-            map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
-        }
-        return map;
-    }, ...(ngDevMode ? [{ debugName: "_dataColumnBaseStyles" }] : /* istanbul ignore next */ []));
-    getHeaderCellStyle(cell) {
-        if (cell.colDef == null)
-            return null;
-        return this._headerColumnStyles().get(cell.colDef.key) ?? null;
-    }
-    getCellStyle(item, colDef) {
-        const baseStyle = this._dataColumnBaseStyles().get(colDef.key) ?? null;
-        const styleFn = this.getItemCellStyleFn();
-        const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
-        if (baseStyle != null && customStyle != null)
-            return `${baseStyle}; ${customStyle}`;
-        return customStyle ?? baseStyle ?? null;
-    }
-    getFixedCellStyle(colDef) {
-        return this._getFixedStyle(colDef, 3);
-    }
     getSelectableTooltip(item) {
         const result = this.selection.getSelectable(item);
         if (typeof result === "string")
@@ -490,7 +424,7 @@ export class SdSheetControl {
         }
     }
     onHeaderClick(event, cell) {
-        if (event.timeStamp - this._lastResizeEndTimeStamp < 50)
+        if (event.timeStamp - this._resizing.lastResizeEndTimeStamp() < 50)
             return;
         if (cell.colDef == null)
             return;
@@ -501,21 +435,6 @@ export class SdSheetControl {
     getSortDef(key) {
         return this.sorting.defMap().get(key) ?? null;
     }
-    getCellStyleWithIndent(item, colDef, colIdx) {
-        const parts = [];
-        const cellStyle = this.getCellStyle(item, colDef);
-        if (cellStyle != null) {
-            parts.push(cellStyle);
-        }
-        // Add indent for tree depth on first data column
-        if (colIdx === 0 && this.getChildrenFn() != null) {
-            const itemDef = this.getItemDef(item);
-            if (itemDef.depth > 0) {
-                parts.push(`padding-left: calc(var(--gap-default) + ${itemDef.depth}em)`);
-            }
-        }
-        return parts.length > 0 ? parts.join("; ") : null;
-    }
     getItemDef(item) {
         return this.expanding.def(item);
     }
@@ -544,34 +463,6 @@ export class SdSheetControl {
             return null;
         return sortDef.desc ? "descending" : "ascending";
     }
-    _getColDefStyle(colDef) {
-        if (colDef.collapse) {
-            return "padding: 0; width: 0; min-width: 0; max-width: 0; overflow: hidden; border: none";
-        }
-        if (colDef.width != null) {
-            return `width: ${colDef.width}; min-width: ${colDef.width}; max-width: ${colDef.width}`;
-        }
-        return null;
-    }
-    _getFixedStyle(colDef, zIndex = 1, background = "var(--control-color)") {
-        const fixedLeftMap = this.fixing.fixedLeftMap();
-        const leftValue = fixedLeftMap.get(colDef.key);
-        if (leftValue == null)
-            return null;
-        return `position: sticky; left: ${leftValue}px; z-index: ${zIndex}; background: ${background}`;
-    }
-    getDataCellClass(item, colDef, r, c) {
-        const parts = [];
-        const classFn = this.getItemCellClassFn();
-        const customClass = classFn != null ? classFn(item, colDef.key) : undefined;
-        if (customClass != null) {
-            parts.push(customClass);
-        }
-        if (this.cellAgent.isCellEditMode({ r, c })) {
-            parts.push("_edit-mode");
-        }
-        return parts.length > 0 ? parts.join(" ") : null;
-    }
     async onKeydownCapture(event) {
         await this.cellAgent.handleKeydownCapture(event);
     }
@@ -600,55 +491,6 @@ export class SdSheetControl {
             this._configResource.set(result);
         }
     }
-    // --- Resizing ---
-    onResizerMousedown(event, colDef) {
-        event.preventDefault();
-        event.stopPropagation();
-        const container = this.domAccessor.getContainer();
-        const startX = event.clientX;
-        const th = event.target.parentElement;
-        const startWidth = th.offsetWidth;
-        this._isResizing.set(true);
-        this._resizeIndicatorLeft.set(th.offsetLeft + th.offsetWidth - container.scrollLeft);
-        const onMouseMove = (e) => {
-            const deltaX = e.clientX - startX;
-            const newWidth = Math.max(startWidth + deltaX, 5);
-            this._resizeIndicatorLeft.set(th.offsetLeft + newWidth - container.scrollLeft);
-        };
-        const onMouseUp = (e) => {
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
-            this._resizingCleanup = null;
-            const deltaX = e.clientX - startX;
-            const newWidth = Math.max(startWidth + deltaX, 5);
-            this._isResizing.set(false);
-            this._saveColumnConfig(colDef.key, { width: `${newWidth}px` });
-            this._lastResizeEndTimeStamp = e.timeStamp;
-        };
-        document.addEventListener("mousemove", onMouseMove);
-        document.addEventListener("mouseup", onMouseUp);
-        this._resizingCleanup = () => {
-            document.removeEventListener("mousemove", onMouseMove);
-            document.removeEventListener("mouseup", onMouseUp);
-        };
-    }
-    onResizerDblClick(event, colDef) {
-        event.preventDefault();
-        event.stopPropagation();
-        // Remove the width from config to reset to column definition default
-        const current = this._configResource.value() ?? { columnRecord: {} };
-        const columnRecord = { ...current.columnRecord };
-        const colConfig = { ...columnRecord[colDef.key] };
-        delete colConfig.width;
-        columnRecord[colDef.key] = colConfig;
-        this._configResource.set({ ...current, columnRecord });
-    }
-    _saveColumnConfig(colKey, changes) {
-        const current = this._configResource.value() ?? { columnRecord: {} };
-        const columnRecord = { ...current.columnRecord };
-        columnRecord[colKey] = { ...columnRecord[colKey], ...changes };
-        this._configResource.set({ ...current, columnRecord });
-    }
     static ɵfac = function SdSheetControl_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SdSheetControl)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SdSheetControl, selectors: [["sd-sheet"]], contentQueries: function SdSheetControl_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuerySignal(dirIndex, ctx.columnControls, SdSheetColumnDirective, 4);
@@ -845,5 +687,5 @@ export class SdSheetControl {
                     "(dblclick)": "onDblClick($event)",
                     "(blur.capture)": "onBlurCapture($event)",
                 }, styles: ["sd-sheet {\n  display: block;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid var(--trans-lighter);\n}\nsd-sheet[data-sd-inset=true] {\n  border: none;\n}\nsd-sheet > ._tool {\n  display: flex;\n  align-items: center;\n  gap: var(--gap-sm);\n  padding: var(--gap-sm) var(--gap-default);\n  border-bottom: 1px solid var(--trans-lighter);\n  background: var(--theme-secondary-lightest);\n}\nsd-sheet > ._container {\n  overflow: auto;\n  width: 100%;\n  height: 100%;\n}\nsd-sheet > ._container > table {\n  width: 100%;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\nsd-sheet > ._container > table > thead > tr > th {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--trans-lighter);\n  padding: var(--gap-sm) var(--gap-default);\n  text-align: left;\n  font-weight: bold;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n}\nsd-sheet > ._container > table > thead > tr > th:not(._select-col):not(._expand-col) {\n  position: relative;\n}\nsd-sheet > ._container > table > thead > tr > th > ._sort-icon {\n  font-size: 0.85em;\n  vertical-align: middle;\n  margin-left: 0.25em;\n}\nsd-sheet > ._container > table > thead > tr > th > ._sort-index {\n  font-size: 0.75em;\n  vertical-align: super;\n}\nsd-sheet > ._container > table > thead > tr > th > ._resizer {\n  position: absolute;\n  top: 0;\n  right: -2px;\n  width: 5px;\n  height: 100%;\n  cursor: col-resize;\n  z-index: 3;\n}\nsd-sheet > ._container > table > tbody > tr > td {\n  border: 1px solid var(--trans-lighter);\n  padding: var(--gap-sm) var(--gap-default);\n  white-space: nowrap;\n}\nsd-sheet > ._container > table > tbody > tr > td:focus {\n  outline: 2px solid var(--theme-primary-default);\n  outline-offset: -2px;\n}\nsd-sheet > ._container > table > thead > tr > th._select-col,\nsd-sheet > ._container > table > tbody > tr > td._select-col {\n  width: 2em;\n  min-width: 2em;\n  max-width: 2em;\n  text-align: center;\n  padding: 0;\n}\nsd-sheet > ._container > table > thead > tr > th._expand-col,\nsd-sheet > ._container > table > tbody > tr > td._expand-col {\n  width: 2em;\n  min-width: 2em;\n  max-width: 2em;\n  text-align: center;\n  padding: 0;\n}\nsd-sheet > ._container > table > tfoot > tr > td {\n  position: sticky;\n  bottom: 0;\n  z-index: 2;\n  background: var(--theme-secondary-lightest);\n  border: 1px solid var(--trans-lighter);\n  padding: var(--gap-sm) var(--gap-default);\n}\nsd-sheet > ._container > ._resize-indicator {\n  position: absolute;\n  top: 0;\n  width: 2px;\n  height: 100%;\n  background: var(--theme-primary-default);\n  z-index: 10;\n  pointer-events: none;\n}"] }]
-    }], () => [], { 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"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], 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(() => SdSheetColumnDirective), { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheetControl, { className: "SdSheetControl", filePath: "packages/angular/src/ui/data/sheet/sd-sheet.control.ts", lineNumber: 338, forbidOrphanRendering: true }); })();
+    }], 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"] }], selectedItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItems", required: false }] }, { type: i0.Output, args: ["selectedItemsChange"] }], 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(() => SdSheetColumnDirective), { isSignal: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SdSheetControl, { className: "SdSheetControl", filePath: "packages/angular/src/ui/data/sheet/sd-sheet.control.ts", lineNumber: 337, forbidOrphanRendering: true }); })();

package/dist/ui/data/sheet/useSheetCellStyling.d.ts

@@ -0,0 +1,22 @@
+import { type Signal } from "@angular/core";
+import type { ISdSheetColumnDef, ISdSheetHeaderDef } from "./types";
+import type { IExpandItemDef } from "../../../core/utils/useExpandingManager";
+export declare function useSheetCellStyling<T>(options: {
+    columnDefs: Signal<ISdSheetColumnDef[]>;
+    fixedLeftMap: Signal<Map<string, number>>;
+    getItemCellStyleFn: Signal<((item: T, colKey: string) => string | undefined) | undefined>;
+    getItemCellClassFn: Signal<((item: T, colKey: string) => string) | undefined>;
+    getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
+    expandingDef: (item: T) => IExpandItemDef<T>;
+    isCellEditMode: (addr: {
+        r: number;
+        c: number;
+    }) => boolean;
+}): {
+    getHeaderCellStyle: (cell: ISdSheetHeaderDef) => string | null;
+    getCellStyle: (item: T, colDef: ISdSheetColumnDef) => string | null;
+    getFixedCellStyle: (colDef: ISdSheetColumnDef) => string | null;
+    getCellStyleWithIndent: (item: T, colDef: ISdSheetColumnDef, colIdx: number) => string | null;
+    getDataCellClass: (item: T, colDef: ISdSheetColumnDef, r: number, c: number) => string | null;
+};
+//# sourceMappingURL=useSheetCellStyling.d.ts.map

package/dist/ui/data/sheet/useSheetCellStyling.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetCellStyling.d.ts","sourceRoot":"","sources":["../../../../src/ui/data/sheet/useSheetCellStyling.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACpE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAE9E,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,OAAO,EAAE;IAC9C,UAAU,EAAE,MAAM,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACxC,YAAY,EAAE,MAAM,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IAC1C,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC;IAC1F,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC;IAC9E,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC;IACjF,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,cAAc,CAAC,CAAC,CAAC,CAAC;IAC7C,cAAc,EAAE,CAAC,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC;CAC7D;+BAgDmC,iBAAiB,KAAG,MAAM,GAAG,IAAI;yBAKvC,CAAC,UAAU,iBAAiB,KAAG,MAAM,GAAG,IAAI;gCAQrC,iBAAiB,KAAG,MAAM,GAAG,IAAI;mCAI9B,CAAC,UAAU,iBAAiB,UAAU,MAAM,KAAG,MAAM,GAAG,IAAI;6BAelE,CAAC,UAAU,iBAAiB,KAAK,MAAM,KAAK,MAAM,KAAG,MAAM,GAAG,IAAI;EAoBnG"}

package/dist/ui/data/sheet/useSheetCellStyling.js

@@ -0,0 +1,95 @@
+import { computed } from "@angular/core";
+export function useSheetCellStyling(options) {
+    function getColDefStyle(colDef) {
+        if (colDef.collapse) {
+            return "padding: 0; width: 0; min-width: 0; max-width: 0; overflow: hidden; border: none";
+        }
+        if (colDef.width != null) {
+            return `width: ${colDef.width}; min-width: ${colDef.width}; max-width: ${colDef.width}`;
+        }
+        return null;
+    }
+    function getFixedStyle(colDef, zIndex = 1, background = "var(--control-color)") {
+        const leftValue = options.fixedLeftMap().get(colDef.key);
+        if (leftValue == null)
+            return null;
+        return `position: sticky; left: ${leftValue}px; z-index: ${zIndex}; background: ${background}`;
+    }
+    const headerColumnStyles = computed(() => {
+        const map = new Map();
+        for (const colDef of options.columnDefs()) {
+            const parts = [];
+            const colStyle = getColDefStyle(colDef);
+            if (colStyle != null)
+                parts.push(colStyle);
+            const fixedStyle = getFixedStyle(colDef, 3, "var(--theme-secondary-lightest)");
+            if (fixedStyle != null)
+                parts.push(fixedStyle);
+            map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "headerColumnStyles" }] : /* istanbul ignore next */ []));
+    const dataColumnBaseStyles = computed(() => {
+        const map = new Map();
+        for (const colDef of options.columnDefs()) {
+            const parts = [];
+            const colStyle = getColDefStyle(colDef);
+            if (colStyle != null)
+                parts.push(colStyle);
+            const fixedStyle = getFixedStyle(colDef);
+            if (fixedStyle != null)
+                parts.push(fixedStyle);
+            map.set(colDef.key, parts.length > 0 ? parts.join("; ") : null);
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "dataColumnBaseStyles" }] : /* istanbul ignore next */ []));
+    function getHeaderCellStyle(cell) {
+        if (cell.colDef == null)
+            return null;
+        return headerColumnStyles().get(cell.colDef.key) ?? null;
+    }
+    function getCellStyle(item, colDef) {
+        const baseStyle = dataColumnBaseStyles().get(colDef.key) ?? null;
+        const styleFn = options.getItemCellStyleFn();
+        const customStyle = styleFn != null ? styleFn(item, colDef.key) : undefined;
+        if (baseStyle != null && customStyle != null)
+            return `${baseStyle}; ${customStyle}`;
+        return customStyle ?? baseStyle ?? null;
+    }
+    function getFixedCellStyle(colDef) {
+        return getFixedStyle(colDef, 3);
+    }
+    function getCellStyleWithIndent(item, colDef, colIdx) {
+        const parts = [];
+        const cellStyle = getCellStyle(item, colDef);
+        if (cellStyle != null) {
+            parts.push(cellStyle);
+        }
+        if (colIdx === 0 && options.getChildrenFn() != null) {
+            const itemDef = options.expandingDef(item);
+            if (itemDef.depth > 0) {
+                parts.push(`padding-left: calc(var(--gap-default) + ${itemDef.depth}em)`);
+            }
+        }
+        return parts.length > 0 ? parts.join("; ") : null;
+    }
+    function getDataCellClass(item, colDef, r, c) {
+        const parts = [];
+        const classFn = options.getItemCellClassFn();
+        const customClass = classFn != null ? classFn(item, colDef.key) : undefined;
+        if (customClass != null) {
+            parts.push(customClass);
+        }
+        if (options.isCellEditMode({ r, c })) {
+            parts.push("_edit-mode");
+        }
+        return parts.length > 0 ? parts.join(" ") : null;
+    }
+    return {
+        getHeaderCellStyle,
+        getCellStyle,
+        getFixedCellStyle,
+        getCellStyleWithIndent,
+        getDataCellClass,
+    };
+}

package/dist/ui/data/sheet/useSheetColumnResizing.d.ts

@@ -0,0 +1,17 @@
+import { type Signal } from "@angular/core";
+import type { ISdSheetColumnDef, ISdSheetConfig } from "./types";
+import type { useSheetDomAccessor } from "./useSheetDomAccessor";
+export declare function useSheetColumnResizing(options: {
+    domAccessor: ReturnType<typeof useSheetDomAccessor>;
+    configResource: {
+        value: Signal<ISdSheetConfig | undefined>;
+        set: (v: ISdSheetConfig) => void;
+    };
+}): {
+    isResizing: import("@angular/core").WritableSignal<boolean>;
+    indicatorLeft: import("@angular/core").WritableSignal<number>;
+    lastResizeEndTimeStamp: import("@angular/core").WritableSignal<number>;
+    onMousedown: (event: MouseEvent, colDef: ISdSheetColumnDef) => void;
+    onDblClick: (event: MouseEvent, colDef: ISdSheetColumnDef) => void;
+};
+//# sourceMappingURL=useSheetColumnResizing.d.ts.map

package/dist/ui/data/sheet/useSheetColumnResizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetColumnResizing.d.ts","sourceRoot":"","sources":["../../../../src/ui/data/sheet/useSheetColumnResizing.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACjE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAEjE,wBAAgB,sBAAsB,CAAC,OAAO,EAAE;IAC9C,WAAW,EAAE,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;IACpD,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;QAC1C,GAAG,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;KAClC,CAAC;CACH;;;;yBAsB6B,UAAU,UAAU,iBAAiB,KAAG,IAAI;wBAwC7C,UAAU,UAAU,iBAAiB,KAAG,IAAI;EAmBxE"}

package/dist/ui/data/sheet/useSheetColumnResizing.js

@@ -0,0 +1,65 @@
+import { DestroyRef, inject, signal } from "@angular/core";
+export function useSheetColumnResizing(options) {
+    const destroyRef = inject(DestroyRef);
+    const isResizing = signal(false, ...(ngDevMode ? [{ debugName: "isResizing" }] : /* istanbul ignore next */ []));
+    const indicatorLeft = signal(0, ...(ngDevMode ? [{ debugName: "indicatorLeft" }] : /* istanbul ignore next */ []));
+    const lastResizeEndTimeStamp = signal(0, ...(ngDevMode ? [{ debugName: "lastResizeEndTimeStamp" }] : /* istanbul ignore next */ []));
+    let resizingCleanup = null;
+    destroyRef.onDestroy(() => {
+        resizingCleanup?.();
+    });
+    function saveColumnConfig(colKey, changes) {
+        const current = options.configResource.value() ?? { columnRecord: {} };
+        const columnRecord = { ...current.columnRecord };
+        columnRecord[colKey] = { ...columnRecord[colKey], ...changes };
+        options.configResource.set({ ...current, columnRecord });
+    }
+    function onMousedown(event, colDef) {
+        event.preventDefault();
+        event.stopPropagation();
+        const container = options.domAccessor.getContainer();
+        const startX = event.clientX;
+        const th = event.target.parentElement;
+        const startWidth = th.offsetWidth;
+        isResizing.set(true);
+        indicatorLeft.set(th.offsetLeft + th.offsetWidth - container.scrollLeft);
+        const onMouseMove = (e) => {
+            const deltaX = e.clientX - startX;
+            const newWidth = Math.max(startWidth + deltaX, 5);
+            indicatorLeft.set(th.offsetLeft + newWidth - container.scrollLeft);
+        };
+        const onMouseUp = (e) => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+            resizingCleanup = null;
+            const deltaX = e.clientX - startX;
+            const newWidth = Math.max(startWidth + deltaX, 5);
+            isResizing.set(false);
+            saveColumnConfig(colDef.key, { width: `${newWidth}px` });
+            lastResizeEndTimeStamp.set(e.timeStamp);
+        };
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        resizingCleanup = () => {
+            document.removeEventListener("mousemove", onMouseMove);
+            document.removeEventListener("mouseup", onMouseUp);
+        };
+    }
+    function onDblClick(event, colDef) {
+        event.preventDefault();
+        event.stopPropagation();
+        const current = options.configResource.value() ?? { columnRecord: {} };
+        const columnRecord = { ...current.columnRecord };
+        const colConfig = { ...columnRecord[colDef.key] };
+        delete colConfig.width;
+        columnRecord[colDef.key] = colConfig;
+        options.configResource.set({ ...current, columnRecord });
+    }
+    return {
+        isResizing,
+        indicatorLeft,
+        lastResizeEndTimeStamp,
+        onMousedown,
+        onDblClick,
+    };
+}

package/dist/ui/data/sheet/useSheetDisplayPipeline.d.ts

@@ -0,0 +1,24 @@
+import { type Signal, type WritableSignal } from "@angular/core";
+export declare function useSheetDisplayPipeline<T>(options: {
+    items: Signal<T[]>;
+    useAutoSort: Signal<boolean>;
+    sortItems: (items: T[]) => T[];
+    itemsPerPage: Signal<number>;
+    currentPage: Signal<number>;
+    totalPageCount: Signal<number>;
+    expandedItems: WritableSignal<T[]>;
+    getChildrenFn: Signal<((item: T, index: number) => T[] | undefined) | undefined>;
+}): {
+    effectivePageCount: Signal<number>;
+    displayItems: Signal<T[]>;
+    expanding: {
+        displayItems: Signal<T[]>;
+        hasExpandable: Signal<boolean>;
+        isAllExpanded: Signal<boolean>;
+        toggle(item: T): void;
+        toggleAll(): void;
+        isVisible(item: T): boolean;
+        def(item: T): import("../../..").IExpandItemDef<T>;
+    };
+};
+//# sourceMappingURL=useSheetDisplayPipeline.d.ts.map

package/dist/ui/data/sheet/useSheetDisplayPipeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSheetDisplayPipeline.d.ts","sourceRoot":"","sources":["../../../../src/ui/data/sheet/useSheetDisplayPipeline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,MAAM,EAAE,KAAK,cAAc,EAAE,MAAM,eAAe,CAAC;AAG3E,wBAAgB,uBAAuB,CAAC,CAAC,EAAE,OAAO,EAAE;IAClD,KAAK,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IAC7B,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;IAC/B,aAAa,EAAE,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC;IACnC,aAAa,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,GAAG,SAAS,CAAC,CAAC;CAClF;;;;;;;;;;;;EAmDA"}

package/dist/ui/data/sheet/useSheetDisplayPipeline.js

@@ -0,0 +1,52 @@
+import { computed } from "@angular/core";
+import { useExpandingManager } from "../../../core/utils/useExpandingManager";
+export function useSheetDisplayPipeline(options) {
+    const effectivePageCount = computed(() => {
+        const total = options.totalPageCount();
+        if (total > 0)
+            return total;
+        const perPage = options.itemsPerPage();
+        if (perPage <= 0)
+            return 0;
+        return Math.ceil(options.items().length / perPage);
+    }, ...(ngDevMode ? [{ debugName: "effectivePageCount" }] : /* istanbul ignore next */ []));
+    const sortedItems = computed(() => {
+        const items = options.items();
+        if (options.useAutoSort()) {
+            return options.sortItems(items);
+        }
+        return items;
+    }, ...(ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []));
+    const pagedItems = computed(() => {
+        const items = sortedItems();
+        const perPage = options.itemsPerPage();
+        if (perPage <= 0)
+            return items;
+        const page = options.currentPage();
+        const start = page * perPage;
+        return items.slice(start, start + perPage);
+    }, ...(ngDevMode ? [{ debugName: "pagedItems" }] : /* istanbul ignore next */ []));
+    const expanding = useExpandingManager({
+        items: pagedItems,
+        expandedItems: options.expandedItems,
+        getChildrenFn: options.getChildrenFn,
+        sort: (items) => {
+            if (options.useAutoSort()) {
+                return options.sortItems(items);
+            }
+            return items;
+        },
+    });
+    const displayItems = computed(() => {
+        const getChildrenFn = options.getChildrenFn();
+        if (getChildrenFn != null) {
+            return expanding.displayItems().filter((item) => expanding.isVisible(item));
+        }
+        return pagedItems();
+    }, ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+    return {
+        effectivePageCount,
+        displayItems,
+        expanding,
+    };
+}