@acorex/components 22.1.0-next.9 → 22.1.1

package/fesm2022/acorex-components-lookup.mjs

@@ -1,27 +1,175 @@
-import { AXListDataSource, AXDataSource, NXValueComponent, convertArrayToDataSource, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXDataSource, AXListDataSource, NXValueComponent, convertArrayToDataSource, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+import { AXButtonComponent } from '@acorex/components/button';
 import { AXChipsComponent } from '@acorex/components/chips';
 import * as i1$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
 import { AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe } from '@acorex/core/translation';
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, AsyncPipe, DOCUMENT } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, signal, computed, viewChild, viewChildren, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, DestroyRef, model, linkedSignal, NgModule } from '@angular/core';
+import { input, output, signal, computed, viewChild, viewChildren, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, DestroyRef, model, booleanAttribute, linkedSignal, afterRenderEffect, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i2 from '@acorex/cdk/list-navigation';
 import { AXListNavigationDirective, AXListNavigationItemDirective, AXListNavigationModule } from '@acorex/cdk/list-navigation';
+import { AXHighlightTextComponent } from '@acorex/cdk/highlight';
 import * as i1 from '@angular/cdk/scrolling';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import { AXDataTableComponent, AXDataTableTextColumnComponent } from '@acorex/components/data-table';
 import { fromEvent, auditTime } from 'rxjs';
+import { AXCheckBoxComponent } from '@acorex/components/check-box';
+
+/**
+ * Converts a drop-down-tree datasource (nested array or lazy callback) into an
+ * `AXDataSource` that a multi-column data table can load and expand.
+ */
+function createLookupTreeTableDataSource(source, options) {
+    const isCallback = typeof source === 'function';
+    return new AXDataSource({
+        pageSize: 8,
+        key: options.valueField,
+        load: (query) => loadTreeTableRows(source, options, query, isCallback),
+        byKey: (key) => findTreeTableItem(source, options.valueField, key),
+    });
+}
+async function loadTreeTableRows(source, options, query, isCallback) {
+    const parentFilter = query.filter?.field === options.parentField ? query.filter : undefined;
+    const textFilter = query.filter && query.filter.field !== options.parentField ? query.filter : undefined;
+    if (parentFilter) {
+        const children = await loadChildren(source, options, parentFilter.value, isCallback);
+        return { items: children, total: children.length };
+    }
+    const roots = mapTreeNodes(await loadRoots(source, isCallback), options);
+    const items = textFilter ? filterTreeNodes(roots, options.textField, String(textFilter.value ?? '')) : roots;
+    return { items, total: items.length };
+}
+async function loadRoots(source, isCallback) {
+    if (!isCallback) {
+        return source ?? [];
+    }
+    return (await source()) ?? [];
+}
+async function loadChildren(source, options, parentId, isCallback) {
+    if (isCallback) {
+        const nodes = (await source(String(parentId))) ?? [];
+        return mapTreeNodes(nodes, options);
+    }
+    const parent = findTreeNode(source, options.valueField, parentId);
+    const children = Array.isArray(parent?.['children']) ? parent['children'] : [];
+    return mapTreeNodes(children, options);
+}
+function mapTreeNodes(nodes, options) {
+    return nodes.map((node) => mapTreeNode(node, options));
+}
+function mapTreeNode(node, options) {
+    const rawChildren = node['children'];
+    const children = Array.isArray(rawChildren) ? mapTreeNodes(rawChildren, options) : undefined;
+    const childrenCount = node['childrenCount'];
+    const hasChildren = (children?.length ?? 0) > 0 ||
+        (typeof childrenCount === 'number' && childrenCount > 0) ||
+        node['hasChild'] === true ||
+        node['hasChildren'] === true;
+    return {
+        ...node,
+        [options.hasChildrenField]: hasChildren,
+        ...(children && children.length > 0 ? { children } : {}),
+    };
+}
+/**
+ * Recursively filters a nested tree by `textField` (case-insensitive contains).
+ * A node is kept if it matches or any descendant matches. Matching parents keep
+ * all children. Every kept ancestor is a new object with `expanded: true` so
+ * nested hits are visible without mutating the original tree.
+ */
+function filterTreeNodes(nodes, textField, query) {
+    const needle = query.trim().toLowerCase();
+    if (!needle) {
+        return nodes;
+    }
+    const result = [];
+    for (const node of nodes) {
+        const rawChildren = node['children'];
+        const nested = Array.isArray(rawChildren) ? rawChildren : undefined;
+        const children = nested ? filterTreeNodes(nested, textField, needle) : undefined;
+        const selfMatch = String(node[textField] ?? '')
+            .toLowerCase()
+            .includes(needle);
+        if (selfMatch) {
+            result.push({
+                ...node,
+                ...(nested && nested.length > 0 ? { children: cloneTreeNodes(nested), expanded: true } : {}),
+            });
+        }
+        else if (children && children.length > 0) {
+            result.push({
+                ...node,
+                children,
+                expanded: true,
+            });
+        }
+    }
+    return result;
+}
+function cloneTreeNodes(nodes) {
+    return nodes.map((node) => {
+        const raw = node['children'];
+        const children = Array.isArray(raw) && raw.length > 0 ? cloneTreeNodes(raw) : undefined;
+        return children ? { ...node, children } : { ...node };
+    });
+}
+/** Immutable copy of a nested tree so tree-view mutations cannot poison the source. */
+function cloneLookupTreeNodes(nodes) {
+    return cloneTreeNodes(nodes);
+}
+/** Depth-first flattening of nested `children` arrays. */
+function flattenTreeNodes(nodes) {
+    const result = [];
+    for (const node of nodes) {
+        result.push(node);
+        const children = node['children'];
+        if (Array.isArray(children)) {
+            result.push(...flattenTreeNodes(children));
+        }
+    }
+    return result;
+}
+function findTreeTableItem(source, valueField, key) {
+    if (typeof source === 'function' || !Array.isArray(source)) {
+        return undefined;
+    }
+    return findTreeNode(source, valueField, key) ?? undefined;
+}
+function findTreeNode(nodes, valueField, key) {
+    for (const node of nodes) {
+        if (String(node[valueField]) === String(key)) {
+            return node;
+        }
+        const children = node['children'];
+        if (Array.isArray(children)) {
+            const found = findTreeNode(children, valueField, key);
+            if (found) {
+                return found;
+            }
+        }
+    }
+    return null;
+}
 
 /**
  * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
  * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
  */
 class AXLookupListViewBase {
+    /** Whether the filtered datasource currently has no items. */
+    hasNoMatches() {
+        return this.isEmpty();
+    }
+    /** Number of items in the current filtered result set. */
+    matchCount() {
+        return this.totalCount();
+    }
     #ngZone;
     constructor() {
         /**
@@ -60,7 +208,9 @@ class AXLookupListViewBase {
         this.maxVisibleItems = input(8, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
         /**
-         * Custom template rendered for each item. Context: `$implicit` is the item.
+         * Custom template rendered for each item. Context: `$implicit` is the item;
+         * `highlightText` is the active search query when result highlighting is enabled.
+         * Default option chrome is not applied on top of the template.
          */
         this.itemTemplate = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
@@ -79,6 +229,11 @@ class AXLookupListViewBase {
          */
         this.alternate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
+        /**
+         * When set, matching characters in the default option label are highlighted.
+         */
+        this.highlightText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user picks (or toggles) an item.
          */
@@ -226,11 +381,11 @@ class AXLookupListViewBase {
         nav?.navigateTo(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupListViewBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: AXLookupListViewBase, isStandalone: true, inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", navigateOut: "navigateOut" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }, { propertyName: "navItems", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.8", type: AXLookupListViewBase, isStandalone: true, inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", navigateOut: "navigateOut" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: CdkVirtualScrollViewport, descendants: true, isSignal: true }, { propertyName: "listNavigation", first: true, predicate: AXListNavigationDirective, descendants: true, isSignal: true }, { propertyName: "navItems", predicate: AXListNavigationItemDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupListViewBase, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], navigateOut: [{ type: i0.Output, args: ["navigateOut"] }], viewportRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], listNavigation: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], navItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXListNavigationItemDirective), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], navigateOut: [{ type: i0.Output, args: ["navigateOut"] }], viewportRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], listNavigation: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXListNavigationDirective), { isSignal: true }] }], navItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => AXListNavigationItemDirective), { isSignal: true }] }] } });
 
 /**
  * Internal mini component for the `drop-down-list` lookup mode:
@@ -262,10 +417,11 @@ class AXLookupDropDownListComponent extends AXLookupListViewBase {
         <div
           *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option-host ax-lookup-option"
+          class="ax-lookup-option-host"
           axListNavigationItem
           #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
+          [class.ax-lookup-option]="!itemTemplate()"
           [class.ax-state-alternate]="alternate() && i % 2 === 1"
           [class.ax-state-selected]="item != null && isSelected(item)"
           [class.ax-state-disabled]="item != null && isDisabled(item)"
@@ -277,13 +433,17 @@ class AXLookupDropDownListComponent extends AXLookupListViewBase {
         >
           @if (item != null) {
             @if (itemTemplate()) {
-              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate()!"
+                [ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
+              />
             } @else {
-              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
-            }
-            <!-- Keep check outside itemTemplate so custom rows (platform widgets) still show selection. -->
-            @if (isSelected(item)) {
-              <span class="ax-lookup-option-check ax-icon ax-icon-check text-primary" aria-hidden="true"></span>
+              <span class="ax-lookup-option-text">
+                <ax-highlight-text [text]="getText(item)" [query]="highlightText()" />
+              </span>
+              @if (isSelected(item)) {
+                <span class="ax-lookup-option-check ax-icon ax-icon-check" aria-hidden="true"></span>
+              }
             }
           } @else {
             <ng-container [ngTemplateOutlet]="loadingRow" />
@@ -299,7 +459,7 @@ class AXLookupDropDownListComponent extends AXLookupListViewBase {
         <span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownListComponent, decorators: [{
             type: Component,
@@ -307,7 +467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ax-lookup-drop-down-list',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule],
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule, AXHighlightTextComponent],
                     providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupDropDownListComponent }],
                     template: `
     @if (isEmpty()) {
@@ -331,10 +491,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <div
           *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option-host ax-lookup-option"
+          class="ax-lookup-option-host"
           axListNavigationItem
           #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
+          [class.ax-lookup-option]="!itemTemplate()"
           [class.ax-state-alternate]="alternate() && i % 2 === 1"
           [class.ax-state-selected]="item != null && isSelected(item)"
           [class.ax-state-disabled]="item != null && isDisabled(item)"
@@ -346,13 +507,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         >
           @if (item != null) {
             @if (itemTemplate()) {
-              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate()!"
+                [ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
+              />
             } @else {
-              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
-            }
-            <!-- Keep check outside itemTemplate so custom rows (platform widgets) still show selection. -->
-            @if (isSelected(item)) {
-              <span class="ax-lookup-option-check ax-icon ax-icon-check text-primary" aria-hidden="true"></span>
+              <span class="ax-lookup-option-text">
+                <ax-highlight-text [text]="getText(item)" [query]="highlightText()" />
+              </span>
+              @if (isSelected(item)) {
+                <span class="ax-lookup-option-check ax-icon ax-icon-check" aria-hidden="true"></span>
+              }
             }
           } @else {
             <ng-container [ngTemplateOutlet]="loadingRow" />
@@ -410,12 +575,43 @@ class AXLookupDropDownTreeComponent {
          */
         this.nodeTemplate = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered when the filtered tree has no nodes.
+         */
+        this.emptyTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, visible tree nodes use alternating background colors.
+         */
+        this.alternate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
+        /**
+         * Unique id that changes on every search apply so a new tree instance is created.
+         */
+        this.filterKey = input('0', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterKey" }] : /* istanbul ignore next */ []));
+        /**
+         * When set, matching characters in the default node label are highlighted.
+         */
+        this.highlightText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user selects a node.
          */
         this.itemClick = output();
         this.selectedIds = computed(() => this.selectedValues().map((v) => String(v)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => {
+            const source = this.dataSource();
+            return Array.isArray(source) && source.length === 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        this.treeInstances = computed(() => [{ id: this.filterKey(), source: this.dataSource() }], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeInstances" }] : /* istanbul ignore next */ []));
+    }
+    /** Whether the filtered tree currently has no nodes. */
+    hasNoMatches() {
+        return this.isEmpty();
     }
     handleSelectionChange(e) {
         if (e.source !== 'user') {
@@ -428,22 +624,36 @@ class AXLookupDropDownTreeComponent {
         this.itemClick.emit({ item: node, value: node[this.valueField()] });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXLookupDropDownTreeComponent, isStandalone: true, selector: "ax-lookup-drop-down-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
-    <div class="ax-lookup-tree">
-      <ax-tree-view
-        [datasource]="dataSource()"
-        selectMode="single"
-        selectionBehavior="all"
-        [controlledSelection]="true"
-        [selectedIds]="selectedIds()"
-        [idField]="valueField()"
-        [titleField]="textField()"
-        [disabledField]="disabledField()"
-        [nodeTemplate]="nodeTemplate()"
-        (onSelectionChange)="handleSelectionChange($event)"
-      />
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupDropDownTreeComponent, isStandalone: true, selector: "ax-lookup-drop-down-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, filterKey: { classPropertyName: "filterKey", publicName: "filterKey", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    @if (isEmpty()) {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
+          {{ '@acorex:common.general.no-result-found' | translate | async }}
+        </div>
+      }
+    } @else {
+      <div class="ax-lookup-tree">
+        @for (instance of treeInstances(); track instance.id) {
+          <ax-tree-view
+            [datasource]="instance.source"
+            selectMode="single"
+            selectionBehavior="all"
+            [controlledSelection]="true"
+            [selectedIds]="selectedIds()"
+            [idField]="valueField()"
+            [titleField]="textField()"
+            [disabledField]="disabledField()"
+            [nodeTemplate]="nodeTemplate()"
+            [alternate]="alternate()"
+            [highlightText]="highlightText()"
+            (onSelectionChange)="handleSelectionChange($event)"
+          />
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownTreeComponent, decorators: [{
             type: Component,
@@ -451,25 +661,320 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ax-lookup-drop-down-tree',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [AXTreeViewComponent],
+                    imports: [AXTreeViewComponent, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
                     template: `
-    <div class="ax-lookup-tree">
-      <ax-tree-view
-        [datasource]="dataSource()"
-        selectMode="single"
-        selectionBehavior="all"
-        [controlledSelection]="true"
-        [selectedIds]="selectedIds()"
-        [idField]="valueField()"
-        [titleField]="textField()"
-        [disabledField]="disabledField()"
-        [nodeTemplate]="nodeTemplate()"
-        (onSelectionChange)="handleSelectionChange($event)"
-      />
-    </div>
+    @if (isEmpty()) {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
+          {{ '@acorex:common.general.no-result-found' | translate | async }}
+        </div>
+      }
+    } @else {
+      <div class="ax-lookup-tree">
+        @for (instance of treeInstances(); track instance.id) {
+          <ax-tree-view
+            [datasource]="instance.source"
+            selectMode="single"
+            selectionBehavior="all"
+            [controlledSelection]="true"
+            [selectedIds]="selectedIds()"
+            [idField]="valueField()"
+            [titleField]="textField()"
+            [disabledField]="disabledField()"
+            [nodeTemplate]="nodeTemplate()"
+            [alternate]="alternate()"
+            [highlightText]="highlightText()"
+            (onSelectionChange)="handleSelectionChange($event)"
+          />
+        }
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * 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
+ */
+class AXLookupMultiColumnTreeComponent {
+    constructor() {
+        /**
+         * The datasource providing hierarchical rows (roots on load, children via `parentField`).
+         */
+        this.dataSource = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property used as the selection value (also the data-table row key).
+         */
+        this.valueField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property used as the display text. The matching column shows the expand control
+         * unless another column sets `expandHandler`.
+         */
+        this.textField = input('text', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property marking an item as disabled.
+         */
+        this.disabledField = input('disabled', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
+        /**
+         * Field used by the data table to fetch children (`AXDataSource` filter on expand).
+         */
+        this.parentField = input('parentId', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parentField" }] : /* istanbul ignore next */ []));
+        /**
+         * Field used by the data table to decide whether a row can expand.
+         */
+        this.hasChildrenField = input('hasChild', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildrenField" }] : /* istanbul ignore next */ []));
+        /**
+         * Currently selected values (always an array, even for single selection).
+         */
+        this.selectedValues = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+        /**
+         * The fixed row height in pixels passed to the data table.
+         */
+        this.itemHeight = input(40, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * The maximum number of body rows visible before the table scrolls.
+         */
+        this.maxVisibleItems = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
+        /**
+         * Column definitions rendered as `ax-text-column` instances.
+         */
+        this.columns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * Optional custom row content. Context: `$implicit` is the row item.
+         * When set, replaces the default multi-column cell layout.
+         */
+        this.itemTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered when the datasource has no items.
+         */
+        this.emptyTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered while the table is loading.
+         */
+        this.loadingTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, table rows use alternating background colors for easier scanning.
+         */
+        this.alternate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
+        /**
+         * When set, matching text in table cells is highlighted.
+         */
+        this.highlightText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the user picks a row (not when expanding/collapsing).
+         */
+        this.itemClick = output();
+        /**
+         * Header (~40px) + up to `maxVisibleItems` body rows. Expanded children scroll inside.
+         */
+        this.tableHeight = computed(() => 40 + this.maxVisibleItems() * this.itemHeight(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableHeight" }] : /* istanbul ignore next */ []));
+        this.loadingConfig = computed(() => ({
+            enabled: true,
+            animation: true,
+            loadingTemplate: this.loadingTemplate(),
+        }), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingConfig" }] : /* istanbul ignore next */ []));
+        this.resolveRowCssClass = (row) => {
+            const item = row;
+            if (!item) {
+                return '';
+            }
+            const classes = [];
+            if (this.isSelected(item)) {
+                classes.push('ax-state-selected');
+            }
+            if (this.isDisabled(item)) {
+                classes.push('ax-state-disabled');
+            }
+            return classes.join(' ');
+        };
+    }
+    /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
+    trackColumnKey(index, column) {
+        return `${column?.field ?? ''}::${index}`;
+    }
+    resolveColumnWidth(column) {
+        const width = column.width?.trim();
+        if (!width || width.includes('fr')) {
+            return 'auto';
+        }
+        return width;
+    }
+    isExpandColumn(index, column) {
+        if (column.expandHandler === true) {
+            return true;
+        }
+        if (this.columns().some((item) => item.expandHandler === true)) {
+            return false;
+        }
+        const textIndex = this.columns().findIndex((item) => item.field === this.textField());
+        return (textIndex === -1 ? 0 : textIndex) === index;
+    }
+    handleRowClick(event) {
+        this.handleItemClick(event.data);
+    }
+    handleItemClick(item) {
+        if (!item || this.isDisabled(item)) {
+            return;
+        }
+        this.itemClick.emit({ item, value: this.getValue(item) });
+    }
+    handleItemMouseDown(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleItemClick(item);
+    }
+    isSelected(item) {
+        const value = this.getValue(item);
+        return this.selectedValues().some((v) => v == value);
+    }
+    isDisabled(item) {
+        return Boolean(item?.[this.disabledField()]);
+    }
+    getValue(item) {
+        return item?.[this.valueField()];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnTreeComponent, isStandalone: true, selector: "ax-lookup-multi-column-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, parentField: { classPropertyName: "parentField", publicName: "parentField", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenField: { classPropertyName: "hasChildrenField", publicName: "hasChildrenField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column ax-lookup-multi-column-tree" }, ngImport: i0, template: `
+    <ax-data-table
+      class="ax-lookup-multi-column-table"
+      look="minimal"
+      [dataSource]="dataSource()"
+      [parentField]="parentField()"
+      [hasChildrenField]="hasChildrenField()"
+      [itemHeight]="itemHeight()"
+      [alternative]="alternate()"
+      [emptyTemplate]="emptyTemplate()"
+      [highlightText]="highlightText()"
+      [loading]="loadingConfig()"
+      [paging]="false"
+      [showHeader]="true"
+      [fixedHeader]="true"
+      [showFooter]="false"
+      [allowReordering]="false"
+      [rowTemplate]="itemTemplate() ? customRowTemplate : undefined"
+      [rowCssClass]="resolveRowCssClass"
+      (onRowClick)="handleRowClick($event)"
+    >
+      @for (column of columns(); track trackColumnKey($index, column)) {
+        <ax-text-column
+          [dataField]="column.field"
+          [caption]="column.title"
+          [width]="resolveColumnWidth(column)"
+          [expandHandler]="isExpandColumn($index, column)"
+          [allowSorting]="false"
+          [allowResizing]="false"
+        />
+      }
+    </ax-data-table>
+
+    <ng-template #customRowTemplate let-ctx>
+      <tr
+        [class.ax-state-selected]="ctx.data != null && isSelected(ctx.data)"
+        [class.ax-state-disabled]="ctx.data != null && isDisabled(ctx.data)"
+        [style.height.px]="itemHeight()"
+        [style.max-height.px]="itemHeight()"
+        (mousedown)="handleItemMouseDown($event, ctx.data)"
+      >
+        <td [attr.colspan]="columns().length || 1">
+          @if (ctx.data != null && itemTemplate()) {
+            <ng-container
+              [ngTemplateOutlet]="itemTemplate()!"
+              [ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
+            />
+          }
+        </td>
+      </tr>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "hasTitle", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnTreeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-lookup-multi-column-tree',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [NgTemplateOutlet, AXDataTableComponent, AXDataTableTextColumnComponent],
+                    host: {
+                        class: 'ax-lookup-multi-column ax-lookup-multi-column-tree',
+                        '[style.height.px]': 'tableHeight()',
+                    },
+                    template: `
+    <ax-data-table
+      class="ax-lookup-multi-column-table"
+      look="minimal"
+      [dataSource]="dataSource()"
+      [parentField]="parentField()"
+      [hasChildrenField]="hasChildrenField()"
+      [itemHeight]="itemHeight()"
+      [alternative]="alternate()"
+      [emptyTemplate]="emptyTemplate()"
+      [highlightText]="highlightText()"
+      [loading]="loadingConfig()"
+      [paging]="false"
+      [showHeader]="true"
+      [fixedHeader]="true"
+      [showFooter]="false"
+      [allowReordering]="false"
+      [rowTemplate]="itemTemplate() ? customRowTemplate : undefined"
+      [rowCssClass]="resolveRowCssClass"
+      (onRowClick)="handleRowClick($event)"
+    >
+      @for (column of columns(); track trackColumnKey($index, column)) {
+        <ax-text-column
+          [dataField]="column.field"
+          [caption]="column.title"
+          [width]="resolveColumnWidth(column)"
+          [expandHandler]="isExpandColumn($index, column)"
+          [allowSorting]="false"
+          [allowResizing]="false"
+        />
+      }
+    </ax-data-table>
+
+    <ng-template #customRowTemplate let-ctx>
+      <tr
+        [class.ax-state-selected]="ctx.data != null && isSelected(ctx.data)"
+        [class.ax-state-disabled]="ctx.data != null && isDisabled(ctx.data)"
+        [style.height.px]="itemHeight()"
+        [style.max-height.px]="itemHeight()"
+        (mousedown)="handleItemMouseDown($event, ctx.data)"
+      >
+        <td [attr.colspan]="columns().length || 1">
+          @if (ctx.data != null && itemTemplate()) {
+            <ng-container
+              [ngTemplateOutlet]="itemTemplate()!"
+              [ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
+            />
+          }
+        </td>
+      </tr>
+    </ng-template>
   `,
                 }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], parentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 /**
  * Internal mini component for the `multi-column` lookup mode:
@@ -547,6 +1052,11 @@ class AXLookupMultiColumnComponent {
          */
         this.alternate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
+        /**
+         * When set, matching text in table cells is highlighted.
+         */
+        this.highlightText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user picks a row.
          */
@@ -608,19 +1118,18 @@ class AXLookupMultiColumnComponent {
             const source = this.dataSource();
             this.tableDataSource.config.key = source.config.key || this.valueField();
             untracked(() => {
-                this.#loadedItems = [];
-                this.#totalCount.set(0);
-                this.#syncTablePageSize();
-                this.tableDataSource.refresh({ reset: true });
+                this.#applyLoadedItems(source.cachedItems, source.totalCount);
             });
             const changedSub = source.onChanged.subscribe((event) => {
-                this.#loadedItems = event.cachedItems.filter((item) => item != null);
-                this.#totalCount.set(event.totalCount);
-                this.#syncTablePageSize();
-                this.tableDataSource.refresh({ reset: true });
+                this.#applyLoadedItems(event.cachedItems, event.totalCount);
+            });
+            // Fetch page 0 only when the source has never loaded. Reopen remounts this
+            // view; setPage(0) is a no-op on a warm source and must not force a new API call.
+            queueMicrotask(() => {
+                if (!source.cachedItems.some((item) => item != null)) {
+                    source.setPage(0);
+                }
             });
-            // Kick the first page; later pages come from scroll.
-            queueMicrotask(() => source.setPage(0));
             onCleanup(() => changedSub.unsubscribe());
         });
         effect((onCleanup) => {
@@ -655,6 +1164,12 @@ class AXLookupMultiColumnComponent {
         }
         return width;
     }
+    #applyLoadedItems(cachedItems, totalCount) {
+        this.#loadedItems = cachedItems.filter((item) => item != null);
+        this.#totalCount.set(totalCount);
+        this.#syncTablePageSize();
+        this.tableDataSource.refresh({ reset: true });
+    }
     #syncTablePageSize() {
         this.tableDataSource.config.pageSize = Math.max(this.#loadedItems.length, 1);
     }
@@ -699,7 +1214,7 @@ class AXLookupMultiColumnComponent {
         return item?.[this.valueField()];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnComponent, isStandalone: true, selector: "ax-lookup-multi-column", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiColumnComponent, isStandalone: true, selector: "ax-lookup-multi-column", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "style.height.px": "tableHeight()" }, classAttribute: "ax-lookup-multi-column" }, viewQueries: [{ propertyName: "tableRef", first: true, predicate: AXDataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
     <ax-data-table
       class="ax-lookup-multi-column-table"
       look="minimal"
@@ -707,6 +1222,7 @@ class AXLookupMultiColumnComponent {
       [itemHeight]="itemHeight()"
       [alternative]="alternate()"
       [emptyTemplate]="emptyTemplate()"
+      [highlightText]="highlightText()"
       [loading]="loadingConfig()"
       [paging]="false"
       [showHeader]="true"
@@ -740,7 +1256,7 @@ class AXLookupMultiColumnComponent {
           @if (ctx.data != null && itemTemplate()) {
             <ng-container
               [ngTemplateOutlet]="itemTemplate()!"
-              [ngTemplateOutletContext]="{ $implicit: ctx.data }"
+              [ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
             />
           }
         </td>
@@ -767,6 +1283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
       [itemHeight]="itemHeight()"
       [alternative]="alternate()"
       [emptyTemplate]="emptyTemplate()"
+      [highlightText]="highlightText()"
       [loading]="loadingConfig()"
       [paging]="false"
       [showHeader]="true"
@@ -800,7 +1317,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           @if (ctx.data != null && itemTemplate()) {
             <ng-container
               [ngTemplateOutlet]="itemTemplate()!"
-              [ngTemplateOutletContext]="{ $implicit: ctx.data }"
+              [ngTemplateOutletContext]="{ $implicit: ctx.data, highlightText: highlightText() }"
             />
           }
         </td>
@@ -808,7 +1325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
     </ng-template>
   `,
                 }]
-        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDataTableComponent), { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], tableRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXDataTableComponent), { isSignal: true }] }] } });
 
 /**
  * Internal mini component for the `multi-select-tree` lookup mode:
@@ -853,12 +1370,43 @@ class AXLookupMultiSelectTreeComponent {
          */
         this.nodeTemplate = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered when the filtered tree has no nodes.
+         */
+        this.emptyTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptyTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, visible tree nodes use alternating background colors.
+         */
+        this.alternate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
+        /**
+         * Unique id that changes on every search apply so a new tree instance is created.
+         */
+        this.filterKey = input('0', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filterKey" }] : /* istanbul ignore next */ []));
+        /**
+         * When set, matching characters in the default node label are highlighted.
+         */
+        this.highlightText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightText" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user changes the tree selection.
          */
         this.selectionChange = output();
         this.selectedIds = computed(() => this.selectedValues().map((v) => String(v)), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => {
+            const source = this.dataSource();
+            return Array.isArray(source) && source.length === 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        this.treeInstances = computed(() => [{ id: this.filterKey(), source: this.dataSource() }], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeInstances" }] : /* istanbul ignore next */ []));
+    }
+    /** Whether the filtered tree currently has no nodes. */
+    hasNoMatches() {
+        return this.isEmpty();
     }
     handleSelectionChange(e) {
         if (e.source !== 'user') {
@@ -867,22 +1415,36 @@ class AXLookupMultiSelectTreeComponent {
         this.selectionChange.emit({ ids: e.selectedIds, nodes: e.selectedNodes });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXLookupMultiSelectTreeComponent, isStandalone: true, selector: "ax-lookup-multi-select-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
-    <div class="ax-lookup-tree">
-      <ax-tree-view
-        [datasource]="dataSource()"
-        selectMode="multiple"
-        [selectionBehavior]="selectionBehavior()"
-        [controlledSelection]="true"
-        [selectedIds]="selectedIds()"
-        [idField]="valueField()"
-        [titleField]="textField()"
-        [disabledField]="disabledField()"
-        [nodeTemplate]="nodeTemplate()"
-        (onSelectionChange)="handleSelectionChange($event)"
-      />
-    </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiSelectTreeComponent, isStandalone: true, selector: "ax-lookup-multi-select-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, filterKey: { classPropertyName: "filterKey", publicName: "filterKey", isSignal: true, isRequired: false, transformFunction: null }, highlightText: { classPropertyName: "highlightText", publicName: "highlightText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
+    @if (isEmpty()) {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
+          {{ '@acorex:common.general.no-result-found' | translate | async }}
+        </div>
+      }
+    } @else {
+      <div class="ax-lookup-tree">
+        @for (instance of treeInstances(); track instance.id) {
+          <ax-tree-view
+            [datasource]="instance.source"
+            selectMode="multiple"
+            [selectionBehavior]="selectionBehavior()"
+            [controlledSelection]="true"
+            [selectedIds]="selectedIds()"
+            [idField]="valueField()"
+            [titleField]="textField()"
+            [disabledField]="disabledField()"
+            [nodeTemplate]="nodeTemplate()"
+            [alternate]="alternate()"
+            [highlightText]="highlightText()"
+            (onSelectionChange)="handleSelectionChange($event)"
+          />
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "highlightText", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectTreeComponent, decorators: [{
             type: Component,
@@ -890,25 +1452,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ax-lookup-multi-select-tree',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [AXTreeViewComponent],
+                    imports: [AXTreeViewComponent, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
                     template: `
-    <div class="ax-lookup-tree">
-      <ax-tree-view
-        [datasource]="dataSource()"
-        selectMode="multiple"
-        [selectionBehavior]="selectionBehavior()"
-        [controlledSelection]="true"
-        [selectedIds]="selectedIds()"
-        [idField]="valueField()"
-        [titleField]="textField()"
-        [disabledField]="disabledField()"
-        [nodeTemplate]="nodeTemplate()"
-        (onSelectionChange)="handleSelectionChange($event)"
-      />
-    </div>
+    @if (isEmpty()) {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
+          {{ '@acorex:common.general.no-result-found' | translate | async }}
+        </div>
+      }
+    } @else {
+      <div class="ax-lookup-tree">
+        @for (instance of treeInstances(); track instance.id) {
+          <ax-tree-view
+            [datasource]="instance.source"
+            selectMode="multiple"
+            [selectionBehavior]="selectionBehavior()"
+            [controlledSelection]="true"
+            [selectedIds]="selectedIds()"
+            [idField]="valueField()"
+            [titleField]="textField()"
+            [disabledField]="disabledField()"
+            [nodeTemplate]="nodeTemplate()"
+            [alternate]="alternate()"
+            [highlightText]="highlightText()"
+            (onSelectionChange)="handleSelectionChange($event)"
+          />
+        }
+      </div>
+    }
   `,
                 }]
-        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], filterKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterKey", required: false }] }], highlightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightText", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
 
 /**
  * Internal mini component for the `multi-select` lookup mode:
@@ -941,11 +1517,11 @@ class AXLookupMultiSelectComponent extends AXLookupListViewBase {
         <div
           *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option-host ax-lookup-option"
+          class="ax-lookup-option-host ax-lookup-option-multiple"
           axListNavigationItem
           #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
-          [class.ax-lookup-option-host--check]="!!itemTemplate()"
+          [class.ax-lookup-option]="!itemTemplate()"
           [class.ax-state-alternate]="alternate() && i % 2 === 1"
           [class.ax-state-selected]="item != null && isSelected(item)"
           [class.ax-state-disabled]="item != null && isDisabled(item)"
@@ -956,17 +1532,21 @@ class AXLookupMultiSelectComponent extends AXLookupListViewBase {
           (onKeypress)="handleItemKeypress($event, item)"
         >
           @if (item != null) {
-            <input
-              type="checkbox"
+            <ax-check-box
               class="ax-lookup-checkbox"
-              tabindex="-1"
-              [checked]="isSelected(item)"
+              [tabIndex]="-1"
+              [value]="isSelected(item)"
               [disabled]="isDisabled(item)"
-            />
+            ></ax-check-box>
             @if (itemTemplate()) {
-              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate()!"
+                [ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
+              />
             } @else {
-              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
+              <span class="ax-lookup-option-text">
+                <ax-highlight-text [text]="getText(item)" [query]="highlightText()" />
+              </span>
             }
           } @else {
             <ng-container [ngTemplateOutlet]="loadingRow" />
@@ -982,7 +1562,7 @@ class AXLookupMultiSelectComponent extends AXLookupListViewBase {
         <span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
       }
     </ng-template>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i2.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i2.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "component", type: AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "component", type: AXHighlightTextComponent, selector: "ax-highlight-text", inputs: ["text", "query", "highlightDisabled", "highlightOptions"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectComponent, decorators: [{
             type: Component,
@@ -990,7 +1570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ax-lookup-multi-select',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule],
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule, AXCheckBoxComponent, AXHighlightTextComponent],
                     providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupMultiSelectComponent }],
                     template: `
     @if (isEmpty()) {
@@ -1015,11 +1595,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         <div
           *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option-host ax-lookup-option"
+          class="ax-lookup-option-host ax-lookup-option-multiple"
           axListNavigationItem
           #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
-          [class.ax-lookup-option-host--check]="!!itemTemplate()"
+          [class.ax-lookup-option]="!itemTemplate()"
           [class.ax-state-alternate]="alternate() && i % 2 === 1"
           [class.ax-state-selected]="item != null && isSelected(item)"
           [class.ax-state-disabled]="item != null && isDisabled(item)"
@@ -1030,17 +1610,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
           (onKeypress)="handleItemKeypress($event, item)"
         >
           @if (item != null) {
-            <input
-              type="checkbox"
+            <ax-check-box
               class="ax-lookup-checkbox"
-              tabindex="-1"
-              [checked]="isSelected(item)"
+              [tabIndex]="-1"
+              [value]="isSelected(item)"
               [disabled]="isDisabled(item)"
-            />
+            ></ax-check-box>
             @if (itemTemplate()) {
-              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+              <ng-container
+                [ngTemplateOutlet]="itemTemplate()!"
+                [ngTemplateOutletContext]="{ $implicit: item, highlightText: highlightText() }"
+              />
             } @else {
-              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
+              <span class="ax-lookup-option-text">
+                <ax-highlight-text [text]="getText(item)" [query]="highlightText()" />
+              </span>
             }
           } @else {
             <ng-container [ngTemplateOutlet]="loadingRow" />
@@ -1061,14 +1645,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }] });
 
 /**
- * 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.
  * - `multi-select` — a predefined list of options for multiple item selection (chips in the trigger).
- * - `drop-down-tree` — a predefined list rendered in a tree-like structure for single item selection.
- * - `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.
+ *   In multi modes, Backspace with an empty trigger input removes the last chip; repeated presses clear
+ *   the whole selection.
+ * - `drop-down-tree` — a tree-like structure for single item selection; when searchable, the trigger
+ *   input filters nested nodes as you type (on small screens the search field is inside the actionsheet).
+ * - `multi-select-tree` — a tree-like structure for multiple item selection; searchable the same way.
+ * - `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`.
@@ -1081,6 +1671,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 class AXLookupComponent extends NXValueComponent {
     #platform;
     #destroyRef;
+    /** Whether search filters the tree datasource instead of `AXDataSource`. */
+    #isTreeOnlySearchMode() {
+        const mode = this.mode();
+        return mode === 'drop-down-tree' || mode === 'multi-select-tree';
+    }
+    /**
+     * Applied tree search query. Set only from `#applyFilterNow` so opening a single-select
+     * with the selected label in the trigger does not filter the tree.
+     */
+    #treeFilterQuery;
+    #treeFilterEpoch;
+    /** Applied (debounced) search query used for result highlighting. */
+    #appliedSearchQuery;
+    /** Reused so closing/reopening the popup does not create a new AXDataSource (which would miss cache). */
+    #multiColumnTreeTableSource;
+    #multiColumnTreeTableKey;
+    #multiColumnTreeInput;
+    /**
+     * Tree callback results keyed by parent id. Survives popup remount so
+     * drop-down-tree / multi-select-tree do not refetch on every open.
+     */
+    #treeChildrenCache;
+    #document;
     #itemsCache;
     #isUserInteraction;
     #lastValue;
@@ -1089,6 +1702,8 @@ class AXLookupComponent extends NXValueComponent {
     #selectionInitialized;
     #filterApplied;
     #searchDebounce;
+    #searchEnterRevision;
+    #sheetSearchFocused;
     constructor() {
         super();
         this.#platform = inject(AXPlatform);
@@ -1104,13 +1719,14 @@ class AXLookupComponent extends NXValueComponent {
         this.mode = input('drop-down-list', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
         /**
-         * 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.
          */
         this.dataSource = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
         /**
-         * 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.
          */
         this.treeDataSource = input(undefined, /* @ts-ignore */
@@ -1132,20 +1748,36 @@ class AXLookupComponent extends NXValueComponent {
         this.disabledField = input('disabled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
         /**
-         * 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`).
          */
         this.columns = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * 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.
+         */
+        this.treeParentField = input('parentId', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeParentField" }] : /* istanbul ignore next */ []));
+        /**
+         * 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`.
+         */
+        this.hasChildrenField = input('hasChild', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasChildrenField" }] : /* istanbul ignore next */ []));
         /**
          * 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 all modes, including `drop-down-tree` and `multi-select-tree`.
+         * On small screens with `adaptivityEnabled`, search is typed in the actionsheet instead of the trigger.
          */
         this.searchable = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
         /**
          * When `true` (default), the popup list uses the alternate actionsheet presentation on small
-         * screens (`SM`). When `false`, the list always opens as an anchored dropdown.
+         * screens (`SM`). Searchable list modes then show a search field inside the sheet. When `false`,
+         * the list always opens as an anchored dropdown.
          */
         this.adaptivityEnabled = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "adaptivityEnabled" }] : /* istanbul ignore next */ []));
@@ -1156,13 +1788,14 @@ class AXLookupComponent extends NXValueComponent {
         ...(ngDevMode ? [{ debugName: "caption" }] : /* istanbul ignore next */ []));
         /**
          * When `true`, list rows use alternating background colors for easier scanning
-         * (`drop-down-list`, `multi-select`, and `multi-column` modes).
+         * (all lookup modes, including drop-down-tree and multi-select-tree).
          */
         this.alternate = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
         /**
          * Placeholder for the trigger search input when items are already selected
-         * (mainly useful in `multi-select`). Falls back to `placeholder` when the selection is empty.
+         * (mainly useful in `multi-select` / `multi-select-tree`), and for the in-sheet search field on small screens.
+         * Falls back to `placeholder` when the selection is empty on desktop.
          */
         this.searchPlaceholder = input('Search...', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
@@ -1202,7 +1835,15 @@ class AXLookupComponent extends NXValueComponent {
         this.treeSelectionBehavior = input('all', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "treeSelectionBehavior" }] : /* istanbul ignore next */ []));
         /**
-         * Custom template rendered for each item/node. Context: `$implicit` is the item.
+         * When `true` (default), matching characters in popup result items are highlighted
+         * while the user searches.
+         */
+        this.highlightSearch = input(true, { ...(ngDevMode ? { debugName: "highlightSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * Custom template rendered for each item/node. Context: `$implicit` is the item;
+         * `highlightText` is the active search query when result highlighting is enabled.
+         * Default option chrome (padding, typography, check icon) is not applied; only the
+         * template's styles are used. Selection and hover backgrounds remain on the row.
          */
         this.itemTemplate = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
@@ -1277,19 +1918,73 @@ class AXLookupComponent extends NXValueComponent {
         this.isMultiple = computed(() => this.mode() === 'multi-select' || this.mode() === 'multi-select-tree', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
         /** Whether the current mode renders a tree. */
-        this.isTreeMode = computed(() => this.mode() === 'drop-down-tree' || this.mode() === 'multi-select-tree', /* @ts-ignore */
+        this.isTreeMode = computed(() => {
+            const mode = this.mode();
+            return (mode === 'drop-down-tree' ||
+                mode === 'multi-select-tree' ||
+                (mode === 'multi-column-tree' && this.treeDataSource() != null));
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isTreeMode" }] : /* istanbul ignore next */ []));
-        /** Whether the trigger input is writable and filters as you type. */
-        this.isEditableTrigger = computed(() => {
-            if (!this.searchable() || this.readonly()) {
-                return false;
-            }
+        /** Whether the current mode can filter as you type (list, table, or tree). */
+        this.isListSearchMode = computed(() => {
             const mode = this.mode();
-            return mode === 'drop-down-list' || mode === 'multi-select' || mode === 'multi-column';
+            return (mode === 'drop-down-list' ||
+                mode === 'multi-select' ||
+                mode === 'drop-down-tree' ||
+                mode === 'multi-select-tree' ||
+                mode === 'multi-column' ||
+                mode === 'multi-column-tree');
         }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isListSearchMode" }] : /* istanbul ignore next */ []));
+        /** Whether the trigger input is writable and filters as you type (desktop only). */
+        this.isEditableTrigger = computed(() => this.searchable() && !this.readonly() && !this.isActionsheetStyle() && this.isListSearchMode(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isEditableTrigger" }] : /* istanbul ignore next */ []));
+        /** Whether search is typed in the actionsheet instead of the trigger. */
+        this.isSheetSearchEnabled = computed(() => this.searchable() && !this.readonly() && this.isActionsheetStyle() && this.isListSearchMode(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isSheetSearchEnabled" }] : /* istanbul ignore next */ []));
+        /** Query typed in the actionsheet search field (independent of the trigger display text). */
+        this.sheetSearchText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheetSearchText" }] : /* istanbul ignore next */ []));
+        /**
+         * Applied tree search query. Set only from `#applyFilterNow` so opening a single-select
+         * with the selected label in the trigger does not filter the tree.
+         */
+        this.#treeFilterQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#treeFilterQuery" }] : /* istanbul ignore next */ []));
+        this.#treeFilterEpoch = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#treeFilterEpoch" }] : /* istanbul ignore next */ []));
+        /** Applied (debounced) search query used for result highlighting. */
+        this.#appliedSearchQuery = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#appliedSearchQuery" }] : /* istanbul ignore next */ []));
+        /** Increments on every tree filter apply so the tree view remounts with a new instance. */
+        this.treeFilterKey = computed(() => String(this.#treeFilterEpoch()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeFilterKey" }] : /* istanbul ignore next */ []));
+        /** Query passed to result-item highlighting (empty when disabled). */
+        this.highlightQuery = computed(() => (this.highlightSearch() ? this.#appliedSearchQuery() : ''), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightQuery" }] : /* istanbul ignore next */ []));
         /** The datasource for list-based modes; plain arrays are converted. */
         this.resolvedDataSource = computed(() => {
+            const tree = this.treeDataSource();
+            if (this.mode() === 'multi-column-tree' && tree) {
+                const key = `${this.valueField()}|${this.textField()}|${this.treeParentField()}|${this.hasChildrenField()}`;
+                if (this.#multiColumnTreeTableSource &&
+                    this.#multiColumnTreeInput === tree &&
+                    this.#multiColumnTreeTableKey === key) {
+                    return this.#multiColumnTreeTableSource;
+                }
+                const cachedTree = Array.isArray(tree)
+                    ? tree
+                    : (nodeId) => this.#loadCachedTreeNodes(tree, nodeId);
+                this.#multiColumnTreeInput = tree;
+                this.#multiColumnTreeTableKey = key;
+                this.#multiColumnTreeTableSource = createLookupTreeTableDataSource(cachedTree, {
+                    valueField: this.valueField(),
+                    textField: this.textField(),
+                    parentField: this.treeParentField(),
+                    hasChildrenField: this.hasChildrenField(),
+                });
+                return this.#multiColumnTreeTableSource;
+            }
             const source = this.dataSource();
             if (!source) {
                 return convertArrayToDataSource([], { key: this.valueField(), pageSize: 20 });
@@ -1299,6 +1994,28 @@ class AXLookupComponent extends NXValueComponent {
                 : source;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "resolvedDataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * Tree callback results keyed by parent id. Survives popup remount so
+         * drop-down-tree / multi-select-tree do not refetch on every open.
+         */
+        this.#treeChildrenCache = new WeakMap();
+        this.resolvedTreeDataSource = computed(() => {
+            this.#treeFilterEpoch();
+            const source = this.treeDataSource();
+            const query = this.#treeFilterQuery();
+            const textField = this.textField();
+            if (!source) {
+                return [];
+            }
+            if (Array.isArray(source)) {
+                return query ? filterTreeNodes(source, textField, query) : cloneLookupTreeNodes(source);
+            }
+            if (!query) {
+                return (nodeId) => this.#loadCachedTreeNodes(source, nodeId);
+            }
+            return (nodeId) => this.#loadFilteredCachedTreeNodes(source, nodeId, query);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedTreeDataSource" }] : /* istanbul ignore next */ []));
         /** The current selection normalized to an array. */
         this.selectedValues = computed(() => {
             const value = this.value();
@@ -1321,7 +2038,7 @@ class AXLookupComponent extends NXValueComponent {
          * Text typed in the editable trigger input.
          * Multi-select starts empty; single modes sync from the selected display text.
          */
-        this.searchText = linkedSignal(() => (this.mode() === 'multi-select' || this.mode() === 'multi-select-tree' ? '' : this.displayText()), /* @ts-ignore */
+        this.searchText = linkedSignal(() => (this.isMultiple() ? '' : this.displayText()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
         /**
          * Whether the trigger should render `selectedTemplate` instead of the plain input text.
@@ -1338,12 +2055,34 @@ class AXLookupComponent extends NXValueComponent {
             return !this.expanded() && this.searchText() === this.displayText();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showSelectedTemplate" }] : /* istanbul ignore next */ []));
+        /** Placeholder for the editable trigger search input. */
+        this.triggerSearchPlaceholder = computed(() => {
+            if (this.isActionsheetStyle()) {
+                return this.isMultiple() && this.selectedItems().length > 0 ? '' : this.placeholder();
+            }
+            if (this.isMultiple() && this.selectedItems().length > 0) {
+                return this.searchPlaceholder();
+            }
+            return this.placeholder();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "triggerSearchPlaceholder" }] : /* istanbul ignore next */ []));
         this.popoverRef = viewChild(AXPopoverComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
+        this.originRef = viewChild('origin', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "originRef" }] : /* istanbul ignore next */ []));
+        this.popupRef = viewChild('popup', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupRef" }] : /* istanbul ignore next */ []));
         this.triggerSearchInput = viewChild('triggerSearchInput', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerSearchInput" }] : /* istanbul ignore next */ []));
+        this.#document = inject(DOCUMENT);
         this.listView = viewChild(AXLookupListViewBase, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listView" }] : /* istanbul ignore next */ []));
+        this.dropDownTreeView = viewChild(AXLookupDropDownTreeComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dropDownTreeView" }] : /* istanbul ignore next */ []));
+        this.multiSelectTreeView = viewChild(AXLookupMultiSelectTreeComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "multiSelectTreeView" }] : /* istanbul ignore next */ []));
+        this.sheetSearchRef = viewChild('sheetSearch', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sheetSearchRef" }] : /* istanbul ignore next */ []));
         this.#itemsCache = new Map();
         this.#isUserInteraction = false;
         this.#lastValue = undefined;
@@ -1351,14 +2090,8 @@ class AXLookupComponent extends NXValueComponent {
         this.#resolveRevision = 0;
         this.#selectionInitialized = false;
         this.#filterApplied = false;
-        /** Placeholder for the editable trigger search input. */
-        this.triggerSearchPlaceholder = computed(() => {
-            if (this.mode() === 'multi-select' && this.selectedItems().length > 0) {
-                return this.searchPlaceholder();
-            }
-            return this.placeholder();
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "triggerSearchPlaceholder" }] : /* istanbul ignore next */ []));
+        this.#searchEnterRevision = 0;
+        this.#sheetSearchFocused = false;
         effect(() => this.#emitValueChanged(this.value()));
         effect(() => this.#emitOpenedOrClosed(this.expanded()));
         effect(() => {
@@ -1403,6 +2136,13 @@ class AXLookupComponent extends NXValueComponent {
                 }
             });
         });
+        afterRenderEffect(() => {
+            if (!this.expanded()) {
+                this.#sheetSearchFocused = false;
+                return;
+            }
+            this.#tryFocusSheetSearch();
+        });
     }
     #syncActionsheetStyle() {
         this.isActionsheetStyle.set(this.adaptivityEnabled() && this.#platform.is('SM'));
@@ -1432,7 +2172,7 @@ class AXLookupComponent extends NXValueComponent {
         if (!this.expanded()) {
             return;
         }
-        queueMicrotask(() => this.focusListFirst());
+        queueMicrotask(() => this.#focusPopupSearchOrList());
     }
     /**
      * Focuses the lookup trigger input.
@@ -1445,6 +2185,8 @@ class AXLookupComponent extends NXValueComponent {
     }
     /**
      * Handles keyboard interaction on the trigger input.
+     * In multi modes, Backspace with an empty trigger input removes the last chip; repeated presses
+     * clear the whole selection.
      */
     onTriggerKeydown(e) {
         if (this.disabled() || this.readonly()) {
@@ -1454,19 +2196,193 @@ class AXLookupComponent extends NXValueComponent {
             this.close();
             return;
         }
+        if (e.key === 'Backspace' && this.#removeLastChipOnBackspace(e)) {
+            return;
+        }
         if (e.key === 'ArrowDown') {
             e.preventDefault();
             this.expanded.set(true);
-            queueMicrotask(() => this.focusListFirst());
+            queueMicrotask(() => this.#focusPopupSearchOrList());
+            return;
+        }
+        if (e.key === 'Enter' && this.isEditableTrigger()) {
+            this.#onSearchEnter(e);
             return;
         }
         if (!this.isEditableTrigger() && (e.key === 'Enter' || e.key === ' ')) {
             e.preventDefault();
             this.expanded.update((open) => !open);
             if (this.expanded()) {
-                queueMicrotask(() => this.focusListFirst());
+                queueMicrotask(() => this.#focusPopupSearchOrList());
+            }
+        }
+    }
+    /** Filters the datasource from the actionsheet search field and handles Enter with no matches. */
+    onSheetSearchKeydown(e) {
+        const event = e.nativeEvent;
+        if (!event || event.key !== 'Enter') {
+            return;
+        }
+        this.#onSearchEnter(event);
+    }
+    /**
+     * Enter in search never submits the surrounding form.
+     * - No matches: single-select value is cleared (`null`).
+     * - Exactly one match: that item is selected (no list navigation required).
+     * - Multiple matches: nothing is selected.
+     */
+    #onSearchEnter(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        void this.#commitOrClearFromSearch();
+    }
+    async #commitOrClearFromSearch() {
+        const revision = ++this.#searchEnterRevision;
+        this.#flushPendingFilter();
+        if (this.#isTreeOnlySearchMode()) {
+            const nodes = await this.#resolvedFilteredTreeNodes();
+            if (revision !== this.#searchEnterRevision) {
+                return;
+            }
+            const items = this.#enabledTreeItems(nodes);
+            if (items.length === 0) {
+                if (this.#currentSearchQuery() && !this.isMultiple()) {
+                    this.reset(true);
+                    this.close();
+                }
+                return;
+            }
+            if (items.length !== 1) {
+                return;
+            }
+            this.#commitSearchSelection(items);
+            return;
+        }
+        const source = this.resolvedDataSource();
+        if (source.isLoading) {
+            await this.#whenSourceIdle(source);
+            if (revision !== this.#searchEnterRevision) {
+                return;
+            }
+        }
+        if (this.#hasNoSearchMatches()) {
+            if (this.#currentSearchQuery() && !this.isMultiple()) {
+                this.reset(true);
+                this.close();
+            }
+            return;
+        }
+        if (this.#getSearchMatchCount() !== 1) {
+            return;
+        }
+        const item = this.#pickFirstMatch();
+        if (!item) {
+            return;
+        }
+        this.#commitSearchSelection([item]);
+    }
+    #commitSearchSelection(items) {
+        if (items.length === 0) {
+            if (this.#currentSearchQuery() && !this.isMultiple()) {
+                this.reset(true);
+                this.close();
             }
+            return;
+        }
+        if (!this.#isTypedFilterQuery()) {
+            return;
+        }
+        const item = this.#pickFirstFromItems(items);
+        if (!item) {
+            return;
+        }
+        const event = { item, value: item[this.valueField()] };
+        if (this.isMultiple()) {
+            this.handleMultiToggle(event);
+        }
+        else {
+            this.handleSinglePick(event);
+        }
+    }
+    async #resolvedFilteredTreeNodes() {
+        const source = this.resolvedTreeDataSource();
+        if (Array.isArray(source)) {
+            return source;
+        }
+        return (await source()) ?? [];
+    }
+    #enabledTreeItems(nodes) {
+        const disabledField = this.disabledField();
+        return flattenTreeNodes(nodes).filter((item) => !item[disabledField]);
+    }
+    #pickFirstMatch() {
+        const disabledField = this.disabledField();
+        const source = this.resolvedDataSource();
+        const items = (source.cachedItems.length ? source.cachedItems : source.items).filter((item) => item != null && !item[disabledField]);
+        return this.#pickFirstFromItems(items);
+    }
+    #pickFirstFromItems(items) {
+        if (items.length === 0) {
+            return null;
+        }
+        const query = this.#currentSearchQuery().toLowerCase();
+        if (!query) {
+            return items[0];
+        }
+        const textOf = (item) => String(item?.[this.textField()] ?? '').trim().toLowerCase();
+        return items.find((item) => textOf(item) === query) ?? items.find((item) => textOf(item).includes(query)) ?? items[0];
+    }
+    #whenSourceIdle(source) {
+        if (!source.isLoading) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            const sub = source.onLoadingChanged.subscribe((loading) => {
+                if (!loading) {
+                    sub.unsubscribe();
+                    resolve();
+                }
+            });
+        });
+    }
+    #flushPendingFilter() {
+        if (!this.#searchDebounce) {
+            return;
+        }
+        clearTimeout(this.#searchDebounce);
+        this.#searchDebounce = undefined;
+        this.#applyFilterNow(this.#currentSearchQuery());
+    }
+    #currentSearchQuery() {
+        if (this.isSheetSearchEnabled()) {
+            return (this.sheetSearchText() || this.#sheetSearchInputValue()).trim();
+        }
+        return this.searchText().trim();
+    }
+    #isTypedFilterQuery() {
+        const query = this.#currentSearchQuery();
+        if (!query) {
+            return false;
+        }
+        if (!this.isSheetSearchEnabled() && !this.isMultiple()) {
+            return query.toLowerCase() !== this.displayText().trim().toLowerCase();
+        }
+        return true;
+    }
+    #hasNoSearchMatches() {
+        return this.#getSearchMatchCount() === 0;
+    }
+    #getSearchMatchCount() {
+        const list = this.listView();
+        if (list) {
+            return list.matchCount();
+        }
+        const source = this.resolvedDataSource();
+        if (source.isLoading) {
+            return -1;
         }
+        return source.totalCount;
     }
     /** Blocks typing when the trigger is not editable (keeps Tab / keyboard open working). */
     onBeforeInput(event) {
@@ -1475,9 +2391,13 @@ class AXLookupComponent extends NXValueComponent {
         }
     }
     /**
-     * Returns focus to the trigger input when list navigation requests it.
+     * Returns focus to the search field when list navigation requests it.
      */
     onListNavigateOut(_reason) {
+        if (this.isSheetSearchEnabled()) {
+            this.sheetSearchRef()?.focus();
+            return;
+        }
         this.triggerSearchInput()?.nativeElement.focus();
     }
     focusListFirst() {
@@ -1500,11 +2420,17 @@ class AXLookupComponent extends NXValueComponent {
     onPopoverClosed() {
         this.expanded.set(false);
         this.searchText.set(this.isMultiple() ? '' : this.displayText());
+        this.sheetSearchText.set('');
+        this.#appliedSearchQuery.set('');
+        this.#treeFilterQuery.set('');
+        this.#treeFilterEpoch.update((value) => value + 1);
         if (this.#filterApplied) {
             this.#filterApplied = false;
-            const source = this.resolvedDataSource();
-            source.clearFilter();
-            source.refresh();
+            if (!this.#isTreeOnlySearchMode()) {
+                const source = this.resolvedDataSource();
+                source.clearFilter();
+                source.refresh();
+            }
         }
     }
     /**
@@ -1539,8 +2465,14 @@ class AXLookupComponent extends NXValueComponent {
         this.expanded.set(true);
         this.#applyFilterDebounced(text);
     }
+    /** Filters the datasource from the actionsheet search field (reads the input so delayed ngModel cannot block typing). */
+    onSheetSearchInput() {
+        const query = this.#sheetSearchInputValue();
+        this.sheetSearchText.set(query);
+        this.#applyFilterDebounced(query);
+    }
     /**
-     * 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.
      */
     handleSinglePick(e) {
         this.#emitItemClick(e.item);
@@ -1567,7 +2499,10 @@ class AXLookupComponent extends NXValueComponent {
         const next = exists ? current.filter((v) => !(v == e.value)) : [...current, e.value];
         this.#isUserInteraction = true;
         this.value.set(next);
-        if (this.isEditableTrigger() && this.searchText()) {
+        if (this.isSheetSearchEnabled() && this.sheetSearchText()) {
+            this.#clearSheetSearch();
+        }
+        else if (this.isEditableTrigger() && this.searchText()) {
             this.searchText.set('');
             this.#applyFilterDebounced('');
         }
@@ -1586,6 +2521,13 @@ class AXLookupComponent extends NXValueComponent {
         }
         this.#isUserInteraction = true;
         this.value.set([...e.ids]);
+        if (this.isSheetSearchEnabled() && this.sheetSearchText()) {
+            this.#clearSheetSearch();
+        }
+        else if (this.isEditableTrigger() && this.searchText()) {
+            this.searchText.set('');
+            this.#applyFilterDebounced('');
+        }
     }
     /** Forwards native focus from the trigger input. */
     emitOnFocus(e) {
@@ -1602,6 +2544,38 @@ class AXLookupComponent extends NXValueComponent {
             htmlElement: this.nativeElement,
             nativeEvent: e,
         });
+        this.#scheduleCloseOnTriggerBlur(e);
+    }
+    /**
+     * Closes the popup when the trigger input loses focus, unless focus moved into the
+     * popover panel or another part of the trigger (e.g. sheet search or list navigation).
+     */
+    #scheduleCloseOnTriggerBlur(e) {
+        if (!this.expanded()) {
+            return;
+        }
+        const related = e.relatedTarget;
+        if (related instanceof Node && this.#isFocusWithinPopupOrTrigger(related)) {
+            return;
+        }
+        queueMicrotask(() => {
+            if (!this.expanded()) {
+                return;
+            }
+            const active = this.#document.activeElement;
+            if (active instanceof Node && this.#isFocusWithinPopupOrTrigger(active)) {
+                return;
+            }
+            this.close();
+        });
+    }
+    #isFocusWithinPopupOrTrigger(node) {
+        const popup = this.popupRef()?.nativeElement;
+        if (popup?.contains(node)) {
+            return true;
+        }
+        const origin = this.originRef()?.nativeElement;
+        return Boolean(origin?.contains(node));
     }
     #emitItemClick(item) {
         this.onItemClick.emit({
@@ -1631,6 +2605,24 @@ class AXLookupComponent extends NXValueComponent {
         this.#isUserInteraction = true;
         this.value.set(this.selectedValues().filter((v) => !(v == value)));
     }
+    /** Removes the last chip when Backspace is pressed with an empty trigger input (multi modes). */
+    #removeLastChipOnBackspace(event) {
+        if (!this.isMultiple() || !this.#isTriggerInputEmpty(event)) {
+            return false;
+        }
+        const items = this.selectedItems();
+        if (items.length === 0) {
+            return false;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.removeChip(event, items[items.length - 1]);
+        return true;
+    }
+    #isTriggerInputEmpty(event) {
+        const input = event.target instanceof HTMLInputElement ? event.target : this.triggerSearchInput()?.nativeElement;
+        return input ? input.value.length === 0 : !this.searchText();
+    }
     /**
      * Seeds the item cache with known items so matching `value` keys resolve without `byKey`.
      * Useful after an async parent-entity load when `valueItems` is not bound.
@@ -1663,26 +2655,130 @@ class AXLookupComponent extends NXValueComponent {
         }
         this.#isUserInteraction = isUserInteraction;
         this.value.set(next);
-        if (this.isEditableTrigger() && this.searchText()) {
+        if (this.isSheetSearchEnabled() && this.sheetSearchText()) {
+            this.#clearSheetSearch();
+        }
+        else if (this.isEditableTrigger() && this.searchText()) {
             this.searchText.set('');
             this.#applyFilterDebounced('');
         }
     }
+    #clearSheetSearch() {
+        this.sheetSearchText.set('');
+        this.sheetSearchRef()?.commitValue('', false);
+        this.#applyFilterDebounced('');
+    }
+    #sheetSearchInputValue() {
+        return this.sheetSearchRef()?.getHostElement()?.querySelector('input')?.value ?? '';
+    }
+    #tryFocusSheetSearch() {
+        if (!this.isSheetSearchEnabled() || this.#sheetSearchFocused) {
+            return;
+        }
+        const search = this.sheetSearchRef();
+        if (!search) {
+            return;
+        }
+        this.#sheetSearchFocused = true;
+        search.focus();
+    }
+    #focusPopupSearchOrList() {
+        if (this.isSheetSearchEnabled()) {
+            this.#tryFocusSheetSearch();
+            return;
+        }
+        this.focusListFirst();
+    }
+    #loadCachedTreeNodes(source, nodeId) {
+        let byParent = this.#treeChildrenCache.get(source);
+        if (!byParent) {
+            byParent = new Map();
+            this.#treeChildrenCache.set(source, byParent);
+        }
+        const key = nodeId ?? '';
+        const cached = byParent.get(key);
+        if (cached) {
+            return cached;
+        }
+        const request = Promise.resolve(source(nodeId)).then((nodes) => nodes ?? [], (error) => {
+            byParent.delete(key);
+            throw error;
+        });
+        byParent.set(key, request);
+        return request;
+    }
+    #nodeMayHaveChildren(node) {
+        const raw = node['children'];
+        if (Array.isArray(raw) && raw.length > 0) {
+            return true;
+        }
+        const count = node['childrenCount'];
+        if (typeof count === 'number' && count > 0) {
+            return true;
+        }
+        return node['hasChild'] === true || node['hasChildren'] === true;
+    }
+    /**
+     * Builds a nested tree for search by loading lazy children (using the existing cache)
+     * so a query can match sub-items that have not been expanded yet.
+     */
+    async #hydrateTreeChildrenForSearch(source, nodes, visited = new Set()) {
+        const valueField = this.valueField();
+        return Promise.all(nodes.map(async (node) => {
+            const raw = node['children'];
+            const nested = Array.isArray(raw) && raw.length > 0 ? raw : undefined;
+            if (nested) {
+                const children = await this.#hydrateTreeChildrenForSearch(source, nested, visited);
+                return { ...node, children };
+            }
+            const id = String(node[valueField] ?? '');
+            if (!id || !this.#nodeMayHaveChildren(node) || visited.has(id)) {
+                return node;
+            }
+            visited.add(id);
+            const loaded = await this.#loadCachedTreeNodes(source, id);
+            const children = await this.#hydrateTreeChildrenForSearch(source, loaded, visited);
+            return { ...node, children };
+        }));
+    }
+    async #loadFilteredCachedTreeNodes(source, nodeId, query) {
+        const nodes = await this.#loadCachedTreeNodes(source, nodeId);
+        const hydrated = await this.#hydrateTreeChildrenForSearch(source, nodes);
+        return filterTreeNodes(hydrated, this.textField(), query);
+    }
+    #applyFilterNow(text) {
+        const query = text?.trim() ?? '';
+        this.#appliedSearchQuery.set(query);
+        if (this.#isTreeOnlySearchMode()) {
+            this.#treeFilterQuery.set(query);
+            this.#treeFilterEpoch.update((value) => value + 1);
+            this.#filterApplied = query.length > 0;
+            return;
+        }
+        const source = this.resolvedDataSource();
+        if (query) {
+            source.filter({ field: this.textField(), value: query, operator: { type: 'contains' } });
+            this.#filterApplied = true;
+        }
+        else {
+            source.clearFilter();
+        }
+        source.refresh();
+    }
     #applyFilterDebounced(text) {
         if (this.#searchDebounce) {
             clearTimeout(this.#searchDebounce);
+            this.#searchDebounce = undefined;
+        }
+        const query = text?.trim() ?? '';
+        // Restore the full tree immediately when the query is cleared.
+        if (!query) {
+            this.#applyFilterNow('');
+            return;
         }
         this.#searchDebounce = setTimeout(() => {
-            const source = this.resolvedDataSource();
-            const query = text?.trim() ?? '';
-            if (query) {
-                source.filter({ field: this.textField(), value: query, operator: { type: 'contains' } });
-                this.#filterApplied = true;
-            }
-            else {
-                source.clearFilter();
-            }
-            source.refresh();
+            this.#searchDebounce = undefined;
+            this.#applyFilterNow(text);
         }, 300);
     }
     async #resolveSelectedItems(values) {
@@ -1698,7 +2794,7 @@ class AXLookupComponent extends NXValueComponent {
                 component: this,
                 htmlElement: this.nativeElement,
                 isUserInteraction: this.#isUserInteraction,
-                items,
+                items: items,
                 value: this.value(),
             });
         }
@@ -1810,12 +2906,12 @@ class AXLookupComponent extends NXValueComponent {
         expanded ? this.onOpened.emit(event) : this.onClosed.emit(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupComponent, isStandalone: true, selector: "ax-lookup", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, treeDataSource: { classPropertyName: "treeDataSource", publicName: "treeDataSource", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, treeSelectionBehavior: { classPropertyName: "treeSelectionBehavior", publicName: "treeSelectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onSelectionChanged: "onSelectionChanged", onFocus: "onFocus", onBlur: "onBlur", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onOpened: "onOpened", onClosed: "onClosed" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupComponent, isStandalone: true, selector: "ax-lookup", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, treeDataSource: { classPropertyName: "treeDataSource", publicName: "treeDataSource", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, treeParentField: { classPropertyName: "treeParentField", publicName: "treeParentField", isSignal: true, isRequired: false, transformFunction: null }, hasChildrenField: { classPropertyName: "hasChildrenField", publicName: "hasChildrenField", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, adaptivityEnabled: { classPropertyName: "adaptivityEnabled", publicName: "adaptivityEnabled", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, alternate: { classPropertyName: "alternate", publicName: "alternate", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleItems: { classPropertyName: "maxVisibleItems", publicName: "maxVisibleItems", isSignal: true, isRequired: false, transformFunction: null }, treeSelectionBehavior: { classPropertyName: "treeSelectionBehavior", publicName: "treeSelectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, highlightSearch: { classPropertyName: "highlightSearch", publicName: "highlightSearch", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectedTemplate: { classPropertyName: "selectedTemplate", publicName: "selectedTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, loadingTemplate: { classPropertyName: "loadingTemplate", publicName: "loadingTemplate", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueItems: { classPropertyName: "valueItems", publicName: "valueItems", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onSelectionChanged: "onSelectionChanged", onFocus: "onFocus", onBlur: "onBlur", onItemClick: "onItemClick", onItemSelected: "onItemSelected", onOpened: "onOpened", onClosed: "onClosed" }, providers: [
             { provide: AXComponent, useExisting: AXLookupComponent },
             { provide: AXClearableComponent, useExisting: AXLookupComponent },
             { provide: AXClosableComponent, useExisting: AXLookupComponent },
             { provide: AXValuableComponent, useExisting: AXLookupComponent },
-        ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "triggerSearchInput", first: true, predicate: ["triggerSearchInput"], descendants: true, isSignal: true }, { propertyName: "listView", first: true, predicate: AXLookupListViewBase, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n  [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n  (click)=\"onTriggerClick()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  @if (isMultiple()) {\n    <div class=\"ax-lookup-chips\">\n      @for (item of selectedItems(); track trackSelectedKey(item)) {\n        <ax-chips class=\"ax-sm\" color=\"primary\" look=\"twotone\" [text]=\"selectedTemplate() ? '' : getItemText(item)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input ax-lookup-trigger-search\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [placeholder]=\"triggerSearchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  } @else {\n    <div class=\"ax-lookup-value\">\n      @if (showSelectedTemplate()) {\n        <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n          <ng-container\n            [ngTemplateOutlet]=\"selectedTemplate()!\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n          />\n        </div>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  }\n\n  @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n  >\n    <span\n      class=\"ax-icon\"\n      [class.ax-icon-chevron-down]=\"!expanded()\"\n      [class.ax-icon-chevron-up]=\"expanded()\"\n    ></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"'clickOut'\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div class=\"ax-lookup-popup\" [class.ax-is-actionsheet]=\"isActionsheetStyle()\" [class.ax-is-alternate]=\"alternate()\" (keydown.escape)=\"close()\">\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n        <ax-close-button [icon]=\"isMultiple() ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @switch (mode()) {\n        @case ('drop-down-list') {\n          <ax-lookup-drop-down-list\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            (itemClick)=\"handleSinglePick($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('multi-select') {\n          <ax-lookup-multi-select\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            (itemClick)=\"handleMultiToggle($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('drop-down-tree') {\n          <ax-lookup-drop-down-tree\n            [dataSource]=\"treeDataSource()!\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n        @case ('multi-select-tree') {\n          <ax-lookup-multi-select-tree\n            [dataSource]=\"treeDataSource()!\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [selectionBehavior]=\"treeSelectionBehavior()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            (selectionChange)=\"handleTreeSelectionChange($event)\"\n          />\n        }\n        @case ('multi-column') {\n          <ax-lookup-multi-column\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [columns]=\"columns()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{box-sizing:border-box;display:flex;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;accent-color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{justify-content:space-between}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-lookup-option-host.ax-state-selected .ax-lookup-option-text,.ax-lookup-option-host.ax-state-selected .ax-lookup-option-check,.ax-lookup-option-host.ax-state-selected ax-icon{color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))!important}ax-lookup-multi-column,.ax-lookup-multi-column{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,.ax-lookup-multi-column) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,.ax-lookup-multi-column) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,.ax-lookup-multi-column) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,.ax-lookup-multi-column) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,.ax-lookup-multi-column) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;padding:calc(var(--spacing, .25rem) * 2)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXLookupDropDownListComponent, selector: "ax-lookup-drop-down-list" }, { kind: "component", type: AXLookupMultiSelectComponent, selector: "ax-lookup-multi-select" }, { kind: "component", type: AXLookupDropDownTreeComponent, selector: "ax-lookup-drop-down-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "nodeTemplate"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiSelectTreeComponent, selector: "ax-lookup-multi-select-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "selectionBehavior", "nodeTemplate"], outputs: ["selectionChange"] }, { kind: "component", type: AXLookupMultiColumnComponent, selector: "ax-lookup-multi-column", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate"], outputs: ["itemClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "originRef", first: true, predicate: ["origin"], descendants: true, isSignal: true }, { propertyName: "popupRef", first: true, predicate: ["popup"], descendants: true, isSignal: true }, { propertyName: "triggerSearchInput", first: true, predicate: ["triggerSearchInput"], descendants: true, isSignal: true }, { propertyName: "listView", first: true, predicate: AXLookupListViewBase, descendants: true, isSignal: true }, { propertyName: "dropDownTreeView", first: true, predicate: AXLookupDropDownTreeComponent, descendants: true, isSignal: true }, { propertyName: "multiSelectTreeView", first: true, predicate: AXLookupMultiSelectTreeComponent, descendants: true, isSignal: true }, { propertyName: "sheetSearchRef", first: true, predicate: ["sheetSearch"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n  [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n  (click)=\"onTriggerClick()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  @if (isMultiple()) {\n    <div class=\"ax-lookup-chips\">\n      @for (item of selectedItems(); track trackSelectedKey(item)) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : getItemText(item)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input ax-lookup-trigger-search\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [placeholder]=\"triggerSearchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  } @else {\n    <div class=\"ax-lookup-value\">\n      @if (showSelectedTemplate()) {\n        <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n          <ng-container\n            [ngTemplateOutlet]=\"selectedTemplate()!\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n          />\n        </div>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  }\n\n  @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n  >\n    <span\n      class=\"ax-icon\"\n      [class.ax-icon-chevron-down]=\"!expanded()\"\n      [class.ax-icon-chevron-up]=\"expanded()\"\n    ></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-lookup-popup\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    [class.ax-is-alternate]=\"alternate()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n        @if (isMultiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-lookup-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @switch (mode()) {\n        @case ('drop-down-list') {\n          <ax-lookup-drop-down-list\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('multi-select') {\n          <ax-lookup-multi-select\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleMultiToggle($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('drop-down-tree') {\n          <ax-lookup-drop-down-tree\n            [dataSource]=\"resolvedTreeDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [filterKey]=\"treeFilterKey()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n        @case ('multi-select-tree') {\n          <ax-lookup-multi-select-tree\n            [dataSource]=\"resolvedTreeDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [selectionBehavior]=\"treeSelectionBehavior()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [filterKey]=\"treeFilterKey()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (selectionChange)=\"handleTreeSelectionChange($event)\"\n          />\n        }\n        @case ('multi-column') {\n          <ax-lookup-multi-column\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [columns]=\"columns()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n        @case ('multi-column-tree') {\n          <ax-lookup-multi-column-tree\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [parentField]=\"treeParentField()\"\n            [hasChildrenField]=\"hasChildrenField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [columns]=\"columns()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{--ax-comp-lookup-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-lookup-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-lookup-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-lookup-highlight-bg-color));color:rgb(var(--ax-comp-lookup-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-list,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select,.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column-tree{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;height:auto!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-viewport{min-height:calc(var(--spacing, .25rem) * 0);flex:1;height:auto!important;max-height:none!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-tree{max-height:none;min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-empty{display:flex;flex:1;align-items:center;justify-content:center}:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup .ax-lookup-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow-x:hidden}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host.ax-lookup-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-option-host.ax-lookup-option-multiple:not(.ax-lookup-option){padding-inline:calc(var(--spacing, .25rem) * 3)}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-lookup-option-multiple{justify-content:flex-start}.ax-lookup-option .ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option .ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;padding:calc(var(--spacing, .25rem) * 2)}.ax-lookup-tree .ax-tree-view-node{margin-block:0;border-radius:0}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXChipsComponent, selector: "ax-chips", inputs: ["tabIndex", "color", "look", "text"], outputs: ["textChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i1$1.AXDecoratorCloseButtonComponent, selector: "ax-close-button", inputs: ["closeAll", "icon"] }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXLookupDropDownListComponent, selector: "ax-lookup-drop-down-list" }, { kind: "component", type: AXLookupMultiSelectComponent, selector: "ax-lookup-multi-select" }, { kind: "component", type: AXLookupDropDownTreeComponent, selector: "ax-lookup-drop-down-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "nodeTemplate", "emptyTemplate", "alternate", "filterKey", "highlightText"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiSelectTreeComponent, selector: "ax-lookup-multi-select-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "selectionBehavior", "nodeTemplate", "emptyTemplate", "alternate", "filterKey", "highlightText"], outputs: ["selectionChange"] }, { kind: "component", type: AXLookupMultiColumnComponent, selector: "ax-lookup-multi-column", inputs: ["dataSource", "valueField", "textField", "disabledField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate", "highlightText"], outputs: ["itemClick"] }, { kind: "component", type: AXLookupMultiColumnTreeComponent, selector: "ax-lookup-multi-column-tree", inputs: ["dataSource", "valueField", "textField", "disabledField", "parentField", "hasChildrenField", "selectedValues", "itemHeight", "maxVisibleItems", "columns", "itemTemplate", "emptyTemplate", "loadingTemplate", "alternate", "highlightText"], outputs: ["itemClick"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupComponent, decorators: [{
             type: Component,
@@ -1823,21 +2919,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         NgTemplateOutlet,
                         AsyncPipe,
                         AXTranslatorPipe,
+                        AXButtonComponent,
                         AXChipsComponent,
                         AXDecoratorModule,
                         AXPopoverComponent,
+                        AXSearchBoxComponent,
                         AXLookupDropDownListComponent,
                         AXLookupMultiSelectComponent,
                         AXLookupDropDownTreeComponent,
                         AXLookupMultiSelectTreeComponent,
                         AXLookupMultiColumnComponent,
+                        AXLookupMultiColumnTreeComponent,
                     ], providers: [
                         { provide: AXComponent, useExisting: AXLookupComponent },
                         { provide: AXClearableComponent, useExisting: AXLookupComponent },
                         { provide: AXClosableComponent, useExisting: AXLookupComponent },
                         { provide: AXValuableComponent, useExisting: AXLookupComponent },
-                    ], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n  [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n  (click)=\"onTriggerClick()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  @if (isMultiple()) {\n    <div class=\"ax-lookup-chips\">\n      @for (item of selectedItems(); track trackSelectedKey(item)) {\n        <ax-chips class=\"ax-sm\" color=\"primary\" look=\"twotone\" [text]=\"selectedTemplate() ? '' : getItemText(item)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input ax-lookup-trigger-search\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [placeholder]=\"triggerSearchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  } @else {\n    <div class=\"ax-lookup-value\">\n      @if (showSelectedTemplate()) {\n        <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n          <ng-container\n            [ngTemplateOutlet]=\"selectedTemplate()!\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n          />\n        </div>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  }\n\n  @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n  >\n    <span\n      class=\"ax-icon\"\n      [class.ax-icon-chevron-down]=\"!expanded()\"\n      [class.ax-icon-chevron-up]=\"expanded()\"\n    ></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"'clickOut'\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div class=\"ax-lookup-popup\" [class.ax-is-actionsheet]=\"isActionsheetStyle()\" [class.ax-is-alternate]=\"alternate()\" (keydown.escape)=\"close()\">\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n        <ax-close-button [icon]=\"isMultiple() ? 'ax-icon ax-icon-check' : 'ax-icon ax-icon-close'\"></ax-close-button>\n      </ax-header>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @switch (mode()) {\n        @case ('drop-down-list') {\n          <ax-lookup-drop-down-list\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            (itemClick)=\"handleSinglePick($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('multi-select') {\n          <ax-lookup-multi-select\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            (itemClick)=\"handleMultiToggle($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('drop-down-tree') {\n          <ax-lookup-drop-down-tree\n            [dataSource]=\"treeDataSource()!\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n        @case ('multi-select-tree') {\n          <ax-lookup-multi-select-tree\n            [dataSource]=\"treeDataSource()!\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [selectionBehavior]=\"treeSelectionBehavior()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            (selectionChange)=\"handleTreeSelectionChange($event)\"\n          />\n        }\n        @case ('multi-column') {\n          <ax-lookup-multi-column\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [columns]=\"columns()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{box-sizing:border-box;display:flex;width:100%;flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid .ax-icon-check{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-style:var(--tw-border-style);border-width:1px;border-color:transparent;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface));--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;accent-color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{justify-content:space-between}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-lookup-option-host.ax-state-selected .ax-lookup-option-text,.ax-lookup-option-host.ax-state-selected .ax-lookup-option-check,.ax-lookup-option-host.ax-state-selected ax-icon{color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))!important}ax-lookup-multi-column,.ax-lookup-multi-column{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,.ax-lookup-multi-column) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,.ax-lookup-multi-column) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,.ax-lookup-multi-column) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,.ax-lookup-multi-column) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,.ax-lookup-multi-column) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;padding:calc(var(--spacing, .25rem) * 2)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], treeDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDataSource", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], adaptivityEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivityEnabled", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], treeSelectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeSelectionBehavior", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onItemSelected: [{ type: i0.Output, args: ["onItemSelected"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], triggerSearchInput: [{ type: i0.ViewChild, args: ['triggerSearchInput', { isSignal: true }] }], listView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupListViewBase), { isSignal: true }] }] } });
+                    ], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default\"\n  [class.ax-lookup-trigger]=\"!isEditableTrigger()\"\n  [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n  (click)=\"onTriggerClick()\"\n>\n  <ng-content select=\"ax-prefix\"></ng-content>\n\n  @if (isMultiple()) {\n    <div class=\"ax-lookup-chips\">\n      @for (item of selectedItems(); track trackSelectedKey(item)) {\n        <ax-chips class=\"ax-sm\" look=\"fill\" [text]=\"selectedTemplate() ? '' : getItemText(item)\">\n          @if (selectedTemplate()) {\n            <ax-prefix>\n              <ng-container\n                [ngTemplateOutlet]=\"selectedTemplate()!\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"\n              />\n            </ax-prefix>\n          }\n          @if (!disabled() && !readonly()) {\n            <ax-suffix>\n              <button type=\"button\" tabindex=\"-1\" (click)=\"removeChip($event, item)\">\n                <span class=\"ax-icon ax-icon-close\"></span>\n              </button>\n            </ax-suffix>\n          }\n        </ax-chips>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input ax-lookup-trigger-search\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [placeholder]=\"triggerSearchPlaceholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  } @else {\n    <div class=\"ax-lookup-value\">\n      @if (showSelectedTemplate()) {\n        <div class=\"ax-lookup-selected-content\" aria-hidden=\"true\">\n          <ng-container\n            [ngTemplateOutlet]=\"selectedTemplate()!\"\n            [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n          />\n        </div>\n      }\n      <input\n        #triggerSearchInput\n        type=\"text\"\n        class=\"ax-input\"\n        [class.ax-lookup-select-input]=\"!isEditableTrigger()\"\n        [class.ax-lookup-input-overlay]=\"showSelectedTemplate()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [readonly]=\"readonly() || !isEditableTrigger()\"\n        [attr.inputmode]=\"isEditableTrigger() ? null : 'none'\"\n        [value]=\"searchText()\"\n        (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        (keydown)=\"onTriggerKeydown($event)\"\n        (beforeinput)=\"onBeforeInput($event)\"\n        (focus)=\"emitOnFocus($event)\"\n        (blur)=\"emitOnBlur($event)\"\n      />\n    </div>\n  }\n\n  @if (selectedValues().length > 0 && !disabled() && !readonly()) {\n    <ng-content select=\"ax-clear-button\"></ng-content>\n  }\n\n  <button\n    type=\"button\"\n    class=\"ax-general-button-icon\"\n    tabindex=\"-1\"\n    [disabled]=\"disabled() || readonly()\"\n  >\n    <span\n      class=\"ax-icon\"\n      [class.ax-icon-chevron-down]=\"!expanded()\"\n      [class.ax-icon-chevron-up]=\"expanded()\"\n    ></span>\n  </button>\n  <ng-content select=\"ax-suffix\"></ng-content>\n</div>\n\n<ax-popover\n  [target]=\"origin\"\n  [openOn]=\"'manual'\"\n  [closeOn]=\"isActionsheetStyle() ? 'manual' : 'clickOut'\"\n  [closeOnScroll]=\"!isActionsheetStyle()\"\n  [placement]=\"'bottom-start'\"\n  [width]=\"isActionsheetStyle() ? '100%' : origin.offsetWidth + 'px'\"\n  [adaptivityEnabled]=\"isActionsheetStyle()\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div\n    #popup\n    class=\"ax-lookup-popup\"\n    [class.ax-is-actionsheet]=\"isActionsheetStyle()\"\n    [class.ax-is-alternate]=\"alternate()\"\n    (keydown.escape)=\"close()\"\n  >\n    @if (isActionsheetStyle()) {\n      <ax-header class=\"ax-solid\">\n        <ax-title>{{ caption() || placeholder() || ('@acorex:selectbox.popover.title' | translate | async) }}</ax-title>\n        @if (isMultiple()) {\n          <ax-button\n            class=\"ax-sm\"\n            color=\"primary\"\n            look=\"solid\"\n            text=\"@acorex:common.actions.apply\"\n            (onClick)=\"close()\"\n          ></ax-button>\n        } @else {\n          <ax-close-button></ax-close-button>\n        }\n      </ax-header>\n    }\n    @if (isSheetSearchEnabled()) {\n      <div class=\"ax-lookup-sheet-search\">\n        <ax-search-box\n          #sheetSearch\n          class=\"ax-sm\"\n          look=\"fill\"\n          [autoSearch]=\"false\"\n          [delayTime]=\"0\"\n          [placeholder]=\"searchPlaceholder()\"\n          (onValueChanged)=\"onSheetSearchInput()\"\n          (onKeyUp)=\"onSheetSearchInput()\"\n          (onKeyDown)=\"onSheetSearchKeydown($event)\"\n        >\n          <ax-clear-button></ax-clear-button>\n        </ax-search-box>\n      </div>\n    }\n    <ng-content select=\"ax-header\"></ng-content>\n    @if (expanded()) {\n      @switch (mode()) {\n        @case ('drop-down-list') {\n          <ax-lookup-drop-down-list\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('multi-select') {\n          <ax-lookup-multi-select\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleMultiToggle($event)\"\n            (navigateOut)=\"onListNavigateOut($event)\"\n          />\n        }\n        @case ('drop-down-tree') {\n          <ax-lookup-drop-down-tree\n            [dataSource]=\"resolvedTreeDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [filterKey]=\"treeFilterKey()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n        @case ('multi-select-tree') {\n          <ax-lookup-multi-select-tree\n            [dataSource]=\"resolvedTreeDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [selectionBehavior]=\"treeSelectionBehavior()\"\n            [nodeTemplate]=\"$any(itemTemplate())\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [filterKey]=\"treeFilterKey()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (selectionChange)=\"handleTreeSelectionChange($event)\"\n          />\n        }\n        @case ('multi-column') {\n          <ax-lookup-multi-column\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [columns]=\"columns()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n        @case ('multi-column-tree') {\n          <ax-lookup-multi-column-tree\n            [dataSource]=\"resolvedDataSource()\"\n            [valueField]=\"valueField()\"\n            [textField]=\"textField()\"\n            [disabledField]=\"disabledField()\"\n            [parentField]=\"treeParentField()\"\n            [hasChildrenField]=\"hasChildrenField()\"\n            [selectedValues]=\"selectedValues()\"\n            [itemHeight]=\"itemHeight()\"\n            [maxVisibleItems]=\"maxVisibleItems()\"\n            [columns]=\"columns()\"\n            [itemTemplate]=\"itemTemplate()\"\n            [emptyTemplate]=\"emptyTemplate()\"\n            [loadingTemplate]=\"loadingTemplate()\"\n            [alternate]=\"alternate()\"\n            [highlightText]=\"highlightQuery()\"\n            (itemClick)=\"handleSinglePick($event)\"\n          />\n        }\n      }\n    }\n    <ng-content select=\"ax-footer\"></ng-content>\n  </div>\n</ax-popover>\n<ng-content select=\"ax-validation-rule\"></ng-content>\n", styles: ["@layer properties;@layer components{ax-lookup{display:block;width:100%}ax-lookup .ax-editor-container{justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger{cursor:pointer;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-trigger-multiple{height:auto;min-height:calc(var(--spacing, .25rem) * 9);padding-block:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-value{position:relative;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{pointer-events:none;position:relative;z-index:0;display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}ax-lookup .ax-lookup-input-overlay{position:absolute;inset:calc(var(--spacing, .25rem) * 0);z-index:10;margin:calc(var(--spacing, .25rem) * 0)!important;height:100%;width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)!important;color:transparent;caret-color:transparent}ax-lookup .ax-lookup-chips{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 1)}ax-lookup .ax-lookup-trigger-search{margin:calc(var(--spacing, .25rem) * 0)!important;height:calc(var(--spacing, .25rem) * 7.5);width:auto!important;min-width:calc(var(--spacing, .25rem) * 16);flex:1;flex-basis:calc(var(--spacing, .25rem) * 16)}ax-lookup .ax-lookup-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}ax-lookup ax-chips ax-prefix,ax-lookup ax-chips ax-suffix{padding:calc(var(--spacing, .25rem) * 0)!important}ax-lookup ax-chips ax-suffix button{display:flex;cursor:pointer;align-items:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup{--ax-comp-lookup-highlight-bg-color: var(--ax-sys-color-warning-lighter-surface);--ax-comp-lookup-highlight-text-color: var(--ax-sys-color-on-warning-lighter-surface);--ax-comp-lookup-highlight-border-color: var(--ax-sys-color-warning-500);box-sizing:border-box;display:flex;width:100%;max-width:100%;min-width:calc(var(--spacing, .25rem) * 0);flex-direction:column;overflow:hidden;border-radius:var(--ax-sys-border-radius);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup .ax-highlight{display:inline;margin:0;padding:0;background-color:rgb(var(--ax-comp-lookup-highlight-bg-color));color:rgb(var(--ax-comp-lookup-highlight-text-color));font-weight:inherit;box-shadow:none}.ax-lookup-popup:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-darkest-surface))}.ax-lookup-popup.ax-is-actionsheet{height:100dvh;max-height:100dvh;min-height:100dvh;border-bottom-right-radius:0;border-bottom-left-radius:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-title{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-leading: calc(var(--spacing, .25rem) * 6);line-height:calc(var(--spacing, .25rem) * 6);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.ax-lookup-popup.ax-is-actionsheet>ax-header.ax-solid ax-button{flex-shrink:0}.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-list,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select,.ax-lookup-popup.ax-is-actionsheet ax-lookup-drop-down-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-select-tree,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet ax-lookup-multi-column-tree{display:flex;min-height:calc(var(--spacing, .25rem) * 0);flex:1;flex-direction:column;height:auto!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-viewport{min-height:calc(var(--spacing, .25rem) * 0);flex:1;height:auto!important;max-height:none!important}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-tree{max-height:none;min-height:calc(var(--spacing, .25rem) * 0);flex:1;overflow:auto}.ax-lookup-popup.ax-is-actionsheet .ax-lookup-empty{display:flex;flex:1;align-items:center;justify-content:center}:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column,.ax-lookup-popup.ax-is-actionsheet .ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0)}.ax-lookup-popup .ax-lookup-sheet-search{flex-shrink:0;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-popup>ax-header:not(.ax-solid),.ax-lookup-popup>ax-footer{flex-shrink:0;border-color:rgba(var(--ax-sys-color-border-lightest-surface))}.ax-lookup-popup>ax-header:not(.ax-solid){border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ax-lookup-popup>ax-footer{border-top-style:var(--tw-border-style);border-top-width:1px}.ax-lookup-viewport{width:100%;min-width:calc(var(--spacing, .25rem) * 0);overflow-x:hidden}.ax-lookup-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);width:100%;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 60%,transparent)}}.ax-lookup-option-host{box-sizing:border-box;cursor:pointer;border-style:var(--tw-border-style);border-width:1px;border-color:transparent;--tw-outline-style: none;outline-style:none}.ax-lookup-option-host.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-option-host.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host:hover,.ax-lookup-option-host.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected,.ax-lookup-option-host.ax-state-selected:hover,.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate,.ax-lookup-option-host.ax-state-selected.ax-state-alternate:hover,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-option-host.ax-state-selected.ax-state-active,.ax-lookup-option-host.ax-state-selected.ax-state-alternate.ax-state-active):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}.ax-lookup-option-host.ax-lookup-option-multiple{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-option-host.ax-lookup-option-multiple:not(.ax-lookup-option){padding-inline:calc(var(--spacing, .25rem) * 3)}.ax-lookup-option-host .ax-lookup-checkbox{pointer-events:none;display:inline-flex;flex-shrink:0;align-items:center}.ax-lookup-option-host .ax-lookup-option-loading{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option-host .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-on-surface))}.ax-lookup-option.ax-state-selected{color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-lookup-option-multiple{justify-content:flex-start}.ax-lookup-option .ax-lookup-option-text{min-width:calc(var(--spacing, .25rem) * 0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ax-lookup-option .ax-lookup-option-check{margin-inline-start:auto;flex-shrink:0;color:rgba(var(--ax-sys-color-primary-surface))}ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree{display:block;min-height:calc(var(--spacing, .25rem) * 0);width:100%}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) .ax-lookup-multi-column-table,:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) ax-data-table{height:100%;min-height:calc(var(--spacing, .25rem) * 0);border-style:var(--tw-border-style)!important;border-width:0px!important}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-selected{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}:is(ax-lookup-multi-column,ax-lookup-multi-column-tree,.ax-lookup-multi-column,.ax-lookup-multi-column-tree) tr.ax-state-disabled{pointer-events:none;opacity:50%}.ax-lookup-tree{max-height:calc(var(--spacing, .25rem) * 80);overflow:auto;padding:calc(var(--spacing, .25rem) * 2)}.ax-lookup-tree .ax-tree-view-node{margin-block:0;border-radius:0}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate{background-color:rgba(var(--ax-sys-color-light-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-state-alternate:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected,.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 25%,transparent)}}.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:rgba(var(--ax-sys-color-primary-lightest-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-lightest-surface)) 80%,transparent)}}:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-primary-darkest-surface))}@supports (color: color-mix(in lab,red,red)){:is(.ax-lookup-tree .ax-tree-view-node.ax-tree-view-node-selected:hover:not(.ax-dragging),.ax-lookup-tree .ax-tree-view-node.ax-state-alternate.ax-tree-view-node-selected:hover:not(.ax-dragging)):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-darkest-surface)) 40%,transparent)}}}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-border-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){border-color:rgba(var(--ax-sys-color-border-light-surface))}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}ax-lookup .ax-editor-container.ax-fill ax-chips.ax-default.ax-fill-interactive:not(.ax-state-disabled):hover:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-leading{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], treeDataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeDataSource", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], treeParentField: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeParentField", required: false }] }], hasChildrenField: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasChildrenField", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], adaptivityEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "adaptivityEnabled", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], alternate: [{ type: i0.Input, args: [{ isSignal: true, alias: "alternate", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], maxVisibleItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleItems", required: false }] }], treeSelectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "treeSelectionBehavior", required: false }] }], highlightSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightSearch", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], selectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedTemplate", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], loadingTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingTemplate", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueItems", required: false }] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }], onItemSelected: [{ type: i0.Output, args: ["onItemSelected"] }], onOpened: [{ type: i0.Output, args: ["onOpened"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }], popoverRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPopoverComponent), { isSignal: true }] }], originRef: [{ type: i0.ViewChild, args: ['origin', { isSignal: true }] }], popupRef: [{ type: i0.ViewChild, args: ['popup', { isSignal: true }] }], triggerSearchInput: [{ type: i0.ViewChild, args: ['triggerSearchInput', { isSignal: true }] }], listView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupListViewBase), { isSignal: true }] }], dropDownTreeView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupDropDownTreeComponent), { isSignal: true }] }], multiSelectTreeView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupMultiSelectTreeComponent), { isSignal: true }] }], sheetSearchRef: [{ type: i0.ViewChild, args: ['sheetSearch', { isSignal: true }] }] } });
 
 class AXLookupModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -1846,18 +2945,21 @@ class AXLookupModule {
             AXLookupMultiSelectComponent,
             AXLookupDropDownTreeComponent,
             AXLookupMultiSelectTreeComponent,
-            AXLookupMultiColumnComponent], exports: [AXLookupComponent,
+            AXLookupMultiColumnComponent,
+            AXLookupMultiColumnTreeComponent], exports: [AXLookupComponent,
             AXLookupDropDownListComponent,
             AXLookupMultiSelectComponent,
             AXLookupDropDownTreeComponent,
             AXLookupMultiSelectTreeComponent,
-            AXLookupMultiColumnComponent] }); }
+            AXLookupMultiColumnComponent,
+            AXLookupMultiColumnTreeComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, imports: [AXLookupComponent,
             AXLookupDropDownListComponent,
             AXLookupMultiSelectComponent,
             AXLookupDropDownTreeComponent,
             AXLookupMultiSelectTreeComponent,
-            AXLookupMultiColumnComponent] }); }
+            AXLookupMultiColumnComponent,
+            AXLookupMultiColumnTreeComponent] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, decorators: [{
             type: NgModule,
@@ -1869,6 +2971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXLookupDropDownTreeComponent,
                         AXLookupMultiSelectTreeComponent,
                         AXLookupMultiColumnComponent,
+                        AXLookupMultiColumnTreeComponent,
                     ],
                     exports: [
                         AXLookupComponent,
@@ -1877,6 +2980,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXLookupDropDownTreeComponent,
                         AXLookupMultiSelectTreeComponent,
                         AXLookupMultiColumnComponent,
+                        AXLookupMultiColumnTreeComponent,
                     ],
                 }]
         }] });
@@ -1885,5 +2989,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent };
+export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiColumnTreeComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent };
 //# sourceMappingURL=acorex-components-lookup.mjs.map