@acorex/components 20.2.26 → 20.2.27

package/tree2/index.d.ts

@@ -0,0 +1,337 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { AXEvent, AXHtmlEvent, AXValueChangedEvent } from '@acorex/cdk/common';
+import { AXDropListDroppedEvent } from '@acorex/cdk/drag-drop';
+
+/**
+ * Tree2 Component - Design Tokens
+ *
+ * The component supports the following CSS custom properties (design tokens):
+ *
+ * **Layout & Spacing:**
+ * - `--ax-comp-tree2-indent-size`: Indentation size for each tree level.
+ *   Default: `12px`
+ * - `--ax-comp-tree2-node-margin`: Vertical margin between nodes.
+ *   Default: `0.125rem`
+ *
+ * **Node Styling:**
+ * - `--ax-comp-tree2-node-border-radius`: Border radius for tree nodes.
+ *   Default: `6px`
+ * - `--ax-comp-tree2-node-hover-bg`: Background color on node hover.
+ *   Default: `rgba(var(--ax-sys-color-on-lightest-surface), 0.04)`
+ * - `--ax-comp-tree2-node-selected-bg`: Background color for selected nodes.
+ *   Default: `rgba(var(--ax-sys-color-primary-500), 0.12)`
+ *
+ * **Tree Lines (with-line look):**
+ * - `--ax-comp-tree2-line-color`: Color for tree structure lines.
+ *   Default: `rgba(var(--ax-sys-color-on-lightest-surface), 0.15)`
+ *
+ * **Drag & Drop:**
+ * - `--ax-comp-tree2-drag-preview-opacity`: Opacity of dragged element preview.
+ *   Default: `0.9`
+ * - `--ax-comp-tree2-drag-placeholder-bg`: Background for drag placeholder.
+ *   Default: `rgba(var(--ax-sys-color-on-lightest-surface), 0.02)`
+ * - `--ax-comp-tree2-drop-active-bg`: Background when hovering over valid drop zone.
+ *   Default: `rgba(var(--ax-sys-color-primary-500), 0.08)`
+ * - `--ax-comp-tree2-drop-active-outline`: Outline color for active drop zones.
+ *   Default: `rgba(var(--ax-sys-color-primary-500), 0.3)`
+ *
+ * **Dynamic Tokens (set via TypeScript):**
+ * - `--ax-tree-indent-size`: Dynamically set from `indentSize` input
+ * - `--ax-tree-line-offset`: Dynamically calculated as `indentSize / 2`
+ * - `--ax-tree-line-color`: Optional override for line color
+ *
+ * @example
+ * ```css
+ * // Customize tree appearance
+ * ax-tree2 {
+ *   --ax-comp-tree2-indent-size: 16px;
+ *   --ax-comp-tree2-node-selected-bg: rgba(var(--ax-sys-color-primary-600), 0.15);
+ *   --ax-comp-tree2-line-color: rgba(var(--ax-sys-color-on-lightest-surface), 0.1);
+ *   --ax-comp-tree2-node-hover-bg: rgba(var(--ax-sys-color-primary-500), 0.06);
+ * }
+ * ```
+ *
+ * @remarks
+ * All color tokens use Acorex design system variables (`--ax-sys-color-*`) for automatic
+ * light/dark mode support. Colors adapt based on the active theme without additional configuration.
+ */
+interface AXTreeBeforeDropEvent extends AXEvent {
+    movedNode: AXTreeNode;
+    previousParent?: AXTreeNode;
+    currentParent?: AXTreeNode;
+    previousIndex: number;
+    currentIndex: number;
+    canceled: boolean;
+}
+interface AXTreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    expanded?: boolean;
+    selected?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    visible?: boolean;
+    children?: AXTreeNode[];
+    childrenCount?: number;
+    loading?: boolean;
+    data?: unknown;
+}
+interface AXTreeNodeToggleEvent extends AXHtmlEvent {
+    node: AXTreeNode;
+}
+interface AXTreeNodeSelectEvent extends AXHtmlEvent {
+    node: AXTreeNode;
+}
+interface AXTreeDropEvent extends AXEvent {
+    node: AXTreeNode;
+    previousParent?: AXTreeNode;
+    currentParent?: AXTreeNode;
+    previousIndex: number;
+    currentIndex: number;
+}
+interface AXTreeItemTemplateContext {
+    $implicit: AXTreeNode;
+    node: AXTreeNode;
+    level: number;
+    expanded: boolean;
+    childrenCount: number;
+    loading: boolean;
+}
+type AXTreeViewLook = 'default' | 'card' | 'with-line';
+type AXTreeDragMode = 'none' | 'handler' | 'item';
+type AXTreeDragOperationType = 'order-only' | 'move' | 'both';
+
+declare class AXTree2Component {
+    #private;
+    private readonly ROOT_LIST_ID;
+    private readonly NODE_DROP_PREFIX;
+    private readonly LIST_PREFIX;
+    /** Tree data nodes */
+    nodes: _angular_core.ModelSignal<AXTreeNode[]>;
+    /** Whether to show checkboxes for selection */
+    showCheckbox: _angular_core.InputSignal<boolean>;
+    /** Drag and drop mode: 'none' (disabled), 'handler' (drag handle), 'item' (entire item) */
+    dragMode: _angular_core.InputSignal<AXTreeDragMode>;
+    /** Drag operation type: 'order-only' (reorder only), 'move' (move between parents), 'both' (allow both) */
+    dragOperationType: _angular_core.InputSignal<AXTreeDragOperationType>;
+    /** Whether to show icons */
+    showIcons: _angular_core.InputSignal<boolean>;
+    /** Whether to show children count badge */
+    showChildrenBadge: _angular_core.InputSignal<boolean>;
+    /** Custom icon for expanded nodes */
+    expandedIcon: _angular_core.InputSignal<string>;
+    /** Custom icon for collapsed nodes */
+    collapsedIcon: _angular_core.InputSignal<string>;
+    /** Indent size in pixels for each level */
+    indentSize: _angular_core.InputSignal<number>;
+    /** Node height in pixels */
+    nodeHeight: _angular_core.InputSignal<"compact" | "normal" | "comfortable">;
+    /** Visual style variant */
+    look: _angular_core.InputSignal<AXTreeViewLook>;
+    /** Custom template for tree items */
+    itemTemplate: _angular_core.InputSignal<TemplateRef<AXTreeItemTemplateContext>>;
+    /** Lazy load function for fetching children */
+    lazyLoad: _angular_core.InputSignal<(node: AXTreeNode) => Promise<AXTreeNode[]>>;
+    /** Whether to enable lazy loading */
+    enableLazyLoad: _angular_core.InputSignal<boolean>;
+    /** Emitted before a drop operation - set canceled to true to prevent drop */
+    onBeforeDrop: _angular_core.OutputEmitterRef<AXTreeBeforeDropEvent>;
+    /** Emitted when a node is toggled (expanded/collapsed) */
+    onNodeToggle: _angular_core.OutputEmitterRef<AXTreeNodeToggleEvent>;
+    /** Emitted when a node is selected/deselected */
+    onNodeSelect: _angular_core.OutputEmitterRef<AXTreeNodeSelectEvent>;
+    /** Emitted when nodes are reordered within the same parent */
+    onOrderChange: _angular_core.OutputEmitterRef<AXTreeDropEvent>;
+    /** Emitted when a node is moved to a different parent */
+    onMoveChange: _angular_core.OutputEmitterRef<AXTreeDropEvent>;
+    /** Emitted for any item change (order or move) */
+    onItemsChange: _angular_core.OutputEmitterRef<AXTreeDropEvent>;
+    /** Internal signal for tracking loading state */
+    protected readonly loadingNodes: _angular_core.WritableSignal<Set<string>>;
+    /**
+     * Toggle node expansion state with lazy loading support
+     */
+    toggleNode(node: AXTreeNode, event: Event): Promise<void>;
+    /**
+     * Load children for a node using lazy loading
+     */
+    private loadNodeChildren;
+    /**
+     * Update childrenCount flags for lazy loading
+     */
+    private updateHasChildrenFlags;
+    /**
+     * Toggle node selection state with indeterminate support
+     */
+    toggleSelection(node: AXTreeNode, event: AXValueChangedEvent): void;
+    /**
+     * Recursively select/deselect all children
+     */
+    private selectAllChildren;
+    /**
+     * Update parent node states based on children selection
+     */
+    private updateParentStates;
+    /**
+     * Get selection state of children
+     */
+    private getChildrenSelectionState;
+    /**
+     * Find parent node of a given node
+     */
+    private findParentNode;
+    /**
+     * Handle drop events for tree nodes
+     */
+    onDrop(event: AXDropListDroppedEvent, parentNode?: AXTreeNode): void;
+    /**
+     * Handle drop events when dropping directly onto a node (to make it a child)
+     */
+    onDropOntoNode(event: AXDropListDroppedEvent, targetNode: AXTreeNode): void;
+    /**
+     * Get array reference by drop list ID
+     */
+    private getArrayByListId;
+    /**
+     * Find parent node by list ID
+     */
+    private findParentByListId;
+    /**
+     * Find a node by ID in the tree
+     */
+    private findNodeById;
+    /**
+     * Check if targetNode is a descendant of ancestorNode (or the same node)
+     * Prevents circular references by checking if target exists in ancestor's children tree
+     */
+    private isNodeDescendantOf;
+    /**
+     * Generate unique list ID for each node
+     */
+    getListId(node?: AXTreeNode): string;
+    /**
+     * Expand all nodes in the tree (with lazy loading support)
+     */
+    expandAll(): Promise<void>;
+    /**
+     * Collapse all nodes in the tree
+     */
+    collapseAll(): void;
+    /**
+     * Recursively set expanded state (with lazy loading)
+     */
+    private setExpandedState;
+    /**
+     * Get count of selected nodes
+     */
+    getSelectedCount(): number;
+    /**
+     * Check if any nodes are selected
+     */
+    hasSelection(): boolean;
+    /**
+     * Recursively count selected nodes
+     */
+    private countSelected;
+    /**
+     * Get all selected nodes
+     */
+    getSelectedNodes(): AXTreeNode[];
+    /**
+     * Recursively collect selected nodes
+     */
+    private collectSelected;
+    /**
+     * Delete selected nodes from the tree
+     */
+    deleteSelected(): void;
+    /**
+     * Select all nodes in the tree
+     */
+    selectAll(): void;
+    /**
+     * Deselect all nodes in the tree
+     */
+    deselectAll(): void;
+    /**
+     * Find a node by ID in the tree
+     */
+    findNode(id: string): AXTreeNode | null;
+    /**
+     * Refresh the tree to trigger change detection
+     */
+    refresh(): void;
+    /**
+     * Recursively set selection state for all nodes
+     */
+    private setAllSelection;
+    /**
+     * Recursively remove selected nodes
+     */
+    private removeSelected;
+    /**
+     * Recursively update all parent states in the tree (used after deletion)
+     */
+    private updateAllParentStates;
+    /**
+     * Check if a node is currently loading
+     */
+    isNodeLoading(nodeId: string): boolean;
+    /**
+     * Get template context for a node
+     */
+    getTemplateContext(node: AXTreeNode, level?: number): AXTreeItemTemplateContext;
+    /**
+     * Check if node should show expand toggle
+     */
+    shouldShowExpandToggle(node: AXTreeNode): boolean;
+    /**
+     * Check if node has children
+     */
+    private hasChildren;
+    /**
+     * Check if node can be lazy loaded
+     */
+    private canLazyLoad;
+    /**
+     * Check if move operation is allowed based on dragOperationType
+     */
+    private canMoveToParent;
+    /**
+     * Check if reorder operation is allowed based on dragOperationType
+     */
+    private canReorder;
+    /**
+     * Validate if drop target is valid (prevent circular references)
+     */
+    private isValidDropTarget;
+    /**
+     * Handle reordering within the same list
+     */
+    private handleReorder;
+    /**
+     * Handle moving between different lists
+     */
+    private handleMove;
+    /**
+     * Emit beforeDrop event and return whether to continue
+     */
+    private emitBeforeDropEvent;
+    /**
+     * Emit drop events based on operation type
+     */
+    private emitDropEvents;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXTree2Component, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXTree2Component, "ax-tree2", never, { "nodes": { "alias": "nodes"; "required": true; "isSignal": true; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; "isSignal": true; }; "dragMode": { "alias": "dragMode"; "required": false; "isSignal": true; }; "dragOperationType": { "alias": "dragOperationType"; "required": false; "isSignal": true; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; "showChildrenBadge": { "alias": "showChildrenBadge"; "required": false; "isSignal": true; }; "expandedIcon": { "alias": "expandedIcon"; "required": false; "isSignal": true; }; "collapsedIcon": { "alias": "collapsedIcon"; "required": false; "isSignal": true; }; "indentSize": { "alias": "indentSize"; "required": false; "isSignal": true; }; "nodeHeight": { "alias": "nodeHeight"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "lazyLoad": { "alias": "lazyLoad"; "required": false; "isSignal": true; }; "enableLazyLoad": { "alias": "enableLazyLoad"; "required": false; "isSignal": true; }; }, { "nodes": "nodesChange"; "onBeforeDrop": "onBeforeDrop"; "onNodeToggle": "onNodeToggle"; "onNodeSelect": "onNodeSelect"; "onOrderChange": "onOrderChange"; "onMoveChange": "onMoveChange"; "onItemsChange": "onItemsChange"; }, never, never, true, never>;
+}
+
+declare class Tree2Module {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tree2Module, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<Tree2Module, never, [typeof AXTree2Component], never>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<Tree2Module>;
+}
+
+export { AXTree2Component, Tree2Module };
+export type { AXTreeBeforeDropEvent, AXTreeDragMode, AXTreeDragOperationType, AXTreeDropEvent, AXTreeItemTemplateContext, AXTreeNode, AXTreeNodeSelectEvent, AXTreeNodeToggleEvent, AXTreeViewLook };