@akcelik/strct 0.30.0 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "0.30.0",
+  "version": "0.31.1",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/types/akcelik-strct.d.ts

@@ -2049,6 +2049,26 @@ interface StrctDatagridColumn {
     /** Allow the user to resize this column by dragging its right edge.
      *  Defaults to the global {@link StrctDatagrid#resizable} setting. */
     resizable?: boolean;
+    /**
+     * Freeze this column against horizontal scroll. Mark **leading** columns
+     * (utility columns freeze automatically alongside). Give every sticky column
+     * except the last an explicit px `width` so offsets stay exact.
+     */
+    sticky?: boolean;
+}
+type SortDir = 'asc' | 'desc';
+/** What the grid wants loaded in server-side (`lazy`) mode. */
+interface StrctDatagridLazyState {
+    /** 1-based page. */
+    page: number;
+    pageSize: number;
+    sortKey: string | null;
+    sortDir: SortDir;
+}
+/** Persistable user column preferences (widths from resize, hidden from the chooser). */
+interface StrctDatagridColumnState {
+    widths?: Record<string, number>;
+    hidden?: string[];
 }
 /**
  * Marks the expandable-row detail template. The row is the template's implicit
@@ -2141,6 +2161,34 @@ declare class StrctDatagrid {
         refresh: string;
         actions: string;
     }>;
+    /**
+     * Virtual scrolling for large data sets: only the rows inside the viewport
+     * (plus a small overscan) are in the DOM — 20k+ rows stay smooth. The scroll
+     * area gets `viewportHeight` and a sticky header. Assumes uniform
+     * `rowHeight`; combine with `expandable` is unsupported.
+     */
+    readonly virtual: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Scroll viewport height in px (virtual mode). */
+    readonly viewportHeight: _angular_core.InputSignal<number>;
+    /** Uniform row height in px (virtual mode; tune when `compact`). */
+    readonly rowHeight: _angular_core.InputSignal<number>;
+    /**
+     * Server-side mode: the grid never sorts or slices `rows` itself — it shows
+     * them as given and emits `(lazyLoad)` with `{ page, pageSize, sortKey,
+     * sortDir }` whenever the user pages or sorts (and once on init). Provide
+     * `total` so the pager and count reflect the full server-side set.
+     */
+    readonly lazy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Total row count on the server (lazy mode). */
+    readonly total: _angular_core.InputSignal<number | null>;
+    /**
+     * Persist the user's column widths + hidden columns under this key in
+     * localStorage (`strct-dg:<key>`), restoring them on init. For full control
+     * use the two-way `columnState` instead (both may be combined).
+     */
+    readonly stateKey: _angular_core.InputSignal<string | null>;
+    /** User column preferences (two-way): widths from resize, hidden from the chooser. */
+    readonly columnState: _angular_core.ModelSignal<StrctDatagridColumnState | null>;
     /** Emitted when the selection changes. */
     readonly selectionChange: _angular_core.OutputEmitterRef<StrctRow[]>;
     /** Emitted when the refresh button is clicked. */
@@ -2150,6 +2198,8 @@ declare class StrctDatagrid {
         row: StrctRow;
         item: StrctMenuItem;
     }>;
+    /** Server-side data request (lazy mode): load this page / sort and set `rows`. */
+    readonly lazyLoad: _angular_core.OutputEmitterRef<StrctDatagridLazyState>;
     private readonly menu;
     protected readonly detailDef: _angular_core.Signal<StrctRowDetailDef | undefined>;
     protected readonly actionBarDef: _angular_core.Signal<StrctDatagridActionBar | undefined>;
