@akcelik/strct 4.2.1 → 4.4.0

package/package.json

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

@@ -1021,6 +1021,16 @@ interface StrctTreeNodeData {
 }
 /** Per-node menu resolver for the data-driven tree — returns the items for one node. */
 type StrctTreeNodeMenuFn = (node: StrctTreeNodeData) => StrctMenuItem[];
+/** Payload of (nodeDrop): the dragged node and the node it was dropped on. */
+interface StrctTreeDropEvent {
+    source: StrctTreeNodeData;
+    target: StrctTreeNodeData;
+    /**
+     * Where the drop landed. Only `'into'` today — the field exists so
+     * before/after reordering can be added without changing the event's shape.
+     */
+    position: 'into';
+}
 /** Payload of (nodeMenuSelect). */
 interface StrctTreeMenuEvent {
     node: StrctTreeNodeData;
@@ -1057,6 +1067,16 @@ declare class StrctTreeNode {
     readonly nodeActivated: _angular_core.OutputEmitterRef<StrctTreeNodeData>;
     /** Data-mode right-click menu selection (bubbles to the tree). */
     readonly nodeMenuSelect: _angular_core.OutputEmitterRef<StrctTreeMenuEvent>;
+    /** Whether this row can be picked up — the tree asks the consumer's `canDrag`.
+     *  Reads `nodes()` too, so a refresh that makes a node movable is honoured. */
+    protected readonly isDraggable: _angular_core.Signal<boolean>;
+    protected readonly isDragSource: _angular_core.Signal<boolean>;
+    protected readonly isDropTarget: _angular_core.Signal<boolean>;
+    protected onDragStart(event: DragEvent): void;
+    protected onDragEnd(): void;
+    protected onDragOver(event: DragEvent): void;
+    protected onDragLeave(): void;
+    protected onDrop(event: DragEvent): void;
     /** Right-click menu items for this node ([] when no resolver / not data mode). */
     protected readonly menuItems: _angular_core.Signal<StrctMenuItem[]>;
     /** The owning `<strct-tree>` (null only for standalone nodes outside a tree). */
@@ -1125,6 +1145,26 @@ declare class StrctTree {
     readonly density: _angular_core.InputSignal<"compact" | "comfortable">;
     /** Per-node right-click menu resolver. */
     readonly nodeMenu: _angular_core.InputSignal<StrctTreeNodeMenuFn | null>;
+    /**
+     * Which nodes can be picked up. Default: none, so a tree without this input
+     * behaves exactly as before. Asked again whenever `nodes` changes, because
+     * a refresh can make a node movable.
+     */
+    readonly canDrag: _angular_core.InputSignal<((node: StrctTreeNodeData) => boolean) | null>;
+    /**
+     * Where the dragged node may land, asked during `dragover`. A browser does
+     * not let `dragover` read the drag's data, so the tree keeps the source node
+     * and hands it to you here. Without this input nothing accepts a drop — the
+     * gesture belongs to the tree, the rule belongs to you.
+     *
+     * Two rules are built in whatever this returns: a node is never dropped on
+     * itself, and never into its own subtree (that would be a cycle).
+     */
+    readonly canDrop: _angular_core.InputSignal<((source: StrctTreeNodeData, target: StrctTreeNodeData) => boolean) | null>;
+    /** How long a collapsed node must be hovered mid-drag before it expands (ms). */
+    readonly dragExpandDelay: _angular_core.InputSignal<number>;
+    /** Emitted for an accepted drop only. */
+    readonly nodeDrop: _angular_core.OutputEmitterRef<StrctTreeDropEvent>;
     /** Accessible label of each node's chevron toggle; receives the expanded state and the node label. */
     readonly chevronAriaLabel: _angular_core.InputSignal<(expanded: boolean, label: string) => string>;
     /** Emitted when any data-driven node is clicked. */
@@ -1186,10 +1226,43 @@ declare class StrctTree {
      * different characters accumulate into a search string (reset after a pause).
      */
     typeahead(from: StrctTreeNode, key: string): void;
+    private readonly announcer;
+    private readonly hostEl;
+    private readonly dragSourceNode;
+    private readonly dropTargetNode;
+    /** Pending hover-expand for a collapsed target. */
+    private expandTimer;
+    private expandTimerKey;
+    /** Edge auto-scroll while a drag is in flight. */
+    private scrollFrame;
+    private scrollStep;
+    canDragNode(node: StrctTreeNodeData): boolean;
+    isDragSource(node: StrctTreeNodeData): boolean;
+    isDropTarget(node: StrctTreeNodeData): boolean;
+    /** Whether the current drag may land on `target`: the built-in guards first,
+     *  then the consumer's rule. */
+    acceptsDrop(target: StrctTreeNodeData): boolean;
+    /** Whether `node` is somewhere inside `root`'s subtree. */
+    private containsNode;
+    beginDrag(node: StrctTreeNodeData): void;
+    /** Called from every `dragover` on a row: highlight, hover-expand, scroll. */
+    dragOver(target: StrctTreeNodeData, clientY: number): void;
+    dragLeave(target: StrctTreeNodeData): void;
+    dropOn(target: StrctTreeNodeData): void;
+    /** Always runs, including when the drop lands outside the tree (dragend). */
+    endDrag(): void;
+    /** A collapsed node hovered long enough opens, so a target that is not yet
+     *  visible can be reached at all — the normal case in a big inventory. */
+    private scheduleHoverExpand;
+    private clearExpandTimer;
+    /** Nearest scrolling ancestor, so a long tree can be traversed mid-drag. */
+    private scrollParent;
+    private edgeScroll;
+    private stopEdgeScroll;
     /** 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; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "nodeMenu": { "alias": "nodeMenu"; "required": false; "isSignal": true; }; "chevronAriaLabel": { "alias": "chevronAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, ["projectedNodes"], ["*"], 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; }; "canDrag": { "alias": "canDrag"; "required": false; "isSignal": true; }; "canDrop": { "alias": "canDrop"; "required": false; "isSignal": true; }; "dragExpandDelay": { "alias": "dragExpandDelay"; "required": false; "isSignal": true; }; "chevronAriaLabel": { "alias": "chevronAriaLabel"; "required": false; "isSignal": true; }; "expandedIds": { "alias": "expandedIds"; "required": false; "isSignal": true; }; }, { "nodeDrop": "nodeDrop"; "nodeActivated": "nodeActivated"; "nodeMenuSelect": "nodeMenuSelect"; "expandedIds": "expandedIdsChange"; "expandedChange": "expandedChange"; "nodeToggled": "nodeToggled"; }, ["projectedNodes"], ["*"], true, never>;
 }
 
 /** Fixed modal width presets: sm 480 · md 640 · lg 860 · xl 1080 (px). */
@@ -5811,6 +5884,30 @@ declare class StrctHeatmap {
     readonly cols: _angular_core.InputSignal<string[] | null>;
     /** Scale ceiling — the value that maps to full intensity. Auto (data max) when null. */
     readonly max: _angular_core.InputSignal<number | null>;
+    /**
+     * Label every n-th column (1 = every column, today's behaviour). 24 hourly
+     * columns in a narrow card cannot all carry a readable label; labelling every
+     * third keeps "14:00" legible instead of forcing it down to "14".
+     */
+    readonly colLabelEvery: _angular_core.InputSignal<number>;
+    /**
+     * Column label text, so a column can be keyed by an ISO time and shown as
+     * "14:00". Return '' to drop a label. Applied after `colLabelEvery`.
+     */
+    readonly colLabel: _angular_core.InputSignal<((col: string, index: number) => string) | null>;
+    /**
+     * Cell tooltip text. Without it a cell reads `row × col: value`, which for a
+     * utilisation grid has no unit — `hv-05 · 14:00 — 47% CPU` is the readable form.
+     */
+    readonly valueFormat: _angular_core.InputSignal<((value: number, row: string, col: string) => string) | null>;
+    /**
+     * Colour by band instead of one hue: `status` (accent by default) below
+     * `warning`, the warning hue from there, the critical hue from `critical`.
+     * Intensity is scaled by the value's position WITHIN its band, so a 96% cell
+     * reads darker than an 81% one and both read as critical/warning at a glance.
+     * Unset: today's single-hue ramp across the whole range.
+     */
+    readonly thresholds: _angular_core.InputSignal<StrctThresholds | null>;
     /** Base color of the intensity ramp. */
     readonly status: _angular_core.InputSignal<StrctChartStatus>;
     /** Shown when there is no data (localizable). */
@@ -5846,16 +5943,23 @@ declare class StrctHeatmap {
     protected readonly cells: _angular_core.Signal<CellRender[]>;
     protected readonly rowLabels: _angular_core.Signal<LabelRender[]>;
     protected readonly colLabels: _angular_core.Signal<LabelRender[]>;
+    private tipFor;
     /** Screen-reader summary of the whole grid (role="img" name). */
     protected readonly aria: _angular_core.Signal<string>;
     /**
      * Intensity ramp: 8% of the status hue for the smallest non-zero value up
      * to 100% at the ceiling; zero stays on the empty-cell surface.
+     *
+     * With `thresholds`, the hue comes from the value's band and the intensity
+     * from its position inside that band, floored at 45% — a band has to be
+     * recognisable as itself, and a pale cell must not read as "no data".
      */
     private fillFor;
+    /** The band a value falls in: its hue and the range intensity scales over. */
+    private bandFor;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctHeatmap, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeatmap, "strct-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "summaryFormat": { "alias": "summaryFormat"; "required": false; "isSignal": true; }; "cellHeight": { "alias": "cellHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowLabelWidth": { "alias": "rowLabelWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeatmap, "strct-heatmap", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "colLabelEvery": { "alias": "colLabelEvery"; "required": false; "isSignal": true; }; "colLabel": { "alias": "colLabel"; "required": false; "isSignal": true; }; "valueFormat": { "alias": "valueFormat"; "required": false; "isSignal": true; }; "thresholds": { "alias": "thresholds"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "summaryFormat": { "alias": "summaryFormat"; "required": false; "isSignal": true; }; "cellHeight": { "alias": "cellHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowLabelWidth": { "alias": "rowLabelWidth"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChart, StrctCheckbox, StrctChips, StrctCode, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownItem, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFile, StrctFilterBar, StrctFlow, StrctFooter, StrctGauge, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLogViewer, StrctLogin, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderItem, StrctRowDetailDef, StrctSearchbox, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWizard, StrctWizardAside, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctValidationIcon, strctValidationTone, unlockBodyScroll };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLogLine, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWizardDefaults };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowDirection, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLogLine, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressStatus, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWizardDefaults };