@acorex/components 22.2.0 → 22.2.1

package/lookup/README.md

@@ -62,7 +62,7 @@ Value binding uses the signal `value` model (`FormValueControl`) — prefer `[(n
 - `valueField` / `textField` / `disabledField`: field mappings. For tree modes these map to the tree `idField` / `titleField`.
 - `columns`: column definitions (`{ field, title, width?, expandHandler? }`) for `multi-column` and `multi-column-tree` (mapped to `ax-text-column`).
 - `treeParentField` / `hasChildrenField`: hierarchy fields for `multi-column-tree` (defaults `parentId` / `hasChild`).
-- `searchable`: when `true` (default), the trigger accepts typing and filters the list or tree in every mode. Nested array trees keep matching branches and expand ancestors of hits; lazy callback trees filter each loaded level (unloaded descendants are not searched). When `false`, the trigger is select-only.
+- `searchable`: when `true` (default), the trigger accepts typing and filters the list or tree in every mode. Nested array trees keep matching branches and expand ancestors of hits; lazy callback trees are hydrated once per popup open and searched in full (subsequent keystrokes filter the cached snapshot in memory). When `false`, the trigger is select-only.
 - `adaptivityEnabled`: when `true` (default), the list opens as a bottom actionsheet on small screens instead of a dropdown; set `false` to always use the anchored dropdown.
 - `caption`: title shown in the actionsheet header (falls back to `placeholder`).
 - `alternate`: when `true`, list rows use alternating background colors for easier scanning (all modes, including tree).

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "22.2.0",
+  "version": "22.2.1",
   "peerDependencies": {
-    "@acorex/core": "22.2.0",
-    "@acorex/cdk": "22.2.0",
+    "@acorex/core": "22.2.1",
+    "@acorex/cdk": "22.2.1",
     "@angular/aria": ">=22.1.0",
     "polytype": ">=0.17.0",
     "hammerjs": ">=2.0.8",

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

@@ -4858,6 +4858,7 @@ declare class AXConversationAudioPickerComponent implements OnDestroy, AXConvers
     private catalogFileTypeDef?;
     caption: string;
     groupItems: boolean;
+    sendAsDocuments: boolean;
     readonly allowMultiple: _angular_core.Signal<boolean>;
     constructor();
     activate(): Promise<void>;
@@ -4871,6 +4872,7 @@ declare class AXConversationAudioPickerComponent implements OnDestroy, AXConvers
     renameAudio(index: number): Promise<void>;
     replaceAttachment(index: number): Promise<void>;
     sendAudio(): Promise<void>;
+    private sendAudioAsDocuments;
     canSend(): boolean;
     getUploadingLabel(progress: number): string;
     getCancelUploadLabel(): string;

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

@@ -869,9 +869,10 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
     protected resizeColumnProp: {
         startX: number;
         startWidth: number;
-        columnIndex: number;
-        newColumnWidth: number;
-        thElement: any;
+        column: AXDataTableColumnComponent | null;
+        thElement: HTMLElement | null;
+        /** True when the resize handle sits on the column's trailing edge in screen coordinates. */
+        resizeFromTrailingEdge: boolean;
     };
     /**
      * Columns that used `width="auto"` and received header-only sizing before rows were available.
@@ -1087,10 +1088,20 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
     protected toggleExpanded(rows: any[], expandedItem: any, children: any[]): any[];
     protected refreshExpandedItem(id: string | number): Promise<void>;
     private updateChildren;
+    /**
+     * CDK sort-predicate indices follow physical left-to-right order; map them to `columnsList` order.
+     * @ignore
+     */
+    private cdkSortIndexToColumnIndex;
+    /**
+     * Restricts column reordering to non-fixed columns only.
+     * @ignore
+     */
+    protected columnReorderSortPredicate: (index: number) => boolean;
     /**
      *  @ignore
      */
-    protected drop(event: CdkDragDrop<any, any, any>): void;
+    protected drop(event: CdkDragDrop<AXDataTableColumnComponent>): void;
     /**
      *  @ignore
      */
@@ -1154,11 +1165,11 @@ declare class AXDataTableComponent extends AXBaseDataTable implements OnInit, Af
      * @param columnIndex - The index of the column to auto-fit
      * @ignore
      */
-    protected onResizeHandlerDoubleClick(event: MouseEvent, columnIndex: number): void;
+    protected onResizeHandlerDoubleClick(event: MouseEvent, column: AXDataTableColumnComponent): void;
     /**
      *  @ignore
      */
-    protected onResizeColumnStart(event: MouseEvent, columnIndex: number): void;
+    protected onResizeColumnStart(event: MouseEvent, column: AXDataTableColumnComponent): void;
     /**
      *  @ignore
      */

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

@@ -3,7 +3,7 @@ import { TemplateRef, ElementRef } from '@angular/core';
 import { AXEvent, AXDataSource, AXListDataSource, AXHtmlEvent, NXValueComponent, AXStyleLookType, AXValueChangedEvent, AXFocusEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
 import { AXPopoverComponent } from '@acorex/components/popover';
 import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import { AXTreeViewDataSource, AXTreeViewItemTemplateContext, AXTreeViewSelectionChangeEvent, AXTreeViewSelectionBehavior, AXTreeViewNode } from '@acorex/components/tree-view';
+import { AXTreeViewNode, AXTreeViewDataSource, AXTreeViewSelectionBehavior, AXTreeViewItemTemplateContext, AXTreeViewSelectionChangeEvent } from '@acorex/components/tree-view';
 import { FormValueControl } from '@angular/forms/signals';
 import { AXListNavigationDirective, AXListNavigationItemDirective } from '@acorex/cdk/list-navigation';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -57,72 +57,6 @@ interface AXLookupSelectionChangedEvent<TItem = any> extends AXEvent {
     value: unknown | unknown[] | null;
 }
 
-/**
- * Internal mini component for the `drop-down-tree` lookup mode:
- * a predefined list rendered in a tree-like structure for single item selection.
- *
- * @category Components
- */
-declare class AXLookupDropDownTreeComponent {
-    #private;
-    constructor();
-    /**
-     * The tree datasource: an array of nodes or a lazy children callback.
-     */
-    dataSource: _angular_core.InputSignal<AXTreeViewDataSource>;
-    /**
-     * The node property used as the selection value (tree `idField`).
-     */
-    valueField: _angular_core.InputSignal<string>;
-    /**
-     * The node property used as the display text (tree `titleField`).
-     */
-    textField: _angular_core.InputSignal<string>;
-    /**
-     * The node property marking a node as disabled.
-     */
-    disabledField: _angular_core.InputSignal<string>;
-    /**
-     * Currently selected values (at most one for single selection).
-     */
-    selectedValues: _angular_core.InputSignal<unknown[]>;
-    /**
-     * Custom template rendered for each tree node.
-     */
-    nodeTemplate: _angular_core.InputSignal<TemplateRef<AXTreeViewItemTemplateContext>>;
-    /**
-     * Custom template rendered when the filtered tree has no nodes.
-     */
-    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
-    /**
-     * When `true`, visible tree nodes use alternating background colors.
-     */
-    alternate: _angular_core.InputSignal<boolean>;
-    /**
-     * Unique id that changes on every search apply so a new tree instance is created.
-     */
-    filterKey: _angular_core.InputSignal<string>;
-    /**
-     * When set, matching characters in the default node label are highlighted.
-     */
-    highlightText: _angular_core.InputSignal<string>;
-    /**
-     * Emitted when the user selects a node.
-     */
-    itemClick: _angular_core.OutputEmitterRef<AXLookupItemClickEvent>;
-    protected selectedIds: _angular_core.Signal<string[]>;
-    protected isEmpty: _angular_core.Signal<boolean>;
-    protected treeInstances: _angular_core.Signal<{
-        id: string;
-        source: AXTreeViewDataSource;
-    }[]>;
-    /** Whether the filtered tree currently has no nodes. */
-    hasNoMatches(): boolean;
-    protected handleSelectionChange(e: AXTreeViewSelectionChangeEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupDropDownTreeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupDropDownTreeComponent, "ax-lookup-drop-down-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; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "filterKey": { "alias": "filterKey"; "required": false; "isSignal": true; }; "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
-}
-
 /**
  * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
  * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
@@ -271,6 +205,14 @@ declare class AXLookupMultiSelectTreeComponent {
      * Custom template rendered when the filtered tree has no nodes.
      */
     emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered while the tree is hydrating for search.
+     */
+    loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * When `true`, a loading placeholder is shown while lazy tree data is hydrated for search.
+     */
+    loading: _angular_core.InputSignal<boolean>;
     /**
      * When `true`, visible tree nodes use alternating background colors.
      */
@@ -297,7 +239,7 @@ declare class AXLookupMultiSelectTreeComponent {
     hasNoMatches(): boolean;
     protected handleSelectionChange(e: AXTreeViewSelectionChangeEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupMultiSelectTreeComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiSelectTreeComponent, "ax-lookup-multi-select-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; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "selectionBehavior": { "alias": "selectionBehavior"; "required": false; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "filterKey": { "alias": "filterKey"; "required": false; "isSignal": true; }; "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiSelectTreeComponent, "ax-lookup-multi-select-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; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "selectionBehavior": { "alias": "selectionBehavior"; "required": false; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "filterKey": { "alias": "filterKey"; "required": false; "isSignal": true; }; "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
 }
 
 /**
@@ -378,6 +320,7 @@ declare class AXLookupComponent<T = AXLookupItem> extends NXValueComponent imple
      * Whether the trigger accepts typing and filters the datasource (`true`),
      * or is select-only with no writable input (`false`).
      * Applies to all modes, including `drop-down-tree` and `multi-select-tree`.
+     * Lazy callback trees are hydrated once per popup open and searched in full.
      * On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
      */
     searchable: _angular_core.InputSignal<boolean>;
@@ -521,6 +464,7 @@ declare class AXLookupComponent<T = AXLookupItem> extends NXValueComponent imple
     protected isSheetSearchEnabled: _angular_core.Signal<boolean>;
     /** Query typed in the actionsheet search field (independent of the trigger display text). */
     protected sheetSearchText: _angular_core.WritableSignal<string>;
+    protected treeSearchLoading: _angular_core.WritableSignal<boolean>;
     /** Increments on every tree filter apply so the tree view remounts with a new instance. */
     protected treeFilterKey: _angular_core.Signal<string>;
     /** Query passed to result-item highlighting (empty when disabled). */
@@ -558,8 +502,6 @@ declare class AXLookupComponent<T = AXLookupItem> extends NXValueComponent imple
     protected popupRef: _angular_core.Signal<ElementRef<HTMLElement>>;
     protected triggerSearchInput: _angular_core.Signal<ElementRef<HTMLInputElement>>;
     protected listView: _angular_core.Signal<AXLookupListViewBase>;
-    protected dropDownTreeView: _angular_core.Signal<AXLookupDropDownTreeComponent>;
-    protected multiSelectTreeView: _angular_core.Signal<AXLookupMultiSelectTreeComponent>;
     protected sheetSearchRef: _angular_core.Signal<AXSearchBoxComponent>;
     constructor();
     /** Returns the display text of an item using the `textField` mapping. */
@@ -673,6 +615,80 @@ declare class AXLookupMultiSelectComponent extends AXLookupListViewBase {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupMultiSelectComponent, "ax-lookup-multi-select", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * Internal mini component for the `drop-down-tree` lookup mode:
+ * a predefined list rendered in a tree-like structure for single item selection.
+ *
+ * @category Components
+ */
+declare class AXLookupDropDownTreeComponent {
+    #private;
+    constructor();
+    /**
+     * The tree datasource: an array of nodes or a lazy children callback.
+     */
+    dataSource: _angular_core.InputSignal<AXTreeViewDataSource>;
+    /**
+     * The node property used as the selection value (tree `idField`).
+     */
+    valueField: _angular_core.InputSignal<string>;
+    /**
+     * The node property used as the display text (tree `titleField`).
+     */
+    textField: _angular_core.InputSignal<string>;
+    /**
+     * The node property marking a node as disabled.
+     */
+    disabledField: _angular_core.InputSignal<string>;
+    /**
+     * Currently selected values (at most one for single selection).
+     */
+    selectedValues: _angular_core.InputSignal<unknown[]>;
+    /**
+     * Custom template rendered for each tree node.
+     */
+    nodeTemplate: _angular_core.InputSignal<TemplateRef<AXTreeViewItemTemplateContext>>;
+    /**
+     * Custom template rendered when the filtered tree has no nodes.
+     */
+    emptyTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * Custom template rendered while the tree is hydrating for search.
+     */
+    loadingTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * When `true`, a loading placeholder is shown while lazy tree data is hydrated for search.
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * When `true`, visible tree nodes use alternating background colors.
+     */
+    alternate: _angular_core.InputSignal<boolean>;
+    /**
+     * Unique id that changes on every search apply so a new tree instance is created.
+     */
+    filterKey: _angular_core.InputSignal<string>;
+    /**
+     * When set, matching characters in the default node label are highlighted.
+     */
+    highlightText: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when the user selects a node.
+     */
+    itemClick: _angular_core.OutputEmitterRef<AXLookupItemClickEvent>;
+    protected selectedIds: _angular_core.Signal<string[]>;
+    protected isEmpty: _angular_core.Signal<boolean>;
+    protected treeInstances: _angular_core.Signal<{
+        id: string;
+        source: AXTreeViewDataSource;
+    }[]>;
+    /** Whether the filtered tree currently has no nodes. */
+    hasNoMatches(): boolean;
+    protected handleSelectionChange(e: AXTreeViewSelectionChangeEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLookupDropDownTreeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXLookupDropDownTreeComponent, "ax-lookup-drop-down-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; }; "selectedValues": { "alias": "selectedValues"; "required": false; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; "isSignal": true; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "alternate": { "alias": "alternate"; "required": false; "isSignal": true; }; "filterKey": { "alias": "filterKey"; "required": false; "isSignal": true; }; "highlightText": { "alias": "highlightText"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
+}
+
 /**
  * Internal mini component for the `multi-column` lookup mode:
  * renders selectable rows in an `ax-data-table` grid and loads further