@nexterajs/ui 0.0.1 → 0.0.2

package/fesm2022/nexterajs-ui-dropdowns.mjs

@@ -5,7 +5,7 @@ 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 { 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 { 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';
 
@@ -14,10 +14,11 @@ import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
  *
  * 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);
@@ -41,13 +42,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 });
@@ -86,15 +98,10 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* 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);
     }
     selectedItem = computed(() => {
         const v = this.value();
@@ -124,12 +131,9 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         if (!this.searchEnabled() || !search) {
             return items;
         }
-        const expr = this.searchExpr() || this.displayExpr();
+        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 */
@@ -267,7 +271,7 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     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: [
             { 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)\">\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            [attr.tabindex]=\"tabIndex()\"\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            [attr.aria-expanded]=\"open()\"\r\n            [attr.aria-controls]=\"open() ? panelId() : null\"\r\n            [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\r\n            [id]=\"controlId()\"\r\n            [attr.aria-label]=\"ariaLabel() || null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n            [attr.aria-invalid]=\"validationError() ? true : null\"\r\n            [attr.aria-required]=\"required() ? true : null\"\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            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </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            <!-- An 8x4 triangle centred in the 18px box. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></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        [id]=\"panelId()\"\r\n        role=\"listbox\">\r\n        @for (item of filteredItems(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [id]=\"optionId(i)\"\r\n                role=\"option\"\r\n                [attr.aria-selected]=\"isSelected(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{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:#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:#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:#e6e6e6}nxe-select-box.nxe-open .nxe-select-arrow{background-color:#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,
@@ -280,15 +284,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, 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"] }]
+                    ], 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            [attr.tabindex]=\"tabIndex()\"\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            [attr.aria-expanded]=\"open()\"\r\n            [attr.aria-controls]=\"open() ? panelId() : null\"\r\n            [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\r\n            [id]=\"controlId()\"\r\n            [attr.aria-label]=\"ariaLabel() || null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n            [attr.aria-invalid]=\"validationError() ? true : null\"\r\n            [attr.aria-required]=\"required() ? true : null\"\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            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </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            <!-- An 8x4 triangle centred in the 18px box. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></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        [id]=\"panelId()\"\r\n        role=\"listbox\">\r\n        @for (item of filteredItems(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [id]=\"optionId(i)\"\r\n                role=\"option\"\r\n                [attr.aria-selected]=\"isSelected(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{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:#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:#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:#e6e6e6}nxe-select-box.nxe-open .nxe-select-arrow{background-color:#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 }] }], hoverStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
 
 /**
  * `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);
@@ -306,14 +312,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('Select All', /* @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 */
@@ -341,15 +370,10 @@ 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(() => {
@@ -365,17 +389,29 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         if (!this.searchEnabled() || !search) {
             return items;
         }
-        const expr = this.searchExpr() || this.displayExpr();
+        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;
@@ -411,7 +447,24 @@ class NxeTagBoxComponent extends NxeFormControlBase {
             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));
+        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);
@@ -469,10 +522,10 @@ 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 } }, 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: [
             { 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: "<!--\r\n    Two columns, as dx-tag-box renders them: the wrapping tag container (dx turns\r\n    `.dx-texteditor-input-container` into `.dx-tag-container`) and, beside it, the buttons \u2014 never\r\n    inside it, so they cannot wrap onto a tag row and they centre on the whole editor height.\r\n-->\r\n<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <div class=\"nxe-tag-container\">\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                <!-- Rendered in every state, as dx does (m_tag_box.js appends it unconditionally);\r\n                     readOnly/disabled make it inert rather than removing it. -->\r\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\r\n            </span>\r\n        }\r\n\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-tag-input\"\r\n            [attr.tabindex]=\"tabIndex()\"\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            [attr.aria-expanded]=\"open()\"\r\n            [attr.aria-controls]=\"open() ? panelId() : null\"\r\n\r\n            [id]=\"controlId()\"\r\n            [attr.aria-label]=\"ariaLabel() || null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n            [attr.aria-invalid]=\"validationError() ? true : null\"\r\n            [attr.aria-required]=\"required() ? true : null\"\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    </div>\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </svg>\r\n        </span>\r\n    }\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <!-- An 8x4 triangle centred in the 18px box. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></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        [id]=\"panelId()\"\r\n        role=\"listbox\"\r\n        aria-multiselectable=\"true\">\r\n        @if (showSelectionControls()) {\r\n            <!-- dx `selectionMode: 'all'`, which showSelectionControls switches on\r\n                 (m_tag_box.js _listConfig): a tri-state \"Select All\" over the rows shown. Hidden\r\n                 while the list is empty, as `.dx-empty-collection .dx-list-select-all` is. -->\r\n            @if (filteredItems().length) {\r\n                <div\r\n                    class=\"nxe-tag-select-all\"\r\n                    [id]=\"panelId() + '-select-all'\"\r\n                    role=\"option\"\r\n                    [attr.aria-selected]=\"selectAllState() === true\"\r\n                    [attr.aria-checked]=\"selectAllState() === undefined ? 'mixed' : selectAllState()\"\r\n                    (mousedown)=\"toggleAll($event)\">\r\n                    <span\r\n                        class=\"nxe-tag-check\"\r\n                        [class.nxe-tag-checked]=\"selectAllState() === true\"\r\n                        [class.nxe-tag-indeterminate]=\"selectAllState() === undefined\"\r\n                        aria-hidden=\"true\"></span>\r\n                    <span class=\"nxe-tag-select-all-label\">{{ selectAllText() }}</span>\r\n                </div>\r\n            }\r\n            @for (item of filteredItems(); track $index; let i = $index) {\r\n                <div\r\n                    class=\"nxe-list-item nxe-tag-item\"\r\n                    [id]=\"optionId(i)\"\r\n                    role=\"option\"\r\n                    [attr.aria-selected]=\"isSelected(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        } @else {\r\n            <!-- dx `selectionMode: 'multiple'`: plain rows, selection shown by the row fill. -->\r\n            @for (item of filteredItems(); track $index; let i = $index) {\r\n                <div\r\n                    class=\"nxe-list-item\"\r\n                    [id]=\"optionId(i)\"\r\n                    role=\"option\"\r\n                    [attr.aria-selected]=\"isSelected(item)\"\r\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                    (mousedown)=\"toggle(item, $event)\">\r\n                    {{ display(item) }}\r\n                </div>\r\n            } @empty {\r\n                <div class=\"nxe-list-empty\">No data to display</div>\r\n            }\r\n        }\r\n    </div>\r\n</ng-template>\r\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:#ddd;border-radius:2px;color:#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:#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:#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:#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:#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:#e6e6e6}nxe-tag-box.nxe-open .nxe-select-arrow{background-color:#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,
@@ -485,8 +538,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, 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: "<!--\r\n    Two columns, as dx-tag-box renders them: the wrapping tag container (dx turns\r\n    `.dx-texteditor-input-container` into `.dx-tag-container`) and, beside it, the buttons \u2014 never\r\n    inside it, so they cannot wrap onto a tag row and they centre on the whole editor height.\r\n-->\r\n<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <div class=\"nxe-tag-container\">\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                <!-- Rendered in every state, as dx does (m_tag_box.js appends it unconditionally);\r\n                     readOnly/disabled make it inert rather than removing it. -->\r\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\r\n            </span>\r\n        }\r\n\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-tag-input\"\r\n            [attr.tabindex]=\"tabIndex()\"\r\n            role=\"combobox\"\r\n            aria-haspopup=\"listbox\"\r\n            [attr.aria-expanded]=\"open()\"\r\n            [attr.aria-controls]=\"open() ? panelId() : null\"\r\n\r\n            [id]=\"controlId()\"\r\n            [attr.aria-label]=\"ariaLabel() || null\"\r\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n            [attr.aria-invalid]=\"validationError() ? true : null\"\r\n            [attr.aria-required]=\"required() ? true : null\"\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    </div>\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </svg>\r\n        </span>\r\n    }\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <!-- An 8x4 triangle centred in the 18px box. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></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        [id]=\"panelId()\"\r\n        role=\"listbox\"\r\n        aria-multiselectable=\"true\">\r\n        @if (showSelectionControls()) {\r\n            <!-- dx `selectionMode: 'all'`, which showSelectionControls switches on\r\n                 (m_tag_box.js _listConfig): a tri-state \"Select All\" over the rows shown. Hidden\r\n                 while the list is empty, as `.dx-empty-collection .dx-list-select-all` is. -->\r\n            @if (filteredItems().length) {\r\n                <div\r\n                    class=\"nxe-tag-select-all\"\r\n                    [id]=\"panelId() + '-select-all'\"\r\n                    role=\"option\"\r\n                    [attr.aria-selected]=\"selectAllState() === true\"\r\n                    [attr.aria-checked]=\"selectAllState() === undefined ? 'mixed' : selectAllState()\"\r\n                    (mousedown)=\"toggleAll($event)\">\r\n                    <span\r\n                        class=\"nxe-tag-check\"\r\n                        [class.nxe-tag-checked]=\"selectAllState() === true\"\r\n                        [class.nxe-tag-indeterminate]=\"selectAllState() === undefined\"\r\n                        aria-hidden=\"true\"></span>\r\n                    <span class=\"nxe-tag-select-all-label\">{{ selectAllText() }}</span>\r\n                </div>\r\n            }\r\n            @for (item of filteredItems(); track $index; let i = $index) {\r\n                <div\r\n                    class=\"nxe-list-item nxe-tag-item\"\r\n                    [id]=\"optionId(i)\"\r\n                    role=\"option\"\r\n                    [attr.aria-selected]=\"isSelected(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        } @else {\r\n            <!-- dx `selectionMode: 'multiple'`: plain rows, selection shown by the row fill. -->\r\n            @for (item of filteredItems(); track $index; let i = $index) {\r\n                <div\r\n                    class=\"nxe-list-item\"\r\n                    [id]=\"optionId(i)\"\r\n                    role=\"option\"\r\n                    [attr.aria-selected]=\"isSelected(item)\"\r\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                    (mousedown)=\"toggle(item, $event)\">\r\n                    {{ display(item) }}\r\n                </div>\r\n            } @empty {\r\n                <div class=\"nxe-list-empty\">No data to display</div>\r\n            }\r\n        }\r\n    </div>\r\n</ng-template>\r\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:#ddd;border-radius:2px;color:#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:#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:#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:#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:#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:#e6e6e6}nxe-tag-box.nxe-open .nxe-select-arrow{background-color:#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 }] }] } });
 
 /**
  * `nxe-drop-down-options` — drop-in for DevExtreme `dxo-drop-down-options`, a no-template config
@@ -621,8 +674,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(() => {
@@ -694,7 +747,7 @@ class NxeDropDownBoxComponent extends NxeFormControlBase {
     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: [
             { 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)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"dialog\"\r\n        [attr.aria-expanded]=\"opened()\"\r\n        [attr.aria-controls]=\"opened() ? panelId() : null\"\r\n        [id]=\"controlId()\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n        [attr.aria-invalid]=\"validationError() ? true : null\"\r\n        [attr.aria-required]=\"required() ? true : null\"\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            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </svg>\r\n        </span>\r\n    }\r\n\r\n    @if (!readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <!-- An 8x4 triangle centred in the 18px box. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></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\" [id]=\"panelId()\" role=\"dialog\" [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{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:#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:#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:#e6e6e6}nxe-drop-down-box.nxe-open .nxe-select-arrow{background-color:#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:#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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownBoxComponent, decorators: [{
             type: Component,
@@ -706,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     }, 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)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"dialog\"\r\n        [attr.aria-expanded]=\"opened()\"\r\n        [attr.aria-controls]=\"opened() ? panelId() : null\"\r\n        [id]=\"controlId()\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n        [attr.aria-invalid]=\"validationError() ? true : null\"\r\n        [attr.aria-required]=\"required() ? true : null\"\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            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </svg>\r\n        </span>\r\n    }\r\n\r\n    @if (!readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <!-- An 8x4 triangle centred in the 18px box. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></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\" [id]=\"panelId()\" role=\"dialog\" [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{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:#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:#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:#e6e6e6}nxe-drop-down-box.nxe-open .nxe-select-arrow{background-color:#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:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;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 +784,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 +818,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 +839,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 +858,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": "!!validationError()", "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\">\r\n    <input\r\n        #input\r\n        class=\"nxe-editor-input nxe-autocomplete-input\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-controls]=\"open() ? panelId() : null\"\r\n        [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\r\n        [id]=\"controlId()\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n        [attr.aria-invalid]=\"validationError() ? true : null\"\r\n        [attr.aria-required]=\"required() ? true : null\"\r\n        type=\"text\"\r\n        [value]=\"text()\"\r\n        [readOnly]=\"readOnly()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"placeholder() || null\"\r\n        autocomplete=\"off\"\r\n        (input)=\"onFieldInput($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" />\r\n\r\n    @if (showClearButton() && text() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </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-autocomplete-box-panel\" [style.width.px]=\"panelWidth()\"\r\n        [id]=\"panelId()\"\r\n        role=\"listbox\">\r\n        @for (item of suggestions(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [id]=\"optionId(i)\"\r\n                role=\"option\"\r\n                [attr.aria-selected]=\"i === activeIndex()\"\r\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\r\n                (mousedown)=\"pick(item, $event)\">\r\n                {{ itemText(item) }}\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\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:#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:#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:#e6e6e6}nxe-auto-complete.nxe-open .nxe-select-arrow{background-color:#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]': '!!validationError()',
+                        '[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\">\r\n    <input\r\n        #input\r\n        class=\"nxe-editor-input nxe-autocomplete-input\"\r\n        [attr.tabindex]=\"tabIndex()\"\r\n        role=\"combobox\"\r\n        aria-haspopup=\"listbox\"\r\n        [attr.aria-expanded]=\"open()\"\r\n        [attr.aria-controls]=\"open() ? panelId() : null\"\r\n        [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\r\n        [id]=\"controlId()\"\r\n        [attr.aria-label]=\"ariaLabel() || null\"\r\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\r\n        [attr.aria-invalid]=\"validationError() ? true : null\"\r\n        [attr.aria-required]=\"required() ? true : null\"\r\n        type=\"text\"\r\n        [value]=\"text()\"\r\n        [readOnly]=\"readOnly()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"placeholder() || null\"\r\n        autocomplete=\"off\"\r\n        (input)=\"onFieldInput($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (blur)=\"onBlur()\" />\r\n\r\n    @if (showClearButton() && text() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\r\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\r\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\r\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\r\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\r\n            </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-autocomplete-box-panel\" [style.width.px]=\"panelWidth()\"\r\n        [id]=\"panelId()\"\r\n        role=\"listbox\">\r\n        @for (item of suggestions(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [id]=\"optionId(i)\"\r\n                role=\"option\"\r\n                [attr.aria-selected]=\"i === activeIndex()\"\r\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\r\n                (mousedown)=\"pick(item, $event)\">\r\n                {{ itemText(item) }}\r\n            </div>\r\n        }\r\n    </div>\r\n</ng-template>\r\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:#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:#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:#e6e6e6}nxe-auto-complete.nxe-open .nxe-select-arrow{background-color:#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 +1213,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, NxeAutoCompleteComponent, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxeSelectBoxComponent, NxeTagBoxComponent };
 //# sourceMappingURL=nexterajs-ui-dropdowns.mjs.map