@akcelik/strct 0.5.31 → 0.7.0

package/package.json

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

@@ -188,6 +188,47 @@ declare class StrctNavItem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctNavItem, "strct-nav-item", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/** Semantic colour for a rail item's count badge. */
+type StrctRailStatus = 'accent' | 'success' | 'warning' | 'critical';
+/** A single entry in a {@link StrctRail}. */
+interface StrctRailItem {
+    /** Stable identity, matched against the rail's `activeId`. */
+    id: string;
+    label: string;
+    /** Icon name (see the icon set). */
+    icon: string;
+    /** Optional count/indicator — e.g. number of active alerts. */
+    badge?: string | number;
+    /** Badge colour (defaults to `accent`). When collapsed it renders as a dot. */
+    badgeStatus?: StrctRailStatus;
+    disabled?: boolean;
+}
+/**
+ * Collapsible, data-driven primary navigation rail for an application shell.
+ * Each item is an icon + label + optional status badge; collapsing shrinks it to
+ * an icon-only rail (badges become dots, labels become tooltips).
+ *
+ *   <strct-rail [items]="navItems" [(activeId)]="section" [(collapsed)]="railOff"
+ *               (select)="go($event)" />
+ */
+declare class StrctRail {
+    /** Navigation entries. */
+    readonly items: _angular_core.InputSignal<StrctRailItem[]>;
+    /** Currently-active item id (two-way). */
+    readonly activeId: _angular_core.ModelSignal<string | null>;
+    /** Collapsed (icon-only) state (two-way). */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    /** Show the collapse toggle at the foot of the rail. */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /** Accessible label for the nav landmark. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    /** Emitted when an item is chosen. */
+    readonly select: _angular_core.OutputEmitterRef<StrctRailItem>;
+    protected pick(item: StrctRailItem): 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>;
+}
+
 /**
  * Authentication layout. Two modes:
  *  - default: a single centered column (drop a card + form inside).
@@ -483,30 +524,51 @@ declare class StrctMenuPanel {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMenuPanel, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMenuPanel, "strct-menu-panel", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "x": { "alias": "x"; "required": false; "isSignal": true; }; "y": { "alias": "y"; "required": false; "isSignal": true; }; "submenu": { "alias": "submenu"; "required": false; "isSignal": true; }; }, { "select": "select"; "close": "close"; "back": "back"; }, never, never, true, never>;
 }
+/** Options for {@link StrctMenuService.open}. */
+interface StrctMenuOpenOptions {
+    /** Viewport x of the menu's top-left (clamped/flipped to stay on screen). */
+    x: number;
+    /** Viewport y of the menu's top-left. */
+    y: number;
+    items: StrctMenuItem[];
+    /** Payload passed to each item's `action`. */
+    data?: unknown;
+    /** Called with the chosen item (after its `action` runs). */
+    onSelect?: (item: StrctMenuItem) => void;
+}
 /**
- * Right-click (context) menu driven by a data array. Attach to any trigger; the
- * menu portals into `<body>` and runs each item's `action` on selection.
- *   <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
- *        (menuSelect)="onPick($event)">…</div>
+ * Imperatively opens the data-driven menu panel, portaled into `<body>`. Shared
+ * by the `[strctContextMenu]` directive (right-click) and any click trigger such
+ * as the datagrid row-action button. Only one menu is open at a time.
  */
