@acorex/components 21.0.0-next.3 → 21.0.0-next.31

package/search-box/index.d.ts

@@ -30,6 +30,11 @@ declare class AXSearchBoxComponent extends AXSearchBoxComponent_base {
      */
     delayTime: number;
     readonly type: i0.InputSignal<string>;
+    /**
+     * Determines whether executing the parent search logic is allowed.
+     * @defaultValue true
+     */
+    readonly autoSearch: i0.InputSignal<boolean>;
     /**
      * Handles changes to the model and triggers a search in the parent component if available.
      *
@@ -40,7 +45,7 @@ declare class AXSearchBoxComponent extends AXSearchBoxComponent_base {
     get __hostClass(): string[];
     private get __hostName();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSearchBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSearchBoxComponent, "ax-search-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "classNames": { "alias": "class"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSearchBoxComponent, "ax-search-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "classNames": { "alias": "class"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autoSearch": { "alias": "autoSearch"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix"], true, never>;
 }
 
 declare class AXSearchBoxModule {

package/select-box/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { OnDestroy, WritableSignal, TemplateRef, ElementRef } from '@angular/core';
 import * as polytype from 'polytype';
 import * as i2 from '@acorex/cdk/common';
@@ -26,18 +26,23 @@ declare const AXSelectBoxComponent_base: polytype.Polytype.ClusteredConstructor<
  * @category
  */
 declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements OnDestroy {
+    #private;
     /**
      * Determines if an item is truncated.
      *
      * @defaultValue true
      */
-    readonly isItemTruncated: i0.InputSignal<boolean>;
+    readonly isItemTruncated: _angular_core.InputSignal<boolean>;
     /**
      * Determines if a tooltip is shown for an item.
      *
      * @defaultValue false
      */
-    readonly showItemTooltip: i0.InputSignal<boolean>;
+    readonly showItemTooltip: _angular_core.InputSignal<boolean>;
+    /** Height of each list item in pixels, or 'auto' to let list measure. */
+    itemHeight: _angular_core.InputSignal<number | "auto">;
+    /** Maximum number of visible items before scrolling. */
+    maxVisibleItems: _angular_core.InputSignal<number>;
     /** @ignore */
     private hotKeyService;
     /** @ignore */
@@ -107,14 +112,14 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
      * The width of the dropdown in pixels.
      * @defaultValue null
      */
-    dropdownWidth: i0.InputSignal<string>;
+    dropdownWidth: _angular_core.InputSignal<string>;
     /** @ignore */
     panel: ElementRef<HTMLDivElement>;
     /** @ignore */
     list: AXListComponent;
     /** @ignore */
     searchBox: AXSearchBoxComponent;
-    searchBoxAutoFocus: i0.InputSignal<boolean>;
+    searchBoxAutoFocus: _angular_core.InputSignal<boolean>;
     /** @ignore */
     protected dropdown: AXDropdownBoxComponent;
     /**
@@ -171,14 +176,14 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
      */
     refresh(): void;
     private hostClickListener;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "minRecordsForSearch": { "alias": "minRecordsForSearch"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "searchBoxAutoFocus": { "alias": "searchBoxAutoFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemSelected": "onItemSelected"; "onItemClick": "onItemClick"; }, ["searchBox"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSelectBoxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXSelectBoxComponent, "ax-select-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "isItemTruncated": { "alias": "isItemTruncated"; "required": false; "isSignal": true; }; "showItemTooltip": { "alias": "showItemTooltip"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "minRecordsForSearch": { "alias": "minRecordsForSearch"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; "isSignal": true; }; "searchBoxAutoFocus": { "alias": "searchBoxAutoFocus"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemSelected": "onItemSelected"; "onItemClick": "onItemClick"; }, ["searchBox"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-search-box", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
 declare class AXSelectBoxModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSelectBoxModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.FormsModule, typeof i4.AXCheckBoxModule, typeof i5.AXBadgeModule, typeof i6.AXDecoratorModule, typeof i7.AXTranslationModule, typeof i8.AXPopoverModule, typeof i9.AXLoadingModule, typeof i10.A11yModule, typeof i11.AXTextBoxModule, typeof i12.AXDropdownModule, typeof i13.AXListModule, typeof AXSelectBoxComponent], [typeof AXSelectBoxComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXSelectBoxModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXSelectBoxModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXSelectBoxModule, never, [typeof i1.CommonModule, typeof i2.AXCommonModule, typeof i3.FormsModule, typeof i4.AXCheckBoxModule, typeof i5.AXBadgeModule, typeof i6.AXDecoratorModule, typeof i7.AXTranslationModule, typeof i8.AXPopoverModule, typeof i9.AXLoadingModule, typeof i10.A11yModule, typeof i11.AXTextBoxModule, typeof i12.AXDropdownModule, typeof i13.AXListModule, typeof AXSelectBoxComponent], [typeof AXSelectBoxComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXSelectBoxModule>;
 }
 
 export { AXSelectBoxComponent, AXSelectBoxModule };

package/side-menu/index.d.ts

@@ -12,12 +12,13 @@ declare class AXSideMenuItemClickEvent extends AXClickEvent {
     handled: boolean;
 }
 declare class AXSideMenuItemComponent extends MXInteractiveComponent {
-    private elem;
+    #private;
     text: _angular_core.ModelSignal<string>;
     active: _angular_core.ModelSignal<boolean>;
     isLoading: _angular_core.ModelSignal<boolean>;
     isCollapsed: _angular_core.ModelSignal<boolean>;
     onClick: _angular_core.OutputEmitterRef<AXSideMenuItemClickEvent>;
+    private elem;
     readonly toggleOnClick: _angular_core.InputSignal<boolean>;
     readonly href: _angular_core.InputSignal<string>;
     readonly routerLink: _angular_core.InputSignal<string | any[] | UrlTree>;
@@ -27,7 +28,7 @@ declare class AXSideMenuItemComponent extends MXInteractiveComponent {
     } | IsActiveMatchOptions>;
     readonly target: _angular_core.InputSignal<"_blank" | "_self" | "_parent" | "_top">;
     protected hasChild: _angular_core.WritableSignal<boolean>;
-    constructor();
+    private checkForChildren;
     protected _handleClickEvent(e: MouseEvent): void;
     toggle(): void;
     open(): void;

package/tag/index.d.ts

@@ -1,5 +1,5 @@
-import { MXColorLookComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
+import { MXColorLookComponent, AXClickEvent } from '@acorex/cdk/common';
 import * as i1 from '@angular/common';
 
 /**
@@ -11,10 +11,16 @@ declare class AXTagComponent extends MXColorLookComponent {
      * Represents the text content to be displayed or used within the component.
      */
     text: string;
+    onClick: i0.OutputEmitterRef<AXClickEvent>;
+    onDblClick: i0.OutputEmitterRef<AXClickEvent>;
+    onContextMenu: i0.OutputEmitterRef<AXClickEvent>;
     /** @ignore */
     private get __hostClass();
+    private hostClickListener;
+    private hostDblClickListener;
+    private hostContextMenuListener;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTagComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXTagComponent, "ax-tag", never, { "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["ax-prefix", "ax-suffix"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXTagComponent, "ax-tag", never, { "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, { "onClick": "onClick"; "onDblClick": "onDblClick"; "onContextMenu": "onContextMenu"; }, never, ["ax-prefix", "ax-suffix"], true, never>;
 }
 
 declare class AXTagModule {

package/tag-box/index.d.ts

@@ -1,7 +1,7 @@
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
-import { OnInit } from '@angular/core';
-import { MXInputBaseValueComponent, MXLookComponent, AXAutocompleteParentComponent } from '@acorex/cdk/common';
+import { OnInit, TemplateRef } from '@angular/core';
+import { MXInputBaseValueComponent, MXLookComponent, AXAutocompleteParentComponent, AXClickEvent } from '@acorex/cdk/common';
 import { AXUnsubscriber } from '@acorex/core/utils';
 
 declare const AXTagBoxComponent_base: polytype.Polytype.ClusteredConstructor<[{
@@ -21,7 +21,12 @@ declare class AXTagBoxComponent extends AXTagBoxComponent_base implements OnInit
     textField: _angular_core.InputSignal<string>;
     readonlyField: _angular_core.InputSignal<string>;
     allowDuplicateValues: _angular_core.InputSignal<boolean>;
+    tagTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    onTagClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    onTagDblClick: _angular_core.OutputEmitterRef<AXClickEvent>;
+    onTagContextMenu: _angular_core.OutputEmitterRef<AXClickEvent>;
     inputValue: _angular_core.WritableSignal<string>;
+    private autocompleteComponent;
     ngOnInit(): void;
     /**
      * Adds items to the tag box.
@@ -43,10 +48,14 @@ declare class AXTagBoxComponent extends AXTagBoxComponent_base implements OnInit
      */
     convertString(v: unknown): object[];
     getFieldValue(item: unknown, path: string): unknown;
+    /**
+     * Keep autocomplete selected values in sync with current tags
+     */
+    private syncAutocompleteSelection;
     protected internalSetValue(value: unknown): unknown[];
     private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXTagBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXTagBoxComponent, "ax-tag-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "addOnComma": { "alias": "addOnComma"; "required": false; "isSignal": true; }; "addOnEnter": { "alias": "addOnEnter"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "readonlyField": { "alias": "readonlyField"; "required": false; "isSignal": true; }; "allowDuplicateValues": { "alias": "allowDuplicateValues"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-autocomplete", "ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXTagBoxComponent, "ax-tag-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "allowNull": { "alias": "allowNull"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "addOnComma": { "alias": "addOnComma"; "required": false; "isSignal": true; }; "addOnEnter": { "alias": "addOnEnter"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "readonlyField": { "alias": "readonlyField"; "required": false; "isSignal": true; }; "allowDuplicateValues": { "alias": "allowDuplicateValues"; "required": false; "isSignal": true; }; "tagTemplate": { "alias": "tagTemplate"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onKeyDown": "onKeyDown"; "onKeyUp": "onKeyUp"; "onKeyPress": "onKeyPress"; "onTagClick": "onTagClick"; "onTagDblClick": "onTagDblClick"; "onTagContextMenu": "onTagContextMenu"; }, ["autocompleteComponent"], ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-autocomplete", "ax-validation-rule"], true, never>;
 }
 
 declare class AXTagBoxModule {

package/time-duration/index.d.ts

@@ -1,6 +1,6 @@
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
-import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
+import { MXInputBaseValueComponent, MXLookComponent, AXFocusEvent } from '@acorex/cdk/common';
 
 type AXTimeDurationUnit = 'YEAR' | 'MONTH' | 'WEEK' | 'DAY' | 'HOUR' | 'MINUTE' | 'SECOND' | 'MILLISECOND';
 
@@ -16,9 +16,12 @@ declare class AXTimeDurationComponent extends AXTimeDurationComponent_base {
     readonly valueEnd: _angular_core.InputSignal<AXTimeDurationUnit>;
     readonly label: _angular_core.InputSignal<boolean>;
     readonly maskDigits: _angular_core.InputSignal<string>;
+    readonly minValue: _angular_core.InputSignal<number>;
+    readonly maxValue: _angular_core.InputSignal<number>;
     protected maskOptions: _angular_core.WritableSignal<any>;
     private translationService;
     private timeDurationFormatter;
+    private translation;
     private onInputFire;
     private onInternalValueChangedFire;
     private YEAR;
@@ -31,14 +34,27 @@ declare class AXTimeDurationComponent extends AXTimeDurationComponent_base {
     private MILLISECOND;
     private isTranslationInit;
     initTranslation(): Promise<void>;
-    protected onInput(event: any): void;
+    protected onInput(event: any): Promise<void>;
     protected internalValueChanged(value: number): Promise<void>;
     private replacePersianLabels;
     private maskToMilliseconds;
     private updateMask;
+    protected focusHandler(e: AXFocusEvent): void;
+    protected blurHandler(e: AXFocusEvent): void;
+    protected validateFn: (val: number) => Promise<{
+        rule: string;
+        result: boolean;
+        message: string;
+        value: number;
+    } | {
+        rule: string;
+        result: boolean;
+        value: number;
+        message?: undefined;
+    }>;
     private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXTimeDurationComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXTimeDurationComponent, "ax-time-duration", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "look": { "alias": "look"; "required": false; }; "valueStart": { "alias": "valueStart"; "required": false; "isSignal": true; }; "valueEnd": { "alias": "valueEnd"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "maskDigits": { "alias": "maskDigits"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; }, never, ["ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXTimeDurationComponent, "ax-time-duration", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "look": { "alias": "look"; "required": false; }; "valueStart": { "alias": "valueStart"; "required": false; "isSignal": true; }; "valueEnd": { "alias": "valueEnd"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "maskDigits": { "alias": "maskDigits"; "required": false; "isSignal": true; }; "minValue": { "alias": "minValue"; "required": false; "isSignal": true; }; "maxValue": { "alias": "maxValue"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; }, never, never, true, never>;
 }
 
 declare class AXTimeDurationModule {

package/tree2/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/tree2
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/tree2`.

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 };