@m1z23r/ngx-ui 1.1.49 → 1.1.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m1z23r/ngx-ui",
-  "version": "1.1.49",
+  "version": "1.1.51",
   "description": "A modern Angular UI component library with themeable components and responsive layout system",
   "license": "MIT",
   "author": "m1z23r",

package/types/m1z23r-ngx-ui.d.ts

@@ -659,7 +659,7 @@ declare class ButtonComponent implements Loadable {
     readonly variant: _angular_core.InputSignal<ButtonVariant>;
     readonly color: _angular_core.InputSignal<ButtonColor>;
     readonly size: _angular_core.InputSignal<ButtonSize>;
-    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
+    readonly type: _angular_core.InputSignal<"reset" | "submit" | "button">;
     readonly disabled: _angular_core.InputSignal<boolean>;
     readonly loading: _angular_core.InputSignal<boolean>;
     readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
@@ -717,7 +717,7 @@ declare class InputComponent {
     /** Single custom validator function */
     readonly validatorFn: _angular_core.InputSignal<ValidatorFn | null>;
     /** When to show validation errors: 'touched' (default), 'dirty', or 'always' */
-    readonly showErrorsOn: _angular_core.InputSignal<"always" | "touched" | "dirty">;
+    readonly showErrorsOn: _angular_core.InputSignal<"touched" | "dirty" | "always">;
     readonly value: _angular_core.ModelSignal<string | number>;
     private static nextId;
     private readonly generatedId;
@@ -2021,16 +2021,29 @@ interface TreeNodeDropEvent {
     target: TreeNode;
     position: TreeDropPosition;
 }
+type TreeNodeActionType = 'copyValue' | 'copyPath' | 'copyObject' | 'expandAll' | 'collapseAll' | 'goToParent' | 'collapseParent';
+interface TreeNodeContextAction {
+    node: TreeNode;
+    path: TreeNode[];
+    action: TreeNodeActionType;
+}
+type TreeFormatter = (node: TreeNode, path: TreeNode[]) => string | null | undefined;
 declare const TREE_HOST: InjectionToken<TreeComponent>;
 declare class TreeComponent {
     readonly nodes: _angular_core.InputSignal<TreeNode[]>;
     readonly indent: _angular_core.InputSignal<number>;
     readonly draggable: _angular_core.InputSignal<boolean>;
     readonly expandOnClick: _angular_core.InputSignal<boolean>;
+    readonly contextMenu: _angular_core.InputSignal<boolean>;
+    readonly pathSeparator: _angular_core.InputSignal<string>;
+    readonly valueFormatter: _angular_core.InputSignal<TreeFormatter | null>;
+    readonly pathFormatter: _angular_core.InputSignal<TreeFormatter | null>;
+    readonly objectFormatter: _angular_core.InputSignal<TreeFormatter | null>;
     readonly nodeClick: _angular_core.OutputEmitterRef<TreeNode>;
     readonly nodeExpand: _angular_core.OutputEmitterRef<TreeNode>;
     readonly nodeCollapse: _angular_core.OutputEmitterRef<TreeNode>;
     readonly nodeDrop: _angular_core.OutputEmitterRef<TreeNodeDropEvent>;
+    readonly nodeContextAction: _angular_core.OutputEmitterRef<TreeNodeContextAction>;
     /** @internal */
     readonly _dragNode: _angular_core.WritableSignal<TreeNode | null>;
     /** @internal */
@@ -2038,6 +2051,23 @@ declare class TreeComponent {
     /** @internal */
     readonly _dropPosition: _angular_core.WritableSignal<TreeDropPosition | null>;
     /** @internal */
+    readonly _flashNode: _angular_core.WritableSignal<TreeNode | null>;
+    /** @internal context-menu target — node and its path (root → node, inclusive) */
+    readonly _menuNode: _angular_core.WritableSignal<TreeNode | null>;
+    /** @internal */
+    readonly _menuPath: _angular_core.WritableSignal<TreeNode[]>;
+    /** @internal whether the targeted node has children (drives expand/collapse-all visibility) */
+    readonly _menuHasChildren: _angular_core.Signal<boolean>;
+    /** @internal whether the targeted node has a parent (drives go-to/collapse-parent visibility) */
+    readonly _menuHasParent: _angular_core.Signal<boolean>;
+    private readonly _expansion;
+    private readonly _nodeElements;
+    private flashTimer;
+    private readonly menu;
+    isExpanded(node: TreeNode): boolean;
+    setExpanded(node: TreeNode, value: boolean): void;
+    expandSubtree(node: TreeNode, value: boolean): void;
+    /** @internal */
     _onNodeClick(node: TreeNode): void;
     /** @internal */
     _onNodeExpand(node: TreeNode): void;
@@ -2045,28 +2075,47 @@ declare class TreeComponent {
     _onNodeCollapse(node: TreeNode): void;
     /** @internal */
     _emitDrop(event: TreeNodeDropEvent): void;
+    /** @internal */
+    _registerNode(node: TreeNode, el: HTMLElement): void;
+    /** @internal */
+    _unregisterNode(node: TreeNode): void;
+    /** @internal */
+    _openContextMenu(node: TreeNode, path: TreeNode[], x: number, y: number): void;
+    /** @internal */
+    _runAction(action: TreeNodeActionType): void;
+    private serializeNode;
+    private sanitize;
+    private scrollAndFlash;
+    private copyToClipboard;
+    private execCommandCopy;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeComponent, "ui-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "indent": { "alias": "indent"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "expandOnClick": { "alias": "expandOnClick"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeDrop": "nodeDrop"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeComponent, "ui-tree", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "indent": { "alias": "indent"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "expandOnClick": { "alias": "expandOnClick"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; "pathSeparator": { "alias": "pathSeparator"; "required": false; "isSignal": true; }; "valueFormatter": { "alias": "valueFormatter"; "required": false; "isSignal": true; }; "pathFormatter": { "alias": "pathFormatter"; "required": false; "isSignal": true; }; "objectFormatter": { "alias": "objectFormatter"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; "nodeDrop": "nodeDrop"; "nodeContextAction": "nodeContextAction"; }, never, never, true, never>;
 }
 
-declare class TreeNodeComponent {
+declare class TreeNodeComponent implements AfterViewInit, OnDestroy {
     readonly node: _angular_core.InputSignal<TreeNode>;
     readonly level: _angular_core.InputSignal<number>;
     readonly indent: _angular_core.InputSignal<number>;
+    readonly parentPath: _angular_core.InputSignal<TreeNode[]>;
     readonly nodeClick: _angular_core.OutputEmitterRef<TreeNode>;
     readonly nodeExpand: _angular_core.OutputEmitterRef<TreeNode>;
     readonly nodeCollapse: _angular_core.OutputEmitterRef<TreeNode>;
     private readonly treeHost;
-    private readonly _expanded;
+    private readonly contentRef;
+    readonly path: _angular_core.Signal<TreeNode[]>;
     readonly isExpanded: _angular_core.Signal<boolean>;
-    readonly hasChildren: _angular_core.Signal<boolean | undefined>;
+    readonly hasChildren: _angular_core.Signal<boolean>;
     readonly indentGuides: _angular_core.Signal<number[]>;
     readonly isDraggable: _angular_core.Signal<boolean>;
     readonly isDragging: _angular_core.Signal<boolean>;
+    readonly isFlashing: _angular_core.Signal<boolean>;
     readonly dropPosition: _angular_core.Signal<TreeDropPosition | null>;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     toggle(event: MouseEvent): void;
     onClick(event: MouseEvent): void;
     onDoubleClick(event: MouseEvent): void;
+    onContextMenu(event: MouseEvent): void;
     onDragStart(event: DragEvent): void;
     onDragEnd(): void;
     onDragOver(event: DragEvent): void;
@@ -2079,8 +2128,52 @@ declare class TreeNodeComponent {
     /** @internal */
     _onChildNodeCollapse(node: TreeNode): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TreeNodeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeNodeComponent, "ui-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "indent": { "alias": "indent"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TreeNodeComponent, "ui-tree-node", never, { "node": { "alias": "node"; "required": true; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "indent": { "alias": "indent"; "required": false; "isSignal": true; }; "parentPath": { "alias": "parentPath"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeExpand": "nodeExpand"; "nodeCollapse": "nodeCollapse"; }, never, never, true, never>;
+}
+
+declare class JsonTreeComponent {
+    readonly json: _angular_core.InputSignal<unknown>;
+    readonly rootLabel: _angular_core.InputSignal<string>;
+    readonly pathRoot: _angular_core.InputSignal<string>;
+    readonly expandDepth: _angular_core.InputSignal<number>;
+    readonly indent: _angular_core.InputSignal<number>;
+    readonly draggable: _angular_core.InputSignal<boolean>;
+    readonly expandOnClick: _angular_core.InputSignal<boolean>;
+    readonly contextMenu: _angular_core.InputSignal<boolean>;
+    readonly nodeClick: _angular_core.OutputEmitterRef<TreeNode>;
+    readonly nodeContextAction: _angular_core.OutputEmitterRef<TreeNodeContextAction>;
+    readonly nodes: _angular_core.Signal<TreeNode[]>;
+    protected readonly valueFmt: TreeFormatter;
+    protected readonly pathFmt: TreeFormatter;
+    protected readonly objectFmt: TreeFormatter;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<JsonTreeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<JsonTreeComponent, "ui-json-tree", never, { "json": { "alias": "json"; "required": false; "isSignal": true; }; "rootLabel": { "alias": "rootLabel"; "required": false; "isSignal": true; }; "pathRoot": { "alias": "pathRoot"; "required": false; "isSignal": true; }; "expandDepth": { "alias": "expandDepth"; "required": false; "isSignal": true; }; "indent": { "alias": "indent"; "required": false; "isSignal": true; }; "draggable": { "alias": "draggable"; "required": false; "isSignal": true; }; "expandOnClick": { "alias": "expandOnClick"; "required": false; "isSignal": true; }; "contextMenu": { "alias": "contextMenu"; "required": false; "isSignal": true; }; }, { "nodeClick": "nodeClick"; "nodeContextAction": "nodeContextAction"; }, never, never, true, never>;
+}
+
+type JsonKind = 'object' | 'array' | 'primitive';
+interface JsonNodeMeta {
+    /** null for the root; string for object keys; number for array indices */
+    key: string | number | null;
+    value: unknown;
+    kind: JsonKind;
+    /** Full path from root, e.g. `response.positions[0].companyName` */
+    jsonPath: string;
+}
+interface JsonToTreeOptions {
+    /** Display text prepended before the root's `{N}` / `[N]` / primitive value. */
+    rootLabel?: string;
+    /** Optional prefix for paths (e.g. `'$'` produces `$.response.x`). */
+    pathRoot?: string;
+    /** How many descendant levels below the root to auto-expand. Root is always expanded. */
+    expandDepth?: number;
 }
+/**
+ * Convert an arbitrary JSON-shaped value into a TreeNode array suitable for
+ * `<ui-tree [nodes]>`. Each generated node carries a `data: JsonNodeMeta`.
+ *
+ * Returns a single-element array containing the root node.
+ */
+declare function jsonToTreeNodes(value: unknown, options?: JsonToTreeOptions): TreeNode[];
 
 interface TemplateVariable {
     key: string;
@@ -2193,5 +2286,5 @@ declare class TemplateInputComponent implements OnDestroy, AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<TemplateInputComponent, "ui-template-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "variables": { "alias": "variables"; "required": true; "isSignal": true; }; }, { "value": "valueChange"; "variables": "variablesChange"; "variableHover": "variableHover"; }, ["popoverTemplate", "hasSuffix"], ["[uiTemplateInputSuffix]"], true, never>;
 }
 
-export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective };
-export type { AccordionVariant, AlertVariant, AsyncSearchFn, AsyncSelectOption, BadgeSize, BadgeVariant, ButtonColor, ButtonSize, ButtonVariant, CardPadding, CardVariant, CheckboxSize, ChipInputSize, ChipInputVariant, ChipTemplateContext, CircularProgressSize, CircularProgressVariant, DateRange, DateRangeValue, DatepickerSize, DatepickerVariant, DatepickerView, DatetimepickerSize, DatetimepickerVariant, DatetimepickerView, DialogConfig, DropdownAlign, DropdownPosition, DynamicTabConfig, DynamicTabsSize, DynamicTabsVariant, FileChooserSize, FileChooserVariant, InputType, Loadable, ModalSize, OptionTemplateContext, PaginationSize, ProgressSize, ProgressVariant, RadioGroupOrientation, RadioGroupSize, RadioGroupVariant, RangeSliderBubbles, RangeSliderMode, RangeSliderSize, SelectSize, SelectVariant, ShellVariant, SliderSize, SortDirection, SortState, SpinnerSize, SpinnerVariant, SplitGutterSize, SplitOrientation, SplitSizeChange, SwitchSize, TabRenderMode, TableColumn, TabsSize, TabsVariant, TemplateVariable, TextareaResize, TimeFormat, TimeValue, TimepickerSize, TimepickerVariant, ToastConfig, ToastPosition, ToastVariant, TooltipPosition, TreeDropPosition, TreeNode, TreeNodeDropEvent, ValidationError, ValidationState, ValidatorFn, VariablePopoverContext, VariableState };
+export { AccordionComponent, AccordionHeaderDirective, AccordionItemComponent, AlertComponent, BadgeComponent, ButtonComponent, CardComponent, CellTemplateDirective, CellValuePipe, CheckboxComponent, ChipInputComponent, ChipTemplateDirective, CircularProgressComponent, ContentComponent, ContextMenuDirective, DIALOG_DATA, DIALOG_REF, DatepickerComponent, DatetimepickerComponent, DialogRef, DialogService, DropdownComponent, DropdownDividerComponent, DropdownItemComponent, DropdownTriggerDirective, DynamicTabsComponent, FileChooserComponent, FilePreviewPipe, FileSizePipe, FooterComponent, InputComponent, JsonTreeComponent, LOADABLE, LoadingDirective, LoadingService, ModalComponent, NavbarComponent, OptionComponent, OptionTemplateDirective, PaginationComponent, ProgressComponent, RadioComponent, RadioGroupComponent, RangeSliderComponent, SelectComponent, ShellComponent, SidebarComponent, SidebarService, SidebarToggleComponent, SliderComponent, SpinnerComponent, SplitComponent, SplitPaneComponent, SwitchComponent, TAB_DATA, TAB_REF, TREE_HOST, TabActivePipe, TabComponent, TabIconDirective, TabRef, TableComponent, TabsComponent, TabsService, TemplateInputComponent, TemplateInputSuffixDirective, TextareaComponent, TimepickerComponent, ToastRef, ToastService, TooltipDirective, TreeComponent, TreeNodeComponent, Validators, VariablePopoverDirective, jsonToTreeNodes };
+export type { AccordionVariant, AlertVariant, AsyncSearchFn, AsyncSelectOption, BadgeSize, BadgeVariant, ButtonColor, ButtonSize, ButtonVariant, CardPadding, CardVariant, CheckboxSize, ChipInputSize, ChipInputVariant, ChipTemplateContext, CircularProgressSize, CircularProgressVariant, DateRange, DateRangeValue, DatepickerSize, DatepickerVariant, DatepickerView, DatetimepickerSize, DatetimepickerVariant, DatetimepickerView, DialogConfig, DropdownAlign, DropdownPosition, DynamicTabConfig, DynamicTabsSize, DynamicTabsVariant, FileChooserSize, FileChooserVariant, InputType, JsonKind, JsonNodeMeta, JsonToTreeOptions, Loadable, ModalSize, OptionTemplateContext, PaginationSize, ProgressSize, ProgressVariant, RadioGroupOrientation, RadioGroupSize, RadioGroupVariant, RangeSliderBubbles, RangeSliderMode, RangeSliderSize, SelectSize, SelectVariant, ShellVariant, SliderSize, SortDirection, SortState, SpinnerSize, SpinnerVariant, SplitGutterSize, SplitOrientation, SplitSizeChange, SwitchSize, TabRenderMode, TableColumn, TabsSize, TabsVariant, TemplateVariable, TextareaResize, TimeFormat, TimeValue, TimepickerSize, TimepickerVariant, ToastConfig, ToastPosition, ToastVariant, TooltipPosition, TreeDropPosition, TreeFormatter, TreeNode, TreeNodeActionType, TreeNodeContextAction, TreeNodeDropEvent, ValidationError, ValidationState, ValidatorFn, VariablePopoverContext, VariableState };