@m1z23r/ngx-ui 1.1.54 → 1.1.56

package/package.json

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

package/styles/_variables.scss

@@ -56,7 +56,9 @@
   // Spacing
   --ui-spacing-xs: 0.25rem;
   --ui-spacing-sm: 0.5rem;
+  --ui-spacing-smd: 0.75rem;
   --ui-spacing-md: 1rem;
+  --ui-spacing-mlg: 1.25rem;
   --ui-spacing-lg: 1.5rem;
   --ui-spacing-xl: 2rem;
   --ui-spacing-2xl: 3rem;
@@ -90,6 +92,17 @@
   --ui-font-lg: 1.125rem;
   --ui-font-xl: 1.25rem;
 
+  // Button component
+  --ui-button-radius: var(--ui-radius-md);
+  --ui-button-font-weight: 500;
+  --ui-button-padding-y: var(--ui-spacing-sm);
+
+  // Input / control components
+  --ui-input-radius: var(--ui-radius-md);
+  --ui-input-padding-y: var(--ui-spacing-sm);
+  --ui-input-placeholder-color: var(--ui-text-muted);
+  --ui-input-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 20%, transparent);
+
   // Dropdown & Select
   --ui-dropdown-bg: var(--ui-bg);
   --ui-dropdown-border: var(--ui-border);

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<"reset" | "submit" | "button">;
+    readonly type: _angular_core.InputSignal<"button" | "reset" | "submit">;
     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<"touched" | "dirty" | "always">;
+    readonly showErrorsOn: _angular_core.InputSignal<"always" | "touched" | "dirty">;
     readonly value: _angular_core.ModelSignal<string | number>;
     private static nextId;
     private readonly generatedId;
@@ -2058,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) */
@@ -2095,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 {
@@ -2137,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 */
@@ -2181,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;