@nexterajs/ui 0.0.1 → 0.1.0

package/fesm2022/nexterajs-ui-dropdowns.mjs

@@ -2,22 +2,167 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, viewChild, contentChildren, input, computed, booleanAttribute, output, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, model, Injector, InjectionToken, ElementRef, TemplateRef, Directive } from '@angular/core';
+import { signal, inject, DestroyRef, ViewContainerRef, viewChild, contentChildren, input, computed, numberAttribute, booleanAttribute, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, model, Injector, InjectionToken, ElementRef, TemplateRef, Directive } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { merge, filter, distinctUntilChanged, Subject } from 'rxjs';
-import { NxeFormControlBase, NxeTemplateDirective, nxeOptionalBoolean, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Subject, switchMap, timer, map, firstValueFrom, from, filter, catchError, EMPTY, merge, mergeMap, distinctUntilChanged } from 'rxjs';
+import { NxeFormControlBase, NxeTemplateDirective, nxeOptionalBoolean, nxeResolveText, nxeResolveExpr, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
 import { nxePane, trackPaneFlip } from '@nexterajs/ui/styling';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/** True for a store object (anything with a `load` function that is not an array). */
+function nxeIsPickerStore(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        typeof value.load === 'function');
+}
+/**
+ * The search plumbing shared by the pickers: debounces typing by `searchTimeout`, emits
+ * `searchChange` once the text reaches `minSearchLength` (or is cleared), and, when the
+ * `dataSource` is a {@link NxePickerStore}, queries it and keeps only the newest response.
+ * Must be created in an injection context. It uses no `effect()`: it reacts only to the explicit
+ * {@link typed}, {@link open} and {@link loadMore} calls.
+ */
+class NxePickerSearch {
+    cfg;
+    /** Rows of the store loaded so far (all pages of the current query). */
+    items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hasMore = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    typedText = new Subject();
+    loadedFor = null;
+    seq = 0;
+    controller = null;
+    constructor(cfg) {
+        this.cfg = cfg;
+        const destroyRef = inject(DestroyRef);
+        this.typedText
+            .pipe(switchMap((text) => timer(Math.max(0, cfg.searchTimeout())).pipe(map(() => text))), takeUntilDestroyed(destroyRef))
+            .subscribe((text) => this.settled(text));
+        destroyRef.onDestroy(() => this.controller?.abort());
+    }
+    get hasStore() {
+        return this.cfg.store() !== null;
+    }
+    /** True when `text` is long enough to be searched. */
+    reachesMinimum(text) {
+        return text.length >= this.cfg.minSearchLength();
+    }
+    /** The user typed; the search settles after `searchTimeout`. */
+    typed(text) {
+        this.typedText.next(text);
+    }
+    /** The panel opened with `text` in the field: load the first page unless that query is current. */
+    open(text) {
+        if (this.hasStore && this.loadedFor !== this.effective(text)) {
+            this.query(text);
+        }
+    }
+    /** Loads the next page of the current query (a scroll-to-bottom handler calls this). */
+    loadMore() {
+        if (this.hasStore && this.hasMore() && !this.loading()) {
+            void this.run(this.loadedFor ?? '', true);
+        }
+    }
+    /** Fetches one row by key through `byKey`; `null` when the store cannot or does not know it. */
+    async lookup(key) {
+        const store = this.cfg.store();
+        if (!store?.byKey) {
+            return null;
+        }
+        const controller = new AbortController();
+        try {
+            return (await firstValueFrom(from(store.byKey(key, { signal: controller.signal })))) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    settled(text) {
+        if (text === '' || this.reachesMinimum(text)) {
+            this.cfg.searchChange({ searchValue: text });
+        }
+        if (this.hasStore) {
+            this.query(text);
+        }
+    }
+    /** The text actually sent to the store: below the minimum nothing is searched. */
+    effective(text) {
+        if (this.reachesMinimum(text)) {
+            return text;
+        }
+        return this.cfg.showDataBeforeSearch() ? '' : null;
+    }
+    query(text) {
+        const effective = this.effective(text);
+        if (effective === null) {
+            this.cancel();
+            this.items.set([]);
+            this.hasMore.set(false);
+            this.loadedFor = null;
+            this.cfg.loaded?.();
+            return;
+        }
+        void this.run(effective, false);
+    }
+    cancel() {
+        this.seq++;
+        this.controller?.abort();
+        this.controller = null;
+        this.loading.set(false);
+    }
+    async run(text, append) {
+        const store = this.cfg.store();
+        if (!store) {
+            return;
+        }
+        this.cancel();
+        const seq = this.seq;
+        const controller = new AbortController();
+        this.controller = controller;
+        this.loading.set(true);
+        this.error.set(null);
+        const take = Math.max(1, this.cfg.pageSize());
+        const skip = append ? this.items().length : 0;
+        try {
+            const raw = await firstValueFrom(from(store.load({ searchValue: text, searchExpr: this.cfg.searchExpr(), searchOperation: 'contains', skip, take }, { signal: controller.signal })));
+            if (seq !== this.seq) {
+                return;
+            }
+            const data = Array.isArray(raw) ? raw : (raw.data ?? []);
+            const total = Array.isArray(raw) ? undefined : raw.totalCount;
+            const next = append ? [...this.items(), ...data] : data;
+            this.items.set(next);
+            this.hasMore.set(total !== undefined ? next.length < total : data.length >= take);
+            this.loadedFor = text;
+            this.loading.set(false);
+            this.cfg.loaded?.();
+        }
+        catch (error) {
+            if (seq !== this.seq) {
+                return;
+            }
+            this.error.set(error);
+            this.loading.set(false);
+        }
+    }
+}
 
 /**
  * `nxe-select-box` — drop-in replacement for DevExtreme `dx-select-box`.
  *
  * A signal-CVA single-select dropdown over a plain array (`[dataSource]`). It bakes in the app's
  * global `dxSelectBox.defaultOptions` (`displayExpr='lovName'`, `valueExpr='lovCode'`,
- * `searchEnabled`, `showClearButton`), so the bound control value is the `valueExpr` field
- * (a string code) and the field shows the `displayExpr` field. Dropdown is a CDK overlay with
- * an in-field search filter. Emits `(valueChange)` (the code) and `(onSelectionChanged)`
- * (`{selectedItem}`). Hosts a projected `nxe-validator` via {@link NXE_VALIDATION_TARGET}.
+ * `searchEnabled`), so the bound control value is the `valueExpr` field (a string code) and the
+ * field shows the `displayExpr` field. The clear button follows dx and is off unless asked for.
+ * Dropdown is a CDK overlay with an in-field search filter. Emits `(valueChange)` (the code) and
+ * `(onSelectionChanged)` (`{selectedItem}`). Hosts a projected `nxe-validator` via
+ * {@link NXE_VALIDATION_TARGET}.
  */
 class NxeSelectBoxComponent extends NxeFormControlBase {
     overlay = inject(Overlay);
@@ -28,7 +173,10 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     templates = contentChildren(NxeTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    /** The source array (plain JS array of `Lov`-shaped objects, or primitives). */
+    /**
+     * The source: a plain array of `Lov`-shaped objects (or primitives), or an {@link NxePickerStore}
+     * whose `load({searchValue, skip, take})` the box calls itself (server-side search).
+     */
     dataSource = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
     /** Field shown in the box/list (DevExtreme default `lovName`). Empty => the item itself. */
@@ -41,13 +189,24 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
     /** Field matched while searching (DevExtreme default `lovName`). */
     searchExprInput = input(undefined, { ...(ngDevMode ? { debugName: "searchExprInput" } : /* istanbul ignore next */ {}), alias: 'searchExpr' });
-    searchExpr = computed(() => this.searchExprInput() ?? this.nxeDefaults.selectBox?.searchExpr ?? 'lovName', /* @ts-ignore */
+    /**
+     * dx searches by `displayExpr` when `searchExpr` is not given. Defaulting to the literal
+     * 'lovName' instead meant that any picker with a custom displayExpr searched a field its
+     * items do not have, and found nothing - silently, because an empty result looks like no
+     * match. Where displayExpr is the default this resolves to 'lovName' exactly as before.
+     */
+    searchExpr = computed(() => this.searchExprInput() ?? this.nxeDefaults.selectBox?.searchExpr ?? this.displayExpr(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchExpr" }] : /* istanbul ignore next */ []));
     searchEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "searchEnabledInput" } : /* istanbul ignore next */ {}), alias: 'searchEnabled', transform: nxeOptionalBoolean });
     searchEnabled = computed(() => this.searchEnabledInput() ?? this.nxeDefaults.selectBox?.searchEnabled ?? true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchEnabled" }] : /* istanbul ignore next */ []));
     showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
-    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.selectBox?.showClearButton ?? true, /* @ts-ignore */
+    /**
+     * dx defaults `showClearButton` to false (m_text_editor.base.js). The library used to default it
+     * on, which gave every host that never asked for one a clear button dx would not show. An app
+     * that wants it everywhere says so once through `NXE_DEFAULT_OPTIONS.selectBox.showClearButton`.
+     */
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.selectBox?.showClearButton ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     /** dx parity: dx-select-box shows its drop-down arrow unless showDropDownButton=false. */
     showDropDownButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showDropDownButtonInput" } : /* istanbul ignore next */ {}), alias: 'showDropDownButton', transform: nxeOptionalBoolean });
@@ -62,9 +221,29 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     /** Named template ('inputField') for the closed field; `$implicit` = the selected item. */
     fieldTemplate = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "fieldTemplate" }] : /* istanbul ignore next */ []));