-declare class StrctContextMenuTrigger implements OnDestroy {
+declare class StrctMenuService {
     private readonly appRef;
     private readonly envInjector;
     private readonly zone;
     private readonly doc;
+    private ref;
+    open(opts: StrctMenuOpenOptions): void;
+    private readonly onClose;
+    private readonly onOutside;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctMenuService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<StrctMenuService>;
+}
+/**
+ * Right-click (context) menu driven by a data array. Attach to any trigger; the
+ * menu portals into `<body>` and runs each item's `action` on selection.
+ *   <div [strctContextMenu]="menuFor(host)" [strctContextMenuData]="host"
+ *        (menuSelect)="onPick($event)">…</div>
+ */
+declare class StrctContextMenuTrigger {
+    private readonly menu;
     /** Menu items to display. */
     readonly items: _angular_core.InputSignal<StrctMenuItem[]>;
     /** Arbitrary payload passed to item actions. */
     readonly data: _angular_core.InputSignal<unknown>;
     /** Emitted when a menu item is selected. */
     readonly menuSelect: _angular_core.OutputEmitterRef<StrctMenuItem>;
-    private ref;
-    private readonly onClose;
     protected onContextMenu(event: MouseEvent): void;
-    private openAt;
-    private readonly onOutside;
-    private closeMenu;
-    ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctContextMenuTrigger, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctContextMenuTrigger, "[strctContextMenu]", never, { "items": { "alias": "strctContextMenu"; "required": true; "isSignal": true; }; "data": { "alias": "strctContextMenuData"; "required": false; "isSignal": true; }; }, { "menuSelect": "menuSelect"; }, never, never, true, never>;
 }
@@ -643,6 +705,46 @@ declare class StrctModal {
     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; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*", "[strctModalFooter]"], true, never>;
 }
 
+/** Marks the drawer's footer action area: `<ng-container strctDrawerFooter>…`. */
+declare class StrctDrawerFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDrawerFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctDrawerFooter, "[strctDrawerFooter]", never, {}, {}, never, never, true, never>;
+}
+/** Which edge the drawer slides in from. */
+type StrctDrawerSide = 'start' | 'end' | 'top' | 'bottom';
+/** Drawer extent along its sliding axis. */
+type StrctDrawerSize = 'sm' | 'md' | 'lg';
+/**
+ * Slide-out overlay panel anchored to an edge of the viewport — for inspecting
+ * or editing a record without losing the underlying table's scroll/selection.
+ *
+ *   <strct-drawer [(open)]="editing" side="end" title="Virtual machine">
+ *     … body …
+ *     <ng-container strctDrawerFooter>
+ *       <button strct-button (click)="editing.set(false)">Cancel</button>
+ *     </ng-container>
+ *   </strct-drawer>
+ */
+declare class StrctDrawer {
+    /** Open state (two-way). */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Edge to anchor to. Defaults to `end` (right in LTR). */
+    readonly side: _angular_core.InputSignal<StrctDrawerSide>;
+    /** Extent along the sliding axis. */
+    readonly size: _angular_core.InputSignal<StrctDrawerSize>;
+    /** Header title. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Show the close button and allow backdrop/Esc dismissal. */
+    readonly dismissable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly footerDef: _angular_core.Signal<StrctDrawerFooter | undefined>;
+    protected readonly hasFooter: _angular_core.Signal<boolean>;
+    protected onBackdrop(): void;
+    protected onEscape(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDrawer, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDrawer, "strct-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissable": { "alias": "dismissable"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["footerDef"], ["*", "[strctDrawerFooter]"], true, never>;
+}
+
 /**
  * Click-to-open menu:
  *   <strct-dropdown align="end">
@@ -1495,10 +1597,22 @@ declare class StrctDatagrid {
      * that replace the row objects. Defaults to object identity.
      */
     readonly rowId: _angular_core.InputSignal<StrctRowId | null>;
+    /**
+     * Per-row action menu resolver. When set, each row gets a trailing actions
+     * column with a vertical-dots (kebab) button that opens this row's menu.
+     *   [rowActions]="(row) => [{ label: 'Open', action: () => open(row) }, …]"
+     */
+    readonly rowActions: _angular_core.InputSignal<((row: StrctRow) => StrctMenuItem[]) | null>;
     /** Emitted when the selection changes. */
     readonly selectionChange: _angular_core.OutputEmitterRef<StrctRow[]>;
     /** Emitted when the refresh button is clicked. */
     readonly syncChange: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when a row's action-menu item is chosen. */
+    readonly rowAction: _angular_core.OutputEmitterRef<{
+        row: StrctRow;
+        item: StrctMenuItem;
+    }>;
+    private readonly menu;
     protected readonly detailDef: _angular_core.Signal<StrctRowDetailDef | undefined>;
     protected readonly actionBarDef: _angular_core.Signal<StrctDatagridActionBar | undefined>;
     private readonly cellDefs;
@@ -1524,6 +1638,8 @@ declare class StrctDatagrid {
     protected readonly canExpand: _angular_core.Signal<boolean>;
     protected readonly canDetail: _angular_core.Signal<boolean>;
     protected readonly paneOpen: _angular_core.Signal<boolean>;
+    /** Whether to render the trailing row-actions (kebab) column. */
+    protected readonly canActions: _angular_core.Signal<boolean>;
     /** Only the first column is shown while the detail pane is open. */
     protected readonly visibleColumns: _angular_core.Signal<StrctDatagridColumn[]>;
     protected readonly sorted: _angular_core.Signal<StrctRow[]>;
@@ -1540,6 +1656,8 @@ declare class StrctDatagrid {
      *  so row cells remain selectable for copy). */
     openDetail(row: StrctRow): void;
     closePane(): void;
+    /** Open the row-action menu next to the clicked kebab button. */
+    protected openRowMenu(row: StrctRow, event: MouseEvent): void;
     sortBy(key: string): void;
     protected sortIcon(key: string): string;
     protected ariaSort(key: string): 'ascending' | 'descending' | 'none';
@@ -1556,7 +1674,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; }; }, { "selectionChange": "selectionChange"; "syncChange": "syncChange"; }, ["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; }; "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; }; }, { "selectionChange": "selectionChange"; "syncChange": "syncChange"; "rowAction": "rowAction"; }, ["detailDef", "actionBarDef", "cellDefs"], ["[strctDatagridActionBar]"], true, never>;
 }
 
 /** Timeline node state colors. */
@@ -1823,5 +1941,5 @@ declare class StrctToastOutlet {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctToastOutlet, "strct-toast-outlet", never, {}, {}, never, never, true, never>;
 }
 
-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, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRange, StrctRating, StrctRowDetailDef, 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 };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartStatus, StrctChartType, StrctColumn, StrctDatagridColumn, StrctDonutSegment, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRow, StrctRowId, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctTagStatus, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn };
+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, StrctChart, StrctCheckbox, StrctChips, StrctColorPicker, StrctCombobox, StrctContextMenu, StrctContextMenuTrigger, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctField, StrctFile, StrctFooter, StrctGauge, StrctHeader, StrctIcon, StrctInput, StrctInputMask, StrctInputOtp, StrctKnob, StrctLogin, StrctMenuPanel, StrctMenuService, StrctModal, StrctNav, StrctNavItem, StrctOverlay, StrctPagination, StrctPassword, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRating, StrctRowDetailDef, 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 };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartStatus, StrctChartType, StrctColumn, StrctDatagridColumn, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctIconBadge, StrctKnobStatus, StrctMenuItem, StrctMenuOpenOptions, StrctModalSize, StrctMode, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctRow, StrctRowId, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctTagStatus, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn };