@akcelik/strct 0.22.0 → 0.25.0

package/package.json

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

@@ -450,20 +450,51 @@ declare class StrctSpeedDial {
 
 /**
  * Surface container. Compose with the header / block / footer pieces:
- *   <strct-card>
- *     <strct-card-header>Title</strct-card-header>
- *     <strct-card-block>...</strct-card-block>
+ *
+ *   <strct-card status="warning" collapsible [(collapsed)]="hidden">
+ *     <strct-card-header icon="host">Host hv-02</strct-card-header>
+ *     <strct-card-block>…</strct-card-block>
  *     <strct-card-footer><button strct-button>OK</button></strct-card-footer>
  *   </strct-card>
+ *
+ * Rich options (all opt-in; defaults preserve the plain card):
+ * - `status` — tone rail on the leading edge (same language as alert / hero).
+ * - `interactive` — hover lift + accent border for clickable cards.
+ * - `selected` — accent ring for picker layouts.
+ * - `dense` — tighter paddings for dashboards.
+ * - `loading` — indeterminate top bar + `aria-busy` (reduced-motion safe).
+ * - `collapsible` + two-way `collapsed` — the header gains a chevron toggle;
+ *   block and footer hide while collapsed.
  */
 declare class StrctCard {
+    /** Tone rail on the leading edge. */
+    readonly status: _angular_core.InputSignal<StrctStatus>;
+    /** Hover lift + accent border for clickable cards (style-only affordance). */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Accent ring — for picker / multi-select card layouts. */
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Tighter paddings for dense dashboards. */
+    readonly dense: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Indeterminate top bar + aria-busy; body/footer dim and ignore input. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Allow collapsing to just the header (a chevron appears in the header). */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Collapsed state (two-way; only meaningful with `collapsible`). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    toggle(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCard, "strct-card", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCard, "strct-card", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["*"], true, never>;
 }
 /** Header section of a {@link StrctCard}. */
 declare class StrctCardHeader {
+    /** Optional leading icon (StrctIcon set). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Accessible labels for the collapse toggle (localizable). */
+    readonly collapseLabel: _angular_core.InputSignal<string>;
+    readonly expandLabel: _angular_core.InputSignal<string>;
+    protected readonly card: StrctCard | null;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctCardHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCardHeader, "strct-card-header", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctCardHeader, "strct-card-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "collapseLabel": { "alias": "collapseLabel"; "required": false; "isSignal": true; }; "expandLabel": { "alias": "expandLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /** Body section of a {@link StrctCard}. */
 declare class StrctCardBlock {
@@ -687,6 +718,8 @@ declare class StrctTreeNode {
     protected readonly menuItems: _angular_core.Signal<StrctMenuItem[]>;
     /** The owning `<strct-tree>` (null only for standalone nodes outside a tree). */
     protected readonly tree: StrctTree | null;
+    /** Node icon scales with the owning tree's density (16 native → 18 comfortable). */
+    protected readonly iconSize: _angular_core.Signal<16 | 18>;
     /** Parent tree node (element-injector ancestor); drives aria-level + ArrowLeft. */
     readonly parent: StrctTreeNode | null;
     /** 1-based depth, exposed as aria-level. */
@@ -722,6 +755,12 @@ declare class StrctTreeNode {
 declare class StrctTree {
     /** Data-driven node list; when set, projected content is ignored. */
     readonly nodes: _angular_core.InputSignal<StrctTreeNodeData[] | null>;
+    /**
+     * Row density. `compact` (default) is the dense inventory layout —
+     * 13px text / 16px icons; `comfortable` relaxes to 14px text / 18px icons
+     * with taller rows for touch-friendly or low-density consoles.
+     */
+    readonly density: _angular_core.InputSignal<"compact" | "comfortable">;
     /** Per-node right-click menu resolver. */
     readonly nodeMenu: _angular_core.InputSignal<StrctTreeNodeMenuFn | null>;
     /** Emitted when any data-driven node is clicked. */
@@ -768,7 +807,7 @@ declare class StrctTree {
     /** Toggle a node's expansion, updating state and emitting outputs. */
     toggleNode(node: StrctTreeNodeData): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctTree, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctTree, "strct-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, never, ["*"], true, never>;
 }
 
 /** Fixed modal width presets: sm 480 · md 640 · lg 860 · xl 1080 (px). */
@@ -802,6 +841,14 @@ declare class StrctModal {
      * `dismissible` for lightweight, transient dialogs where quick dismissal is fine.
      */
     readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Allow repositioning the dialog by dragging its header (mouse + touch). */
+    readonly draggable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Extra class(es) added to the dialog panel — style it from app-global CSS. */
+    readonly panelClass: _angular_core.InputSignal<string>;
+    /** Extra class(es) added to the backdrop / overlay. */
+    readonly backdropClass: _angular_core.InputSignal<string>;
+    /** Built-in look: `glass` is a theme-aware frosted preset (translucent panel + blurred backdrop). */
+    readonly variant: _angular_core.InputSignal<"solid" | "glass">;
     /** Emitted when the alert is dismissed. */
     readonly closed: _angular_core.OutputEmitterRef<void>;
     protected readonly titleId: string;
@@ -815,11 +862,19 @@ declare class StrctModal {
     protected onEscape(): void;
     /** Wrap Tab focus within the dialog. */
     protected onTab(event: Event): void;
+    /** Dialog translation from its centered position; reset on every open. */
+    private readonly dragOffset;
+    /** Pointer + clamp bounds captured at drag start; null while not dragging. */
+    private dragStart;
+    protected readonly dragTransform: _angular_core.Signal<string | null>;
+    protected onHeadPointerDown(event: PointerEvent): void;
+    protected onHeadPointerMove(event: PointerEvent): void;
+    protected onHeadPointerEnd(): void;
     private dialog;
     private focusable;
     private focusInitial;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctModal, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctModal, "strct-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hideFooter": { "alias": "hideFooter"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[strctModalFooter]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctModal, "strct-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "hideFooter": { "alias": "hideFooter"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "backdropClass": { "alias": "backdropClass"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[strctModalFooter]"], true, never>;
 }
 
 /** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
@@ -1990,6 +2045,11 @@ declare class StrctDatagrid {
     readonly detailPane: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Compact density mode. */
     readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Keep every row exactly one line tall: cell content never wraps — long values
+     * truncate with an ellipsis instead — so tall content can't distort the grid.
+     */
+    readonly singleLine: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Message shown when there are no rows. */
     readonly emptyText: _angular_core.InputSignal<string>;
     /** Show skeleton rows while data is loading. */
@@ -2109,7 +2169,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; }; "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; }; }, { "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
 }
 
 /** Timeline node state colors. */