@acorex/components 21.0.0-next.10 → 21.0.0-next.12

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';
@@ -32,13 +32,17 @@ declare class AXSelectBoxComponent extends AXSelectBoxComponent_base implements
      *
      * @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 */
@@ -108,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;
     /**
@@ -172,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/selection-list/README.md

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

package/selection-list/index.d.ts

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import { TemplateRef } from '@angular/core';
 import { MXSelectionValueComponent, AXDirection } from '@acorex/cdk/common';
-import { AXSelectionGroupSelectedKeys } from '@acorex/cdk/selection';
 import * as i1 from '@angular/common';
 import * as i2 from '@angular/forms';
 import * as i3 from '@acorex/components/check-box';
@@ -10,36 +9,78 @@ import * as i5 from '@acorex/components/label';
 import * as i6 from '@acorex/components/form';
 
 type AXSelectionListLook = 'solid' | 'divided' | 'card';
-type AXSelectionListItem = {
-    id: string | number;
-    text: string;
-    hint?: string;
-    disabled?: boolean;
-};
-
 /**
  * The Button is a component which detects user interaction and triggers a corresponding event
  *
  * @category Components
  */
 declare class AXSelectionListComponent extends MXSelectionValueComponent {
-    readonly direction: i0.InputSignal<AXDirection>;
-    readonly customTemplate: i0.InputSignal<TemplateRef<unknown>>;
-    readonly look: i0.InputSignal<AXSelectionListLook>;
-    protected changeState(e: AXSelectionGroupSelectedKeys): void;
+    /**
+     * sets the direction of the component.
+     * @param {AXDirection} value
+     */
+    direction: i0.InputSignal<AXDirection>;
+    /**
+     * The custom template used for rendering content.
+     *
+     * @param {TemplateRef<unknown>} customTemplate
+     */
+    customTemplate: i0.InputSignal<TemplateRef<unknown>>;
+    /** @ignore */
     private _showControl;
+    /**
+     * @param {void}
+     * Gets the current state of the control visibility.
+     */
     get showControl(): boolean;
+    /**
+     * @param {boolean} v
+     * Sets the visibility state of the control.
+     */
     set showControl(v: boolean);
+    /** @ignore */
     private _items;
-    get items(): AXSelectionListItem[];
-    set items(v: AXSelectionListItem[]);
+    /**
+     * Gets the list of items.
+     * @param {void}
+     */
+    get items(): any[];
+    /**
+     * Sets the list of items.
+     *
+     * @param {any[]} v
+     */
+    set items(v: any[]);
+    /** @ignore */
     private _hintField;
+    /**
+     * Gets the field used for displaying hints.
+     */
     get hintField(): string;
+    /**
+     * Sets the field used for displaying hints.
+     *
+     * @param {string} v
+     */
     set hintField(v: string);
+    /**
+     * Retrieves an item from the list by its key.
+     *
+     * @param {unknown} key - The key to search for.
+     */
     getItemByKey(key: unknown): unknown;
+    /**
+     * Defines the visual appearance of the selection list.
+     *
+     * @defaultValue 'solid'
+     */
+    look: AXSelectionListLook;
+    /** @ignore */
+    protected _handleOnItemValueChange(item: any, e: Event): void;
+    /** @ignore */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], true, never>;
 }
 
 declare class AXSelectionListModule {
@@ -49,4 +90,4 @@ declare class AXSelectionListModule {
 }
 
 export { AXSelectionListComponent, AXSelectionListModule };
-export type { AXSelectionListItem, AXSelectionListLook };
+export type { AXSelectionListLook };

package/selection-list-2/README.md

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

package/selection-list-2/index.d.ts

@@ -0,0 +1,52 @@
+import * as i0 from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { MXSelectionValueComponent, AXDirection } from '@acorex/cdk/common';
+import { AXSelectionGroupSelectedKeys } from '@acorex/cdk/selection';
+import * as i1 from '@angular/common';
+import * as i2 from '@angular/forms';
+import * as i3 from '@acorex/components/check-box';
+import * as i4 from '@acorex/components/radio';
+import * as i5 from '@acorex/components/label';
+import * as i6 from '@acorex/components/form';
+
+type AXSelectionListLook = 'solid' | 'divided' | 'card';
+type AXSelectionList2Item = {
+    id: string | number;
+    text: string;
+    hint?: string;
+    disabled?: boolean;
+};
+
+/**
+ * The Button is a component which detects user interaction and triggers a corresponding event
+ *
+ * @category Components
+ */
+declare class AXSelectionList2Component extends MXSelectionValueComponent {
+    readonly direction: i0.InputSignal<AXDirection>;
+    readonly customTemplate: i0.InputSignal<TemplateRef<unknown>>;
+    readonly look: i0.InputSignal<AXSelectionListLook>;
+    protected changeState(e: AXSelectionGroupSelectedKeys): void;
+    private _showControl;
+    get showControl(): boolean;
+    set showControl(v: boolean);
+    private _items;
+    get items(): AXSelectionList2Item[];
+    set items(v: AXSelectionList2Item[]);
+    private _hintField;
+    get hintField(): string;
+    set hintField(v: string);
+    getItemByKey(key: unknown): unknown;
+    private get __hostClass();
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionList2Component, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionList2Component, "ax-selection-list2", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], true, never>;
+}
+
+declare class AXSelectionList2Module {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionList2Module, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXSelectionList2Module, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXCheckBoxModule, typeof i4.AXRadioModule, typeof i5.AXLabelModule, typeof i6.AXFormModule, typeof AXSelectionList2Component], [typeof AXSelectionList2Component]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXSelectionList2Module>;
+}
+
+export { AXSelectionList2Component, AXSelectionList2Module };
+export type { AXSelectionList2Item, AXSelectionListLook };

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/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,267 @@
+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';
+import * as i1 from '@angular/common';
+
+/**
+ * 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 AXTreeNodeOnBeforeDropEvent 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 AXTreeNodeEvent 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';
+
+declare class AXTree2Component {
+    #private;
+    /** 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>;
+    /** Whether to show icons */
+    showIcons: _angular_core.InputSignal<boolean>;
+    /** Whether to show children count badge */
+    showChildrenBadge: _angular_core.InputSignal<boolean>;
+    /** Whether to animate expand/collapse */
+    animated: _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<AXTreeNodeOnBeforeDropEvent>;
+    /** Emitted when a node is toggled (expanded/collapsed) */
+    nodeToggle: _angular_core.OutputEmitterRef<AXTreeNodeEvent>;
+    /** Emitted when a node is selected/deselected */
+    nodeSelect: _angular_core.OutputEmitterRef<AXTreeNodeEvent>;
+    /** Emitted when a node is dropped */
+    nodeDrop: _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;
+    /**
+     * 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;
+    /**
+     * 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;
+    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; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; "showChildrenBadge": { "alias": "showChildrenBadge"; "required": false; "isSignal": true; }; "animated": { "alias": "animated"; "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"; "nodeToggle": "nodeToggle"; "nodeSelect": "nodeSelect"; "nodeDrop": "nodeDrop"; }, never, never, true, never>;
+}
+
+declare class Tree2Module {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tree2Module, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<Tree2Module, never, [typeof i1.CommonModule], never>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<Tree2Module>;
+}
+
+export { AXTree2Component, Tree2Module };
+export type { AXTreeDragMode, AXTreeDropEvent, AXTreeItemTemplateContext, AXTreeNode, AXTreeNodeEvent, AXTreeNodeOnBeforeDropEvent, AXTreeViewLook };