@acorex/components 22.1.0-next.0 → 22.1.0-next.10

package/fesm2022/acorex-components-lookup.mjs

@@ -1,16 +1,25 @@
-import { AXListDataSource, NXComponent, convertArrayToDataSource, AXComponent } from '@acorex/cdk/common';
+import { AXListDataSource, AXDataSource, NXValueComponent, convertArrayToDataSource, AXComponent, AXClearableComponent, AXClosableComponent, AXValuableComponent } from '@acorex/cdk/common';
+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 * as i0 from '@angular/core';
-import { input, output, signal, computed, viewChild, inject, NgZone, effect, untracked, Directive, ViewEncapsulation, ChangeDetectionStrategy, Component, model, linkedSignal, NgModule } from '@angular/core';
-import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
+import { AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe } from '@acorex/core/translation';
+import { NgTemplateOutlet, AsyncPipe } 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from '@acorex/cdk/list-navigation';
+import { AXListNavigationDirective, AXListNavigationItemDirective, AXListNavigationModule } from '@acorex/cdk/list-navigation';
 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';
 
 /**
  * Shared `AXDataSource` + CDK virtual scroll plumbing for the list-based lookup views
- * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`, `ax-lookup-multi-column`).
+ * (`ax-lookup-drop-down-list`, `ax-lookup-multi-select`).
  */
 class AXLookupListViewBase {
     #ngZone;
@@ -65,10 +74,20 @@ class AXLookupListViewBase {
          */
         this.loadingTemplate = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * When `true`, list rows use alternating background colors for easier scanning.
+         */
+        this.alternate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "alternate" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the user picks (or toggles) an item.
          */
         this.itemClick = output();
+        /**
+         * Emitted when keyboard navigation should leave the list (e.g. ArrowUp on the first
+         * item, or a printable key that should return focus to the trigger search input).
+         */
+        this.navigateOut = output();
         /** CDK virtual scroll adapter over the datasource. */
         this.listDataSource = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listDataSource" }] : /* istanbul ignore next */ []));
@@ -86,6 +105,10 @@ class AXLookupListViewBase {
         ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
         this.viewportRef = viewChild(CdkVirtualScrollViewport, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* istanbul ignore next */ []));
+        this.listNavigation = viewChild(AXListNavigationDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listNavigation" }] : /* istanbul ignore next */ []));
+        this.navItems = viewChildren(AXListNavigationItemDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
         this.#ngZone = inject(NgZone);
         this.trackByIndex = (index) => index;
         // CDK measures the viewport size only once, when it initializes. Inside the popover the
@@ -120,6 +143,10 @@ class AXLookupListViewBase {
             });
         });
     }
+    /** Moves keyboard focus to the first rendered list option. */
+    focusFirst() {
+        this.listNavigation()?.focusOnIndex(0);
+    }
     getValue(item) {
         return item?.[this.valueField()];
     }
@@ -139,12 +166,71 @@ class AXLookupListViewBase {
         }
         this.itemClick.emit({ item, value: this.getValue(item) });
     }