+    /** dx `searchTimeout`: ms of typing pause before `(searchChange)` fires or a store is queried. */
+    searchTimeout = input(500, { ...(ngDevMode ? { debugName: "searchTimeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `minSearchLength`: characters needed before a search is emitted, applied or sent. */
+    minSearchLength = input(0, { ...(ngDevMode ? { debugName: "minSearchLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `showDataBeforeSearch`: list rows while the text is shorter than `minSearchLength`. */
+    showDataBeforeSearch = input(false, { ...(ngDevMode ? { debugName: "showDataBeforeSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Rows requested per page from a store `dataSource` (`take`); more load on scroll to the end. */
+    pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * dx `displayValue`: the text shown for the current value while its row is not among the loaded
+     * ones (a store `dataSource` with the selection outside the current page, and no `byKey`).
+     */
+    displayValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     /** DevExtreme parity, cosmetic. */
     hoverStateEnabled = input(true, { ...(ngDevMode ? { debugName: "hoverStateEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     onSelectionChanged = output();
+    /**
+     * The search text settled: fires `searchTimeout` ms after the last keystroke, once the text has
+     * `minSearchLength` characters (or was cleared). Use it to query a server and replace
+     * `[dataSource]`, or pass a {@link NxePickerStore} and let the box query for you.
+     */
+    searchChange = output();
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
@@ -83,25 +262,51 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     overlayRef;
     closeSub;
     flipSub;
-    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    store = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? ds : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
+    search = new NxePickerSearch({
+        store: this.store,
+        searchExpr: this.searchExpr,
+        searchTimeout: this.searchTimeout,
+        minSearchLength: this.minSearchLength,
+        showDataBeforeSearch: this.showDataBeforeSearch,
+        pageSize: this.pageSize,
+        searchChange: (event) => this.searchChange.emit(event),
+        loaded: () => this.activeIndex.set(this.filteredItems().length ? 0 : -1),
+    });
+    /** Rows picked or fetched by key from a store, so the label outlives the page that held them. */
+    resolved = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    items = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? this.search.items() : (ds ?? []);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Fetches the row of an externally set value through `byKey` when no loaded row has it. */
+    keyLookup = toObservable(this.value)
+        .pipe(filter((v) => v != null && v !== '' && this.search.hasStore && this.findRow(v) === undefined), switchMap((v) => from(this.search.lookup(v)).pipe(catchError(() => EMPTY), filter((row) => row != null), map((row) => [v, row]))), takeUntilDestroyed())
+        .subscribe(([key, row]) => this.remember(key, row));
+    findRow(key) {
+        return this.items().find((it) => this.extractValue(it) === key) ?? this.resolved().get(key);
+    }
+    remember(key, row) {
+        this.resolved.update((m) => new Map(m).set(key, row));
+    }
     display(item) {
-        const expr = this.displayExpr();
-        if (!expr) {
-            return item == null ? '' : String(item);
-        }
-        return item?.[expr] ?? '';
+        return nxeResolveText(this.displayExpr(), item);
     }
     extractValue(item) {
-        const expr = this.valueExpr();
-        return expr ? item?.[expr] : item;
+        return nxeResolveExpr(this.valueExpr(), item);
     }
     selectedItem = computed(() => {
         const v = this.value();
         if (v == null) {
             return null;
         }
-        return this.items().find((it) => this.extractValue(it) === v) ?? null;
+        return this.findRow(v) ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.value() != null && this.value() !== '', /* @ts-ignore */
@@ -109,7 +314,10 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     /** Display text when the field is not being searched. */
     displayText = computed(() => {
         const sel = this.selectedItem();
-        return sel ? this.display(sel) : '';
+        if (sel) {
+            return this.display(sel);
+        }
+        return this.hasValue() ? (this.displayValue() ?? '') : '';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
     /** Value bound to the input element. */
@@ -121,15 +329,18 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     filteredItems = computed(() => {
         const items = this.items();
         const search = this.searchText();
-        if (!this.searchEnabled() || !search) {
+        if (this.search.hasStore) {
             return items;
         }
-        const expr = this.searchExpr() || this.displayExpr();
+        if (!this.searchEnabled() || !search) {
+            return this.minSearchLength() > 0 && !this.showDataBeforeSearch() ? [] : items;
+        }
+        if (!this.search.reachesMinimum(search)) {
+            return this.showDataBeforeSearch() ? items : [];
+        }
+        const expr = this.searchExpr();
         const needle = search.toLowerCase();
-        return items.filter((it) => {
-            const hay = (expr ? it?.[expr] : it) ?? '';
-            return String(hay).toLowerCase().includes(needle);
-        });
+        return items.filter((it) => nxeResolveText(expr, it).toLowerCase().includes(needle));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     itemTemplateRef = computed(() => this.templates().find((t) => t.name() === this.itemTemplate())?.templateRef ?? null, /* @ts-ignore */
@@ -159,12 +370,21 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         this.openPanel();
     }
     onSearchInput(event) {
-        this.searchText.set(event.target.value);
+        const text = event.target.value;
+        this.searchText.set(text);
+        this.search.typed(text);
         this.activeIndex.set(0);
         if (!this.open()) {
             this.openPanel();
         }
     }
+    /** Loads the next page of a store `dataSource` when the list is scrolled to its end. */
+    onPanelScroll(event) {
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 8) {
+            this.search.loadMore();
+        }
+    }
     onBlur() {
         this.focused.set(false);
         this.markAsTouched();
@@ -175,6 +395,9 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         event.preventDefault();
         const previousValue = this.value();
         const next = this.extractValue(item);
+        if (this.search.hasStore) {
+            this.remember(next, item);
+        }
         this.commitValue(next, event);
         this.onSelectionChanged.emit({ selectedItem: item, previousValue, value: next });
         this.searchText.set(null);
@@ -226,6 +449,7 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         this.panelWidth.set(this.elementRef.nativeElement.offsetWidth);
         const idx = this.items().findIndex((it) => this.extractValue(it) === this.value());
         this.activeIndex.set(idx >= 0 ? idx : 0);
+        this.search.open(this.searchText() ?? '');
         if (!this.overlayRef) {
             this.overlayRef = this.overlay.create({
                 positionStrategy: this.overlay
@@ -264,31 +488,33 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSelectBoxComponent, isStandalone: true, selector: "nxe-select-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, fieldTemplate: { classPropertyName: "fieldTemplate", publicName: "fieldTemplate", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabled: { classPropertyName: "hoverStateEnabled", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-selectbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSelectBoxComponent, isStandalone: true, selector: "nxe-select-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, fieldTemplate: { classPropertyName: "fieldTemplate", publicName: "fieldTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchTimeout: { classPropertyName: "searchTimeout", publicName: "searchTimeout", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, showDataBeforeSearch: { classPropertyName: "showDataBeforeSearch", publicName: "showDataBeforeSearch", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabled: { classPropertyName: "hoverStateEnabled", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-selectbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSelectBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSelectBoxComponent) },
-        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @if (fieldTemplateRef(); as tpl) {\r\n        <div class=\"nxe-select-field\">\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\r\n        </div>\r\n    } @else {\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-select-input\"\r\n            type=\"text\"\r\n            [value]=\"inputDisplay()\"\r\n            [readOnly]=\"readOnly() || !searchEnabled()\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.placeholder]=\"placeholder() || null\"\r\n            autocomplete=\"off\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (focus)=\"focused.set(true)\"\r\n            (blur)=\"onBlur()\" />\r\n    }\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\r\n                (mousedown)=\"selectItem(item, $event)\">\r\n                @if (itemTemplateRef(); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\r\n                } @else {\r\n                    {{ display(item) }}\r\n                }\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear,nxe-select-box .nxe-select-arrow{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-select-box .nxe-select-clear svg,nxe-select-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-select-box .nxe-select-clear{width:22px;color:#999;cursor:pointer}nxe-select-box .nxe-select-clear:hover{color:#333}nxe-select-box .nxe-editor-container:has(.nxe-select-arrow) .nxe-select-input{padding-inline-end:0}nxe-select-box .nxe-select-arrow{position:relative;width:34px;min-width:34px;padding:1px;border-radius:4px}nxe-select-box .nxe-select-arrow svg{width:18px;height:18px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    @if (fieldTemplateRef(); as tpl) {\n        <div class=\"nxe-select-field\">\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\n        </div>\n    } @else {\n        <input\n            #input\n            class=\"nxe-editor-input nxe-select-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n            [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [value]=\"inputDisplay()\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"placeholder() || null\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    }\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        (scroll)=\"onPanelScroll($event)\">\n        @for (item of filteredItems(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"selectItem(item, $event)\">\n                @if (itemTemplateRef(); as tpl) {\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                } @else {\n                    {{ display(item) }}\n                }\n            </div>\n        } @empty {\n            <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-select-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-select-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-select-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-select-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear),nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-select-box', standalone: true, imports: [NgTemplateOutlet], host: {
                         class: 'nxe-widget nxe-editor nxe-selectbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                         '(keydown)': 'onKeydown($event)',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSelectBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSelectBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @if (fieldTemplateRef(); as tpl) {\r\n        <div class=\"nxe-select-field\">\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\r\n        </div>\r\n    } @else {\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-select-input\"\r\n            type=\"text\"\r\n            [value]=\"inputDisplay()\"\r\n            [readOnly]=\"readOnly() || !searchEnabled()\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.placeholder]=\"placeholder() || null\"\r\n            autocomplete=\"off\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (focus)=\"focused.set(true)\"\r\n            (blur)=\"onBlur()\" />\r\n    }\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\r\n                (mousedown)=\"selectItem(item, $event)\">\r\n                @if (itemTemplateRef(); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\r\n                } @else {\r\n                    {{ display(item) }}\r\n                }\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear,nxe-select-box .nxe-select-arrow{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-select-box .nxe-select-clear svg,nxe-select-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-select-box .nxe-select-clear{width:22px;color:#999;cursor:pointer}nxe-select-box .nxe-select-clear:hover{color:#333}nxe-select-box .nxe-editor-container:has(.nxe-select-arrow) .nxe-select-input{padding-inline-end:0}nxe-select-box .nxe-select-arrow{position:relative;width:34px;min-width:34px;padding:1px;border-radius:4px}nxe-select-box .nxe-select-arrow svg{width:18px;height:18px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}\n"] }]
-        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], fieldTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTemplate", required: false }] }], hoverStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    @if (fieldTemplateRef(); as tpl) {\n        <div class=\"nxe-select-field\">\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\n        </div>\n    } @else {\n        <input\n            #input\n            class=\"nxe-editor-input nxe-select-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n            [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [value]=\"inputDisplay()\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"placeholder() || null\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    }\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        (scroll)=\"onPanelScroll($event)\">\n        @for (item of filteredItems(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"selectItem(item, $event)\">\n                @if (itemTemplateRef(); as tpl) {\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                } @else {\n                    {{ display(item) }}\n                }\n            </div>\n        } @empty {\n            <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-select-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-select-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-select-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-select-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear),nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], fieldTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTemplate", required: false }] }], searchTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTimeout", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], showDataBeforeSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataBeforeSearch", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], hoverStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
 
 /**
  * `nxe-tag-box` — drop-in replacement for DevExtreme `dx-tag-box` (multi-select sibling of
  * `nxe-select-box`). The bound value is an **array of `valueExpr` keys** (`lovCode` strings).
  * Bakes in the app's global `dxTagBox.defaultOptions` (display/search `lovName`, value `lovCode`,
- * search + clear + selection-controls on). Selected items render as removable chips; the dropdown
- * shows a checkbox per row. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator`.
+ * search + selection-controls on); the clear button follows dx and is off unless asked for.
+ * Selected items render as removable chips; with selection controls the dropdown shows a checkbox
+ * per row under a tri-state "Select All". Provides {@link NXE_VALIDATION_TARGET} for a projected
+ * `nxe-validator`.
  */
 class NxeTagBoxComponent extends NxeFormControlBase {
     overlay = inject(Overlay);
@@ -297,6 +523,7 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "dropdownTemplate" }] : /* istanbul ignore next */ []));
     inputEl = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    /** A plain array, or an {@link NxePickerStore} the box queries itself (server-side search). */
     dataSource = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
     displayExprInput = input(undefined, { ...(ngDevMode ? { debugName: "displayExprInput" } : /* istanbul ignore next */ {}), alias: 'displayExpr' });
@@ -306,14 +533,37 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     valueExpr = computed(() => this.valueExprInput() ?? this.nxeDefaults.tagBox?.valueExpr ?? 'lovCode', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
     searchExprInput = input(undefined, { ...(ngDevMode ? { debugName: "searchExprInput" } : /* istanbul ignore next */ {}), alias: 'searchExpr' });
-    searchExpr = computed(() => this.searchExprInput() ?? this.nxeDefaults.tagBox?.searchExpr ?? 'lovName', /* @ts-ignore */
+    /**
+     * dx searches by `displayExpr` when `searchExpr` is not given. Defaulting to the literal
+     * 'lovName' instead meant that any picker with a custom displayExpr searched a field its
+     * items do not have, and found nothing - silently, because an empty result looks like no
+     * match. Where displayExpr is the default this resolves to 'lovName' exactly as before.
+     */
+    searchExpr = computed(() => this.searchExprInput() ?? this.nxeDefaults.tagBox?.searchExpr ?? this.displayExpr(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchExpr" }] : /* istanbul ignore next */ []));
     searchEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "searchEnabledInput" } : /* istanbul ignore next */ {}), alias: 'searchEnabled', transform: nxeOptionalBoolean });
     searchEnabled = computed(() => this.searchEnabledInput() ?? this.nxeDefaults.tagBox?.searchEnabled ?? true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchEnabled" }] : /* istanbul ignore next */ []));
     showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
-    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.tagBox?.showClearButton ?? true, /* @ts-ignore */
+    /**
+     * dx defaults `showClearButton` to false (m_text_editor.base.js). The library used to default it
+     * on, which gave every host that never asked for one a clear button dx would not show. An app
+     * that wants it everywhere says so once through `NXE_DEFAULT_OPTIONS.tagBox.showClearButton`.
+     */
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.tagBox?.showClearButton ?? false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    showSelectionControlsInput = input(undefined, { ...(ngDevMode ? { debugName: "showSelectionControlsInput" } : /* istanbul ignore next */ {}), alias: 'showSelectionControls', transform: nxeOptionalBoolean });
+    /**
+     * dx `showSelectionControls`. On (the literal, and what every consumer site passes): a checkbox
+     * per row and a tri-state "Select All" row — dx switches its list to `selectionMode: 'all'`
+     * (m_tag_box.js `_listConfig`). Off: plain rows whose fill marks the selection
+     * (`selectionMode: 'multiple'`).
+     */
+    showSelectionControls = computed(() => this.showSelectionControlsInput() ?? this.nxeDefaults.tagBox?.showSelectionControls ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showSelectionControls" }] : /* istanbul ignore next */ []));
+    /** dx `selectAllText` — the label of the "Select All" row (dx: `dxList-selectAll`). */
+    selectAllText = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllText" }] : /* istanbul ignore next */ []));
     /** dx parity: dx-tag-box does NOT show a drop-down arrow unless showDropDownButton is set. */
     showDropDownButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showDropDownButtonInput" } : /* istanbul ignore next */ {}), alias: 'showDropDownButton', transform: nxeOptionalBoolean });
     showDropDownButton = computed(() => this.showDropDownButtonInput() ?? this.nxeDefaults.tagBox?.showDropDownButton ?? false, /* @ts-ignore */
@@ -321,6 +571,16 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     placeholder = computed(() => this.placeholderInput() ?? this.nxeDefaults.tagBox?.placeholder ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** dx `searchTimeout`: ms of typing pause before `(searchChange)` fires or a store is queried. */
+    searchTimeout = input(500, { ...(ngDevMode ? { debugName: "searchTimeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `minSearchLength`: characters needed before a search is emitted, applied or sent. */
+    minSearchLength = input(0, { ...(ngDevMode ? { debugName: "minSearchLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `showDataBeforeSearch`: list rows while the text is shorter than `minSearchLength`. */
+    showDataBeforeSearch = input(false, { ...(ngDevMode ? { debugName: "showDataBeforeSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Rows requested per page from a store `dataSource` (`take`); more load on scroll to the end. */
+    pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** The search text settled (after `searchTimeout`, once it has `minSearchLength` characters or was cleared). */
+    searchChange = output();
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
@@ -332,8 +592,38 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     overlayRef;
     closeSub;
     flipSub;
-    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    store = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? ds : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
+    search = new NxePickerSearch({
+        store: this.store,
+        searchExpr: this.searchExpr,
+        searchTimeout: this.searchTimeout,
+        minSearchLength: this.minSearchLength,
+        showDataBeforeSearch: this.showDataBeforeSearch,
+        pageSize: this.pageSize,
+        searchChange: (event) => this.searchChange.emit(event),
+    });
+    /** Rows picked or fetched by key from a store, so a chip keeps its label off the loaded page. */
+    resolved = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    items = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? this.search.items() : (ds ?? []);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Fetches, through `byKey`, the rows of externally set keys that no loaded row has. */
+    keyLookup = toObservable(this.value)
+        .pipe(mergeMap((v) => (Array.isArray(v) && this.search.hasStore ? v : [])), filter((key) => this.findRow(key) === undefined), mergeMap((key) => from(this.search.lookup(key)).pipe(catchError(() => EMPTY), filter((row) => row != null), map((row) => [key, row]))), takeUntilDestroyed())
+        .subscribe(([key, row]) => this.remember(key, row));
+    findRow(key) {
+        return this.items().find((it) => this.extractValue(it) === key) ?? this.resolved().get(key);
+    }
+    remember(key, row) {
+        this.resolved.update((m) => new Map(m).set(key, row));
+    }
     /** The selected keys (always an array). */
     selectedKeys = computed(() => {
         const v = this.value();
@@ -341,20 +631,15 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
     display(item) {
-        const expr = this.displayExpr();
-        if (!expr) {
-            return item == null ? '' : String(item);
-        }
-        return item?.[expr] ?? '';
+        return nxeResolveText(this.displayExpr(), item);
     }
     extractValue(item) {
-        const expr = this.valueExpr();
-        return expr ? item?.[expr] : item;
+        return nxeResolveExpr(this.valueExpr(), item);
     }
     /** Selected items resolved from the value keys (for chip rendering). */
     selectedItems = computed(() => {
         const keys = this.selectedKeys();
-        return keys.map((k) => this.items().find((it) => this.extractValue(it) === k) ?? k);
+        return keys.map((k) => this.findRow(k) ?? k);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.selectedKeys().length > 0, /* @ts-ignore */
@@ -362,20 +647,38 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     filteredItems = computed(() => {
         const items = this.items();
         const search = this.searchText();
-        if (!this.searchEnabled() || !search) {
+        if (this.search.hasStore) {
             return items;
         }
-        const expr = this.searchExpr() || this.displayExpr();
+        if (!this.searchEnabled() || !search) {
+            return this.minSearchLength() > 0 && !this.showDataBeforeSearch() ? [] : items;
+        }
+        if (!this.search.reachesMinimum(search)) {
+            return this.showDataBeforeSearch() ? items : [];
+        }
+        const expr = this.searchExpr();
         const needle = search.toLowerCase();
-        return items.filter((it) => {
-            const hay = (expr ? it?.[expr] : it) ?? '';
-            return String(hay).toLowerCase().includes(needle);
-        });
+        return items.filter((it) => nxeResolveText(expr, it).toLowerCase().includes(needle));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
     isSelected(item) {
         return this.selectedKeys().includes(this.extractValue(item));
     }
+    /**
+     * The "Select All" checkbox value over the rows currently listed — dx `selectAllMode: 'page'`,
+     * so a search narrows what it counts: `true` when every listed row is selected, `false` when
+     * none is, and `undefined` (indeterminate) in between.
+     */
+    selectAllState = computed(() => {
+        const items = this.filteredItems();
+        const keys = this.selectedKeys();
+        const selected = items.filter((it) => keys.includes(this.extractValue(it))).length;
+        if (selected === 0) {
+            return false;
+        }
+        return selected === items.length ? true : undefined;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectAllState" }] : /* istanbul ignore next */ []));
     onFieldMousedown(event) {
         if (this.readOnly() || this.disabled()) {
             return;
@@ -390,11 +693,20 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         this.inputEl()?.nativeElement?.focus();
     }
     onSearchInput(event) {
-        this.searchText.set(event.target.value);
+        const text = event.target.value;
+        this.searchText.set(text);
+        this.search.typed(text);
         if (!this.open()) {
             this.openPanel();
         }
     }
+    /** Loads the next page of a store `dataSource` when the list is scrolled to its end. */
+    onPanelScroll(event) {
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 8) {
+            this.search.loadMore();
+        }
+    }
     onBlur() {
         this.focused.set(false);
         this.markAsTouched();
@@ -404,14 +716,42 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         const key = this.extractValue(item);
         const keys = this.selectedKeys();
         const next = keys.includes(key) ? keys.filter((k) => k !== key) : [...keys, key];
+        if (this.search.hasStore) {
+            this.remember(key, item);
+        }
         this.commitValue(next, event);
+        if (this.searchText()) {
+            this.search.typed('');
+        }
         this.searchText.set('');
         const input = this.inputEl()?.nativeElement;
         if (input) {
             input.value = '';
         }
     }
+    /**
+     * dx `_selectAllHandler`: anything short of all-selected selects every listed row (keeping
+     * selections the search hides); all-selected deselects the listed rows only.
+     */
+    toggleAll(event) {
+        event.preventDefault();
+        const listed = this.filteredItems().map((it) => this.extractValue(it));
+        if (this.search.hasStore) {
+            for (const it of this.filteredItems()) {
+                this.remember(this.extractValue(it), it);
+            }
+        }
+        const keys = this.selectedKeys();
+        const next = this.selectAllState() === true
+            ? keys.filter((k) => !listed.includes(k))
+            : [...keys, ...listed.filter((k) => !keys.includes(k))];
+        this.commitValue(next, event);
+    }
     removeTag(item, event) {
+        // The × stays rendered in readOnly/disabled, as dx's does; its action is what is withheld.
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         const key = this.extractValue(item);
@@ -449,6 +789,7 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         if (this.overlayRef.hasAttached()) {
             return;
         }
+        this.search.open(this.searchText());
         this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef));
         this.closeSub = merge(this.overlayRef.backdropClick(), this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape'))).subscribe(() => this.close());
         this.open.set(true);
@@ -469,24 +810,24 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTagBoxComponent, isStandalone: true, selector: "nxe-tag-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-tagbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTagBoxComponent, isStandalone: true, selector: "nxe-tag-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSelectionControlsInput: { classPropertyName: "showSelectionControlsInput", publicName: "showSelectionControls", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchTimeout: { classPropertyName: "searchTimeout", publicName: "searchTimeout", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, showDataBeforeSearch: { classPropertyName: "showDataBeforeSearch", publicName: "showDataBeforeSearch", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-tagbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTagBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTagBoxComponent) },
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container nxe-tag-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @for (item of selectedItems(); track $index) {\r\n        <span class=\"nxe-tag\">\r\n            <span class=\"nxe-tag-text\">{{ display(item) }}</span>\r\n            @if (!readOnly() && !disabled()) {\r\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\r\n            }\r\n        </span>\r\n    }\r\n\r\n    <input\r\n        #input\r\n        class=\"nxe-editor-input nxe-tag-input\"\r\n        type=\"text\"\r\n        [readOnly]=\"readOnly() || !searchEnabled()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\r\n        autocomplete=\"off\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index) {\r\n            <div\r\n                class=\"nxe-list-item nxe-tag-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                (mousedown)=\"toggle(item, $event)\">\r\n                <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\r\n                <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{flex-wrap:wrap;align-items:center;gap:4px;padding:3px 4px;min-height:36px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;min-height:26px;padding:0 4px}nxe-tag-box .nxe-tag{position:relative;display:inline-flex;align-items:center;max-width:calc(100% - 1px);min-width:40px;padding:3px 25px 4px 6px;background-color:#dcdcdc;border-radius:2px;color:#333;line-height:1.2}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:#a9a9aa}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box .nxe-select-clear,nxe-tag-box .nxe-select-arrow{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-tag-box .nxe-select-clear svg,nxe-tag-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-tag-box .nxe-select-clear{width:22px;color:#999}nxe-tag-box .nxe-select-clear:hover{color:#333}nxe-tag-box .nxe-select-arrow{width:28px}nxe-tag-box .nxe-select-arrow svg{width:18px;height:18px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 32px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 54px}.nxe-tag-item{display:flex;align-items:center;gap:8px}.nxe-tag-check{box-sizing:border-box;position:relative;flex-shrink:0;width:18px;height:18px;border:1px solid #ddd;border-radius:2px;background:#fff}.nxe-tag-check.nxe-tag-checked{border-color:#337ab7}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;top:1px;inset-inline-start:5px;width:5px;height:9px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n    Two columns, as dx-tag-box renders them: the wrapping tag container (dx turns\n    `.dx-texteditor-input-container` into `.dx-tag-container`) and, beside it, the buttons \u2014 never\n    inside it, so they cannot wrap onto a tag row and they centre on the whole editor height.\n-->\n<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <div class=\"nxe-tag-container\">\n        @for (item of selectedItems(); track $index) {\n            <span class=\"nxe-tag\">\n                <span class=\"nxe-tag-text\">{{ display(item) }}</span>\n                <!-- Rendered in every state, as dx does (m_tag_box.js appends it unconditionally);\n                     readOnly/disabled make it inert rather than removing it. -->\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\n            </span>\n        }\n\n        <input\n            #input\n            class=\"nxe-editor-input nxe-tag-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    </div>\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        (scroll)=\"onPanelScroll($event)\">\n        @if (showSelectionControls()) {\n            <!-- dx `selectionMode: 'all'`, which showSelectionControls switches on\n                 (m_tag_box.js _listConfig): a tri-state \"Select All\" over the rows shown. Hidden\n                 while the list is empty, as `.dx-empty-collection .dx-list-select-all` is. -->\n            @if (filteredItems().length) {\n                <div\n                    class=\"nxe-tag-select-all\"\n                    [id]=\"panelId() + '-select-all'\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectAllState() === true\"\n                    [attr.aria-checked]=\"selectAllState() === undefined ? 'mixed' : selectAllState()\"\n                    (mousedown)=\"toggleAll($event)\">\n                    <span\n                        class=\"nxe-tag-check\"\n                        [class.nxe-tag-checked]=\"selectAllState() === true\"\n                        [class.nxe-tag-indeterminate]=\"selectAllState() === undefined\"\n                        aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-select-all-label\">{{ selectAllText() ?? nxeMessages.t('dropdown.selectAll') }}</span>\n                </div>\n            }\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item nxe-tag-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        } @else {\n            <!-- dx `selectionMode: 'multiple'`: plain rows, selection shown by the row fill. -->\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    {{ display(item) }}\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{box-sizing:border-box;position:relative;display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:stretch;align-self:stretch;min-width:0;padding-bottom:4px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;height:auto;min-height:30px;padding-bottom:4px}nxe-tag-box .nxe-tag-container:has(>.nxe-tag)>.nxe-tag-input{padding-inline-start:0;margin-inline-start:5px}nxe-tag-box.nxe-invalid>.nxe-editor-container:not(:has(>.nxe-select-clear,>.nxe-select-arrow))>.nxe-tag-container:not(:has(>.nxe-tag))>.nxe-tag-input{padding-inline-end:34px}nxe-tag-box .nxe-tag{box-sizing:border-box;position:relative;display:inline-flex;align-self:flex-start;justify-content:center;max-width:calc(100% - 5px);min-width:40px;margin-top:4px;margin-inline-start:4px;padding-block:3px 4px;padding-inline:6px 25px;background-color:var(--nxe-ui-border, #ddd);border-radius:2px;color:var(--nxe-ui-text, #333)}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:var(--nxe-ui-neutral-400, #aaa)}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:before,nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:after{background:var(--nxe-ui-border, #ddd)}nxe-tag-box.nxe-disabled .nxe-tag,nxe-tag-box.nxe-disabled .nxe-tag-remove{cursor:default}nxe-tag-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-tag-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-tag-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-tag-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-tag-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear),nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-select-panel .nxe-list-item.nxe-tag-item{display:block;position:relative;padding-block:10px;padding-inline:41px 10px}.nxe-select-panel .nxe-list-item.nxe-tag-item:hover,.nxe-select-panel .nxe-list-item.nxe-tag-item:active,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected:hover:not(.nxe-list-item-active){background-color:transparent;color:var(--nxe-ui-text)}.nxe-tag-check{box-sizing:border-box;position:relative;display:block;width:22px;height:22px;border:1px solid var(--nxe-ui-border);border-radius:2px;background:var(--nxe-ui-surface)}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-checked:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-check.nxe-tag-indeterminate:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-indeterminate:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-item .nxe-tag-check{position:absolute;top:50%;inset-inline-start:10px;margin-top:-10px}.nxe-tag-item:hover .nxe-tag-check,.nxe-tag-select-all:hover .nxe-tag-check{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-tag-select-all{box-sizing:border-box;padding-block:12px 11px;padding-inline:0;border-bottom:1px solid var(--nxe-ui-border);margin-bottom:3px;white-space:nowrap;cursor:pointer}.nxe-tag-select-all .nxe-tag-check{float:inline-start;margin-top:-1px;margin-bottom:-3px;margin-inline-start:10px}.nxe-tag-select-all-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:17px;padding:0 10px;margin-top:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-tag-box', standalone: true, host: {
                         class: 'nxe-widget nxe-editor nxe-tagbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                         '(keydown)': 'onKeydown($event)',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTagBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTagBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container nxe-tag-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @for (item of selectedItems(); track $index) {\r\n        <span class=\"nxe-tag\">\r\n            <span class=\"nxe-tag-text\">{{ display(item) }}</span>\r\n            @if (!readOnly() && !disabled()) {\r\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\r\n            }\r\n        </span>\r\n    }\r\n\r\n    <input\r\n        #input\r\n        class=\"nxe-editor-input nxe-tag-input\"\r\n        type=\"text\"\r\n        [readOnly]=\"readOnly() || !searchEnabled()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\r\n        autocomplete=\"off\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index) {\r\n            <div\r\n                class=\"nxe-list-item nxe-tag-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                (mousedown)=\"toggle(item, $event)\">\r\n                <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\r\n                <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{flex-wrap:wrap;align-items:center;gap:4px;padding:3px 4px;min-height:36px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;min-height:26px;padding:0 4px}nxe-tag-box .nxe-tag{position:relative;display:inline-flex;align-items:center;max-width:calc(100% - 1px);min-width:40px;padding:3px 25px 4px 6px;background-color:#dcdcdc;border-radius:2px;color:#333;line-height:1.2}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:#a9a9aa}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box .nxe-select-clear,nxe-tag-box .nxe-select-arrow{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-tag-box .nxe-select-clear svg,nxe-tag-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-tag-box .nxe-select-clear{width:22px;color:#999}nxe-tag-box .nxe-select-clear:hover{color:#333}nxe-tag-box .nxe-select-arrow{width:28px}nxe-tag-box .nxe-select-arrow svg{width:18px;height:18px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 32px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 54px}.nxe-tag-item{display:flex;align-items:center;gap:8px}.nxe-tag-check{box-sizing:border-box;position:relative;flex-shrink:0;width:18px;height:18px;border:1px solid #ddd;border-radius:2px;background:#fff}.nxe-tag-check.nxe-tag-checked{border-color:#337ab7}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;top:1px;inset-inline-start:5px;width:5px;height:9px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}\n"] }]
-        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n    Two columns, as dx-tag-box renders them: the wrapping tag container (dx turns\n    `.dx-texteditor-input-container` into `.dx-tag-container`) and, beside it, the buttons \u2014 never\n    inside it, so they cannot wrap onto a tag row and they centre on the whole editor height.\n-->\n<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <div class=\"nxe-tag-container\">\n        @for (item of selectedItems(); track $index) {\n            <span class=\"nxe-tag\">\n                <span class=\"nxe-tag-text\">{{ display(item) }}</span>\n                <!-- Rendered in every state, as dx does (m_tag_box.js appends it unconditionally);\n                     readOnly/disabled make it inert rather than removing it. -->\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\n            </span>\n        }\n\n        <input\n            #input\n            class=\"nxe-editor-input nxe-tag-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    </div>\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        (scroll)=\"onPanelScroll($event)\">\n        @if (showSelectionControls()) {\n            <!-- dx `selectionMode: 'all'`, which showSelectionControls switches on\n                 (m_tag_box.js _listConfig): a tri-state \"Select All\" over the rows shown. Hidden\n                 while the list is empty, as `.dx-empty-collection .dx-list-select-all` is. -->\n            @if (filteredItems().length) {\n                <div\n                    class=\"nxe-tag-select-all\"\n                    [id]=\"panelId() + '-select-all'\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectAllState() === true\"\n                    [attr.aria-checked]=\"selectAllState() === undefined ? 'mixed' : selectAllState()\"\n                    (mousedown)=\"toggleAll($event)\">\n                    <span\n                        class=\"nxe-tag-check\"\n                        [class.nxe-tag-checked]=\"selectAllState() === true\"\n                        [class.nxe-tag-indeterminate]=\"selectAllState() === undefined\"\n                        aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-select-all-label\">{{ selectAllText() ?? nxeMessages.t('dropdown.selectAll') }}</span>\n                </div>\n            }\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item nxe-tag-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        } @else {\n            <!-- dx `selectionMode: 'multiple'`: plain rows, selection shown by the row fill. -->\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    {{ display(item) }}\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{box-sizing:border-box;position:relative;display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:stretch;align-self:stretch;min-width:0;padding-bottom:4px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;height:auto;min-height:30px;padding-bottom:4px}nxe-tag-box .nxe-tag-container:has(>.nxe-tag)>.nxe-tag-input{padding-inline-start:0;margin-inline-start:5px}nxe-tag-box.nxe-invalid>.nxe-editor-container:not(:has(>.nxe-select-clear,>.nxe-select-arrow))>.nxe-tag-container:not(:has(>.nxe-tag))>.nxe-tag-input{padding-inline-end:34px}nxe-tag-box .nxe-tag{box-sizing:border-box;position:relative;display:inline-flex;align-self:flex-start;justify-content:center;max-width:calc(100% - 5px);min-width:40px;margin-top:4px;margin-inline-start:4px;padding-block:3px 4px;padding-inline:6px 25px;background-color:var(--nxe-ui-border, #ddd);border-radius:2px;color:var(--nxe-ui-text, #333)}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:var(--nxe-ui-neutral-400, #aaa)}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:before,nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:after{background:var(--nxe-ui-border, #ddd)}nxe-tag-box.nxe-disabled .nxe-tag,nxe-tag-box.nxe-disabled .nxe-tag-remove{cursor:default}nxe-tag-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-tag-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-tag-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-tag-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-tag-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear),nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-select-panel .nxe-list-item.nxe-tag-item{display:block;position:relative;padding-block:10px;padding-inline:41px 10px}.nxe-select-panel .nxe-list-item.nxe-tag-item:hover,.nxe-select-panel .nxe-list-item.nxe-tag-item:active,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected:hover:not(.nxe-list-item-active){background-color:transparent;color:var(--nxe-ui-text)}.nxe-tag-check{box-sizing:border-box;position:relative;display:block;width:22px;height:22px;border:1px solid var(--nxe-ui-border);border-radius:2px;background:var(--nxe-ui-surface)}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-checked:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-check.nxe-tag-indeterminate:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-indeterminate:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-item .nxe-tag-check{position:absolute;top:50%;inset-inline-start:10px;margin-top:-10px}.nxe-tag-item:hover .nxe-tag-check,.nxe-tag-select-all:hover .nxe-tag-check{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-tag-select-all{box-sizing:border-box;padding-block:12px 11px;padding-inline:0;border-bottom:1px solid var(--nxe-ui-border);margin-bottom:3px;white-space:nowrap;cursor:pointer}.nxe-tag-select-all .nxe-tag-check{float:inline-start;margin-top:-1px;margin-bottom:-3px;margin-inline-start:10px}.nxe-tag-select-all-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:17px;padding:0 10px;margin-top:1px}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSelectionControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionControls", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTimeout", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], showDataBeforeSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataBeforeSearch", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
 
 /**
  * `nxe-drop-down-options` — drop-in for DevExtreme `dxo-drop-down-options`, a no-template config
@@ -621,8 +962,8 @@ class NxeDropDownBoxComponent extends NxeFormControlBase {
         }
         // The bound value is the code; match it against valueExpr (default the implicit `lovCode`).
         const ve = this.valueExpr() || 'lovCode';
-        const item = (this.dataSource() ?? []).find((it) => it?.[ve] === v);
-        return item ? String(item[de] ?? '') : String(v);
+        const item = (this.dataSource() ?? []).find((it) => nxeResolveExpr(ve, it) === v);
+        return item ? nxeResolveText(de, item) : String(v);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => {
@@ -691,22 +1032,22 @@ class NxeDropDownBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDropDownBoxComponent, isStandalone: true, selector: "nxe-drop-down-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dropDownOptions: { classPropertyName: "dropDownOptions", publicName: "dropDownOptions", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", onClosed: "onClosed" }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-dropdownbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDropDownBoxComponent, isStandalone: true, selector: "nxe-drop-down-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dropDownOptions: { classPropertyName: "dropDownOptions", publicName: "dropDownOptions", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", onClosed: "onClosed" }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-dropdownbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDropDownBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDropDownBoxComponent) },
-        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }, { propertyName: "options", first: true, predicate: NxeDropDownOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        type=\"text\"\r\n        readonly\r\n        [value]=\"displayText()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"placeholder() || null\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (!readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #panel>\r\n    <div class=\"nxe-dropdownbox-panel\" [style.width]=\"panelStyleWidth()\">\r\n        @if (contentTemplateRef(); as tpl) {\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{flex:0 0 22px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:22px;color:#999;cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{width:16px;height:16px;fill:currentColor}nxe-drop-down-box .nxe-select-clear:hover{color:#333}nxe-drop-down-box .nxe-select-arrow{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;color:#333;border-radius:4px}nxe-drop-down-box .nxe-select-arrow svg{width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}.nxe-dropdownbox-panel{box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;overflow:auto;max-height:420px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }, { propertyName: "options", first: true, predicate: NxeDropDownOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <input\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"opened()\"\n        [attr.aria-controls]=\"opened() ? panelId() : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        readonly\n        [value]=\"displayText()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        (focus)=\"focused.set(true)\"\n        (blur)=\"onBlur()\" />\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (!readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #panel>\n    <div class=\"nxe-dropdownbox-panel\" [id]=\"panelId()\" role=\"dialog\" [style.width]=\"panelStyleWidth()\">\n        @if (contentTemplateRef(); as tpl) {\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-drop-down-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-drop-down-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-drop-down-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear),nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-dropdownbox-panel{box-sizing:border-box;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .175));overflow:auto;max-height:420px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-drop-down-box', standalone: true, imports: [NgTemplateOutlet], host: {
                         class: 'nxe-widget nxe-editor nxe-dropdownbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDropDownBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDropDownBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        type=\"text\"\r\n        readonly\r\n        [value]=\"displayText()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"placeholder() || null\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (!readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #panel>\r\n    <div class=\"nxe-dropdownbox-panel\" [style.width]=\"panelStyleWidth()\">\r\n        @if (contentTemplateRef(); as tpl) {\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{flex:0 0 22px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:22px;color:#999;cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{width:16px;height:16px;fill:currentColor}nxe-drop-down-box .nxe-select-clear:hover{color:#333}nxe-drop-down-box .nxe-select-arrow{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;color:#333;border-radius:4px}nxe-drop-down-box .nxe-select-arrow svg{width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}.nxe-dropdownbox-panel{box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;overflow:auto;max-height:420px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <input\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"opened()\"\n        [attr.aria-controls]=\"opened() ? panelId() : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        readonly\n        [value]=\"displayText()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        (focus)=\"focused.set(true)\"\n        (blur)=\"onBlur()\" />\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (!readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #panel>\n    <div class=\"nxe-dropdownbox-panel\" [id]=\"panelId()\" role=\"dialog\" [style.width]=\"panelStyleWidth()\">\n        @if (contentTemplateRef(); as tpl) {\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-drop-down-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-drop-down-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-drop-down-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear),nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-dropdownbox-panel{box-sizing:border-box;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .175));overflow:auto;max-height:420px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], options: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeDropDownOptionsComponent), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dropDownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropDownOptions", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
 
 /** DI token the menu provides so projected `nxe-menu-item`s can close it on click. */
@@ -731,6 +1072,20 @@ class NxeListComponent {
     /** DevExtreme `[elementAttr]` — `{ id, class }` applied to the host. */
     elementAttr = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "elementAttr" }] : /* istanbul ignore next */ []));
+    /**
+     * dx `keyExpr` — the field identifying an item. Used for `@for` tracking, so a list whose
+     * items are replaced by equal-but-not-identical objects keeps its DOM instead of rebuilding
+     * every row. Falls back to the index when unset, which is the previous behaviour.
+     */
+    keyExpr = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keyExpr" }] : /* istanbul ignore next */ []));
+    trackItem(item, index) {
+        const key = this.keyExpr();
+        if (!key || item == null || typeof item !== 'object') {
+            return index;
+        }
+        return item[key] ?? index;
+    }
     onItemClick = output();
     items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
@@ -751,8 +1106,8 @@ class NxeListComponent {
         this.menu?.closeMenu();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeListComponent, isStandalone: true, selector: "nxe-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, elementAttr: { classPropertyName: "elementAttr", publicName: "elementAttr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "'nxe-widget nxe-list ' + (elementAttr()?.class ?? '')", "attr.id": "elementAttr()?.id ?? null" } }, queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], ngImport: i0, template: `
-        @for (item of items(); track $index; let last = $last) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeListComponent, isStandalone: true, selector: "nxe-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, elementAttr: { classPropertyName: "elementAttr", publicName: "elementAttr", isSignal: true, isRequired: false, transformFunction: null }, keyExpr: { classPropertyName: "keyExpr", publicName: "keyExpr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "'nxe-widget nxe-list ' + (elementAttr()?.class ?? '')", "attr.id": "elementAttr()?.id ?? null" } }, queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], ngImport: i0, template: `
+        @for (item of items(); track trackItem(item, $index); let last = $last) {
             <div
                 class="nxe-list-item-row"
                 [class.nxe-state-disabled]="isDisabled(item)"
@@ -772,7 +1127,7 @@ class NxeListComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-list', standalone: true, imports: [NgTemplateOutlet], template: `
-        @for (item of items(); track $index; let last = $last) {
+        @for (item of items(); track trackItem(item, $index); let last = $last) {
             <div
                 class="nxe-list-item-row"
                 [class.nxe-state-disabled]="isDisabled(item)"
@@ -791,7 +1146,204 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         '[class]': "'nxe-widget nxe-list ' + (elementAttr()?.class ?? '')",
                         '[attr.id]': 'elementAttr()?.id ?? null',
                     }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-list{display:block}nxe-list .nxe-list-item-row{display:block;cursor:pointer}nxe-list .nxe-list-item-row.nxe-state-disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none}nxe-list .nxe-list-item-content{display:block}\n"] }]
-        }], propDecorators: { templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], elementAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementAttr", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
+        }], propDecorators: { templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], elementAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementAttr", required: false }] }], keyExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "keyExpr", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
+
+/**
+ * `nxe-auto-complete` — drop-in replacement for DevExtreme `dx-autocomplete`.
+ *
+ * The distinction from `nxe-select-box` is the value contract, and it is the whole reason this
+ * is a separate component: here the control value is the TEXT the user typed. A suggestion is a
+ * shortcut for typing, not a constraint on what may be entered, so free text survives and
+ * `valueExpr` only says which field of a picked item becomes that text.
+ *
+ * Deliberately not merged into the existing Material-shaped `nxe-autocomplete`: that one takes
+ * projected `nxe-option` children rather than a `[dataSource]`, so the two have incompatible
+ * content models and merging them would make every future change to one a risk to the other.
+ */
+class NxeAutoCompleteComponent extends NxeFormControlBase {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    dropdownTemplate = viewChild.required('dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownTemplate" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Field of a picked item that becomes the value (dx default `lovName`). */
+    valueExpr = input('lovName', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
+    /** Field matched against the query; defaults to {@link valueExpr}, as dx does. */
+    searchExprInput = input(undefined, { ...(ngDevMode ? { debugName: "searchExprInput" } : /* istanbul ignore next */ {}), alias: 'searchExpr' });
+    searchExpr = computed(() => this.searchExprInput() ?? this.valueExpr(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchExpr" }] : /* istanbul ignore next */ []));
+    searchMode = input('contains', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchMode" }] : /* istanbul ignore next */ []));
+    /** Characters required before suggestions appear. dx defaults to 1; 0 shows all on focus. */
+    minSearchLength = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "minSearchLength" }] : /* istanbul ignore next */ []));
+    /** dx caps the suggestion list; beyond this the user is expected to keep typing. */
+    maxItemCount = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxItemCount" }] : /* istanbul ignore next */ []));
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : /* istanbul ignore next */ {}), transform: nxeOptionalBoolean });
+    onSelectionChanged = output();
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    /** dx `.instance` facade — `focus()` is what the autofocus directive calls. */
+    get instance() {
+        return this;
+    }
+    overlayRef;
+    closeSub;
+    flipSub;
+    text = computed(() => this.value() ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    itemText(item) {
+        return nxeResolveText(this.valueExpr(), item);
+    }
+    searchText(item) {
+        return nxeResolveText(this.searchExpr(), item);
+    }
+    suggestions = computed(() => {
+        const query = (this.value() ?? '').toLowerCase();
+        if (query.length < this.minSearchLength()) {
+            return [];
+        }
+        const mode = this.searchMode();
+        const matches = (this.dataSource() ?? []).filter((item) => {
+            const candidate = this.searchText(item).toLowerCase();
+            if (mode === 'startswith') {
+                return candidate.startsWith(query);
+            }
+            if (mode === 'equals') {
+                return candidate === query;
+            }
+            return candidate.includes(query);
+        });
+        return matches.slice(0, this.maxItemCount());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
+    onFieldInput(event) {
+        // The typed text IS the value: an autocomplete constrains nothing.
+        this.commitValue(event.target.value, event);
+        this.activeIndex.set(-1);
+        this.openPanel();
+    }
+    onFocus() {
+        this.focused.set(true);
+        this.openPanel();
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.markAsTouched();
+        this.closePanel();
+    }
+    pick(item, event) {
+        event.preventDefault();
+        this.commitValue(this.itemText(item), event);
+        this.onSelectionChanged.emit({ selectedItem: item, value: this.value() });
+        this.closePanel();
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape') {
+            this.closePanel();
+            return;
+        }
+        const items = this.suggestions();
+        if (!items.length) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openPanel();
+            this.activeIndex.update((i) => Math.min(i + 1, items.length - 1));
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.activeIndex.update((i) => Math.max(i - 1, 0));
+        }
+        else if (event.key === 'Enter' && this.activeIndex() >= 0) {
+            this.pick(items[this.activeIndex()], event);
+        }
+    }
+    onClear(event) {
+        event.preventDefault();
+        this.commitValue('', event);
+        this.closePanel();
+    }
+    focus() {
+        this.inputEl()?.nativeElement.focus();
+    }
+    openPanel() {
+        if (this.readOnly() || this.disabled() || !this.suggestions().length) {
+            this.closePanel();
+            return;
+        }
+        if (this.overlayRef) {
+            return;
+        }
+        const host = this.element;
+        this.panelWidth.set(host.getBoundingClientRect().width);
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(host)
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+            ]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            panelClass: nxePane('nxe-autocomplete-box-pane'),
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef));
+        this.flipSub = trackPaneFlip(this.overlayRef);
+        this.open.set(true);
+    }
+    closePanel() {
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.open.set(false);
+        this.activeIndex.set(-1);
+    }
+    ngOnDestroy() {
+        this.closePanel();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAutoCompleteComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeAutoCompleteComponent, isStandalone: true, selector: "nxe-auto-complete", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, valueExpr: { classPropertyName: "valueExpr", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchMode: { classPropertyName: "searchMode", publicName: "searchMode", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, maxItemCount: { classPropertyName: "maxItemCount", publicName: "maxItemCount", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-autocomplete-box" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => NxeAutoCompleteComponent),
+                multi: true,
+            },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeAutoCompleteComponent) },
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\">\n    <input\n        #input\n        class=\"nxe-editor-input nxe-autocomplete-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"open()\"\n        [attr.aria-controls]=\"open() ? panelId() : null\"\n        [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        [value]=\"text()\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        autocomplete=\"off\"\n        (input)=\"onFieldInput($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n\n    @if (showClearButton() && text() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-autocomplete-box-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\">\n        @for (item of suggestions(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"i === activeIndex()\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"pick(item, $event)\">\n                {{ itemText(item) }}\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-auto-complete .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-auto-complete .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-auto-complete .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-auto-complete:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-auto-complete.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear),nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-autocomplete-box-panel{max-height:300px;overflow-y:auto;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-auto-complete', standalone: true, host: {
+                        class: 'nxe-widget nxe-editor nxe-autocomplete-box',
+                        '[class.nxe-focused]': 'focused()',
+                        '[class.nxe-invalid]': 'invalidState()',
+                        '[class.nxe-open]': 'open()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => NxeAutoCompleteComponent),
+                            multi: true,
+                        },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeAutoCompleteComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\">\n    <input\n        #input\n        class=\"nxe-editor-input nxe-autocomplete-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"open()\"\n        [attr.aria-controls]=\"open() ? panelId() : null\"\n        [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        [value]=\"text()\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        autocomplete=\"off\"\n        (input)=\"onFieldInput($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n\n    @if (showClearButton() && text() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-autocomplete-box-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\">\n        @for (item of suggestions(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"i === activeIndex()\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"pick(item, $event)\">\n                {{ itemText(item) }}\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-auto-complete .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-auto-complete .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-auto-complete .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-auto-complete:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-auto-complete.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear),nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-autocomplete-box-panel{max-height:300px;overflow-y:auto;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);box-sizing:border-box}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], valueExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMode", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], maxItemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemCount", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
 
 /** DI token the autocomplete provides so projected `nxe-option`s can close it on click. */
 const NXE_AUTOCOMPLETE = new InjectionToken('NXE_AUTOCOMPLETE');
@@ -949,5 +1501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NXE_AUTOCOMPLETE, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxeSelectBoxComponent, NxeTagBoxComponent };
+export { NXE_AUTOCOMPLETE, NXE_MENU, NxeAutoCompleteComponent, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxePickerSearch, NxeSelectBoxComponent, NxeTagBoxComponent, nxeIsPickerStore };
 //# sourceMappingURL=nexterajs-ui-dropdowns.mjs.map