@akcelik/strct 0.31.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "0.31.1",
+  "version": "1.2.0",
   "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

@@ -1798,6 +1798,8 @@ declare class StrctDatepicker implements ControlValueAccessor {
     /** Placeholder text when empty. */
     readonly placeholder: _angular_core.InputSignal<string>;
     protected readonly dow: string[];
+    protected readonly dowFull: string[];
+    protected readonly titleId: string;
     readonly value: _angular_core.WritableSignal<string>;
     readonly open: _angular_core.WritableSignal<boolean>;
     readonly isDisabled: _angular_core.WritableSignal<boolean>;
@@ -1808,12 +1810,21 @@ declare class StrctDatepicker implements ControlValueAccessor {
     protected readonly monthLabel: _angular_core.Signal<string>;
     protected readonly displayLabel: _angular_core.Signal<string>;
     protected readonly cells: _angular_core.Signal<DayCell[]>;
+    /** The 42 cells chunked into ARIA grid rows (weeks). */
+    protected readonly weeks: _angular_core.Signal<DayCell[][]>;
+    /** Accessible name of one day cell: "Tuesday, March 4, 2026". */
+    protected cellAria(cell: DayCell): string;
     private onChange;
     private onTouched;
     toggle(): void;
     shiftMonth(delta: number): void;
     pick(iso: string): void;
+    constructor();
     onKeydown(event: KeyboardEvent): void;
+    /** Day-of-week (0–6) of the keyboard cursor. */
+    private focusedDow;
+    /** Close the panel and hand focus back to the input. */
+    private close;
     private syncFocus;
     private shiftFocus;
     protected onDocClick(event: MouseEvent): void;
@@ -2065,10 +2076,22 @@ interface StrctDatagridLazyState {
     sortKey: string | null;
     sortDir: SortDir;
 }
-/** Persistable user column preferences (widths from resize, hidden from the chooser). */
+/** Persistable user column preferences (widths from resize, hidden from the
+ *  chooser, order from drag-reorder). */
 interface StrctDatagridColumnState {
     widths?: Record<string, number>;
     hidden?: string[];
+    order?: string[];
+}
+/** One rendered tbody item: a data row, or a group header. */
+interface DgItem {
+    row?: StrctRow;
+    group?: {
+        key: unknown;
+        label: string;
+        count: number;
+        collapsed: boolean;
+    };
 }
 /**
  * Marks the expandable-row detail template. The row is the template's implicit
@@ -2189,6 +2212,14 @@ declare class StrctDatagrid {
     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>;
+    /** Let the user reorder data columns by dragging their headers. */
+    readonly reorderable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Group rows by this column key: the grid renders a collapsible header row
+     * per distinct value (with a count), respecting the current sort within
+     * groups. Paging is bypassed while grouped; not combinable with `virtual`.
+     */
+    readonly groupBy: _angular_core.InputSignal<string | null>;
     /** Emitted when the selection changes. */
     readonly selectionChange: _angular_core.OutputEmitterRef<StrctRow[]>;
     /** Emitted when the refresh button is clicked. */
@@ -2228,8 +2259,24 @@ declare class StrctDatagrid {
     protected readonly paneOpen: _angular_core.Signal<boolean>;
     /** Whether to render the trailing row-actions (kebab) column. */
     protected readonly canActions: _angular_core.Signal<boolean>;
+    /** User-chosen column order (keys); unknown keys keep declared positions. */
+    private readonly columnOrder;
+    /** Declared columns re-arranged by the user's drag order. */
+    private readonly orderedColumns;
     /** Only the first column is shown while the detail pane is open. */
     protected readonly visibleColumns: _angular_core.Signal<StrctDatagridColumn[]>;
+    protected readonly dragKey: _angular_core.WritableSignal<string | null>;
+    protected readonly dropKey: _angular_core.WritableSignal<string | null>;
+    protected onColDragStart(key: string, event: DragEvent): void;
+    protected onColDragOver(key: string, event: DragEvent): void;
+    protected onColDrop(key: string): void;
+    protected onColDragEnd(): void;
+    private readonly collapsedGroups;
+    /** Collapse / expand one group header. */
+    toggleGroup(key: unknown): void;
+    /** What tbody renders: plain (virtual/paged) rows, or groups + their rows. */
+    protected readonly displayItems: _angular_core.Signal<DgItem[]>;
+    protected itemKey(it: DgItem): unknown;
     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). */
@@ -2273,6 +2320,14 @@ declare class StrctDatagrid {
      * current order (client mode: the full sorted set, not just the page).
      */
     toCSV(): string;
+    /**
+     * The grid as a real .xlsx workbook (dependency-free SpreadsheetML):
+     * header labels + every non-hidden column in the current order, all rows in
+     * the current sort; numeric cells stay numeric.
+     */
+    toXLSX(): Uint8Array;
+    /** Download the grid as an .xlsx file. */
+    downloadXLSX(filename?: string): void;
     /** Download the grid as a CSV file. */
     downloadCSV(filename?: string): void;
     protected colspan(): number;
@@ -2298,7 +2353,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; }; "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>;
+    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; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; }, { "columnState": "columnStateChange"; "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; "lazyLoad": "lazyLoad"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
 }
 
 /** Timeline node state colors. */
@@ -2512,6 +2567,19 @@ declare class StrctChart {
      * Double-click, Escape or the reset chip zooms back out.
      */
     readonly zoom: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Stack multi-series values cumulatively: each series draws its line at the
+     * running total and fills the band down to the series below (nulls break the
+     * stack at that slot). Tooltips keep the original per-series values.
+     */
+    readonly stacked: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Y-axis scale. `log` needs positive values; non-positives clamp to the floor. */
+    readonly scale: _angular_core.InputSignal<"linear" | "log">;
+    /**
+     * Per-point timestamps (ms epoch or Date). When set, x positions map to real
+     * time, so uneven sampling renders honestly instead of equally spaced.
+     */
+    readonly times: _angular_core.InputSignal<(number | Date)[] | null>;
     /** Tooltip text for a gap (null) point. */
     readonly gapText: _angular_core.InputSignal<string>;
     /** Accessible label of the reset-zoom chip (localizable). */
@@ -2565,11 +2633,16 @@ declare class StrctChart {
     private chartH;
     /** Horizontal gap between two data points, in px (of the visible window). */
     private stepX;
-    /** Real values inside the visible window (multi-aware; bands included). */
+    /** Real values inside the visible window (multi-aware; bands included;
+     *  per-slot totals when stacked). */
     private readonly visibleValues;
     private readonly yMax;
     private readonly yMin;
+    /** Smallest positive visible value — the floor of a log axis. */
+    private readonly logFloor;
     private yOf;
+    /** Timestamps normalized to ms (null when the axis is index-based). */
+    private readonly timesMs;
     protected readonly points: _angular_core.Signal<(Pt | null)[]>;
     /** Non-gap points only (dot rendering). */
     protected readonly dotPts: _angular_core.Signal<Pt[]>;
@@ -2659,7 +2732,8 @@ declare class StrctChart {
     protected readonly chartAria: _angular_core.Signal<string>;
     /** aria-live text announcing the hovered / keyboard-selected point. */
     protected readonly srText: _angular_core.Signal<string>;
-    /** Pixel x of a data index (shared by the plot, labels and annotations). */
+    /** Pixel x of a data index (shared by the plot, labels and annotations).
+     *  With `times`, positions map to real timestamps — uneven sampling shows. */
     protected xOf(i: number): number;
     /** Set the local hover index, emitting `hoverIndex` on change. */
     private setHover;
@@ -2680,7 +2754,7 @@ declare class StrctChart {
     /** The chart as a PNG data URL at the given scale (default 2×). */
     toPNG(scale?: number): Promise<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctChart, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctChart, "strct-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; "glow": { "alias": "glow"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "dots": { "alias": "dots"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "xTicks": { "alias": "xTicks"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "yAxis": { "alias": "yAxis"; "required": false; "isSignal": true; }; "yTicks": { "alias": "yTicks"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "thresholds": { "alias": "thresholds"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "agoFormat": { "alias": "agoFormat"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "brush": { "alias": "brush"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "gapText": { "alias": "gapText"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; }, { "hoverIndex": "hoverIndex"; "brushChange": "brushChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctChart, "strct-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "curve": { "alias": "curve"; "required": false; "isSignal": true; }; "area": { "alias": "area"; "required": false; "isSignal": true; }; "glow": { "alias": "glow"; "required": false; "isSignal": true; }; "live": { "alias": "live"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "grid": { "alias": "grid"; "required": false; "isSignal": true; }; "dots": { "alias": "dots"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "xTicks": { "alias": "xTicks"; "required": false; "isSignal": true; }; "xFormat": { "alias": "xFormat"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "yAxis": { "alias": "yAxis"; "required": false; "isSignal": true; }; "yTicks": { "alias": "yTicks"; "required": false; "isSignal": true; }; "axisFormat": { "alias": "axisFormat"; "required": false; "isSignal": true; }; "thresholds": { "alias": "thresholds"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "agoFormat": { "alias": "agoFormat"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "annotations": { "alias": "annotations"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "brush": { "alias": "brush"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "scale": { "alias": "scale"; "required": false; "isSignal": true; }; "times": { "alias": "times"; "required": false; "isSignal": true; }; "gapText": { "alias": "gapText"; "required": false; "isSignal": true; }; "resetLabel": { "alias": "resetLabel"; "required": false; "isSignal": true; }; }, { "hoverIndex": "hoverIndex"; "brushChange": "brushChange"; }, never, never, true, never>;
 }
 
 /** A single weighted slice of a donut chart. */