@acorex/components 22.1.0-next.14 → 22.1.0-next.16

package/types/acorex-components-data-table.d.ts

@@ -428,7 +428,7 @@ declare class AXDataTableTextColumnComponent extends AXDataTableColumnComponent
     /**
      *  @ignore
      */
-    protected handleExpandRow(row: any): Promise<void>;
+    protected handleExpandRow(row: any, event?: Event): Promise<void>;
     /**
      * Generates a unique name based on the `dataField` value.
      */
@@ -641,7 +641,7 @@ declare class AXRowExpandColumnComponent extends AXDataTableColumnComponent {
     /**
      *  @ignore
      */
-    protected handleExpandRow(row: any): Promise<void>;
+    protected handleExpandRow(row: any, event?: Event): Promise<void>;
     /**
      * Indicates whether loading is enabled for the column.
      */

package/types/acorex-components-lookup.d.ts

@@ -17,19 +17,25 @@ import { AXDataTableComponent, AXDataTableRowClick } from '@acorex/components/da
  * - `drop-down-tree` — a tree-like structure for single item selection.
  * - `multi-select-tree` — a tree-like structure for multiple item selection.
  * - `multi-column` — a table-structured list for single selection.
+ * - `multi-column-tree` — a multi-column table with a drop-down tree inside it (expandable rows).
  */
-type AXLookupMode = 'drop-down-list' | 'multi-select' | 'drop-down-tree' | 'multi-select-tree' | 'multi-column';
+type AXLookupMode = 'drop-down-list' | 'multi-select' | 'drop-down-tree' | 'multi-select-tree' | 'multi-column' | 'multi-column-tree';
 /**
- * A column definition for the `multi-column` lookup mode (rendered via `ax-data-table`).
+ * A column definition for the `multi-column` and `multi-column-tree` lookup modes
+ * (rendered via `ax-data-table`).
  *
  * - `field` — the item property rendered in this column (`ax-text-column` `dataField`).
  * - `title` — the header text of the column (`ax-text-column` `caption`).
  * - `width` — optional column width (`120px`, `20%`, or `auto`). Defaults to `auto`.
+ * - `expandHandler` — when `true`, this column shows the tree expand/collapse control
+ *   (`multi-column-tree` only). If omitted, the column matching `textField` (or the first
+ *   column) is used.
  */
 interface AXLookupColumn {
     field: string;
     title: string;
     width?: string;
+    expandHandler?: boolean;
 }
 /**
  * A lookup item. Items are plain records; the lookup reads them through
@@ -194,7 +200,7 @@ declare class AXLookupMultiSelectTreeComponent {
 }
 
 /**
- * An advanced drop-down (lookup) editor with five modes, `AXDataSource` support, and virtual scrolling.
+ * An advanced drop-down (lookup) editor with six modes, `AXDataSource` support, and virtual scrolling.
  *
  * Modes (each rendered by its own internal mini component):
  * - `drop-down-list` — a predefined list of options for picking single values.
@@ -203,6 +209,8 @@ declare class AXLookupMultiSelectTreeComponent {
  * - `multi-select-tree` — a tree-like structure for multiple item selection.
  * - `multi-column` — an `ax-data-table` grid; when searchable, the trigger input filters as you type
  *   (on small screens the search field is inside the actionsheet).
+ * - `multi-column-tree` — a multi-column `ax-data-table` with a drop-down tree inside it
+ *   (expandable hierarchical rows). Uses `treeDataSource` + `columns`, or a hierarchical `dataSource`.
  *
  * With `adaptivityEnabled` (default `true`), the list opens as a bottom actionsheet on small
  * screens instead of an anchored dropdown — the same alternate presentation as `ax-select-box`.
@@ -223,12 +231,13 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
      */
     mode: _angular_core.InputSignal<AXLookupMode>;
     /**
-     * The items source for list-based modes (`drop-down-list`, `multi-select`, `multi-column`).
+     * The items source for list-based modes (`drop-down-list`, `multi-select`, `multi-column`)
+     * and for `multi-column-tree` when `treeDataSource` is not set.
      * Accepts an `AXDataSource` (remote paging, `byKey`, server-side filter) or a plain array.
      */
     dataSource: _angular_core.InputSignal<AXLookupItem[] | AXDataSource<AXLookupItem>>;
     /**
-     * The nodes source for tree modes (`drop-down-tree`, `multi-select-tree`):
+     * The nodes source for tree modes (`drop-down-tree`, `multi-select-tree`, `multi-column-tree`):
      * an array of nodes or a lazy children callback.
      */
     treeDataSource: _angular_core.InputSignal<AXTreeViewDataSource>;
@@ -246,13 +255,26 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
      */
     disabledField: _angular_core.InputSignal<string>;
     /**
-     * Column definitions for the `multi-column` mode (rendered as `ax-text-column` in `ax-data-table`).
+     * Column definitions for the `multi-column` and `multi-column-tree` modes
+     * (rendered as `ax-text-column` in `ax-data-table`).
      */
     columns: _angular_core.InputSignal<AXLookupColumn[]>;
+    /**
+     * Field used by `multi-column-tree` to fetch children when a row is expanded
+     * (`AXDataSource` filter). Defaults to `parentId`. Nested `children` arrays are also supported.
+     */
+    treeParentField: _angular_core.InputSignal<string>;
+    /**
+     * Field used by `multi-column-tree` to decide whether a row shows an expand control.
+     * Defaults to `hasChild`. Nodes with `children` / `childrenCount` are mapped automatically
+     * when using `treeDataSource`.
+     */
+    hasChildrenField: _angular_core.InputSignal<string>;
     /**
      * Whether the trigger accepts typing and filters the datasource (`true`),
      * or is select-only with no writable input (`false`).
-     * Applies to `drop-down-list`, `multi-select`, and `multi-column`. Tree modes ignore this.
+     * Applies to `drop-down-list`, `multi-select`, `multi-column`, and `multi-column-tree`.
+     * Tree-only modes (`drop-down-tree`, `multi-select-tree`) ignore this.
      * On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
      */
     searchable: _angular_core.InputSignal<boolean>;
@@ -268,7 +290,7 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     caption: _angular_core.InputSignal<string>;
     /**
      * When `true`, list rows use alternating background colors for easier scanning
-     * (`drop-down-list`, `multi-select`, and `multi-column` modes).
+     * (`drop-down-list`, `multi-select`, `multi-column`, and `multi-column-tree` modes).
      */
     alternate: _angular_core.InputSignal<boolean>;
     /**
@@ -373,7 +395,7 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     protected isMultiple: _angular_core.Signal<boolean>;
     /** Whether the current mode renders a tree. */
     protected isTreeMode: _angular_core.Signal<boolean>;
-    /** Whether the current mode can filter a flat list as you type. */
+    /** Whether the current mode can filter a list/table as you type. */
     protected isListSearchMode: _angular_core.Signal<boolean>;
     /** Whether the trigger input is writable and filters as you type (desktop only). */
     protected isEditableTrigger: _angular_core.Signal<boolean>;
@@ -383,6 +405,7 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     protected sheetSearchText: _angular_core.WritableSignal<string>;
     /** The datasource for list-based modes; plain arrays are converted. */
     protected resolvedDataSource: _angular_core.Signal<AXDataSource<AXLookupItem>>;
+    protected resolvedTreeDataSource: _angular_core.Signal<AXTreeViewDataSource>;
     /** The current selection normalized to an array. */
     protected selectedValues: _angular_core.Signal<unknown[]>;
     /** The resolved selected items (via cache, datasource `find`/`byKey`, or tree node lookup). */
@@ -454,7 +477,7 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
     /** Filters the datasource from the actionsheet search field (reads the input so delayed ngModel cannot block typing). */
     protected onSheetSearchInput(): void;
     /**
-     * Commits a single pick (drop-down-list, drop-down-tree, multi-column) and closes the popup.
+     * Commits a single pick (drop-down-list, drop-down-tree, multi-column, multi-column-tree) and closes the popup.
      */
     protected handleSinglePick(e: AXLookupItemClickEvent): void;
     /**
@@ -489,7 +512,7 @@ declare class AXLookupComponent extends NXValueComponent implements FormValueCon
      */
     reset(isUserInteraction?: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupComponent, "ax-lookup", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "treeDataSource": { "alias": "treeDataSource"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "treeSelectionBehavior": { "alias": "treeSelectionBehavior"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueItems": { "alias": "valueItems"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer", "ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupComponent, "ax-lookup", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "treeDataSource": { "alias": "treeDataSource"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "treeParentField": { "alias": "treeParentField"; "required": false; "isSignal": true; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "adaptivityEnabled": { "alias": "adaptivityEnabled"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "treeSelectionBehavior": { "alias": "treeSelectionBehavior"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "valueItems": { "alias": "valueItems"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; "onSelectionChanged": "onSelectionChanged"; "onFocus": "onFocus"; "onBlur": "onBlur"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-header", "ax-footer", "ax-validation-rule"], true, never>;
 }
 
 /**
@@ -651,11 +674,105 @@ declare class AXLookupMultiColumnComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiColumnComponent, "ax-lookup-multi-column", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
 }
 
+/**
+ * Internal mini component for the `multi-column-tree` lookup mode:
+ * a multi-column `ax-data-table` with a drop-down tree inside it.
+ * Rows expand/collapse via the data-table hierarchy (`parentField` / nested `children`).
+ *
+ * @category Components
+ */
+declare class AXLookupMultiColumnTreeComponent {
+    /**
+     * The datasource providing hierarchical rows (roots on load, children via `parentField`).
+     */
+    dataSource: _angular_core.InputSignal<AXDataSource<AXLookupItem>>;
+    /**
+     * The item property used as the selection value (also the data-table row key).
+     */
+    valueField: _angular_core.InputSignal<string>;
+    /**
+     * The item property used as the display text. The matching column shows the expand control
+     * unless another column sets `expandHandler`.
+     */
+    textField: _angular_core.InputSignal<string>;
+    /**
+     * The item property marking an item as disabled.
+     */
+    disabledField: _angular_core.InputSignal<string>;
+    /**
+     * Field used by the data table to fetch children (`AXDataSource` filter on expand).
+     */
+    parentField: _angular_core.InputSignal<string>;
+    /**
+     * Field used by the data table to decide whether a row can expand.
+     */
+    hasChildrenField: _angular_core.InputSignal<string>;
+    /**
+     * Currently selected values (always an array, even for single selection).
+     */
+    selectedValues: _angular_core.InputSignal<unknown[]>;
+    /**
+     * The fixed row height in pixels passed to the data table.
+     */
+    itemHeight: _angular_core.InputSignal<number>;
+    /**
+     * The maximum number of body rows visible before the table scrolls.
+     */
+    maxVisibleItems: _angular_core.InputSignal<number>;
+    /**
+     * Column definitions rendered as `ax-text-column` instances.
+     */
+    columns: _angular_core.InputSignal<AXLookupColumn[]>;
+    /**
+     * Optional custom row content. Context: `$implicit` is the row item.
+     * When set, replaces the default multi-column cell layout.
+     */
+    itemTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered when the datasource has no items.
+     */
+    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered while the table is loading.
+     */
+    loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * When `true`, table rows use alternating background colors for easier scanning.
+     */
+    alternate: _angular_core.InputSignal<boolean>;
+    /**
+     * Emitted when the user picks a row (not when expanding/collapsing).
+     */
+    itemClick: _angular_core.OutputEmitterRef<AXLookupItemClickEvent>;
+    /**
+     * Header (~40px) + up to `maxVisibleItems` body rows. Expanded children scroll inside.
+     */
+    protected tableHeight: _angular_core.Signal<number>;
+    protected loadingConfig: _angular_core.Signal<{
+        enabled: boolean;
+        animation: boolean;
+        loadingTemplate: TemplateRef<unknown>;
+    }>;
+    /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
+    protected trackColumnKey(index: number, column: AXLookupColumn): string;
+    protected resolveColumnWidth(column: AXLookupColumn): string | number | 'auto';
+    protected isExpandColumn(index: number, column: AXLookupColumn): boolean;
+    protected resolveRowCssClass: (row: unknown) => string;
+    protected handleRowClick(event: AXDataTableRowClick): void;
+    protected handleItemClick(item: AXLookupItem | null | undefined): void;
+    protected handleItemMouseDown(event: Event, item: AXLookupItem | null | undefined): void;
+    protected isSelected(item: AXLookupItem): boolean;
+    protected isDisabled(item: AXLookupItem): boolean;
+    private getValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupMultiColumnTreeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiColumnTreeComponent, "ax-lookup-multi-column-tree", never, { "dataSource": { "alias": "dataSource"; "required": true; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": false; "isSignal": true; }; "textField": { "alias": "textField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "parentField": { "alias": "parentField"; "required": false; "isSignal": true; }; "hasChildrenField": { "alias": "hasChildrenField"; "required": false; "isSignal": true; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
 declare class AXLookupModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXLookupModule, never, [typeof AXLookupComponent, typeof AXLookupDropDownListComponent, typeof AXLookupMultiSelectComponent, typeof AXLookupDropDownTreeComponent, typeof AXLookupMultiSelectTreeComponent, typeof AXLookupMultiColumnComponent], [typeof AXLookupComponent, typeof AXLookupDropDownListComponent, typeof AXLookupMultiSelectComponent, typeof AXLookupDropDownTreeComponent, typeof AXLookupMultiSelectTreeComponent, typeof AXLookupMultiColumnComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXLookupModule, never, [typeof AXLookupComponent, typeof AXLookupDropDownListComponent, typeof AXLookupMultiSelectComponent, typeof AXLookupDropDownTreeComponent, typeof AXLookupMultiSelectTreeComponent, typeof AXLookupMultiColumnComponent, typeof AXLookupMultiColumnTreeComponent], [typeof AXLookupComponent, typeof AXLookupDropDownListComponent, typeof AXLookupMultiSelectComponent, typeof AXLookupDropDownTreeComponent, typeof AXLookupMultiSelectTreeComponent, typeof AXLookupMultiColumnComponent, typeof AXLookupMultiColumnTreeComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXLookupModule>;
 }
 
-export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent };
+export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiColumnTreeComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent };
 export type { AXLookupColumn, AXLookupItem, AXLookupItemClickEvent, AXLookupMode, AXLookupSelectionChangedEvent, AXLookupTreeSelectionEvent };