@@ -2182,13 +2232,49 @@ declare class StrctDatagrid {
     protected readonly visibleColumns: _angular_core.Signal<StrctDatagridColumn[]>;
     protected readonly sorted: _angular_core.Signal<StrctRow[]>;
     protected readonly paged: _angular_core.Signal<StrctRow[]>;
+    /** Full count for the pager / footer (server total in lazy mode). */
+    protected readonly totalCount: _angular_core.Signal<number>;
+    private readonly scrollTop;
+    protected onScroll(event: Event): void;
+    /** Visible index window incl. overscan (virtual mode). */
+    private readonly vRange;
+    /** The rows actually rendered: the virtual window, or the current page. */
+    protected readonly renderRows: _angular_core.Signal<StrctRow[]>;
+    protected readonly topPad: _angular_core.Signal<number>;
+    protected readonly bottomPad: _angular_core.Signal<number>;
+    protected readonly stickyActive: _angular_core.Signal<boolean>;
+    /** Total width of the frozen utility columns (detail / expand / select). */
+    private readonly utilityWidth;
+    /** Left offset of a frozen utility column, or null when sticky is off. */
+    protected utilLeft(which: 'detail' | 'expand' | 'sel'): number | null;
+    /** Effective px width of a column (resize override → declared px → fallback). */
+    private colPx;
+    /** key → left px for sticky data columns. */
+    private readonly stickyOffsets;
+    protected stickyLeft(key: string): number | null;
+    protected isSticky(col: StrctDatagridColumn): boolean;
+    /** The last frozen column carries the edge shadow. */
+    protected readonly lastStickyKey: _angular_core.Signal<string | null>;
     protected readonly allPageSelected: _angular_core.Signal<boolean>;
     protected readonly somePageSelected: _angular_core.Signal<boolean>;
     /** Resolve a row's stable identity (defaults to the row object itself). */
     private idOf;
     protected rowKey(row: StrctRow): unknown;
     protected cellTemplate(key: string): TemplateRef<StrctCellContext> | null;
+    /** Last emitted lazy request (dedupe key). */
+    private lastLazyKey;
+    /** Last serialized column state pushed outward (loop guard). */
+    private lastStateKey;
     constructor();
+    private readPersistedState;
+    private applyColumnState;
+    /**
+     * The grid as CSV: header labels + every non-hidden column, all rows in the
+     * current order (client mode: the full sorted set, not just the page).
+     */
+    toCSV(): string;
+    /** Download the grid as a CSV file. */
+    downloadCSV(filename?: string): void;
     protected colspan(): number;
     /** Toggle the detail pane for a row (triggered by its »  button, not the row,
      *  so row cells remain selectable for copy). */
@@ -2212,7 +2298,7 @@ declare class StrctDatagrid {
     private commitSelection;
     private compare;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDatagrid, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDatagrid, "strct-datagrid", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "detailPane": { "alias": "detailPane"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; "columnChooser": { "alias": "columnChooser"; "required": false; "isSignal": true; }; "sync": { "alias": "sync"; "required": false; "isSignal": true; }; "footerActionsDisabled": { "alias": "footerActionsDisabled"; "required": false; "isSignal": true; }; "rowId": { "alias": "rowId"; "required": false; "isSignal": true; }; "rowActions": { "alias": "rowActions"; "required": false; "isSignal": true; }; "initialSelection": { "alias": "initialSelection"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "viewportHeight": { "alias": "viewportHeight"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "lazy": { "alias": "lazy"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "stateKey": { "alias": "stateKey"; "required": false; "isSignal": true; }; "columnState": { "alias": "columnState"; "required": false; "isSignal": true; }; }, { "columnState": "columnStateChange"; "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; "lazyLoad": "lazyLoad"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
 }
 
 /** Timeline node state colors. */
@@ -2950,4 +3036,4 @@ declare class StrctEmptyState {
 }
 
 export { STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_MASKS, STRCT_PALETTES, STRCT_RAW_ICONS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeHost, StrctCascadeNode, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDesc, StrctDescriptionList, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctEmptyState, StrctField, StrctFile, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHero, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMetricTile, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, StrctSectionMenu, StrctSegmented, StrctShell, StrctShellService, StrctSignpost, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctStack, StrctStackItem, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctTooltip, StrctTree, StrctTreeNode, StrctVerticalNav, StrctWizard, registerStrctIcon, strctValidationIcon, strctValidationTone };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartCurve, StrctChartSeries, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridLabels, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartCurve, StrctChartSeries, StrctChartStatus, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMetricStatus, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctTagStatus, StrctThresholds, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus };