@akcelik/strct 0.29.0 → 0.31.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "0.29.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",
@@ -32,7 +32,8 @@
     "@angular/common": "^21.2.0",
     "@angular/core": "^21.2.0",
     "@angular/forms": "^21.2.0",
-    "@angular/platform-browser": "^21.2.0"
+    "@angular/platform-browser": "^21.2.0",
+    "@angular/router": "^21.2.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/types/akcelik-strct.d.ts

@@ -247,6 +247,22 @@ interface StrctRailItem {
     /** Badge colour (defaults to `accent`). When collapsed it renders as a dot. */
     badgeStatus?: StrctRailStatus;
     disabled?: boolean;
+    /** `'bottom'` pins the item to the foot of the rail (e.g. Administration). */
+    placement?: 'top' | 'bottom';
+    /**
+     * Render as a real router link (`<a routerLink>`): middle-click, ⌘/Ctrl-click
+     * and "open in new tab" work; `(select)` still fires on plain activation.
+     * When neither `routerLink` nor `href` is set the item stays a `<button>`.
+     */
+    routerLink?: string | unknown[];
+    /** Render as a plain `<a href>` (external or non-router destinations). */
+    href?: string;
+    /** Small trailing status dot with no text (e.g. "unsaved changes"). */
+    dot?: boolean;
+    /** Dot tone; defaults to `accent`. */
+    dotStatus?: StrctRailStatus;
+    /** Muted trailing icon (e.g. "restart required"), before any badge / dot. */
+    trailingIcon?: string;
 }
 /**
  * Collapsible, data-driven primary navigation rail for an application shell.
@@ -269,7 +285,16 @@ declare class StrctRail {
     readonly ariaLabel: _angular_core.InputSignal<string>;
     /** Emitted when an item is chosen. */
     readonly select: _angular_core.OutputEmitterRef<StrctRailItem>;
-    protected pick(item: StrctRailItem): void;
+    protected readonly topItems: _angular_core.Signal<StrctRailItem[]>;
+    protected readonly bottomItems: _angular_core.Signal<StrctRailItem[]>;
+    /** Enabled item with a router destination → renders as `<a routerLink>`. */
+    protected isRouted(item: StrctRailItem): boolean;
+    /**
+     * Active state of a router-link item: an explicit `activeId` is authoritative;
+     * without one, the router's own active state drives it.
+     */
+    protected isActive(item: StrctRailItem, routerActive: boolean): boolean;
+    protected pick(item: StrctRailItem, event?: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctRail, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctRail, "strct-rail", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; "collapsed": "collapsedChange"; "select": "select"; }, never, never, true, never>;
 }
@@ -1111,6 +1136,16 @@ interface StrctMenuLink {
     /** Optional leading icon name. */
     icon?: string;
     disabled?: boolean;
+    /** Trailing count/label chip (e.g. a deviation count). */
+    badge?: string | number;
+    /** Badge tone; defaults to `accent` (shared vocabulary with {@link StrctRailItem}). */
+    badgeStatus?: StrctRailStatus;
+    /** Small trailing status dot with no text (e.g. "unsaved changes"). */
+    dot?: boolean;
+    /** Dot tone; defaults to `accent`. */
+    dotStatus?: StrctRailStatus;
+    /** Muted trailing icon (e.g. "restart required"), before any badge / dot. */
+    trailingIcon?: string;
 }
 /** A category (level 1) that groups {@link StrctMenuLink} items (level 2). */
 interface StrctMenuSection {
@@ -2014,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
@@ -2106,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. */
@@ -2115,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>;
@@ -2147,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). */
@@ -2177,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. */
@@ -2915,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 };