+    /**
+     * Commit on mousedown (not click) so a searchable trigger blur cannot destroy the
+     * list before the pick is applied.
+     */
+    handleItemMouseDown(event, item) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.handleItemClick(item);
+    }
+    handleItemKeypress(e, item) {
+        if (e.nativeEvent.key === 'Enter' || e.nativeEvent.code === 'Space') {
+            e.nativeEvent.stopPropagation();
+            e.nativeEvent.preventDefault();
+            this.handleItemClick(item);
+        }
+    }
+    handleListKeypress(e) {
+        const key = e.nativeEvent.key;
+        const nav = this.listNavigation();
+        const viewport = this.viewportRef();
+        if (key === 'ArrowUp' && nav && nav.activeIndex() === 0) {
+            const offset = viewport?.measureScrollOffset() ?? 0;
+            if (offset > 0) {
+                e.nativeEvent.preventDefault();
+                viewport.scrollToOffset(Math.max(0, offset - this.itemHeight()));
+                queueMicrotask(() => nav.focusOnIndex(0));
+                return;
+            }
+            e.nativeEvent.preventDefault();
+            this.navigateOut.emit('up');
+            return;
+        }
+        if (key === 'ArrowDown' && nav && viewport) {
+            const items = this.navItems();
+            if (items.length > 0 && nav.activeIndex() >= items.length - 1) {
+                const maxOffset = Math.max(0, this.totalCount() * this.itemHeight() - viewport.getViewportSize());
+                const nextOffset = Math.min(maxOffset, viewport.measureScrollOffset() + this.itemHeight());
+                if (nextOffset > viewport.measureScrollOffset()) {
+                    e.nativeEvent.preventDefault();
+                    viewport.scrollToOffset(nextOffset);
+                    queueMicrotask(() => nav.focusOnIndex(this.navItems().length - 1));
+                }
+                return;
+            }
+        }
+        if (key === 'ArrowUp' ||
+            key === 'ArrowDown' ||
+            key === 'Tab' ||
+            key === 'Shift' ||
+            key === 'Enter' ||
+            key === 'Escape' ||
+            key === ' ') {
+            return;
+        }
+        this.navigateOut.emit('typeahead');
+    }
+    activateNavItem(nav, item) {
+        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 } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "viewportRef", first: true, predicate: CdkVirtualScrollViewport, 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 } }, 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 }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], viewportRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { 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 }] }], 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:
@@ -154,38 +240,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class AXLookupDropDownListComponent extends AXLookupListViewBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupDropDownListComponent, isStandalone: true, selector: "ax-lookup-drop-down-list", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupDropDownListComponent, isStandalone: true, selector: "ax-lookup-drop-down-list", providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupDropDownListComponent }], usesInheritance: true, ngImport: i0, template: `
     @if (isEmpty()) {
-      <div class="ax-lookup-empty">
-        @if (emptyTemplate()) {
-          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
-        } @else {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
           {{ '@acorex:common.general.no-result-found' | translate | async }}
-        }
-      </div>
+        </div>
+      }
     } @else {
       <cdk-virtual-scroll-viewport
         class="ax-lookup-viewport"
         role="listbox"
+        axListNavigation
+        #nav="axListNavigation"
         [itemSize]="itemHeight()"
         [style.height.px]="viewportHeight()"
+        (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
+          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option"
+          class="ax-lookup-option-host ax-lookup-option"
+          axListNavigationItem
+          #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
+          [class.ax-state-alternate]="alternate() && i % 2 === 1"
           [class.ax-state-selected]="item != null && isSelected(item)"
           [class.ax-state-disabled]="item != null && isDisabled(item)"
+          [class.ax-state-active]="navItem.isActive()"
           [attr.aria-selected]="item != null ? isSelected(item) : null"
-          (click)="handleItemClick(item)"
+          (mouseenter)="activateNavItem(nav, navItem)"
+          (mousedown)="handleItemMouseDown($event, item)"
+          (onKeypress)="handleItemKeypress($event, item)"
         >
           @if (item != null) {
             @if (itemTemplate()) {
               <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
             } @else {
               <span class="ax-lookup-option-text">{{ getText(item) }}</span>
-              <span class="ax-lookup-option-check" aria-hidden="true"></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>
             }
           } @else {
             <ng-container [ngTemplateOutlet]="loadingRow" />
@@ -201,7 +299,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: "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: "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,
@@ -209,39 +307,52 @@ 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],
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule],
+                    providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupDropDownListComponent }],
                     template: `
     @if (isEmpty()) {
-      <div class="ax-lookup-empty">
-        @if (emptyTemplate()) {
-          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
-        } @else {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
           {{ '@acorex:common.general.no-result-found' | translate | async }}
-        }
-      </div>
+        </div>
+      }
     } @else {
       <cdk-virtual-scroll-viewport
         class="ax-lookup-viewport"
         role="listbox"
+        axListNavigation
+        #nav="axListNavigation"
         [itemSize]="itemHeight()"
         [style.height.px]="viewportHeight()"
+        (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
+          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option"
+          class="ax-lookup-option-host ax-lookup-option"
+          axListNavigationItem
+          #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
+          [class.ax-state-alternate]="alternate() && i % 2 === 1"
           [class.ax-state-selected]="item != null && isSelected(item)"
           [class.ax-state-disabled]="item != null && isDisabled(item)"
+          [class.ax-state-active]="navItem.isActive()"
           [attr.aria-selected]="item != null ? isSelected(item) : null"
-          (click)="handleItemClick(item)"
+          (mouseenter)="activateNavItem(nav, navItem)"
+          (mousedown)="handleItemMouseDown($event, item)"
+          (onKeypress)="handleItemKeypress($event, item)"
         >
           @if (item != null) {
             @if (itemTemplate()) {
               <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
             } @else {
               <span class="ax-lookup-option-text">{{ getText(item) }}</span>
-              <span class="ax-lookup-option-check" aria-hidden="true"></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>
             }
           } @else {
             <ng-container [ngTemplateOutlet]="loadingRow" />
@@ -362,83 +473,280 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 /**
  * Internal mini component for the `multi-column` lookup mode:
- * a table-structured, virtualized list with a sticky header row.
+ * renders selectable rows in an `ax-data-table` grid and loads further
+ * pages as the user scrolls (no pager UI).
  *
  * @category Components
  */
-class AXLookupMultiColumnComponent extends AXLookupListViewBase {
+class AXLookupMultiColumnComponent {
+    /** Accumulated rows fed to the table (grows as pages are scrolled in). */
+    #loadedItems;
+    /** Total matching rows from the source (used to size the popup). */
+    #totalCount;
+    #host;
     constructor() {
-        super(...arguments);
         /**
-         * Column definitions rendered as a sticky header plus one grid cell per row.
+         * The datasource providing the grid rows (paged, remote-capable).
+         * Pages are fetched on demand as the user scrolls the table body.
+         */
+        this.dataSource = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property used as the selection value.
+         */
+        this.valueField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property used as the display text.
+         */
+        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 */ []));
+        /**
+         * 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 */ []));
-        /** CSS grid track list built from the column widths. */
-        this.gridTemplate = computed(() => this.columns()
-            .map((column) => column.width ?? '1fr')
-            .join(' '), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "gridTemplate" }] : /* 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 */ []));
+        /**
+         * Emitted when the user picks a row.
+         */
+        this.itemClick = output();
+        this.tableRef = viewChild(AXDataTableComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableRef" }] : /* istanbul ignore next */ []));
+        /** Accumulated rows fed to the table (grows as pages are scrolled in). */
+        this.#loadedItems = [];
+        /** Total matching rows from the source (used to size the popup). */
+        this.#totalCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#totalCount" }] : /* istanbul ignore next */ []));
+        /**
+         * Local table source: one page of whatever has been scrolled in so far.
+         * Kept as a stable instance so the table host is not recreated on each page load.
+         * `pageSize` grows with `#loadedItems` — never seed with a huge empty array (data-table
+         * initializes `displayedRows` as `new Array(pageSize)`, which caused NG0955-level jank).
+         */
+        this.tableDataSource = new AXDataSource({
+            pageSize: 1,
+            key: 'id',
+            load: async () => ({
+                items: this.#loadedItems,
+                total: this.#loadedItems.length,
+            }),
+        });
+        /**
+         * Header (~40px) + body rows. Grows with results up to `maxVisibleItems`,
+         * then the table body scrolls for the rest.
+         */
+        this.tableHeight = computed(() => {
+            const header = 40;
+            const total = this.#totalCount();
+            const rows = total > 0 ? total : Math.min(3, this.maxVisibleItems());
+            return header + Math.min(rows, 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.#host = inject((ElementRef));
+        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(' ');
+        };
+        effect((onCleanup) => {
+            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 });
+            });
+            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 });
+            });
+            // Kick the first page; later pages come from scroll.
+            queueMicrotask(() => source.setPage(0));
+            onCleanup(() => changedSub.unsubscribe());
+        });
+        effect((onCleanup) => {
+            // Rebind when the table instance appears / source changes.
+            this.tableRef();
+            this.dataSource();
+            let scrollSub;
+            const timer = setTimeout(() => {
+                const wrapper = this.tableRef()?.getHostElement()?.querySelector('.ax-data-table-wrapper') ??
+                    this.#host.nativeElement.querySelector('.ax-data-table-wrapper');
+                if (!wrapper) {
+                    return;
+                }
+                scrollSub = fromEvent(wrapper, 'scroll')
+                    .pipe(auditTime(80))
+                    .subscribe(() => this.#tryLoadMore(wrapper));
+            }, 0);
+            onCleanup(() => {
+                clearTimeout(timer);
+                scrollSub?.unsubscribe();
+            });
+        });
     }
