@m1z23r/ngx-ui 1.1.53 → 1.1.55

package/package.json

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

package/styles/_variables.scss

@@ -101,4 +101,13 @@
   --ui-option-hover-bg: var(--ui-bg-hover);
   --ui-option-selected-bg: color-mix(in srgb, var(--ui-primary) 10%, transparent);
   --ui-option-selected-text: var(--ui-primary);
+
+  // JSON tree value highlighting
+  --ui-json-string: #16a34a;
+  --ui-json-number: #2563eb;
+  --ui-json-boolean: #9333ea;
+  --ui-json-bigint: var(--ui-json-number);
+  --ui-json-null: var(--ui-text-muted);
+  --ui-json-size: var(--ui-text-muted);
+  --ui-json-punct: var(--ui-text-muted);
 }

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

@@ -2008,8 +2008,14 @@ declare class SplitComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SplitComponent, "ui-split", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "sizeChange": "sizeChange"; "dragStart": "dragStart"; "dragEnd": "dragEnd"; }, ["panes"], ["*"], true, never>;
 }
 
+interface TreeLabelToken {
+    text: string;
+    class?: string;
+}
 interface TreeNode {
     label: string;
+    /** Optional structured label. When present, rendered in place of `label` as a sequence of styled spans. */
+    labelTokens?: TreeLabelToken[];
     icon?: string;
     expanded?: boolean;
     children?: TreeNode[];
@@ -2052,10 +2058,12 @@ declare class TreeComponent {
     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[]>;
+    private readonly _menuNode;
+    private readonly _menuPath;
+    /** Node currently targeted by the context menu (null when the menu is closed). */
+    readonly menuNode: _angular_core.Signal<TreeNode | null>;
+    /** Path from root to the targeted node, inclusive. Empty when the menu is closed. */
+    readonly menuPath: _angular_core.Signal<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) */
@@ -2089,7 +2097,7 @@ declare class TreeComponent {
     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; }; "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>;
+    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, ["[slot=context-menu]"], true, never>;
 }
 
 declare class TreeNodeComponent implements AfterViewInit, OnDestroy {
@@ -2131,25 +2139,6 @@ declare class TreeNodeComponent implements AfterViewInit, OnDestroy {
     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 */
@@ -2175,6 +2164,32 @@ interface JsonToTreeOptions {
  */
 declare function jsonToTreeNodes(value: unknown, options?: JsonToTreeOptions): TreeNode[];
 
+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>;
+    private readonly tree;
+    /** Node currently targeted by the context menu (null when the menu is closed). */
+    readonly menuNode: _angular_core.Signal<TreeNode | null>;
+    /** Path from root to the targeted node, inclusive. Empty when the menu is closed. */
+    readonly menuPath: _angular_core.Signal<TreeNode[]>;
+    /** JsonNodeMeta of the targeted node — value/kind/jsonPath, etc. */
+    readonly menuMeta: _angular_core.Signal<JsonNodeMeta | null>;
+    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, ["[slot=context-menu]"], true, never>;
+}
+
 interface TemplateVariable {
     key: string;
     value: string;
@@ -2287,4 +2302,4 @@ declare class TemplateInputComponent implements OnDestroy, AfterViewInit {
 }
 
 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 };
+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, TreeLabelToken, TreeNode, TreeNodeActionType, TreeNodeContextAction, TreeNodeDropEvent, ValidationError, ValidationState, ValidatorFn, VariablePopoverContext, VariableState };