@acorex/components 22.0.0-next.32 → 22.0.0-next.34

package/fesm2022/acorex-components-lookup.mjs

@@ -0,0 +1,1279 @@
+import { AXListDataSource, NXComponent, convertArrayToDataSource, AXComponent } from '@acorex/cdk/common';
+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 { AXTranslatorPipe } from '@acorex/core/translation';
+import * as i1 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
+import { AXTreeViewComponent } from '@acorex/components/tree-view';
+
+/**
+ * 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`).
+ */
+class AXLookupListViewBase {
+    #ngZone;
+    constructor() {
+        /**
+         * The datasource providing the items (paged, remote-capable).
+         */
+        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 used by the virtual scroll viewport.
+         */
+        this.itemHeight = input(40, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * The maximum number of rows visible before the popup scrolls.
+         */
+        this.maxVisibleItems = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered for each item. Context: `$implicit` is the item.
+         */
+        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 for rows whose page is still loading.
+         */
+        this.loadingTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadingTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the user picks (or toggles) an item.
+         */
+        this.itemClick = output();
+        /** CDK virtual scroll adapter over the datasource. */
+        this.listDataSource = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listDataSource" }] : /* istanbul ignore next */ []));
+        this.totalCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "totalCount" }] : /* istanbul ignore next */ []));
+        this.isLoading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isEmpty = computed(() => this.totalCount() === 0 && !this.isLoading(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEmpty" }] : /* istanbul ignore next */ []));
+        /** Viewport height so the popup grows with the items up to `maxVisibleItems`. */
+        this.viewportHeight = computed(() => {
+            const count = this.totalCount() || (this.isLoading() ? 3 : 1);
+            return Math.min(count, this.maxVisibleItems()) * this.itemHeight();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportHeight" }] : /* istanbul ignore next */ []));
+        this.viewportRef = viewChild(CdkVirtualScrollViewport, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewportRef" }] : /* 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
+        // panel is still animating/positioning at that moment (and the height also changes when
+        // the loading placeholder is replaced by the real item count), so the measurement is stale
+        // and CDK renders too few rows, leaving empty space. A ResizeObserver on the viewport
+        // element re-measures on every actual size change, covering all of these cases.
+        effect((onCleanup) => {
+            const viewport = this.viewportRef();
+            if (!viewport || typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const observer = new ResizeObserver(() => {
+                this.#ngZone.run(() => viewport.checkViewportSize());
+            });
+            observer.observe(viewport.elementRef.nativeElement);
+            onCleanup(() => observer.disconnect());
+        });
+        effect((onCleanup) => {
+            const source = this.dataSource();
+            const list = new AXListDataSource({ source });
+            untracked(() => {
+                this.totalCount.set(source.totalCount);
+                this.isLoading.set(source.totalCount > 0 ? source.isLoading : true);
+                this.listDataSource.set(list);
+            });
+            const loadingSub = source.onLoadingChanged.subscribe((value) => this.isLoading.set(value));
+            const changedSub = source.onChanged.subscribe((e) => this.totalCount.set(e.totalCount));
+            onCleanup(() => {
+                loadingSub.unsubscribe();
+                changedSub.unsubscribe();
+            });
+        });
+    }
+    getValue(item) {
+        return item?.[this.valueField()];
+    }
+    getText(item) {
+        return String(item?.[this.textField()] ?? '');
+    }
+    isSelected(item) {
+        const value = this.getValue(item);
+        return this.selectedValues().some((v) => v == value);
+    }
+    isDisabled(item) {
+        return Boolean(item?.[this.disabledField()]);
+    }
+    handleItemClick(item) {
+        if (!item || this.isDisabled(item)) {
+            return;
+        }
+        this.itemClick.emit({ item, value: this.getValue(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 }); }
+}
+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 }] }] } });
+
+/**
+ * Internal mini component for the `drop-down-list` lookup mode:
+ * a predefined, virtualized list of options for picking single values.
+ *
+ * @category Components
+ */
+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: `
+    @if (isEmpty()) {
+      <div class="ax-lookup-empty">
+        @if (emptyTemplate()) {
+          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+        } @else {
+          {{ '@acorex:common.general.no-result-found' | translate | async }}
+        }
+      </div>
+    } @else {
+      <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"
+          [style.height.px]="itemHeight()"
+          [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 {
+              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
+              <span class="ax-lookup-option-check" aria-hidden="true"></span>
+            }
+          } @else {
+            <ng-container [ngTemplateOutlet]="loadingRow" />
+          }
+        </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>
+      }
+    </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-lookup-drop-down-list',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
+                    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 {
+      <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"
+          [style.height.px]="itemHeight()"
+          [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 {
+              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
+              <span class="ax-lookup-option-check" aria-hidden="true"></span>
+            }
+          } @else {
+            <ng-container [ngTemplateOutlet]="loadingRow" />
+          }
+        </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>
+      }
+    </ng-template>
+  `,
+                }]
+        }] });
+
+/**
+ * Internal mini component for the `drop-down-tree` lookup mode:
+ * a predefined list rendered in a tree-like structure for single item selection.
+ *
+ * @category Components
+ */
+class AXLookupDropDownTreeComponent {
+    constructor() {
+        /**
+         * The tree datasource: an array of nodes or a lazy children callback.
+         */
+        this.dataSource = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * The node property used as the selection value (tree `idField`).
+         */
+        this.valueField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * The node property used as the display text (tree `titleField`).
+         */
+        this.textField = input('title', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        /**
+         * The node property marking a node as disabled.
+         */
+        this.disabledField = input('disabled', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
+        /**
+         * Currently selected values (at most one for single selection).
+         */
+        this.selectedValues = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered for each tree node.
+         */
+        this.nodeTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the user selects a node.
+         */
+        this.itemClick = output();
+        this.selectedIds = computed(() => this.selectedValues().map((v) => String(v)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    }
+    handleSelectionChange(e) {
+        if (e.source !== 'user') {
+            return;
+        }
+        const node = e.selectedNodes[0];
+        if (!node) {
+            return;
+        }
+        this.itemClick.emit({ item: node, value: node[this.valueField()] });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXLookupDropDownTreeComponent, isStandalone: true, selector: "ax-lookup-drop-down-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: `
+    <div class="ax-lookup-tree">
+      <ax-tree-view
+        [datasource]="dataSource()"
+        selectMode="single"
+        selectionBehavior="all"
+        [controlledSelection]="true"
+        [selectedIds]="selectedIds()"
+        [idField]="valueField()"
+        [titleField]="textField()"
+        [disabledField]="disabledField()"
+        [nodeTemplate]="nodeTemplate()"
+        (onSelectionChange)="handleSelectionChange($event)"
+      />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupDropDownTreeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-lookup-drop-down-tree',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [AXTreeViewComponent],
+                    template: `
+    <div class="ax-lookup-tree">
+      <ax-tree-view
+        [datasource]="dataSource()"
+        selectMode="single"
+        selectionBehavior="all"
+        [controlledSelection]="true"
+        [selectedIds]="selectedIds()"
+        [idField]="valueField()"
+        [titleField]="textField()"
+        [disabledField]="disabledField()"
+        [nodeTemplate]="nodeTemplate()"
+        (onSelectionChange)="handleSelectionChange($event)"
+      />
+    </div>
+  `,
+                }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/**
+ * Internal mini component for the `multi-column` lookup mode:
+ * a table-structured, virtualized list with a sticky header row.
+ *
+ * @category Components
+ */
+class AXLookupMultiColumnComponent extends AXLookupListViewBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Column definitions rendered as a sticky header plus one grid cell per row.
+         */
+        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 */ []));
+    }
+    getCellText(item, column) {
+        return String(item?.[column.field] ?? '');
+    }
+    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 }}
+        }
+      </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()"
+      >
+        <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>
+    }
+
+    <ng-template #loadingRow>
+      @if (loadingTemplate()) {
+        <ng-container [ngTemplateOutlet]="loadingTemplate()!" />
+      } @else {
+        <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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-lookup-multi-column',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
+                    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()"
+      >
+        <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>
+    }
+
+    <ng-template #loadingRow>
+      @if (loadingTemplate()) {
+        <ng-container [ngTemplateOutlet]="loadingTemplate()!" />
+      } @else {
+        <span class="ax-lookup-option-loading">{{ '@acorex:common.status.loading' | translate | async }}</span>
+      }
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
+
+/**
+ * Internal mini component for the `multi-select-tree` lookup mode:
+ * a predefined list rendered in a tree-like structure for multiple item selection.
+ *
+ * @category Components
+ */
+class AXLookupMultiSelectTreeComponent {
+    constructor() {
+        /**
+         * The tree datasource: an array of nodes or a lazy children callback.
+         */
+        this.dataSource = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * The node property used as the selection value (tree `idField`).
+         */
+        this.valueField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * The node property used as the display text (tree `titleField`).
+         */
+        this.textField = input('title', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
+        /**
+         * The node property marking a node as disabled.
+         */
+        this.disabledField = input('disabled', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledField" }] : /* istanbul ignore next */ []));
+        /**
+         * Currently selected values.
+         */
+        this.selectedValues = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+        /**
+         * How selecting parent/child nodes affects each other. Passed through to the tree-view.
+         */
+        this.selectionBehavior = input('all', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered for each tree node.
+         */
+        this.nodeTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodeTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the user changes the tree selection.
+         */
+        this.selectionChange = output();
+        this.selectedIds = computed(() => this.selectedValues().map((v) => String(v)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+    }
+    handleSelectionChange(e) {
+        if (e.source !== 'user') {
+            return;
+        }
+        this.selectionChange.emit({ ids: e.selectedIds, nodes: e.selectedNodes });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXLookupMultiSelectTreeComponent, isStandalone: true, selector: "ax-lookup-multi-select-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, disabledField: { classPropertyName: "disabledField", publicName: "disabledField", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplate: { classPropertyName: "nodeTemplate", publicName: "nodeTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: `
+    <div class="ax-lookup-tree">
+      <ax-tree-view
+        [datasource]="dataSource()"
+        selectMode="multiple"
+        [selectionBehavior]="selectionBehavior()"
+        [controlledSelection]="true"
+        [selectedIds]="selectedIds()"
+        [idField]="valueField()"
+        [titleField]="textField()"
+        [disabledField]="disabledField()"
+        [nodeTemplate]="nodeTemplate()"
+        (onSelectionChange)="handleSelectionChange($event)"
+      />
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectTreeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-lookup-multi-select-tree',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [AXTreeViewComponent],
+                    template: `
+    <div class="ax-lookup-tree">
+      <ax-tree-view
+        [datasource]="dataSource()"
+        selectMode="multiple"
+        [selectionBehavior]="selectionBehavior()"
+        [controlledSelection]="true"
+        [selectedIds]="selectedIds()"
+        [idField]="valueField()"
+        [titleField]="textField()"
+        [disabledField]="disabledField()"
+        [nodeTemplate]="nodeTemplate()"
+        (onSelectionChange)="handleSelectionChange($event)"
+      />
+    </div>
+  `,
+                }]
+        }], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], disabledField: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledField", required: false }] }], selectedValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValues", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], nodeTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplate", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }] } });
+
+/**
+ * Internal mini component for the `multi-select` lookup mode:
+ * a predefined, virtualized list of options with checkboxes for multiple item selection.
+ *
+ * @category Components
+ */
+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: `
+    @if (isEmpty()) {
+      <div class="ax-lookup-empty">
+        @if (emptyTemplate()) {
+          <ng-container [ngTemplateOutlet]="emptyTemplate()!" />
+        } @else {
+          {{ '@acorex:common.general.no-result-found' | translate | async }}
+        }
+      </div>
+    } @else {
+      <cdk-virtual-scroll-viewport
+        class="ax-lookup-viewport"
+        role="listbox"
+        aria-multiselectable="true"
+        [itemSize]="itemHeight()"
+        [style.height.px]="viewportHeight()"
+      >
+        <div
+          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
+          role="option"
+          class="ax-lookup-option"
+          [style.height.px]="itemHeight()"
+          [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) {
+            <input
+              type="checkbox"
+              class="ax-lookup-checkbox"
+              tabindex="-1"
+              [checked]="isSelected(item)"
+              [disabled]="isDisabled(item)"
+            />
+            @if (itemTemplate()) {
+              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+            } @else {
+              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
+            }
+          } @else {
+            <ng-container [ngTemplateOutlet]="loadingRow" />
+          }
+        </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>
+      }
+    </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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ax-lookup-multi-select',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    imports: [ScrollingModule, NgTemplateOutlet, AXTranslatorPipe, AsyncPipe],
+                    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 {
+      <cdk-virtual-scroll-viewport
+        class="ax-lookup-viewport"
+        role="listbox"
+        aria-multiselectable="true"
+        [itemSize]="itemHeight()"
+        [style.height.px]="viewportHeight()"
+      >
+        <div
+          *cdkVirtualFor="let item of listDataSource(); trackBy: trackByIndex"
+          role="option"
+          class="ax-lookup-option"
+          [style.height.px]="itemHeight()"
+          [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) {
+            <input
+              type="checkbox"
+              class="ax-lookup-checkbox"
+              tabindex="-1"
+              [checked]="isSelected(item)"
+              [disabled]="isDisabled(item)"
+            />
+            @if (itemTemplate()) {
+              <ng-container [ngTemplateOutlet]="itemTemplate()!" [ngTemplateOutletContext]="{ $implicit: item }" />
+            } @else {
+              <span class="ax-lookup-option-text">{{ getText(item) }}</span>
+            }
+          } @else {
+            <ng-container [ngTemplateOutlet]="loadingRow" />
+          }
+        </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>
+      }
+    </ng-template>
+  `,
+                }]
+        }] });
+
+/**
+ * An advanced drop-down (lookup) editor with five modes, `AXDataSource` support, and virtual scrolling.
+ *
+ * Modes (each rendered by its own internal mini component):
+ * - `drop-down-list` — a predefined list of options for picking single values.
+ * - `multi-select` — a predefined list of options for multiple item selection (chips in the trigger).
+ * - `drop-down-tree` — a predefined list rendered in a tree-like structure for single item selection.
+ * - `multi-select-tree` — a tree-like structure for multiple item selection.
+ * - `multi-column` — a table-structured list with an editable typeahead input.
+ *
+ * @category Components
+ */
+class AXLookupComponent extends NXComponent {
+    #itemsCache;
+    #isUserInteraction;
+    #lastValue;
+    #lastExpanded;
+    #resolveRevision;
+    #selectionInitialized;
+    #filterApplied;
+    #searchDebounce;
+    constructor() {
+        super();
+        /**
+         * The lookup rendering mode. Selects which mini component renders in the popup.
+         */
+        this.mode = input('drop-down-list', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /**
+         * The items source for list-based modes (`drop-down-list`, `multi-select`, `multi-column`).
+         * Accepts an `AXDataSource` (remote paging, `byKey`, server-side filter) or a plain array.
+         */
+        this.dataSource = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * The nodes source for tree modes (`drop-down-tree`, `multi-select-tree`):
+         * an array of nodes or a lazy children callback.
+         */
+        this.treeDataSource = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeDataSource" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property used as the selection value. Maps to the tree `idField` in tree modes.
+         */
+        this.valueField = input('id', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * The item property used as the display text. Maps to the tree `titleField` in tree modes
+         * (set it to `title` when your nodes use the default tree shape).
+         */
+        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 */ []));
+        /**
+         * Column definitions for the `multi-column` mode.
+         */
+        this.columns = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether typed text filters the datasource. Shows a search box inside the popup for
+         * `drop-down-list` / `multi-select`; in `multi-column` mode the trigger input itself filters.
+         */
+        this.searchable = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+        /**
+         * The placeholder of the popup search box.
+         */
+        this.searchPlaceholder = input('Search...', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+        /**
+         * The placeholder text shown when no value is selected.
+         */
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the lookup is disabled.
+         */
+        this.disabled = model(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Whether the lookup is readonly.
+         */
+        this.readonly = model(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.
+         */
+        this.look = model('solid', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
+        /**
+         * The fixed row height in pixels used by the virtual scroll viewport (list-based modes).
+         */
+        this.itemHeight = input(40, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * The maximum number of rows visible before the popup scrolls (list-based modes).
+         */
+        this.maxVisibleItems = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : /* istanbul ignore next */ []));
+        /**
+         * How selecting parent/child nodes affects each other in `multi-select-tree` mode.
+         */
+        this.treeSelectionBehavior = input('all', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeSelectionBehavior" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template rendered for each item/node. Context: `$implicit` is the item.
+         */
+        this.itemTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * Custom template for the selected item display (trigger text / chips). Context: `$implicit` is the item.
+         */
+        this.selectedTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* 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 for rows whose page is still loading.
+         */
+        this.loadingTemplate = input(undefined, /* @ts-ignore */
+        ...(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.
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * Emitted when the selected value changes.
+         */
+        this.onValueChanged = output();
+        /**
+         * Emitted when the selection changes, carrying the resolved selected items.
+         */
+        this.onSelectionChanged = output();
+        /**
+         * Emitted when the popup opens.
+         */
+        this.onOpened = output();
+        /**
+         * Emitted when the popup closes.
+         */
+        this.onClosed = output();
+        /** Whether the popup is expanded. */
+        this.expanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* 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 */ []));
+        /** Whether the current mode renders a tree. */
+        this.isTreeMode = computed(() => this.mode() === 'drop-down-tree' || this.mode() === 'multi-select-tree', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTreeMode" }] : /* istanbul ignore next */ []));
+        /** Whether the trigger input is editable (multi-column typeahead). */
+        this.isEditableTrigger = computed(() => this.mode() === 'multi-column' && this.searchable() && !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEditableTrigger" }] : /* istanbul ignore next */ []));
+        /** Whether the popup shows a search box row. */
+        this.showPopupSearch = computed(() => this.searchable() && (this.mode() === 'drop-down-list' || this.mode() === 'multi-select'), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPopupSearch" }] : /* istanbul ignore next */ []));
+        /** The datasource for list-based modes; plain arrays are converted. */
+        this.resolvedDataSource = computed(() => {
+            const source = this.dataSource();
+            if (!source) {
+                return convertArrayToDataSource([], { key: this.valueField(), pageSize: 20 });
+            }
+            return Array.isArray(source)
+                ? convertArrayToDataSource(source, { key: this.valueField(), pageSize: 20 })
+                : source;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedDataSource" }] : /* istanbul ignore next */ []));
+        /** The current selection normalized to an array. */
+        this.selectedValues = computed(() => {
+            const value = this.value();
+            if (value == null) {
+                return [];
+            }
+            return Array.isArray(value) ? value : [value];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedValues" }] : /* istanbul ignore next */ []));
+        /** The resolved selected items (via cache, datasource `find`/`byKey`, or tree node lookup). */
+        this.selectedItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+        /** Display text shown in the trigger for single modes. */
+        this.displayText = computed(() => {
+            const item = this.selectedItems()[0];
+            return item ? this.getItemText(item) : '';
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+        /** The text typed in the editable (multi-column) trigger input. */
+        this.searchText = linkedSignal(() => this.displayText(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+        /** The text typed in the popup search box. */
+        this.popupSearchText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupSearchText" }] : /* istanbul ignore next */ []));
+        this.popoverRef = viewChild(AXPopoverComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popoverRef" }] : /* istanbul ignore next */ []));
+        this.#itemsCache = new Map();
+        this.#isUserInteraction = false;
+        this.#lastValue = undefined;
+        this.#lastExpanded = undefined;
+        this.#resolveRevision = 0;
+        this.#selectionInitialized = false;
+        this.#filterApplied = false;
+        effect(() => this.#emitValueChanged(this.value()));
+        effect(() => this.#emitOpenedOrClosed(this.expanded()));
+        // Resolve selected items whenever the value (or the sources) change.
+        effect(() => {
+            const values = this.selectedValues();
+            this.mode();
+            this.dataSource();
+            this.treeDataSource();
+            untracked(() => void this.#resolveSelectedItems(values));
+        });
+        // Keep the popover in sync with the expanded state.
+        effect(() => {
+            const expanded = this.expanded();
+            const popover = this.popoverRef();
+            if (!popover) {
+                return;
+            }
+            untracked(() => {
+                if (expanded && !popover.isOpen) {
+                    void popover.open();
+                }
+                else if (!expanded && popover.isOpen) {
+                    popover.close();
+                }
+            });
+        });
+    }
+    /** Returns the display text of an item using the `textField` mapping. */
+    getItemText(item) {
+        return String(item?.[this.textField()] ?? '');
+    }
+    /**
+     * Opens (editable trigger) or toggles the popup on trigger click.
+     */
+    onTriggerClick() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (this.isEditableTrigger()) {
+            this.expanded.set(true);
+            return;
+        }
+        this.expanded.update((open) => !open);
+    }
+    /**
+     * Keeps the expanded state in sync when the popover closes (e.g. click outside),
+     * and clears any applied search filter.
+     */
+    onPopoverClosed() {
+        this.expanded.set(false);
+        this.popupSearchText.set('');
+        this.searchText.set(this.displayText());
+        if (this.#filterApplied) {
+            this.#filterApplied = false;
+            const source = this.resolvedDataSource();
+            source.clearFilter();
+            source.refresh();
+        }
+    }
+    /**
+     * Closes the popup.
+     */
+    close() {
+        this.expanded.set(false);
+    }
+    /**
+     * Opens the popup.
+     */
+    open() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.expanded.set(true);
+    }
+    /**
+     * Handles typing in the editable (multi-column) trigger input.
+     */
+    onTriggerSearchInput(text) {
+        this.searchText.set(text);
+        this.expanded.set(true);
+        this.#applyFilterDebounced(text);
+    }
+    /**
+     * Handles typing in the popup search box.
+     */
+    onPopupSearchInput(text) {
+        this.popupSearchText.set(text);
+        this.#applyFilterDebounced(text);
+    }
+    /**
+     * Commits a single pick (drop-down-list, drop-down-tree, multi-column) and closes the popup.
+     */
+    handleSinglePick(e) {
+        this.#itemsCache.set(e.value, e.item);
+        if (!this.#valuesEqual(e.value, this.value())) {
+            this.#isUserInteraction = true;
+            this.value.set(e.value);
+        }
+        this.close();
+    }
+    /**
+     * Toggles an item in the multi-select list; the popup stays open.
+     */
+    handleMultiToggle(e) {
+        this.#itemsCache.set(e.value, e.item);
+        const current = this.selectedValues();
+        const exists = current.some((v) => v == e.value);
+        const next = exists ? current.filter((v) => !(v == e.value)) : [...current, e.value];
+        this.#isUserInteraction = true;
+        this.value.set(next);
+    }
+    /**
+     * Applies the multi-select-tree selection to the value; the popup stays open.
+     */
+    handleTreeSelectionChange(e) {
+        for (const node of e.nodes) {
+            this.#itemsCache.set(String(node[this.valueField()]), node);
+        }
+        this.#isUserInteraction = true;
+        this.value.set([...e.ids]);
+    }
+    /**
+     * Removes a single chip from the multi selection.
+     */
+    removeChip(event, item) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const value = item?.[this.valueField()];
+        this.#isUserInteraction = true;
+        this.value.set(this.selectedValues().filter((v) => !(v == value)));
+    }
+    /**
+     * Clears the whole selection.
+     */
+    clearAll(event) {
+        event.stopPropagation();
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.#isUserInteraction = true;
+        this.value.set(this.isMultiple() ? [] : null);
+    }
+    #applyFilterDebounced(text) {
+        if (this.#searchDebounce) {
+            clearTimeout(this.#searchDebounce);
+        }
+        this.#searchDebounce = setTimeout(() => {
+            const source = this.resolvedDataSource();
+            const query = text?.trim() ?? '';
+            if (query) {
+                source.filter({ field: this.textField(), value: query, operator: { type: 'contains' } });
+                this.#filterApplied = true;
+            }
+            else {
+                source.clearFilter();
+            }
+            source.refresh();
+        }, 300);
+    }
+    async #resolveSelectedItems(values) {
+        const revision = ++this.#resolveRevision;
+        const resolved = await Promise.all(values.map((value) => Promise.resolve(this.#resolveItem(value))));
+        if (revision !== this.#resolveRevision) {
+            return;
+        }
+        const items = resolved.filter((item) => item != null);
+        this.selectedItems.set(items);
+        if (this.#selectionInitialized) {
+            this.onSelectionChanged.emit({
+                component: this,
+                htmlElement: this.nativeElement,
+                isUserInteraction: this.#isUserInteraction,
+                items,
+                value: this.value(),
+            });
+        }
+        this.#selectionInitialized = true;
+    }
+    #resolveItem(value) {
+        const cached = this.#itemsCache.get(value) ?? this.#itemsCache.get(String(value));
+        if (cached) {
+            return cached;
+        }
+        if (this.isTreeMode()) {
+            const nodes = this.treeDataSource();
+            if (Array.isArray(nodes)) {
+                const found = this.#findTreeNode(nodes, value);
+                if (found) {
+                    this.#itemsCache.set(value, found);
+                    return found;
+                }
+            }
+            return this.#fallbackItem(value);
+        }
+        const source = this.resolvedDataSource();
+        const result = source.find(value);
+        if (result == null) {
+            return this.#fallbackItem(value);
+        }
+        if (result instanceof Promise) {
+            return result.then((item) => {
+                if (item) {
+                    this.#itemsCache.set(value, item);
+                    return item;
+                }
+                return this.#fallbackItem(value);
+            });
+        }
+        this.#itemsCache.set(value, result);
+        return result;
+    }
+    #fallbackItem(value) {
+        return { [this.valueField()]: value, [this.textField()]: String(value) };
+    }
+    #findTreeNode(nodes, value) {
+        for (const node of nodes) {
+            if (String(node[this.valueField()]) === String(value)) {
+                return node;
+            }
+            const children = node['children'];
+            if (Array.isArray(children)) {
+                const found = this.#findTreeNode(children, value);
+                if (found) {
+                    return found;
+                }
+            }
+        }
+        return null;
+    }
+    #valuesEqual(a, b) {
+        if (a === b) {
+            return true;
+        }
+        if (Array.isArray(a) && Array.isArray(b)) {
+            return a.length === b.length && a.every((item, index) => item == b[index]);
+        }
+        return false;
+    }
+    /** Emits onValueChanged when the value actually changes (skips the initial value). */
+    #emitValueChanged(value) {
+        const previous = this.#lastValue;
+        this.#lastValue = value;
+        if (previous === undefined || this.#valuesEqual(previous, value)) {
+            return;
+        }
+        this.onValueChanged.emit({
+            component: this,
+            htmlElement: this.nativeElement,
+            name: 'value',
+            value,
+            oldValue: previous,
+            isUserInteraction: this.#isUserInteraction,
+        });
+        this.#isUserInteraction = false;
+    }
+    /** Emits onOpened/onClosed when the expanded state actually changes (skips the initial state). */
+    #emitOpenedOrClosed(expanded) {
+        const previous = this.#lastExpanded;
+        this.#lastExpanded = expanded;
+        if (previous === undefined || previous === expanded) {
+            return;
+        }
+        const event = {
+            component: this,
+            htmlElement: this.nativeElement,
+            isUserInteraction: true,
+        };
+        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 }], 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      } @empty {\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      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    @if (showPopupSearch()) {\n      <div class=\"ax-lookup-search\">\n        <span class=\"ax-icon ax-icon-search\"></span>\n        <input\n          type=\"text\"\n          class=\"ax-lookup-search-input\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"popupSearchText()\"\n          (input)=\"onPopupSearchInput($any($event.target).value)\"\n        />\n      </div>\n    }\n\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-prefix,ax-lookup .ax-editor-container ax-suffix{display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 0);align-self:center;padding:calc(var(--spacing, .25rem) * 0);padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-lookup .ax-editor-container ax-prefix,ax-lookup .ax-editor-container ax-suffix)>ax-icon,:is(ax-lookup .ax-editor-container ax-prefix,ax-lookup .ax-editor-container ax-suffix)>ax-text{display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}:is(ax-lookup .ax-editor-container ax-prefix,ax-lookup .ax-editor-container ax-suffix)>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}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-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-search{display:flex;align-items:center;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));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-search>.ax-icon{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-search>.ax-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-search .ax-lookup-search-input{width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;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-search .ax-lookup-search-input::placeholder{color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-search .ax-lookup-search-input::placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.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-leading{syntax: \"*\"; inherits: false;}@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-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-leading: initial;--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-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 }); }
+}
+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,
+                        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      } @empty {\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      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    @if (showPopupSearch()) {\n      <div class=\"ax-lookup-search\">\n        <span class=\"ax-icon ax-icon-search\"></span>\n        <input\n          type=\"text\"\n          class=\"ax-lookup-search-input\"\n          [placeholder]=\"searchPlaceholder()\"\n          [value]=\"popupSearchText()\"\n          (input)=\"onPopupSearchInput($any($event.target).value)\"\n        />\n      </div>\n    }\n\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-prefix,ax-lookup .ax-editor-container ax-suffix{display:flex;width:calc(var(--spacing, .25rem) * 6);height:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 0);align-self:center;padding:calc(var(--spacing, .25rem) * 0);padding-inline-end:calc(var(--spacing, .25rem) * 0)}:is(ax-lookup .ax-editor-container ax-prefix,ax-lookup .ax-editor-container ax-suffix)>ax-icon,:is(ax-lookup .ax-editor-container ax-prefix,ax-lookup .ax-editor-container ax-suffix)>ax-text{display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}:is(ax-lookup .ax-editor-container ax-prefix,ax-lookup .ax-editor-container ax-suffix)>ax-icon{width:calc(var(--spacing, .25rem) * 4);height:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}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-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-search{display:flex;align-items:center;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));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.ax-lookup-search>.ax-icon{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-search>.ax-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.ax-lookup-search .ax-lookup-search-input{width:100%;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;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-search .ax-lookup-search-input::placeholder{color:rgba(var(--ax-sys-color-on-surface))}@supports (color: color-mix(in lab,red,red)){.ax-lookup-search .ax-lookup-search-input::placeholder{color:color-mix(in oklab,rgba(var(--ax-sys-color-on-surface)) 50%,transparent)}}.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-leading{syntax: \"*\"; inherits: false;}@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-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-leading: initial;--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-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 }] }] } });
+
+class AXLookupModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, imports: [AXLookupComponent,
+            AXLookupDropDownListComponent,
+            AXLookupMultiSelectComponent,
+            AXLookupDropDownTreeComponent,
+            AXLookupMultiSelectTreeComponent,
+            AXLookupMultiColumnComponent], exports: [AXLookupComponent,
+            AXLookupDropDownListComponent,
+            AXLookupMultiSelectComponent,
+            AXLookupDropDownTreeComponent,
+            AXLookupMultiSelectTreeComponent,
+            AXLookupMultiColumnComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, imports: [AXLookupComponent,
+            AXLookupDropDownListComponent,
+            AXLookupMultiSelectComponent,
+            AXLookupDropDownTreeComponent,
+            AXLookupMultiSelectTreeComponent,
+            AXLookupMultiColumnComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXLookupModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        AXLookupComponent,
+                        AXLookupDropDownListComponent,
+                        AXLookupMultiSelectComponent,
+                        AXLookupDropDownTreeComponent,
+                        AXLookupMultiSelectTreeComponent,
+                        AXLookupMultiColumnComponent,
+                    ],
+                    exports: [
+                        AXLookupComponent,
+                        AXLookupDropDownListComponent,
+                        AXLookupMultiSelectComponent,
+                        AXLookupDropDownTreeComponent,
+                        AXLookupMultiSelectTreeComponent,
+                        AXLookupMultiColumnComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXLookupComponent, AXLookupDropDownListComponent, AXLookupDropDownTreeComponent, AXLookupModule, AXLookupMultiColumnComponent, AXLookupMultiSelectComponent, AXLookupMultiSelectTreeComponent };
+//# sourceMappingURL=acorex-components-lookup.mjs.map