-    getCellText(item, column) {
-        return String(item?.[column.field] ?? '');
+    /** Stable unique key for `@for` — avoids NG0955 when `field` is missing or duplicated. */
+    trackColumnKey(index, column) {
+        return `${column?.field ?? ''}::${index}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, deps: null, 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: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    @if (isEmpty()) {
-      <div class="ax-lookup-empty">
-        @if (emptyTemplate()) {
-          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
-        } @else {
-          {{ '@acorex:common.general.no-result-found' | translate | async }}
+    resolveColumnWidth(column) {
+        const width = column.width?.trim();
+        if (!width || width.includes('fr')) {
+            return 'auto';
         }
-      </div>
-    } @else {
-      <div class="ax-lookup-column-header" role="row" [style.grid-template-columns]="gridTemplate()">
-        @for (column of columns(); track column.field) {
-          <span class="ax-lookup-column-header-cell" role="columnheader">{{ column.title }}</span>
+        return width;
+    }
+    #syncTablePageSize() {
+        this.tableDataSource.config.pageSize = Math.max(this.#loadedItems.length, 1);
+    }
+    handleRowClick(event) {
+        this.handleItemClick(event.data);
+    }
+    handleItemClick(item) {
+        if (!item || this.isDisabled(item)) {
+            return;
         }
-      </div>
-      <cdk-virtual-scroll-viewport
-        class="ax-lookup-viewport"
-        role="listbox"
-        [itemSize]="itemHeight()"
-        [style.height.px]="viewportHeight()"
-      >
-        <div
-          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
-          role="option"
-          class="ax-lookup-option ax-lookup-column-row"
-          [style.height.px]="itemHeight()"
-          [style.grid-template-columns]="gridTemplate()"
-          [class.ax-state-selected]="item != null && isSelected(item)"
-          [class.ax-state-disabled]="item != null && isDisabled(item)"
-          [attr.aria-selected]="item != null ? isSelected(item) : null"
-          (click)="handleItemClick(item)"
-        >
-          @if (item != null) {
-            @if (itemTemplate()) {
-              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
-            } @else {
-              @for (column of columns(); track column.field) {
-                <span class="ax-lookup-column-cell">{{ getCellText(item, column) }}</span>
-              }
-            }
-          } @else {
-            <ng-container [ngTemplateOutlet]="loadingRow" />
-          }
-        </div>
-      </cdk-virtual-scroll-viewport>
+        this.itemClick.emit({ item, value: this.getValue(item) });
     }
-
-    <ng-template #loadingRow>
-      @if (loadingTemplate()) {
-        <ng-container [ngTemplateOutlet]="loadingTemplate()!" />
-      } @else {
-        <span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
+    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()]);
+    }
+    #tryLoadMore(wrapper) {
+        const nearBottom = wrapper.scrollTop + wrapper.clientHeight >= wrapper.scrollHeight - 48;
+        if (!nearBottom) {
+            return;
+        }
+        const source = this.dataSource();
+        if (source.isLoading || source.totalCount === 0) {
+            return;
+        }
+        const loadedCount = source.cachedItems.filter((item) => item != null).length;
+        if (loadedCount >= source.totalCount) {
+            return;
+        }
+        const nextPage = Math.floor(loadedCount / source.pageSize);
+        source.setPage(nextPage);
+    }
+    getValue(item) {
+        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: `
+    <ax-data-table
+      class="ax-lookup-multi-column-table"
+      look="minimal"
+      [dataSource]="tableDataSource"
+      [itemHeight]="itemHeight()"
+      [alternative]="alternate()"
+      [emptyTemplate]="emptyTemplate()"
+      [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)"
+          [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 }"
+            />
+          }
+        </td>
+      </tr>
     </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: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, 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: AXLookupMultiColumnComponent, decorators: [{
             type: Component,
@@ -446,64 +754,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     selector: 'ax-lookup-multi-column',
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
-                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
+                    imports: [NgTemplateOutlet, AXDataTableComponent, AXDataTableTextColumnComponent],
+                    host: {
+                        class: 'ax-lookup-multi-column',
+                        '[style.height.px]': 'tableHeight()',
+                    },
                     template: `
-    @if (isEmpty()) {
-      <div class="ax-lookup-empty">
-        @if (emptyTemplate()) {
-          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
-        } @else {
-          {{ '@acorex:common.general.no-result-found' | translate | async }}
-        }
-      </div>
-    } @else {
-      <div class="ax-lookup-column-header" role="row" [style.grid-template-columns]="gridTemplate()">
-        @for (column of columns(); track column.field) {
-          <span class="ax-lookup-column-header-cell" role="columnheader">{{ column.title }}</span>
-        }
-      </div>
-      <cdk-virtual-scroll-viewport
-        class="ax-lookup-viewport"
-        role="listbox"
-        [itemSize]="itemHeight()"
-        [style.height.px]="viewportHeight()"
+    <ax-data-table
+      class="ax-lookup-multi-column-table"
+      look="minimal"
+      [dataSource]="tableDataSource"
+      [itemHeight]="itemHeight()"
+      [alternative]="alternate()"
+      [emptyTemplate]="emptyTemplate()"
+      [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)"
+          [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)"
       >
-        <div
-          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
-          role="option"
-          class="ax-lookup-option ax-lookup-column-row"
-          [style.height.px]="itemHeight()"
-          [style.grid-template-columns]="gridTemplate()"
-          [class.ax-state-selected]="item != null && isSelected(item)"
-          [class.ax-state-disabled]="item != null && isDisabled(item)"
-          [attr.aria-selected]="item != null ? isSelected(item) : null"
-          (click)="handleItemClick(item)"
-        >
-          @if (item != null) {
-            @if (itemTemplate()) {
-              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
-            } @else {
-              @for (column of columns(); track column.field) {
-                <span class="ax-lookup-column-cell">{{ getCellText(item, column) }}</span>
-              }
-            }
-          } @else {
-            <ng-container [ngTemplateOutlet]="loadingRow" />
+        <td [attr.colspan]="columns().length || 1">
+          @if (ctx.data != null && itemTemplate()) {
+            <ng-container
+              [ngTemplateOutlet]="itemTemplate()!"
+              [ngTemplateOutletContext]="{ $implicit: ctx.data }"
+            />
           }
-        </div>
-      </cdk-virtual-scroll-viewport>
-    }
-
-    <ng-template #loadingRow>
-      @if (loadingTemplate()) {
-        <ng-container [ngTemplateOutlet]="loadingTemplate()!" />
-      } @else {
-        <span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
-      }
+        </td>
+      </tr>
     </ng-template>
   `,
                 }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+        }], 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 }] }] } });
 
 /**
  * Internal mini component for the `multi-select-tree` lookup mode:
@@ -613,32 +918,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class AXLookupMultiSelectComponent extends AXLookupListViewBase {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiSelectComponent, isStandalone: true, selector: "ax-lookup-multi-select", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXLookupMultiSelectComponent, isStandalone: true, selector: "ax-lookup-multi-select", providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupMultiSelectComponent }], usesInheritance: true, ngImport: i0, template: `
     @if (isEmpty()) {
-      <div class="ax-lookup-empty">
-        @if (emptyTemplate()) {
-          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
-        } @else {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
           {{ '@acorex:common.general.no-result-found' | translate | async }}
-        }
-      </div>
+        </div>
+      }
     } @else {
       <cdk-virtual-scroll-viewport
         class="ax-lookup-viewport"
         role="listbox"
         aria-multiselectable="true"
+        axListNavigation
+        #nav="axListNavigation"
         [itemSize]="itemHeight()"
         [style.height.px]="viewportHeight()"
+        (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
+          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option"
+          class="ax-lookup-option-host ax-lookup-option"
+          axListNavigationItem
+          #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
+          [class.ax-lookup-option-host--check]="!!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)"
+          [class.ax-state-active]="navItem.isActive()"
           [attr.aria-selected]="item != null ? isSelected(item) : null"
-          (click)="handleItemClick(item)"
+          (mouseenter)="activateNavItem(nav, navItem)"
+          (mousedown)="handleItemMouseDown($event, item)"
+          (onKeypress)="handleItemKeypress($event, item)"
         >
           @if (item != null) {
             <input
@@ -667,7 +982,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: "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: "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,
@@ -675,33 +990,44 @@ 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],
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe, AXListNavigationModule],
+                    providers: [{ provide: AXLookupListViewBase, useExisting: AXLookupMultiSelectComponent }],
                     template: `
     @if (isEmpty()) {
-      <div class="ax-lookup-empty">
-        @if (emptyTemplate()) {
-          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
-        } @else {
+      @if (emptyTemplate()) {
+        <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+      } @else {
+        <div class="ax-lookup-empty">
           {{ '@acorex:common.general.no-result-found' | translate | async }}
-        }
-      </div>
+        </div>
+      }
     } @else {
       <cdk-virtual-scroll-viewport
         class="ax-lookup-viewport"
         role="listbox"
         aria-multiselectable="true"
+        axListNavigation
+        #nav="axListNavigation"
         [itemSize]="itemHeight()"
         [style.height.px]="viewportHeight()"
+        (onKeypress)="handleListKeypress($event)"
       >
         <div
-          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
+          *cdkVirtualFor="let item of listDataSource(); let i = index; trackBy: trackByIndex"
           role="option"
-          class="ax-lookup-option"
+          class="ax-lookup-option-host ax-lookup-option"
+          axListNavigationItem
+          #navItem="axListNavigationItem"
           [style.height.px]="itemHeight()"
+          [class.ax-lookup-option-host--check]="!!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)"
+          [class.ax-state-active]="navItem.isActive()"
           [attr.aria-selected]="item != null ? isSelected(item) : null"
-          (click)="handleItemClick(item)"
+          (mouseenter)="activateNavItem(nav, navItem)"
+          (mousedown)="handleItemMouseDown($event, item)"
+          (onKeypress)="handleItemKeypress($event, item)"
         >
           @if (item != null) {
             <input
@@ -742,11 +1068,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * - `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` — a table-structured list; when searchable, the trigger input filters as you type.
+ * - `multi-column` — an `ax-data-table` grid; when searchable, the trigger input filters as you type.
+ *
+ * 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`.
+ *
+ * Implements {@link FormValueControl} so `[(ngModel)]` / signal forms work via the `value` model
+ * (no `ControlValueAccessor`).
  *
  * @category Components
  */
