@akcelik/strct 4.3.0 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "4.3.0",
+  "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). */
@@ -5889,4 +5962,4 @@ declare class StrctHeatmap {
 }
 
 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 };