@nexterajs/ui 0.0.2 → 0.1.0

package/fesm2022/nexterajs-ui-dropdowns.mjs

@@ -2,12 +2,156 @@ import { Overlay } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, ViewContainerRef, viewChild, contentChildren, input, computed, booleanAttribute, output, signal, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, model, Injector, InjectionToken, ElementRef, TemplateRef, Directive } from '@angular/core';
+import { signal, inject, DestroyRef, ViewContainerRef, viewChild, contentChildren, input, computed, numberAttribute, booleanAttribute, output, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component, contentChild, model, Injector, InjectionToken, ElementRef, TemplateRef, Directive } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { merge, filter, distinctUntilChanged, Subject } from 'rxjs';
+import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
+import { Subject, switchMap, timer, map, firstValueFrom, from, filter, catchError, EMPTY, merge, mergeMap, distinctUntilChanged } from 'rxjs';
 import { NxeFormControlBase, NxeTemplateDirective, nxeOptionalBoolean, nxeResolveText, nxeResolveExpr, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
 import { nxePane, trackPaneFlip } from '@nexterajs/ui/styling';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/** True for a store object (anything with a `load` function that is not an array). */
+function nxeIsPickerStore(value) {
+    return (!!value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        typeof value.load === 'function');
+}
+/**
+ * The search plumbing shared by the pickers: debounces typing by `searchTimeout`, emits
+ * `searchChange` once the text reaches `minSearchLength` (or is cleared), and, when the
+ * `dataSource` is a {@link NxePickerStore}, queries it and keeps only the newest response.
+ * Must be created in an injection context. It uses no `effect()`: it reacts only to the explicit
+ * {@link typed}, {@link open} and {@link loadMore} calls.
+ */
+class NxePickerSearch {
+    cfg;
+    /** Rows of the store loaded so far (all pages of the current query). */
+    items = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    loading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    hasMore = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    typedText = new Subject();
+    loadedFor = null;
+    seq = 0;
+    controller = null;
+    constructor(cfg) {
+        this.cfg = cfg;
+        const destroyRef = inject(DestroyRef);
+        this.typedText
+            .pipe(switchMap((text) => timer(Math.max(0, cfg.searchTimeout())).pipe(map(() => text))), takeUntilDestroyed(destroyRef))
+            .subscribe((text) => this.settled(text));
+        destroyRef.onDestroy(() => this.controller?.abort());
+    }
+    get hasStore() {
+        return this.cfg.store() !== null;
+    }
+    /** True when `text` is long enough to be searched. */
+    reachesMinimum(text) {
+        return text.length >= this.cfg.minSearchLength();
+    }
+    /** The user typed; the search settles after `searchTimeout`. */
+    typed(text) {
+        this.typedText.next(text);
+    }
+    /** The panel opened with `text` in the field: load the first page unless that query is current. */
+    open(text) {
+        if (this.hasStore && this.loadedFor !== this.effective(text)) {
+            this.query(text);
+        }
+    }
+    /** Loads the next page of the current query (a scroll-to-bottom handler calls this). */
+    loadMore() {
+        if (this.hasStore && this.hasMore() && !this.loading()) {
+            void this.run(this.loadedFor ?? '', true);
+        }
+    }
+    /** Fetches one row by key through `byKey`; `null` when the store cannot or does not know it. */
+    async lookup(key) {
+        const store = this.cfg.store();
+        if (!store?.byKey) {
+            return null;
+        }
+        const controller = new AbortController();
+        try {
+            return (await firstValueFrom(from(store.byKey(key, { signal: controller.signal })))) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    settled(text) {
+        if (text === '' || this.reachesMinimum(text)) {
+            this.cfg.searchChange({ searchValue: text });
+        }
+        if (this.hasStore) {
+            this.query(text);
+        }
+    }
+    /** The text actually sent to the store: below the minimum nothing is searched. */
+    effective(text) {
+        if (this.reachesMinimum(text)) {
+            return text;
+        }
+        return this.cfg.showDataBeforeSearch() ? '' : null;
+    }
+    query(text) {
+        const effective = this.effective(text);
+        if (effective === null) {
+            this.cancel();
+            this.items.set([]);
+            this.hasMore.set(false);
+            this.loadedFor = null;
+            this.cfg.loaded?.();
+            return;
+        }
+        void this.run(effective, false);
+    }
+    cancel() {
+        this.seq++;
+        this.controller?.abort();
+        this.controller = null;
+        this.loading.set(false);
+    }
+    async run(text, append) {
+        const store = this.cfg.store();
+        if (!store) {
+            return;
+        }
+        this.cancel();
+        const seq = this.seq;
+        const controller = new AbortController();
+        this.controller = controller;
+        this.loading.set(true);
+        this.error.set(null);
+        const take = Math.max(1, this.cfg.pageSize());
+        const skip = append ? this.items().length : 0;
+        try {
+            const raw = await firstValueFrom(from(store.load({ searchValue: text, searchExpr: this.cfg.searchExpr(), searchOperation: 'contains', skip, take }, { signal: controller.signal })));
+            if (seq !== this.seq) {
+                return;
+            }
+            const data = Array.isArray(raw) ? raw : (raw.data ?? []);
+            const total = Array.isArray(raw) ? undefined : raw.totalCount;
+            const next = append ? [...this.items(), ...data] : data;
+            this.items.set(next);
+            this.hasMore.set(total !== undefined ? next.length < total : data.length >= take);
+            this.loadedFor = text;
+            this.loading.set(false);
+            this.cfg.loaded?.();
+        }
+        catch (error) {
+            if (seq !== this.seq) {
+                return;
+            }
+            this.error.set(error);
+            this.loading.set(false);
+        }
+    }
+}
 
 /**
  * `nxe-select-box` — drop-in replacement for DevExtreme `dx-select-box`.
@@ -29,7 +173,10 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
     templates = contentChildren(NxeTemplateDirective, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    /** The source array (plain JS array of `Lov`-shaped objects, or primitives). */
+    /**
+     * The source: a plain array of `Lov`-shaped objects (or primitives), or an {@link NxePickerStore}
+     * whose `load({searchValue, skip, take})` the box calls itself (server-side search).
+     */
     dataSource = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
     /** Field shown in the box/list (DevExtreme default `lovName`). Empty => the item itself. */
@@ -74,9 +221,29 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     /** Named template ('inputField') for the closed field; `$implicit` = the selected item. */
     fieldTemplate = input(/* @ts-ignore */
     ...(ngDevMode ? [undefined, { debugName: "fieldTemplate" }] : /* istanbul ignore next */ []));
+    /** dx `searchTimeout`: ms of typing pause before `(searchChange)` fires or a store is queried. */
+    searchTimeout = input(500, { ...(ngDevMode ? { debugName: "searchTimeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `minSearchLength`: characters needed before a search is emitted, applied or sent. */
+    minSearchLength = input(0, { ...(ngDevMode ? { debugName: "minSearchLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `showDataBeforeSearch`: list rows while the text is shorter than `minSearchLength`. */
+    showDataBeforeSearch = input(false, { ...(ngDevMode ? { debugName: "showDataBeforeSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Rows requested per page from a store `dataSource` (`take`); more load on scroll to the end. */
+    pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /**
+     * dx `displayValue`: the text shown for the current value while its row is not among the loaded
+     * ones (a store `dataSource` with the selection outside the current page, and no `byKey`).
+     */
+    displayValue = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
     /** DevExtreme parity, cosmetic. */
     hoverStateEnabled = input(true, { ...(ngDevMode ? { debugName: "hoverStateEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     onSelectionChanged = output();
+    /**
+     * The search text settled: fires `searchTimeout` ms after the last keystroke, once the text has
+     * `minSearchLength` characters (or was cleared). Use it to query a server and replace
+     * `[dataSource]`, or pass a {@link NxePickerStore} and let the box query for you.
+     */
+    searchChange = output();
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
@@ -95,8 +262,39 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     overlayRef;
     closeSub;
     flipSub;
-    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    store = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? ds : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
+    search = new NxePickerSearch({
+        store: this.store,
+        searchExpr: this.searchExpr,
+        searchTimeout: this.searchTimeout,
+        minSearchLength: this.minSearchLength,
+        showDataBeforeSearch: this.showDataBeforeSearch,
+        pageSize: this.pageSize,
+        searchChange: (event) => this.searchChange.emit(event),
+        loaded: () => this.activeIndex.set(this.filteredItems().length ? 0 : -1),
+    });
+    /** Rows picked or fetched by key from a store, so the label outlives the page that held them. */
+    resolved = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    items = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? this.search.items() : (ds ?? []);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Fetches the row of an externally set value through `byKey` when no loaded row has it. */
+    keyLookup = toObservable(this.value)
+        .pipe(filter((v) => v != null && v !== '' && this.search.hasStore && this.findRow(v) === undefined), switchMap((v) => from(this.search.lookup(v)).pipe(catchError(() => EMPTY), filter((row) => row != null), map((row) => [v, row]))), takeUntilDestroyed())
+        .subscribe(([key, row]) => this.remember(key, row));
+    findRow(key) {
+        return this.items().find((it) => this.extractValue(it) === key) ?? this.resolved().get(key);
+    }
+    remember(key, row) {
+        this.resolved.update((m) => new Map(m).set(key, row));
+    }
     display(item) {
         return nxeResolveText(this.displayExpr(), item);
     }
@@ -108,7 +306,7 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         if (v == null) {
             return null;
         }
-        return this.items().find((it) => this.extractValue(it) === v) ?? null;
+        return this.findRow(v) ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.value() != null && this.value() !== '', /* @ts-ignore */
@@ -116,7 +314,10 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     /** Display text when the field is not being searched. */
     displayText = computed(() => {
         const sel = this.selectedItem();
-        return sel ? this.display(sel) : '';
+        if (sel) {
+            return this.display(sel);
+        }
+        return this.hasValue() ? (this.displayValue() ?? '') : '';
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
     /** Value bound to the input element. */
@@ -128,9 +329,15 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
     filteredItems = computed(() => {
         const items = this.items();
         const search = this.searchText();
-        if (!this.searchEnabled() || !search) {
+        if (this.search.hasStore) {
             return items;
         }
+        if (!this.searchEnabled() || !search) {
+            return this.minSearchLength() > 0 && !this.showDataBeforeSearch() ? [] : items;
+        }
+        if (!this.search.reachesMinimum(search)) {
+            return this.showDataBeforeSearch() ? items : [];
+        }
         const expr = this.searchExpr();
         const needle = search.toLowerCase();
         return items.filter((it) => nxeResolveText(expr, it).toLowerCase().includes(needle));
@@ -163,12 +370,21 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         this.openPanel();
     }
     onSearchInput(event) {
-        this.searchText.set(event.target.value);
+        const text = event.target.value;
+        this.searchText.set(text);
+        this.search.typed(text);
         this.activeIndex.set(0);
         if (!this.open()) {
             this.openPanel();
         }
     }
+    /** Loads the next page of a store `dataSource` when the list is scrolled to its end. */
+    onPanelScroll(event) {
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 8) {
+            this.search.loadMore();
+        }
+    }
     onBlur() {
         this.focused.set(false);
         this.markAsTouched();
@@ -179,6 +395,9 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         event.preventDefault();
         const previousValue = this.value();
         const next = this.extractValue(item);
+        if (this.search.hasStore) {
+            this.remember(next, item);
+        }
         this.commitValue(next, event);
         this.onSelectionChanged.emit({ selectedItem: item, previousValue, value: next });
         this.searchText.set(null);
@@ -230,6 +449,7 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         this.panelWidth.set(this.elementRef.nativeElement.offsetWidth);
         const idx = this.items().findIndex((it) => this.extractValue(it) === this.value());
         this.activeIndex.set(idx >= 0 ? idx : 0);
+        this.search.open(this.searchText() ?? '');
         if (!this.overlayRef) {
             this.overlayRef = this.overlay.create({
                 positionStrategy: this.overlay
@@ -268,24 +488,24 @@ class NxeSelectBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSelectBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSelectBoxComponent, isStandalone: true, selector: "nxe-select-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, fieldTemplate: { classPropertyName: "fieldTemplate", publicName: "fieldTemplate", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabled: { classPropertyName: "hoverStateEnabled", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-selectbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeSelectBoxComponent, isStandalone: true, selector: "nxe-select-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, fieldTemplate: { classPropertyName: "fieldTemplate", publicName: "fieldTemplate", isSignal: true, isRequired: false, transformFunction: null }, searchTimeout: { classPropertyName: "searchTimeout", publicName: "searchTimeout", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, showDataBeforeSearch: { classPropertyName: "showDataBeforeSearch", publicName: "showDataBeforeSearch", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, displayValue: { classPropertyName: "displayValue", publicName: "displayValue", isSignal: true, isRequired: false, transformFunction: null }, hoverStateEnabled: { classPropertyName: "hoverStateEnabled", publicName: "hoverStateEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged", searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-selectbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSelectBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSelectBoxComponent) },
-        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @if (fieldTemplateRef(); as tpl) {\r\n        <div class=\"nxe-select-field\">\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\r\n        </div>\r\n    } @else {\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-select-input\"\r\n            [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 });
+        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    @if (fieldTemplateRef(); as tpl) {\n        <div class=\"nxe-select-field\">\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\n        </div>\n    } @else {\n        <input\n            #input\n            class=\"nxe-editor-input nxe-select-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n            [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [value]=\"inputDisplay()\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"placeholder() || null\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    }\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        (scroll)=\"onPanelScroll($event)\">\n        @for (item of filteredItems(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"selectItem(item, $event)\">\n                @if (itemTemplateRef(); as tpl) {\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                } @else {\n                    {{ display(item) }}\n                }\n            </div>\n        } @empty {\n            <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-select-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-select-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-select-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-select-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear),nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeSelectBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-select-box', standalone: true, imports: [NgTemplateOutlet], host: {
                         class: 'nxe-widget nxe-editor nxe-selectbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                         '(keydown)': 'onKeydown($event)',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSelectBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSelectBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @if (fieldTemplateRef(); as tpl) {\r\n        <div class=\"nxe-select-field\">\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\r\n        </div>\r\n    } @else {\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-select-input\"\r\n            [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"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    @if (fieldTemplateRef(); as tpl) {\n        <div class=\"nxe-select-field\">\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\n        </div>\n    } @else {\n        <input\n            #input\n            class=\"nxe-editor-input nxe-select-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n            [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [value]=\"inputDisplay()\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"placeholder() || null\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    }\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        (scroll)=\"onPanelScroll($event)\">\n        @for (item of filteredItems(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"selectItem(item, $event)\">\n                @if (itemTemplateRef(); as tpl) {\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\n                } @else {\n                    {{ display(item) }}\n                }\n            </div>\n        } @empty {\n            <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-select-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-select-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-select-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-select-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-select-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear),nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], fieldTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTemplate", required: false }] }], searchTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTimeout", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], showDataBeforeSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataBeforeSearch", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], displayValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayValue", required: false }] }], hoverStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
 
 /**
  * `nxe-tag-box` — drop-in replacement for DevExtreme `dx-tag-box` (multi-select sibling of
@@ -303,6 +523,7 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     ...(ngDevMode ? [{ debugName: "dropdownTemplate" }] : /* istanbul ignore next */ []));
     inputEl = viewChild('input', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    /** A plain array, or an {@link NxePickerStore} the box queries itself (server-side search). */
     dataSource = input([], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
     displayExprInput = input(undefined, { ...(ngDevMode ? { debugName: "displayExprInput" } : /* istanbul ignore next */ {}), alias: 'displayExpr' });
@@ -341,7 +562,7 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     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 */
+    selectAllText = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectAllText" }] : /* istanbul ignore next */ []));
     /** dx parity: dx-tag-box does NOT show a drop-down arrow unless showDropDownButton is set. */
     showDropDownButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showDropDownButtonInput" } : /* istanbul ignore next */ {}), alias: 'showDropDownButton', transform: nxeOptionalBoolean });
@@ -350,6 +571,16 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     placeholder = computed(() => this.placeholderInput() ?? this.nxeDefaults.tagBox?.placeholder ?? '', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** dx `searchTimeout`: ms of typing pause before `(searchChange)` fires or a store is queried. */
+    searchTimeout = input(500, { ...(ngDevMode ? { debugName: "searchTimeout" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `minSearchLength`: characters needed before a search is emitted, applied or sent. */
+    minSearchLength = input(0, { ...(ngDevMode ? { debugName: "minSearchLength" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** dx `showDataBeforeSearch`: list rows while the text is shorter than `minSearchLength`. */
+    showDataBeforeSearch = input(false, { ...(ngDevMode ? { debugName: "showDataBeforeSearch" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Rows requested per page from a store `dataSource` (`take`); more load on scroll to the end. */
+    pageSize = input(20, { ...(ngDevMode ? { debugName: "pageSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    /** The search text settled (after `searchTimeout`, once it has `minSearchLength` characters or was cleared). */
+    searchChange = output();
     focused = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
     open = signal(false, /* @ts-ignore */
@@ -361,8 +592,38 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     overlayRef;
     closeSub;
     flipSub;
-    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    store = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? ds : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "store" }] : /* istanbul ignore next */ []));
+    search = new NxePickerSearch({
+        store: this.store,
+        searchExpr: this.searchExpr,
+        searchTimeout: this.searchTimeout,
+        minSearchLength: this.minSearchLength,
+        showDataBeforeSearch: this.showDataBeforeSearch,
+        pageSize: this.pageSize,
+        searchChange: (event) => this.searchChange.emit(event),
+    });
+    /** Rows picked or fetched by key from a store, so a chip keeps its label off the loaded page. */
+    resolved = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    items = computed(() => {
+        const ds = this.dataSource();
+        return nxeIsPickerStore(ds) ? this.search.items() : (ds ?? []);
+    }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Fetches, through `byKey`, the rows of externally set keys that no loaded row has. */
+    keyLookup = toObservable(this.value)
+        .pipe(mergeMap((v) => (Array.isArray(v) && this.search.hasStore ? v : [])), filter((key) => this.findRow(key) === undefined), mergeMap((key) => from(this.search.lookup(key)).pipe(catchError(() => EMPTY), filter((row) => row != null), map((row) => [key, row]))), takeUntilDestroyed())
+        .subscribe(([key, row]) => this.remember(key, row));
+    findRow(key) {
+        return this.items().find((it) => this.extractValue(it) === key) ?? this.resolved().get(key);
+    }
+    remember(key, row) {
+        this.resolved.update((m) => new Map(m).set(key, row));
+    }
     /** The selected keys (always an array). */
     selectedKeys = computed(() => {
         const v = this.value();
@@ -378,7 +639,7 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     /** Selected items resolved from the value keys (for chip rendering). */
     selectedItems = computed(() => {
         const keys = this.selectedKeys();
-        return keys.map((k) => this.items().find((it) => this.extractValue(it) === k) ?? k);
+        return keys.map((k) => this.findRow(k) ?? k);
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => this.selectedKeys().length > 0, /* @ts-ignore */
@@ -386,9 +647,15 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     filteredItems = computed(() => {
         const items = this.items();
         const search = this.searchText();
-        if (!this.searchEnabled() || !search) {
+        if (this.search.hasStore) {
             return items;
         }
+        if (!this.searchEnabled() || !search) {
+            return this.minSearchLength() > 0 && !this.showDataBeforeSearch() ? [] : items;
+        }
+        if (!this.search.reachesMinimum(search)) {
+            return this.showDataBeforeSearch() ? items : [];
+        }
         const expr = this.searchExpr();
         const needle = search.toLowerCase();
         return items.filter((it) => nxeResolveText(expr, it).toLowerCase().includes(needle));
@@ -426,11 +693,20 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         this.inputEl()?.nativeElement?.focus();
     }
     onSearchInput(event) {
-        this.searchText.set(event.target.value);
+        const text = event.target.value;
+        this.searchText.set(text);
+        this.search.typed(text);
         if (!this.open()) {
             this.openPanel();
         }
     }
+    /** Loads the next page of a store `dataSource` when the list is scrolled to its end. */
+    onPanelScroll(event) {
+        const el = event.target;
+        if (el.scrollTop + el.clientHeight >= el.scrollHeight - 8) {
+            this.search.loadMore();
+        }
+    }
     onBlur() {
         this.focused.set(false);
         this.markAsTouched();
@@ -440,7 +716,13 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         const key = this.extractValue(item);
         const keys = this.selectedKeys();
         const next = keys.includes(key) ? keys.filter((k) => k !== key) : [...keys, key];
+        if (this.search.hasStore) {
+            this.remember(key, item);
+        }
         this.commitValue(next, event);
+        if (this.searchText()) {
+            this.search.typed('');
+        }
         this.searchText.set('');
         const input = this.inputEl()?.nativeElement;
         if (input) {
@@ -454,6 +736,11 @@ class NxeTagBoxComponent extends NxeFormControlBase {
     toggleAll(event) {
         event.preventDefault();
         const listed = this.filteredItems().map((it) => this.extractValue(it));
+        if (this.search.hasStore) {
+            for (const it of this.filteredItems()) {
+                this.remember(this.extractValue(it), it);
+            }
+        }
         const keys = this.selectedKeys();
         const next = this.selectAllState() === true
             ? keys.filter((k) => !listed.includes(k))
@@ -502,6 +789,7 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         if (this.overlayRef.hasAttached()) {
             return;
         }
+        this.search.open(this.searchText());
         this.overlayRef.attach(new TemplatePortal(this.dropdownTemplate(), this.viewContainerRef));
         this.closeSub = merge(this.overlayRef.backdropClick(), this.overlayRef.keydownEvents().pipe(filter((e) => e.key === 'Escape'))).subscribe(() => this.close());
         this.open.set(true);
@@ -522,24 +810,24 @@ class NxeTagBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTagBoxComponent, isStandalone: true, selector: "nxe-tag-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTagBoxComponent, isStandalone: true, selector: "nxe-tag-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSelectionControlsInput: { classPropertyName: "showSelectionControlsInput", publicName: "showSelectionControls", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchTimeout: { classPropertyName: "searchTimeout", publicName: "searchTimeout", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, showDataBeforeSearch: { classPropertyName: "showDataBeforeSearch", publicName: "showDataBeforeSearch", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChange: "searchChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-tagbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTagBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTagBoxComponent) },
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\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 });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<!--\n    Two columns, as dx-tag-box renders them: the wrapping tag container (dx turns\n    `.dx-texteditor-input-container` into `.dx-tag-container`) and, beside it, the buttons \u2014 never\n    inside it, so they cannot wrap onto a tag row and they centre on the whole editor height.\n-->\n<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <div class=\"nxe-tag-container\">\n        @for (item of selectedItems(); track $index) {\n            <span class=\"nxe-tag\">\n                <span class=\"nxe-tag-text\">{{ display(item) }}</span>\n                <!-- Rendered in every state, as dx does (m_tag_box.js appends it unconditionally);\n                     readOnly/disabled make it inert rather than removing it. -->\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\n            </span>\n        }\n\n        <input\n            #input\n            class=\"nxe-editor-input nxe-tag-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    </div>\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        (scroll)=\"onPanelScroll($event)\">\n        @if (showSelectionControls()) {\n            <!-- dx `selectionMode: 'all'`, which showSelectionControls switches on\n                 (m_tag_box.js _listConfig): a tri-state \"Select All\" over the rows shown. Hidden\n                 while the list is empty, as `.dx-empty-collection .dx-list-select-all` is. -->\n            @if (filteredItems().length) {\n                <div\n                    class=\"nxe-tag-select-all\"\n                    [id]=\"panelId() + '-select-all'\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectAllState() === true\"\n                    [attr.aria-checked]=\"selectAllState() === undefined ? 'mixed' : selectAllState()\"\n                    (mousedown)=\"toggleAll($event)\">\n                    <span\n                        class=\"nxe-tag-check\"\n                        [class.nxe-tag-checked]=\"selectAllState() === true\"\n                        [class.nxe-tag-indeterminate]=\"selectAllState() === undefined\"\n                        aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-select-all-label\">{{ selectAllText() ?? nxeMessages.t('dropdown.selectAll') }}</span>\n                </div>\n            }\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item nxe-tag-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        } @else {\n            <!-- dx `selectionMode: 'multiple'`: plain rows, selection shown by the row fill. -->\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    {{ display(item) }}\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{box-sizing:border-box;position:relative;display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:stretch;align-self:stretch;min-width:0;padding-bottom:4px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;height:auto;min-height:30px;padding-bottom:4px}nxe-tag-box .nxe-tag-container:has(>.nxe-tag)>.nxe-tag-input{padding-inline-start:0;margin-inline-start:5px}nxe-tag-box.nxe-invalid>.nxe-editor-container:not(:has(>.nxe-select-clear,>.nxe-select-arrow))>.nxe-tag-container:not(:has(>.nxe-tag))>.nxe-tag-input{padding-inline-end:34px}nxe-tag-box .nxe-tag{box-sizing:border-box;position:relative;display:inline-flex;align-self:flex-start;justify-content:center;max-width:calc(100% - 5px);min-width:40px;margin-top:4px;margin-inline-start:4px;padding-block:3px 4px;padding-inline:6px 25px;background-color:var(--nxe-ui-border, #ddd);border-radius:2px;color:var(--nxe-ui-text, #333)}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:var(--nxe-ui-neutral-400, #aaa)}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:before,nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:after{background:var(--nxe-ui-border, #ddd)}nxe-tag-box.nxe-disabled .nxe-tag,nxe-tag-box.nxe-disabled .nxe-tag-remove{cursor:default}nxe-tag-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-tag-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-tag-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-tag-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-tag-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear),nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-select-panel .nxe-list-item.nxe-tag-item{display:block;position:relative;padding-block:10px;padding-inline:41px 10px}.nxe-select-panel .nxe-list-item.nxe-tag-item:hover,.nxe-select-panel .nxe-list-item.nxe-tag-item:active,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected:hover:not(.nxe-list-item-active){background-color:transparent;color:var(--nxe-ui-text)}.nxe-tag-check{box-sizing:border-box;position:relative;display:block;width:22px;height:22px;border:1px solid var(--nxe-ui-border);border-radius:2px;background:var(--nxe-ui-surface)}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-checked:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-check.nxe-tag-indeterminate:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-indeterminate:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-item .nxe-tag-check{position:absolute;top:50%;inset-inline-start:10px;margin-top:-10px}.nxe-tag-item:hover .nxe-tag-check,.nxe-tag-select-all:hover .nxe-tag-check{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-tag-select-all{box-sizing:border-box;padding-block:12px 11px;padding-inline:0;border-bottom:1px solid var(--nxe-ui-border);margin-bottom:3px;white-space:nowrap;cursor:pointer}.nxe-tag-select-all .nxe-tag-check{float:inline-start;margin-top:-1px;margin-bottom:-3px;margin-inline-start:10px}.nxe-tag-select-all-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:17px;padding:0 10px;margin-top:1px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-tag-box', standalone: true, host: {
                         class: 'nxe-widget nxe-editor nxe-tagbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                         '(keydown)': 'onKeydown($event)',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTagBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTagBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\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 }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!--\n    Two columns, as dx-tag-box renders them: the wrapping tag container (dx turns\n    `.dx-texteditor-input-container` into `.dx-tag-container`) and, beside it, the buttons \u2014 never\n    inside it, so they cannot wrap onto a tag row and they centre on the whole editor height.\n-->\n<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <div class=\"nxe-tag-container\">\n        @for (item of selectedItems(); track $index) {\n            <span class=\"nxe-tag\">\n                <span class=\"nxe-tag-text\">{{ display(item) }}</span>\n                <!-- Rendered in every state, as dx does (m_tag_box.js appends it unconditionally);\n                     readOnly/disabled make it inert rather than removing it. -->\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\n            </span>\n        }\n\n        <input\n            #input\n            class=\"nxe-editor-input nxe-tag-input\"\n            [attr.tabindex]=\"tabIndex()\"\n            role=\"combobox\"\n            aria-haspopup=\"listbox\"\n            [attr.aria-expanded]=\"open()\"\n            [attr.aria-controls]=\"open() ? panelId() : null\"\n\n            [id]=\"controlId()\"\n            [attr.aria-label]=\"ariaLabel() || null\"\n            [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n            [attr.aria-invalid]=\"invalidState() ? true : null\"\n            [attr.aria-required]=\"required() ? true : null\"\n            type=\"text\"\n            [readOnly]=\"readOnly() || !searchEnabled()\"\n            [disabled]=\"disabled()\"\n            [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\n            autocomplete=\"off\"\n            (input)=\"onSearchInput($event)\"\n            (focus)=\"focused.set(true)\"\n            (blur)=\"onBlur()\" />\n    </div>\n\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n    @if (showDropDownButton() && !readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\"\n        aria-multiselectable=\"true\"\n        (scroll)=\"onPanelScroll($event)\">\n        @if (showSelectionControls()) {\n            <!-- dx `selectionMode: 'all'`, which showSelectionControls switches on\n                 (m_tag_box.js _listConfig): a tri-state \"Select All\" over the rows shown. Hidden\n                 while the list is empty, as `.dx-empty-collection .dx-list-select-all` is. -->\n            @if (filteredItems().length) {\n                <div\n                    class=\"nxe-tag-select-all\"\n                    [id]=\"panelId() + '-select-all'\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"selectAllState() === true\"\n                    [attr.aria-checked]=\"selectAllState() === undefined ? 'mixed' : selectAllState()\"\n                    (mousedown)=\"toggleAll($event)\">\n                    <span\n                        class=\"nxe-tag-check\"\n                        [class.nxe-tag-checked]=\"selectAllState() === true\"\n                        [class.nxe-tag-indeterminate]=\"selectAllState() === undefined\"\n                        aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-select-all-label\">{{ selectAllText() ?? nxeMessages.t('dropdown.selectAll') }}</span>\n                </div>\n            }\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item nxe-tag-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\n                    <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        } @else {\n            <!-- dx `selectionMode: 'multiple'`: plain rows, selection shown by the row fill. -->\n            @for (item of filteredItems(); track $index; let i = $index) {\n                <div\n                    class=\"nxe-list-item\"\n                    [id]=\"optionId(i)\"\n                    role=\"option\"\n                    [attr.aria-selected]=\"isSelected(item)\"\n                    [class.nxe-list-item-selected]=\"isSelected(item)\"\n                    (mousedown)=\"toggle(item, $event)\">\n                    {{ display(item) }}\n                </div>\n            } @empty {\n                <div class=\"nxe-list-empty\">{{ nxeMessages.t('dropdown.noData') }}</div>\n            }\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{box-sizing:border-box;position:relative;display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:stretch;align-self:stretch;min-width:0;padding-bottom:4px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;height:auto;min-height:30px;padding-bottom:4px}nxe-tag-box .nxe-tag-container:has(>.nxe-tag)>.nxe-tag-input{padding-inline-start:0;margin-inline-start:5px}nxe-tag-box.nxe-invalid>.nxe-editor-container:not(:has(>.nxe-select-clear,>.nxe-select-arrow))>.nxe-tag-container:not(:has(>.nxe-tag))>.nxe-tag-input{padding-inline-end:34px}nxe-tag-box .nxe-tag{box-sizing:border-box;position:relative;display:inline-flex;align-self:flex-start;justify-content:center;max-width:calc(100% - 5px);min-width:40px;margin-top:4px;margin-inline-start:4px;padding-block:3px 4px;padding-inline:6px 25px;background-color:var(--nxe-ui-border, #ddd);border-radius:2px;color:var(--nxe-ui-text, #333)}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:var(--nxe-ui-neutral-400, #aaa)}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:before,nxe-tag-box:not(.nxe-disabled) .nxe-tag-remove:active:after{background:var(--nxe-ui-border, #ddd)}nxe-tag-box.nxe-disabled .nxe-tag,nxe-tag-box.nxe-disabled .nxe-tag-remove{cursor:default}nxe-tag-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-tag-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-tag-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-tag-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-tag-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-tag-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear),nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-select-panel .nxe-list-item.nxe-tag-item{display:block;position:relative;padding-block:10px;padding-inline:41px 10px}.nxe-select-panel .nxe-list-item.nxe-tag-item:hover,.nxe-select-panel .nxe-list-item.nxe-tag-item:active,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected,.nxe-select-panel .nxe-list-item.nxe-tag-item.nxe-list-item-selected:hover:not(.nxe-list-item-active){background-color:transparent;color:var(--nxe-ui-text)}.nxe-tag-check{box-sizing:border-box;position:relative;display:block;width:22px;height:22px;border:1px solid var(--nxe-ui-border);border-radius:2px;background:var(--nxe-ui-surface)}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;box-sizing:border-box;top:5px;inset-inline-start:2.5px;width:15px;height:11px;background-color:var(--nxe-ui-accent);clip-path:polygon(0 5.586px,5.414px 11px,15px 1.414px,13.586px 0,5.414px 8.172px,1.414px 4.172px)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-checked:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-check.nxe-tag-indeterminate:after{content:\"\";position:absolute;box-sizing:border-box;top:50%;inset-inline-start:50%;width:12px;height:12px;margin-top:-6px;margin-inline-start:-6px;border-radius:2px;background-color:var(--nxe-ui-accent)}@media(forced-colors:active){.nxe-tag-check.nxe-tag-indeterminate:after{forced-color-adjust:none;background-color:CanvasText}}.nxe-tag-item .nxe-tag-check{position:absolute;top:50%;inset-inline-start:10px;margin-top:-10px}.nxe-tag-item:hover .nxe-tag-check,.nxe-tag-select-all:hover .nxe-tag-check{border-color:var(--nxe-ui-checkbox-hover-border, #265a87)}.nxe-tag-select-all{box-sizing:border-box;padding-block:12px 11px;padding-inline:0;border-bottom:1px solid var(--nxe-ui-border);margin-bottom:3px;white-space:nowrap;cursor:pointer}.nxe-tag-select-all .nxe-tag-check{float:inline-start;margin-top:-1px;margin-bottom:-3px;margin-inline-start:10px}.nxe-tag-select-all-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:17px;padding:0 10px;margin-top:1px}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSelectionControlsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelectionControls", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchTimeout: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTimeout", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], showDataBeforeSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDataBeforeSearch", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }] } });
 
 /**
  * `nxe-drop-down-options` — drop-in for DevExtreme `dxo-drop-down-options`, a no-template config
@@ -744,22 +1032,22 @@ class NxeDropDownBoxComponent extends NxeFormControlBase {
         this.overlayRef?.dispose();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDropDownBoxComponent, isStandalone: true, selector: "nxe-drop-down-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dropDownOptions: { classPropertyName: "dropDownOptions", publicName: "dropDownOptions", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", onClosed: "onClosed" }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-dropdownbox" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeDropDownBoxComponent, isStandalone: true, selector: "nxe-drop-down-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, dropDownOptions: { classPropertyName: "dropDownOptions", publicName: "dropDownOptions", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "openedChange", onClosed: "onClosed" }, host: { properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-dropdownbox" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDropDownBoxComponent), multi: true },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDropDownBoxComponent) },
-        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }, { propertyName: "options", first: true, predicate: NxeDropDownOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        [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 });
+        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }, { propertyName: "options", first: true, predicate: NxeDropDownOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <input\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"opened()\"\n        [attr.aria-controls]=\"opened() ? panelId() : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        readonly\n        [value]=\"displayText()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        (focus)=\"focused.set(true)\"\n        (blur)=\"onBlur()\" />\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (!readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #panel>\n    <div class=\"nxe-dropdownbox-panel\" [id]=\"panelId()\" role=\"dialog\" [style.width]=\"panelStyleWidth()\">\n        @if (contentTemplateRef(); as tpl) {\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-drop-down-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-drop-down-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-drop-down-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear),nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-dropdownbox-panel{box-sizing:border-box;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .175));overflow:auto;max-height:420px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownBoxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-drop-down-box', standalone: true, imports: [NgTemplateOutlet], host: {
                         class: 'nxe-widget nxe-editor nxe-dropdownbox',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                     }, providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDropDownBoxComponent), multi: true },
                         { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDropDownBoxComponent) },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        [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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\n    <input\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"dialog\"\n        [attr.aria-expanded]=\"opened()\"\n        [attr.aria-controls]=\"opened() ? panelId() : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        readonly\n        [value]=\"displayText()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        (focus)=\"focused.set(true)\"\n        (blur)=\"onBlur()\" />\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n\n    @if (!readOnly()) {\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\n            <!-- An 8x4 triangle centred in the 18px box. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\"><path d=\"M5 7h8l-4 4z\" /></svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #panel>\n    <div class=\"nxe-dropdownbox-panel\" [id]=\"panelId()\" role=\"dialog\" [style.width]=\"panelStyleWidth()\">\n        @if (contentTemplateRef(); as tpl) {\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-drop-down-box .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-drop-down-box:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-drop-down-box:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-drop-down-box.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear),nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-dropdownbox-panel{box-sizing:border-box;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);border-radius:6px;box-shadow:var(--nxe-ui-popup-shadow, 0 6px 12px rgba(0, 0, 0, .175));overflow:auto;max-height:420px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { panelTemplate: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], options: [{ type: i0.ContentChild, args: [i0.forwardRef(() => NxeDropDownOptionsComponent), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], dropDownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropDownOptions", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }, { type: i0.Output, args: ["openedChange"] }], onClosed: [{ type: i0.Output, args: ["onClosed"] }] } });
 
 /** DI token the menu provides so projected `nxe-menu-item`s can close it on click. */
@@ -1030,21 +1318,21 @@ class NxeAutoCompleteComponent extends NxeFormControlBase {
         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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeAutoCompleteComponent, isStandalone: true, selector: "nxe-auto-complete", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, valueExpr: { classPropertyName: "valueExpr", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchMode: { classPropertyName: "searchMode", publicName: "searchMode", isSignal: true, isRequired: false, transformFunction: null }, minSearchLength: { classPropertyName: "minSearchLength", publicName: "minSearchLength", isSignal: true, isRequired: false, transformFunction: null }, maxItemCount: { classPropertyName: "maxItemCount", publicName: "maxItemCount", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChanged: "onSelectionChanged" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "invalidState()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-autocomplete-box" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NxeAutoCompleteComponent),
                 multi: true,
             },
             { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeAutoCompleteComponent) },
-        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\">\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 });
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\">\n    <input\n        #input\n        class=\"nxe-editor-input nxe-autocomplete-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"open()\"\n        [attr.aria-controls]=\"open() ? panelId() : null\"\n        [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        [value]=\"text()\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        autocomplete=\"off\"\n        (input)=\"onFieldInput($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n\n    @if (showClearButton() && text() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-autocomplete-box-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\">\n        @for (item of suggestions(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"i === activeIndex()\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"pick(item, $event)\">\n                {{ itemText(item) }}\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-auto-complete .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-auto-complete .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-auto-complete .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-auto-complete:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-auto-complete.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear),nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-autocomplete-box-panel{max-height:300px;overflow-y:auto;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAutoCompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nxe-auto-complete', standalone: true, host: {
                         class: 'nxe-widget nxe-editor nxe-autocomplete-box',
                         '[class.nxe-focused]': 'focused()',
-                        '[class.nxe-invalid]': '!!validationError()',
+                        '[class.nxe-invalid]': 'invalidState()',
                         '[class.nxe-open]': 'open()',
                         '(keydown)': 'onKeydown($event)',
                     }, providers: [
@@ -1054,7 +1342,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                             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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\">\n    <input\n        #input\n        class=\"nxe-editor-input nxe-autocomplete-input\"\n        [attr.tabindex]=\"tabIndex()\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        [attr.aria-expanded]=\"open()\"\n        [attr.aria-controls]=\"open() ? panelId() : null\"\n        [attr.aria-activedescendant]=\"open() && activeIndex() >= 0 ? optionId(activeIndex()) : null\"\n        [id]=\"controlId()\"\n        [attr.aria-label]=\"ariaLabel() || null\"\n        [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n        [attr.aria-invalid]=\"invalidState() ? true : null\"\n        [attr.aria-required]=\"required() ? true : null\"\n        type=\"text\"\n        [value]=\"text()\"\n        [readOnly]=\"readOnly()\"\n        [disabled]=\"disabled()\"\n        [attr.placeholder]=\"placeholder() || null\"\n        autocomplete=\"off\"\n        (input)=\"onFieldInput($event)\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\" />\n\n    @if (showClearButton() && text() && !readOnly() && !disabled()) {\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\n            <!-- A \u00D816 disc with a 2px \u00D7 cut out: two 2px bars, each running corner to corner of the\n                 8px square centred on the disc, drawn as a plus and turned 45\u00B0. -->\n            <svg viewBox=\"0 0 18 18\" focusable=\"false\">\n                <path fill-rule=\"evenodd\" transform=\"rotate(45 9 9)\"\n                    d=\"M9 1a8 8 0 1 1 0 16A8 8 0 1 1 9 1ZM8 3.343h2V8h4.657v2H10v4.657H8V10H3.343V8H8Z\" />\n            </svg>\n        </span>\n    }\n</div>\n\n<ng-content />\n\n@if (validationError(); as error) {\n    @if (focused()) {\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\n    }\n}\n\n<ng-template #dropdown>\n    <div class=\"nxe-autocomplete-box-panel\" [style.width.px]=\"panelWidth()\"\n        [id]=\"panelId()\"\n        role=\"listbox\">\n        @for (item of suggestions(); track $index; let i = $index) {\n            <div\n                class=\"nxe-list-item\"\n                [id]=\"optionId(i)\"\n                role=\"option\"\n                [attr.aria-selected]=\"i === activeIndex()\"\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\n                (mousedown)=\"pick(item, $event)\">\n                {{ itemText(item) }}\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: ["nxe-auto-complete .nxe-select-clear{box-sizing:border-box;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:0;color:var(--nxe-ui-text-muted, #999);cursor:pointer}nxe-auto-complete .nxe-select-clear svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete .nxe-select-arrow{box-sizing:border-box;position:relative;flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;min-width:34px;padding:1px;border-radius:4px;background-clip:content-box;color:var(--nxe-ui-text, #333);cursor:pointer}nxe-auto-complete .nxe-select-arrow svg{display:block;width:18px;height:18px;fill:currentColor}nxe-auto-complete:hover:not(.nxe-disabled) .nxe-select-arrow,nxe-auto-complete:active:not(.nxe-disabled) .nxe-select-arrow{background-color:var(--nxe-ui-neutral-150, #e6e6e6)}nxe-auto-complete.nxe-open .nxe-select-arrow{background-color:var(--nxe-ui-neutral-350, #b3b3b3)}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow) .nxe-editor-input{padding-inline-end:0}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear),nxe-auto-complete .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-auto-complete .nxe-editor-container:has(>.nxe-select-clear):has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 72px}.nxe-autocomplete-box-panel{max-height:300px;overflow-y:auto;background:var(--nxe-ui-surface, #fff);border:1px solid var(--nxe-ui-border, #ddd);box-sizing:border-box}\n"] }]
         }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], valueExpr: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchMode", required: false }] }], minSearchLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSearchLength", required: false }] }], maxItemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItemCount", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
 
 /** DI token the autocomplete provides so projected `nxe-option`s can close it on click. */
@@ -1213,5 +1501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { NXE_AUTOCOMPLETE, NxeAutoCompleteComponent, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxeSelectBoxComponent, NxeTagBoxComponent };
+export { NXE_AUTOCOMPLETE, NXE_MENU, NxeAutoCompleteComponent, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxePickerSearch, NxeSelectBoxComponent, NxeTagBoxComponent, nxeIsPickerStore };
 //# sourceMappingURL=nexterajs-ui-dropdowns.mjs.map