-class AXLookupComponent extends NXComponent {
+class AXLookupComponent extends NXValueComponent {
+    #platform;
+    #destroyRef;
     #itemsCache;
     #isUserInteraction;
     #lastValue;
@@ -757,6 +1091,13 @@ class AXLookupComponent extends NXComponent {
     #searchDebounce;
     constructor() {
         super();
+        this.#platform = inject(AXPlatform);
+        this.#destroyRef = inject(DestroyRef);
+        /**
+         * The name of the form field, used by validation rules and `ax-form.validate(names)`.
+         */
+        this.name = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
         /**
          * The lookup rendering mode. Selects which mini component renders in the popup.
          */
@@ -791,7 +1132,7 @@ class AXLookupComponent extends NXComponent {
         this.disabledField = input('disabled', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
         /**
-         * Column definitions for the `multi-column` mode.
+         * Column definitions for the `multi-column` mode (rendered as `ax-text-column` in `ax-data-table`).
          */
         this.columns = input([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -802,6 +1143,23 @@ class AXLookupComponent extends NXComponent {
          */
         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.
+         */
+        this.adaptivityEnabled = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "adaptivityEnabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Title shown in the actionsheet header on small screens. Falls back to `placeholder`.
+         */
+        this.caption = input('', /* @ts-ignore */
+        ...(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).
+         */
+        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.
@@ -816,12 +1174,12 @@ class AXLookupComponent extends NXComponent {
         /**
          * Whether the lookup is disabled.
          */
-        this.disabled = model(false, /* @ts-ignore */
+        this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
          * Whether the lookup is readonly.
          */
-        this.readonly = model(false, /* @ts-ignore */
+        this.readonly = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
         /**
          * Predefined look scheme of the editor container. Same looks as other editor components like ax-text-box.
@@ -865,10 +1223,18 @@ class AXLookupComponent extends NXComponent {
         ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
         /**
          * The selected value(s): a scalar in single modes, an array in
-         * `multi-select` / `multi-select-tree`. Supports two-way binding.
+         * `multi-select` / `multi-select-tree`. Supports `[(value)]`, `[(ngModel)]`, and signal forms
+         * via {@link FormValueControl}.
          */
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Full items that resolve the current `value` key(s) without calling datasource `byKey`.
+         * Use when the parent already has the selected entity (e.g. edit forms). Seeds the internal
+         * item cache; missing keys still fall through to `find` / `byKey`.
+         */
+        this.valueItems = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueItems" }] : /* istanbul ignore next */ []));
         /**
          * Emitted when the selected value changes.
          */
@@ -877,6 +1243,22 @@ class AXLookupComponent extends NXComponent {
          * Emitted when the selection changes, carrying the resolved selected items.
          */
         this.onSelectionChanged = output();
+        /**
+         * Emitted when the trigger receives focus.
+         */
+        this.onFocus = output();
+        /**
+         * Emitted when the trigger loses focus.
+         */
+        this.onBlur = output();
+        /**
+         * Emitted when a list/tree item is clicked.
+         */
+        this.onItemClick = output();
+        /**
+         * Emitted when an item is selected (click or keyboard).
+         */
+        this.onItemSelected = output();
         /**
          * Emitted when the popup opens.
          */
@@ -888,6 +1270,9 @@ class AXLookupComponent extends NXComponent {
         /** Whether the popup is expanded. */
         this.expanded = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /** Whether the list is currently shown as a bottom actionsheet (small screens + adaptivity). */
+        this.isActionsheetStyle = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isActionsheetStyle" }] : /* istanbul ignore next */ []));
         /** Whether the current mode selects multiple values. */
         this.isMultiple = computed(() => this.mode() === 'multi-select' || this.mode() === 'multi-select-tree', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isMultiple" }] : /* istanbul ignore next */ []));
@@ -936,12 +1321,29 @@ class AXLookupComponent extends NXComponent {
          * 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.displayText()), /* @ts-ignore */
+        this.searchText = linkedSignal(() => (this.mode() === 'multi-select' || this.mode() === 'multi-select-tree' ? '' : this.displayText()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the trigger should render `selectedTemplate` instead of the plain input text.
+         * Searchable mode shows the template while the popup is closed and the input still matches
+         * the selected display text (same pattern as combo-box).
+         */
+        this.showSelectedTemplate = computed(() => {
+            if (this.isMultiple() || !this.selectedTemplate() || this.selectedItems().length === 0) {
+                return false;
+            }
+            if (!this.isEditableTrigger()) {
+                return true;
+            }
+            return !this.expanded() && this.searchText() === this.displayText();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSelectedTemplate" }] : /* istanbul ignore next */ []));
         this.popoverRef = viewChild(AXPopoverComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
         this.triggerSearchInput = viewChild('triggerSearchInput', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "triggerSearchInput" }] : /* istanbul ignore next */ []));
+        this.listView = viewChild(AXLookupListViewBase, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listView" }] : /* istanbul ignore next */ []));
         this.#itemsCache = new Map();
         this.#isUserInteraction = false;
         this.#lastValue = undefined;
@@ -959,13 +1361,31 @@ class AXLookupComponent extends NXComponent {
         ...(ngDevMode ? [{ debugName: "triggerSearchPlaceholder" }] : /* istanbul ignore next */ []));
         effect(() => this.#emitValueChanged(this.value()));
         effect(() => this.#emitOpenedOrClosed(this.expanded()));
-        // Resolve selected items whenever the value (or the sources) change.
         effect(() => {
+            this.adaptivityEnabled();
+            untracked(() => this.#syncActionsheetStyle());
+        });
+        this.#platform.resize.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.#syncActionsheetStyle();
+            // Match dropdown-box: close anchored dropdowns on resize; keep actionsheet open.
+            if (this.expanded() && !this.isActionsheetStyle()) {
+                this.close();
+            }
+        });
+        // Seed the actionsheet flag once.
+        this.#syncActionsheetStyle();
+        // Seed the item cache from valueItems, then resolve selection.
+        effect(() => {
+            const seeded = this.valueItems();
             const values = this.selectedValues();
+            this.valueField();
             this.mode();
             this.dataSource();
             this.treeDataSource();
-            untracked(() => void this.#resolveSelectedItems(values));
+            untracked(() => {
+                this.#seedItemsCache(seeded);
+                void this.#resolveSelectedItems(values);
+            });
         });
         // Keep the popover in sync with the expanded state.
         effect(() => {
@@ -984,10 +1404,18 @@ class AXLookupComponent extends NXComponent {
             });
         });
     }
+    #syncActionsheetStyle() {
+        this.isActionsheetStyle.set(this.adaptivityEnabled() && this.#platform.is('SM'));
+    }
     /** Returns the display text of an item using the `textField` mapping. */
     getItemText(item) {
         return String(item?.[this.textField()] ?? '');
     }
+    /** Stable unique key for selected chips — avoids NG0955 and remounts on reorder/remove. */
+    trackSelectedKey(item) {
+        const key = item?.[this.valueField()];
+        return key != null ? key : item;
+    }
     /**
      * Opens (editable trigger) or toggles the popup on trigger click.
      */
@@ -1001,6 +1429,69 @@ class AXLookupComponent extends NXComponent {
             return;
         }
         this.expanded.update((open) => !open);
+        if (!this.expanded()) {
+            return;
+        }
+        queueMicrotask(() => this.focusListFirst());
+    }
+    /**
+     * Focuses the lookup trigger input.
+     */
+    focus(options) {
+        if (this.disabled()) {
+            return;
+        }
+        this.triggerSearchInput()?.nativeElement.focus(options);
+    }
+    /**
+     * Handles keyboard interaction on the trigger input.
+     */
+    onTriggerKeydown(e) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (e.key === 'Escape') {
+            this.close();
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            this.expanded.set(true);
+            queueMicrotask(() => this.focusListFirst());
+            return;
+        }
+        if (!this.isEditableTrigger() && (e.key === 'Enter' || e.key === ' ')) {
+            e.preventDefault();
+            this.expanded.update((open) => !open);
+            if (this.expanded()) {
+                queueMicrotask(() => this.focusListFirst());
+            }
+        }
+    }
+    /** Blocks typing when the trigger is not editable (keeps Tab / keyboard open working). */
+    onBeforeInput(event) {
+        if (!this.isEditableTrigger() || this.readonly()) {
+            event.preventDefault();
+        }
+    }
+    /**
+     * Returns focus to the trigger input when list navigation requests it.
+     */
+    onListNavigateOut(_reason) {
+        this.triggerSearchInput()?.nativeElement.focus();
+    }
+    focusListFirst() {
+        const tryFocus = (attempt = 0) => {
+            const list = this.listView();
+            if (list) {
+                list.focusFirst();
+                return;
+            }
+            if (attempt < 5) {
+                setTimeout(() => tryFocus(attempt + 1), 16);
+            }
+        };
+        tryFocus();
     }
     /**
      * Keeps the expanded state in sync when the popover closes (e.g. click outside),
@@ -1008,7 +1499,7 @@ class AXLookupComponent extends NXComponent {
      */
     onPopoverClosed() {
         this.expanded.set(false);
-        this.searchText.set(this.mode() === 'multi-select' ? '' : this.displayText());
+        this.searchText.set(this.isMultiple() ? '' : this.displayText());
         if (this.#filterApplied) {
             this.#filterApplied = false;
             const source = this.resolvedDataSource();
@@ -1022,6 +1513,12 @@ class AXLookupComponent extends NXComponent {
     close() {
         this.expanded.set(false);
     }
+    /**
+     * Closes the popup (alias for {@link close}, required by `AXClosableComponent`).
+     */
+    closeAll() {
+        this.close();
+    }
     /**
      * Opens the popup.
      */
@@ -1035,6 +1532,9 @@ class AXLookupComponent extends NXComponent {
      * Handles typing in the editable trigger input.
      */
     onTriggerSearchInput(text) {
+        if (!this.isEditableTrigger()) {
+            return;
+        }
         this.searchText.set(text);
         this.expanded.set(true);
         this.#applyFilterDebounced(text);
@@ -1043,11 +1543,13 @@ class AXLookupComponent extends NXComponent {
      * Commits a single pick (drop-down-list, drop-down-tree, multi-column) and closes the popup.
      */
     handleSinglePick(e) {
+        this.#emitItemClick(e.item);
+        this.#emitItemSelected(e.item);
         this.#itemsCache.set(e.value, e.item);
-        if (!this.#valuesEqual(e.value, this.value())) {
-            this.#isUserInteraction = true;
-            this.value.set(e.value);
-        }
+        this.selectedItems.set([e.item]);
+        this.searchText.set(this.getItemText(e.item));
+        this.#isUserInteraction = true;
+        this.value.set(e.value);
         this.close();
     }
     /**
@@ -1055,9 +1557,13 @@ class AXLookupComponent extends NXComponent {
      * Clears the trigger search so the full list returns (select-box-like).
      */
     handleMultiToggle(e) {
+        this.#emitItemClick(e.item);
         this.#itemsCache.set(e.value, e.item);
         const current = this.selectedValues();
         const exists = current.some((v) => v == e.value);
+        if (!exists) {
+            this.#emitItemSelected(e.item);
+        }
         const next = exists ? current.filter((v) => !(v == e.value)) : [...current, e.value];
         this.#isUserInteraction = true;
         this.value.set(next);
@@ -1070,12 +1576,49 @@ class AXLookupComponent extends NXComponent {
      * Applies the multi-select-tree selection to the value; the popup stays open.
      */
     handleTreeSelectionChange(e) {
+        const prev = new Set(this.selectedValues().map((v) => String(v)));
+        const newlySelected = e.nodes.filter((node) => !prev.has(String(node[this.valueField()])));
+        if (newlySelected.length > 0) {
+            this.#emitItemSelected(newlySelected[0]);
+        }
         for (const node of e.nodes) {
             this.#itemsCache.set(String(node[this.valueField()]), node);
         }
         this.#isUserInteraction = true;
         this.value.set([...e.ids]);
     }
+    /** Forwards native focus from the trigger input. */
+    emitOnFocus(e) {
+        this.onFocus.emit({
+            component: this,
+            htmlElement: this.nativeElement,
+            nativeEvent: e,
+        });
+    }
+    /** Forwards native blur from the trigger input. */
+    emitOnBlur(e) {
+        this.onBlur.emit({
+            component: this,
+            htmlElement: this.nativeElement,
+            nativeEvent: e,
+        });
+    }
+    #emitItemClick(item) {
+        this.onItemClick.emit({
+            component: this,
+            item,
+            htmlElement: this.nativeElement,
+            isUserInteraction: true,
+        });
+    }
+    #emitItemSelected(item) {
+        this.onItemSelected.emit({
+            component: this,
+            item,
+            htmlElement: this.nativeElement,
+            isUserInteraction: true,
+        });
+    }
     /**
      * Removes a single chip from the multi selection.
      */
@@ -1088,16 +1631,42 @@ class AXLookupComponent extends NXComponent {
         this.#isUserInteraction = true;
         this.value.set(this.selectedValues().filter((v) => !(v == value)));
     }
+    /**
+     * 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.
+     *
+     * @param items - Full items that include `valueField` (and ideally `textField`) properties.
+     */
+    seedItems(items) {
+        this.#seedItemsCache(items);
+        void this.#resolveSelectedItems(this.selectedValues());
+    }
     /**
      * Clears the whole selection.
+     * Sets `null` in single modes and `[]` in multi modes. Used by projected `ax-clear-button`.
+     *
+     * @param isUserInteraction - Whether the clear was triggered by the user.
      */
-    clearAll(event) {
-        event.stopPropagation();
+    reset(isUserInteraction = false) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        this.#isUserInteraction = true;
-        this.value.set(this.isMultiple() ? [] : null);
+        const next = this.isMultiple() ? [] : null;
+        const current = this.value();
+        if (this.isMultiple()) {
+            if (Array.isArray(current) && current.length === 0) {
+                return;
+            }
+        }
+        else if (current == null) {
+            return;
+        }
+        this.#isUserInteraction = isUserInteraction;
+        this.value.set(next);
+        if (this.isEditableTrigger() && this.searchText()) {
+            this.searchText.set('');
+            this.#applyFilterDebounced('');
+        }
     }
     #applyFilterDebounced(text) {
         if (this.#searchDebounce) {
@@ -1135,6 +1704,20 @@ class AXLookupComponent extends NXComponent {
         }
         this.#selectionInitialized = true;
     }
+    #seedItemsCache(items) {
+        if (!items?.length) {
+            return;
+        }
+        const field = this.valueField();
+        for (const item of items) {
+            const key = item?.[field];
+            if (key == null) {
+                continue;
+            }
+            this.#itemsCache.set(key, item);
+            this.#itemsCache.set(String(key), item);
+        }
+    }
     #resolveItem(value) {
         const cached = this.#itemsCache.get(value) ?? this.#itemsCache.get(String(value));
         if (cached) {
@@ -1227,20 +1810,34 @@ class AXLookupComponent extends NXComponent {
         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: { 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 }, 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 } }, outputs: { disabled: "disabledChange", readonly: "readonlyChange", look: "lookChange", value: "valueChange", onValueChanged: "onValueChanged", onSelectionChanged: "onSelectionChanged", onOpened: "onOpened", onClosed: "onClosed" }, providers: [{ provide: AXComponent, useExisting: AXLookupComponent }], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: AXPopoverComponent, descendants: true, isSignal: true }, { propertyName: "triggerSearchInput", first: true, predicate: ["triggerSearchInput"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default ax-lookup-trigger\"\n  [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n  (click)=\"onTriggerClick()\"\n  (keydown.escape)=\"close()\"\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 $index) {\n        <span class=\"ax-lookup-chip\">\n          @if (selectedTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"selectedTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n          } @else {\n            <span class=\"ax-lookup-chip-text\">{{ getItemText(item) }}</span>\n          }\n          <button\n            type=\"button\"\n            class=\"ax-lookup-chip-remove\"\n            tabindex=\"-1\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"removeChip($event, item)\"\n          >\n            <span class=\"ax-icon ax-icon-close\"></span>\n          </button>\n        </span>\n      }\n      @if (isEditableTrigger()) {\n        <input\n          #triggerSearchInput\n          type=\"text\"\n          class=\"ax-input ax-lookup-trigger-search\"\n          [placeholder]=\"triggerSearchPlaceholder()\"\n          [disabled]=\"disabled()\"\n          [value]=\"searchText()\"\n          (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        />\n      } @else if (selectedItems().length === 0) {\n        <span class=\"ax-lookup-placeholder\">{{ placeholder() }}</span>\n      }\n    </div>\n    @if (selectedItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"clearAll($event)\"\n      >\n        <span class=\"ax-icon ax-icon-close\"></span>\n      </button>\n    }\n  } @else if (isEditableTrigger()) {\n    <input\n      #triggerSearchInput\n      type=\"text\"\n      class=\"ax-input\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [value]=\"searchText()\"\n      (input)=\"onTriggerSearchInput($any($event.target).value)\"\n    />\n  } @else {\n    @if (selectedTemplate() && selectedItems().length > 0) {\n      <div class=\"ax-lookup-selected-content\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n        />\n      </div>\n    } @else {\n      <input\n        type=\"text\"\n        class=\"ax-input ax-lookup-select-input\"\n        readonly\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [value]=\"displayText()\"\n      />\n    }\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]=\"origin.offsetWidth + 'px'\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div class=\"ax-lookup-popup\" (keydown.escape)=\"close()\">\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          (itemClick)=\"handleSinglePick($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          (itemClick)=\"handleMultiToggle($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          (itemClick)=\"handleSinglePick($event)\"\n        />\n      }\n    }\n  </div>\n</ax-popover>\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-editor-container.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-lookup .ax-editor-container.ax-state-disabled .ax-input,ax-lookup .ax-editor-container.ax-state-disabled .ax-editor{cursor:not-allowed}ax-lookup .ax-editor-container.ax-state-readonly{opacity:75%}ax-lookup .ax-lookup-trigger{cursor:pointer;--tw-outline-style: none;outline-style:none;-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-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}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-lookup-chip{display:inline-flex;max-width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-chip{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}ax-lookup .ax-lookup-chip .ax-lookup-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-lookup .ax-lookup-chip .ax-lookup-chip-remove{display:flex;width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}ax-lookup .ax-lookup-chip .ax-lookup-chip-remove:hover{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-chip .ax-lookup-chip-remove:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}ax-lookup .ax-lookup-chip .ax-lookup-chip-remove .ax-icon{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1}.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-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{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;justify-content:space-between;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:hover{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-lookup-option.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-state-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)){.ax-lookup-option.ax-state-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-option.ax-state-selected .ax-lookup-option-check{display:block;width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);rotate:45deg;border-right-style:var(--tw-border-style);border-right-width:2px;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-state-disabled{cursor:not-allowed;opacity:50%}.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{display:none;flex-shrink:0}.ax-lookup-option .ax-lookup-option-loading{width:100%;color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option .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-column-header{display:grid;width:100%;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.ax-lookup-column-header{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}@supports (color: color-mix(in lab,red,red)){.ax-lookup-column-header{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 70%,transparent)}}.ax-lookup-column-row{display:grid;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-column-row .ax-lookup-column-cell{min-width:calc(var(--spacing, .25rem) * 0);align-self:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-leading{syntax: \"*\"; inherits: false;}@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-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-leading: initial;--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-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: AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "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: ["columns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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: [
+            { 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-lookup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgTemplateOutlet,
+                        AsyncPipe,
+                        AXTranslatorPipe,
+                        AXChipsComponent,
+                        AXDecoratorModule,
                         AXPopoverComponent,
                         AXLookupDropDownListComponent,
                         AXLookupMultiSelectComponent,
                         AXLookupDropDownTreeComponent,
                         AXLookupMultiSelectTreeComponent,
                         AXLookupMultiColumnComponent,
-                    ], providers: [{ provide: AXComponent, useExisting: AXLookupComponent }], template: "<div\n  #origin\n  class=\"ax-editor-container ax-{{ look() }} ax-default ax-lookup-trigger\"\n  [class.ax-lookup-trigger-multiple]=\"isMultiple()\"\n  [class.ax-state-disabled]=\"disabled()\"\n  [class.ax-state-readonly]=\"readonly()\"\n  (click)=\"onTriggerClick()\"\n  (keydown.escape)=\"close()\"\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 $index) {\n        <span class=\"ax-lookup-chip\">\n          @if (selectedTemplate()) {\n            <ng-container [ngTemplateOutlet]=\"selectedTemplate()!\" [ngTemplateOutletContext]=\"{ $implicit: item }\" />\n          } @else {\n            <span class=\"ax-lookup-chip-text\">{{ getItemText(item) }}</span>\n          }\n          <button\n            type=\"button\"\n            class=\"ax-lookup-chip-remove\"\n            tabindex=\"-1\"\n            [disabled]=\"disabled() || readonly()\"\n            (click)=\"removeChip($event, item)\"\n          >\n            <span class=\"ax-icon ax-icon-close\"></span>\n          </button>\n        </span>\n      }\n      @if (isEditableTrigger()) {\n        <input\n          #triggerSearchInput\n          type=\"text\"\n          class=\"ax-input ax-lookup-trigger-search\"\n          [placeholder]=\"triggerSearchPlaceholder()\"\n          [disabled]=\"disabled()\"\n          [value]=\"searchText()\"\n          (input)=\"onTriggerSearchInput($any($event.target).value)\"\n        />\n      } @else if (selectedItems().length === 0) {\n        <span class=\"ax-lookup-placeholder\">{{ placeholder() }}</span>\n      }\n    </div>\n    @if (selectedItems().length > 0) {\n      <button\n        type=\"button\"\n        class=\"ax-general-button-icon\"\n        tabindex=\"-1\"\n        [disabled]=\"disabled() || readonly()\"\n        (click)=\"clearAll($event)\"\n      >\n        <span class=\"ax-icon ax-icon-close\"></span>\n      </button>\n    }\n  } @else if (isEditableTrigger()) {\n    <input\n      #triggerSearchInput\n      type=\"text\"\n      class=\"ax-input\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"disabled()\"\n      [value]=\"searchText()\"\n      (input)=\"onTriggerSearchInput($any($event.target).value)\"\n    />\n  } @else {\n    @if (selectedTemplate() && selectedItems().length > 0) {\n      <div class=\"ax-lookup-selected-content\">\n        <ng-container\n          [ngTemplateOutlet]=\"selectedTemplate()!\"\n          [ngTemplateOutletContext]=\"{ $implicit: selectedItems()[0] }\"\n        />\n      </div>\n    } @else {\n      <input\n        type=\"text\"\n        class=\"ax-input ax-lookup-select-input\"\n        readonly\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [value]=\"displayText()\"\n      />\n    }\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]=\"origin.offsetWidth + 'px'\"\n  [disabled]=\"disabled() || readonly()\"\n  (onClosed)=\"onPopoverClosed()\"\n>\n  <div class=\"ax-lookup-popup\" (keydown.escape)=\"close()\">\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          (itemClick)=\"handleSinglePick($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          (itemClick)=\"handleMultiToggle($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          (itemClick)=\"handleSinglePick($event)\"\n        />\n      }\n    }\n  </div>\n</ax-popover>\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-editor-container.ax-state-disabled{cursor:not-allowed;opacity:50%}ax-lookup .ax-editor-container.ax-state-disabled .ax-input,ax-lookup .ax-editor-container.ax-state-disabled .ax-editor{cursor:not-allowed}ax-lookup .ax-editor-container.ax-state-readonly{opacity:75%}ax-lookup .ax-lookup-trigger{cursor:pointer;--tw-outline-style: none;outline-style:none;-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-select-input{cursor:pointer;caret-color:transparent;-webkit-user-select:none;user-select:none}ax-lookup .ax-lookup-selected-content{display:flex;min-width:calc(var(--spacing, .25rem) * 0);flex:1;align-items:center;overflow:hidden}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-lookup-chip{display:inline-flex;max-width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 1);border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-chip{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 10%,transparent)}}ax-lookup .ax-lookup-chip .ax-lookup-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ax-lookup .ax-lookup-chip .ax-lookup-chip-remove{display:flex;width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0)}ax-lookup .ax-lookup-chip .ax-lookup-chip-remove:hover{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){ax-lookup .ax-lookup-chip .ax-lookup-chip-remove:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 15%,transparent)}}ax-lookup .ax-lookup-chip .ax-lookup-chip-remove .ax-icon{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: 1;line-height:1}.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-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{box-sizing:border-box;display:flex;cursor:pointer;align-items:center;justify-content:space-between;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:hover{background-color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}.ax-lookup-option.ax-state-selected{background-color:rgba(var(--ax-sys-color-primary-lightest-surface));color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-state-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)){.ax-lookup-option.ax-state-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-option.ax-state-selected .ax-lookup-option-check{display:block;width:calc(var(--spacing, .25rem) * 2);height:calc(var(--spacing, .25rem) * 2);rotate:45deg;border-right-style:var(--tw-border-style);border-right-width:2px;border-bottom-style:var(--tw-border-style);border-bottom-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface))}.ax-lookup-option.ax-state-disabled{cursor:not-allowed;opacity:50%}.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{display:none;flex-shrink:0}.ax-lookup-option .ax-lookup-option-loading{width:100%;color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-option .ax-lookup-option-loading{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-option .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-column-header{display:grid;width:100%;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-border-surface));background-color:rgba(var(--ax-sys-color-on-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-on-surface));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.ax-lookup-column-header{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 5%,transparent)}}@supports (color: color-mix(in lab,red,red)){.ax-lookup-column-header{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 70%,transparent)}}.ax-lookup-column-row{display:grid;gap:calc(var(--spacing, .25rem) * 2)}.ax-lookup-column-row .ax-lookup-column-cell{min-width:calc(var(--spacing, .25rem) * 0);align-self:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.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-leading{syntax: \"*\"; inherits: false;}@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-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-leading: initial;--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-font-weight: initial}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], ctorParameters: () => [], propDecorators: { 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 }] }], 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 }] }, { type: i0.Output, args: ["disabledChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }, { type: i0.Output, args: ["readonlyChange"] }], 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"] }], onValueChanged: [{ type: i0.Output, args: ["onValueChanged"] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], 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 }] }] } });
+                    ], 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 }] }] } });
 
 class AXLookupModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }