@nexterajs/ui 0.0.1

package/fesm2022/nexterajs-ui-dropdowns.mjs

@@ -0,0 +1,953 @@
+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 { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { merge, filter, distinctUntilChanged, Subject } from 'rxjs';
+import { NxeFormControlBase, NxeTemplateDirective, nxeOptionalBoolean, NXE_VALIDATION_TARGET } from '@nexterajs/ui/core';
+import { nxePane, trackPaneFlip } from '@nexterajs/ui/styling';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/**
+ * `nxe-select-box` — drop-in replacement for DevExtreme `dx-select-box`.
+ *
+ * A signal-CVA single-select dropdown over a plain array (`[dataSource]`). It bakes in the app's
+ * global `dxSelectBox.defaultOptions` (`displayExpr='lovName'`, `valueExpr='lovCode'`,
+ * `searchEnabled`, `showClearButton`), so the bound control value is the `valueExpr` field
+ * (a string code) and the field shows the `displayExpr` field. Dropdown is a CDK overlay with
+ * an in-field search filter. Emits `(valueChange)` (the code) and `(onSelectionChanged)`
+ * (`{selectedItem}`). Hosts a projected `nxe-validator` via {@link NXE_VALIDATION_TARGET}.
+ */
+class NxeSelectBoxComponent extends NxeFormControlBase {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    dropdownTemplate = viewChild.required('dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownTemplate" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    templates = contentChildren(NxeTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    /** The source array (plain JS array of `Lov`-shaped objects, or primitives). */
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Field shown in the box/list (DevExtreme default `lovName`). Empty => the item itself. */
+    displayExprInput = input(undefined, { ...(ngDevMode ? { debugName: "displayExprInput" } : /* istanbul ignore next */ {}), alias: 'displayExpr' });
+    displayExpr = computed(() => this.displayExprInput() ?? this.nxeDefaults.selectBox?.displayExpr ?? 'lovName', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayExpr" }] : /* istanbul ignore next */ []));
+    /** Field bound as the control value (DevExtreme default `lovCode`). Empty => the whole item. */
+    valueExprInput = input(undefined, { ...(ngDevMode ? { debugName: "valueExprInput" } : /* istanbul ignore next */ {}), alias: 'valueExpr' });
+    valueExpr = computed(() => this.valueExprInput() ?? this.nxeDefaults.selectBox?.valueExpr ?? 'lovCode', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
+    /** Field matched while searching (DevExtreme default `lovName`). */
+    searchExprInput = input(undefined, { ...(ngDevMode ? { debugName: "searchExprInput" } : /* istanbul ignore next */ {}), alias: 'searchExpr' });
+    searchExpr = computed(() => this.searchExprInput() ?? this.nxeDefaults.selectBox?.searchExpr ?? 'lovName', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchExpr" }] : /* istanbul ignore next */ []));
+    searchEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "searchEnabledInput" } : /* istanbul ignore next */ {}), alias: 'searchEnabled', transform: nxeOptionalBoolean });
+    searchEnabled = computed(() => this.searchEnabledInput() ?? this.nxeDefaults.selectBox?.searchEnabled ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchEnabled" }] : /* istanbul ignore next */ []));
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.selectBox?.showClearButton ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /** dx parity: dx-select-box shows its drop-down arrow unless showDropDownButton=false. */
+    showDropDownButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showDropDownButtonInput" } : /* istanbul ignore next */ {}), alias: 'showDropDownButton', transform: nxeOptionalBoolean });
+    showDropDownButton = computed(() => this.showDropDownButtonInput() ?? this.nxeDefaults.selectBox?.showDropDownButton ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDropDownButton" }] : /* istanbul ignore next */ []));
+    placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    placeholder = computed(() => this.placeholderInput() ?? this.nxeDefaults.selectBox?.placeholder ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Named template ('displayItem') for dropdown rows; `$implicit` = the item. */
+    itemTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    /** Named template ('inputField') for the closed field; `$implicit` = the selected item. */
+    fieldTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "fieldTemplate" }] : /* istanbul ignore next */ []));
+    /** DevExtreme parity, cosmetic. */
+    hoverStateEnabled = input(true, { ...(ngDevMode ? { debugName: "hoverStateEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    onSelectionChanged = output();
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    /** What the user has typed to filter (null = not actively searching → show display text). */
+    searchText = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    activeIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `.instance` facade — only `focus()` is used (via the customAutofocus directive). */
+    get instance() {
+        return this;
+    }
+    overlayRef;
+    closeSub;
+    flipSub;
+    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    display(item) {
+        const expr = this.displayExpr();
+        if (!expr) {
+            return item == null ? '' : String(item);
+        }
+        return item?.[expr] ?? '';
+    }
+    extractValue(item) {
+        const expr = this.valueExpr();
+        return expr ? item?.[expr] : item;
+    }
+    selectedItem = computed(() => {
+        const v = this.value();
+        if (v == null) {
+            return null;
+        }
+        return this.items().find((it) => this.extractValue(it) === v) ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItem" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => this.value() != null && this.value() !== '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    /** Display text when the field is not being searched. */
+    displayText = computed(() => {
+        const sel = this.selectedItem();
+        return sel ? this.display(sel) : '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    /** Value bound to the input element. */
+    inputDisplay = computed(() => {
+        const search = this.searchText();
+        return this.open() && search !== null ? search : this.displayText();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputDisplay" }] : /* istanbul ignore next */ []));
+    filteredItems = computed(() => {
+        const items = this.items();
+        const search = this.searchText();
+        if (!this.searchEnabled() || !search) {
+            return items;
+        }
+        const expr = this.searchExpr() || this.displayExpr();
+        const needle = search.toLowerCase();
+        return items.filter((it) => {
+            const hay = (expr ? it?.[expr] : it) ?? '';
+            return String(hay).toLowerCase().includes(needle);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    itemTemplateRef = computed(() => this.templates().find((t) => t.name() === this.itemTemplate())?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplateRef" }] : /* istanbul ignore next */ []));
+    fieldTemplateRef = computed(() => this.templates().find((t) => t.name() === this.fieldTemplate())?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldTemplateRef" }] : /* istanbul ignore next */ []));
+    isSelected(item) {
+        return this.value() != null && this.extractValue(item) === this.value();
+    }
+    /** Imperative focus (DevExtreme `.instance.focus()` via customAutofocus). */
+    focus() {
+        this.inputEl()?.nativeElement?.focus();
+    }
+    onFieldMousedown(event) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        // Let the clear/arrow handlers run; otherwise toggle.
+        const target = event.target;
+        if (target.closest('.nxe-select-clear')) {
+            return;
+        }
+        if (this.open()) {
+            // clicking the field while open keeps it open for typing
+            return;
+        }
+        this.openPanel();
+    }
+    onSearchInput(event) {
+        this.searchText.set(event.target.value);
+        this.activeIndex.set(0);
+        if (!this.open()) {
+            this.openPanel();
+        }
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.markAsTouched();
+        // committing happens on selection; on blur just reset the search text
+        this.searchText.set(null);
+    }
+    selectItem(item, event) {
+        event.preventDefault();
+        const previousValue = this.value();
+        const next = this.extractValue(item);
+        this.commitValue(next, event);
+        this.onSelectionChanged.emit({ selectedItem: item, previousValue, value: next });
+        this.searchText.set(null);
+        this.close();
+    }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const previousValue = this.value();
+        this.commitValue(null, event);
+        this.onSelectionChanged.emit({ selectedItem: null, previousValue, value: null });
+        this.searchText.set(null);
+    }
+    onKeydown(event) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        const items = this.filteredItems();
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this.open()) {
+                    this.openPanel();
+                }
+                this.activeIndex.update((i) => Math.min(i + 1, items.length - 1));
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.activeIndex.update((i) => Math.max(i - 1, 0));
+                break;
+            case 'Enter': {
+                const item = items[this.activeIndex()];
+                if (this.open() && item !== undefined) {
+                    event.preventDefault();
+                    this.selectItem(item, event);
+                }
+                break;
+            }
+            case 'Escape':
+                if (this.open()) {
+                    event.preventDefault();
+                    this.searchText.set(null);
+                    this.close();
+                }
+                break;
+        }
+    }
+    openPanel() {
+        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);
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                panelClass: nxePane('nxe-select-pane'),
+            });
+            this.flipSub = trackPaneFlip(this.overlayRef);
+        }
+        if (this.overlayRef.hasAttached()) {
+            return;
+        }
+        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);
+    }
+    close() {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.open.set(false);
+    }
+    ngOnDestroy() {
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        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: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSelectBoxComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSelectBoxComponent) },
+        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @if (fieldTemplateRef(); as tpl) {\r\n        <div class=\"nxe-select-field\">\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\r\n        </div>\r\n    } @else {\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-select-input\"\r\n            type=\"text\"\r\n            [value]=\"inputDisplay()\"\r\n            [readOnly]=\"readOnly() || !searchEnabled()\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.placeholder]=\"placeholder() || null\"\r\n            autocomplete=\"off\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (focus)=\"focused.set(true)\"\r\n            (blur)=\"onBlur()\" />\r\n    }\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\r\n                (mousedown)=\"selectItem(item, $event)\">\r\n                @if (itemTemplateRef(); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\r\n                } @else {\r\n                    {{ display(item) }}\r\n                }\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear,nxe-select-box .nxe-select-arrow{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-select-box .nxe-select-clear svg,nxe-select-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-select-box .nxe-select-clear{width:22px;color:#999;cursor:pointer}nxe-select-box .nxe-select-clear:hover{color:#333}nxe-select-box .nxe-editor-container:has(.nxe-select-arrow) .nxe-select-input{padding-inline-end:0}nxe-select-box .nxe-select-arrow{position:relative;width:34px;min-width:34px;padding:1px;border-radius:4px}nxe-select-box .nxe-select-arrow svg{width:18px;height:18px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+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-open]': 'open()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeSelectBoxComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeSelectBoxComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @if (fieldTemplateRef(); as tpl) {\r\n        <div class=\"nxe-select-field\">\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: selectedItem() }\" />\r\n        </div>\r\n    } @else {\r\n        <input\r\n            #input\r\n            class=\"nxe-editor-input nxe-select-input\"\r\n            type=\"text\"\r\n            [value]=\"inputDisplay()\"\r\n            [readOnly]=\"readOnly() || !searchEnabled()\"\r\n            [disabled]=\"disabled()\"\r\n            [attr.placeholder]=\"placeholder() || null\"\r\n            autocomplete=\"off\"\r\n            (input)=\"onSearchInput($event)\"\r\n            (focus)=\"focused.set(true)\"\r\n            (blur)=\"onBlur()\" />\r\n    }\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index; let i = $index) {\r\n            <div\r\n                class=\"nxe-list-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                [class.nxe-list-item-active]=\"i === activeIndex()\"\r\n                (mousedown)=\"selectItem(item, $event)\">\r\n                @if (itemTemplateRef(); as tpl) {\r\n                    <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: item }\" />\r\n                } @else {\r\n                    {{ display(item) }}\r\n                }\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-select-box{cursor:pointer}nxe-select-box .nxe-select-input{cursor:pointer}nxe-select-box .nxe-select-clear,nxe-select-box .nxe-select-arrow{flex:0 0 auto;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-select-box .nxe-select-clear svg,nxe-select-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-select-box .nxe-select-clear{width:22px;color:#999;cursor:pointer}nxe-select-box .nxe-select-clear:hover{color:#333}nxe-select-box .nxe-editor-container:has(.nxe-select-arrow) .nxe-select-input{padding-inline-end:0}nxe-select-box .nxe-select-arrow{position:relative;width:34px;min-width:34px;padding:1px;border-radius:4px}nxe-select-box .nxe-select-arrow svg{width:18px;height:18px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-select-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-select-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], fieldTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldTemplate", required: false }] }], hoverStateEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverStateEnabled", required: false }] }], onSelectionChanged: [{ type: i0.Output, args: ["onSelectionChanged"] }] } });
+
+/**
+ * `nxe-tag-box` — drop-in replacement for DevExtreme `dx-tag-box` (multi-select sibling of
+ * `nxe-select-box`). The bound value is an **array of `valueExpr` keys** (`lovCode` strings).
+ * Bakes in the app's global `dxTagBox.defaultOptions` (display/search `lovName`, value `lovCode`,
+ * search + clear + selection-controls on). Selected items render as removable chips; the dropdown
+ * shows a checkbox per row. Provides {@link NXE_VALIDATION_TARGET} for a projected `nxe-validator`.
+ */
+class NxeTagBoxComponent extends NxeFormControlBase {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    dropdownTemplate = viewChild.required('dropdown', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownTemplate" }] : /* istanbul ignore next */ []));
+    inputEl = viewChild('input', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputEl" }] : /* istanbul ignore next */ []));
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    displayExprInput = input(undefined, { ...(ngDevMode ? { debugName: "displayExprInput" } : /* istanbul ignore next */ {}), alias: 'displayExpr' });
+    displayExpr = computed(() => this.displayExprInput() ?? this.nxeDefaults.tagBox?.displayExpr ?? 'lovName', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayExpr" }] : /* istanbul ignore next */ []));
+    valueExprInput = input(undefined, { ...(ngDevMode ? { debugName: "valueExprInput" } : /* istanbul ignore next */ {}), alias: 'valueExpr' });
+    valueExpr = computed(() => this.valueExprInput() ?? this.nxeDefaults.tagBox?.valueExpr ?? 'lovCode', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
+    searchExprInput = input(undefined, { ...(ngDevMode ? { debugName: "searchExprInput" } : /* istanbul ignore next */ {}), alias: 'searchExpr' });
+    searchExpr = computed(() => this.searchExprInput() ?? this.nxeDefaults.tagBox?.searchExpr ?? 'lovName', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchExpr" }] : /* istanbul ignore next */ []));
+    searchEnabledInput = input(undefined, { ...(ngDevMode ? { debugName: "searchEnabledInput" } : /* istanbul ignore next */ {}), alias: 'searchEnabled', transform: nxeOptionalBoolean });
+    searchEnabled = computed(() => this.searchEnabledInput() ?? this.nxeDefaults.tagBox?.searchEnabled ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchEnabled" }] : /* istanbul ignore next */ []));
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.tagBox?.showClearButton ?? true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /** dx parity: dx-tag-box does NOT show a drop-down arrow unless showDropDownButton is set. */
+    showDropDownButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showDropDownButtonInput" } : /* istanbul ignore next */ {}), alias: 'showDropDownButton', transform: nxeOptionalBoolean });
+    showDropDownButton = computed(() => this.showDropDownButtonInput() ?? this.nxeDefaults.tagBox?.showDropDownButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showDropDownButton" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    searchText = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+    panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    overlayRef;
+    closeSub;
+    flipSub;
+    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** The selected keys (always an array). */
+    selectedKeys = computed(() => {
+        const v = this.value();
+        return Array.isArray(v) ? v : [];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedKeys" }] : /* istanbul ignore next */ []));
+    display(item) {
+        const expr = this.displayExpr();
+        if (!expr) {
+            return item == null ? '' : String(item);
+        }
+        return item?.[expr] ?? '';
+    }
+    extractValue(item) {
+        const expr = this.valueExpr();
+        return expr ? item?.[expr] : item;
+    }
+    /** Selected items resolved from the value keys (for chip rendering). */
+    selectedItems = computed(() => {
+        const keys = this.selectedKeys();
+        return keys.map((k) => this.items().find((it) => this.extractValue(it) === k) ?? k);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => this.selectedKeys().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    filteredItems = computed(() => {
+        const items = this.items();
+        const search = this.searchText();
+        if (!this.searchEnabled() || !search) {
+            return items;
+        }
+        const expr = this.searchExpr() || this.displayExpr();
+        const needle = search.toLowerCase();
+        return items.filter((it) => {
+            const hay = (expr ? it?.[expr] : it) ?? '';
+            return String(hay).toLowerCase().includes(needle);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredItems" }] : /* istanbul ignore next */ []));
+    isSelected(item) {
+        return this.selectedKeys().includes(this.extractValue(item));
+    }
+    onFieldMousedown(event) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        const target = event.target;
+        if (target.closest('.nxe-tag-remove') || target.closest('.nxe-select-clear')) {
+            return;
+        }
+        if (!this.open()) {
+            this.openPanel();
+        }
+        this.inputEl()?.nativeElement?.focus();
+    }
+    onSearchInput(event) {
+        this.searchText.set(event.target.value);
+        if (!this.open()) {
+            this.openPanel();
+        }
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.markAsTouched();
+    }
+    toggle(item, event) {
+        event.preventDefault();
+        const key = this.extractValue(item);
+        const keys = this.selectedKeys();
+        const next = keys.includes(key) ? keys.filter((k) => k !== key) : [...keys, key];
+        this.commitValue(next, event);
+        this.searchText.set('');
+        const input = this.inputEl()?.nativeElement;
+        if (input) {
+            input.value = '';
+        }
+    }
+    removeTag(item, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const key = this.extractValue(item);
+        this.commitValue(this.selectedKeys().filter((k) => k !== key), event);
+    }
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.commitValue([], event);
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.open()) {
+            event.preventDefault();
+            this.close();
+        }
+    }
+    openPanel() {
+        this.panelWidth.set(this.elementRef.nativeElement.offsetWidth);
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                hasBackdrop: true,
+                backdropClass: 'cdk-overlay-transparent-backdrop',
+                panelClass: nxePane('nxe-select-pane'),
+            });
+            this.flipSub = trackPaneFlip(this.overlayRef);
+        }
+        if (this.overlayRef.hasAttached()) {
+            return;
+        }
+        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);
+    }
+    close() {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.open.set(false);
+        this.searchText.set('');
+    }
+    ngOnDestroy() {
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.overlayRef?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeTagBoxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeTagBoxComponent, isStandalone: true, selector: "nxe-tag-box", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, displayExprInput: { classPropertyName: "displayExprInput", publicName: "displayExpr", isSignal: true, isRequired: false, transformFunction: null }, valueExprInput: { classPropertyName: "valueExprInput", publicName: "valueExpr", isSignal: true, isRequired: false, transformFunction: null }, searchExprInput: { classPropertyName: "searchExprInput", publicName: "searchExpr", isSignal: true, isRequired: false, transformFunction: null }, searchEnabledInput: { classPropertyName: "searchEnabledInput", publicName: "searchEnabled", isSignal: true, isRequired: false, transformFunction: null }, showClearButtonInput: { classPropertyName: "showClearButtonInput", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showDropDownButtonInput: { classPropertyName: "showDropDownButtonInput", publicName: "showDropDownButton", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nxe-focused": "focused()", "class.nxe-invalid": "!!validationError()", "class.nxe-open": "open()" }, classAttribute: "nxe-widget nxe-editor nxe-tagbox" }, providers: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTagBoxComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTagBoxComponent) },
+        ], viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "inputEl", first: true, predicate: ["input"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container nxe-tag-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @for (item of selectedItems(); track $index) {\r\n        <span class=\"nxe-tag\">\r\n            <span class=\"nxe-tag-text\">{{ display(item) }}</span>\r\n            @if (!readOnly() && !disabled()) {\r\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\r\n            }\r\n        </span>\r\n    }\r\n\r\n    <input\r\n        #input\r\n        class=\"nxe-editor-input nxe-tag-input\"\r\n        type=\"text\"\r\n        [readOnly]=\"readOnly() || !searchEnabled()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\r\n        autocomplete=\"off\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index) {\r\n            <div\r\n                class=\"nxe-list-item nxe-tag-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                (mousedown)=\"toggle(item, $event)\">\r\n                <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\r\n                <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{flex-wrap:wrap;align-items:center;gap:4px;padding:3px 4px;min-height:36px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;min-height:26px;padding:0 4px}nxe-tag-box .nxe-tag{position:relative;display:inline-flex;align-items:center;max-width:calc(100% - 1px);min-width:40px;padding:3px 25px 4px 6px;background-color:#dcdcdc;border-radius:2px;color:#333;line-height:1.2}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:#a9a9aa}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box .nxe-select-clear,nxe-tag-box .nxe-select-arrow{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-tag-box .nxe-select-clear svg,nxe-tag-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-tag-box .nxe-select-clear{width:22px;color:#999}nxe-tag-box .nxe-select-clear:hover{color:#333}nxe-tag-box .nxe-select-arrow{width:28px}nxe-tag-box .nxe-select-arrow svg{width:18px;height:18px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 32px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 54px}.nxe-tag-item{display:flex;align-items:center;gap:8px}.nxe-tag-check{box-sizing:border-box;position:relative;flex-shrink:0;width:18px;height:18px;border:1px solid #ddd;border-radius:2px;background:#fff}.nxe-tag-check.nxe-tag-checked{border-color:#337ab7}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;top:1px;inset-inline-start:5px;width:5px;height:9px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+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-open]': 'open()',
+                        '(keydown)': 'onKeydown($event)',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeTagBoxComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeTagBoxComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container nxe-tag-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    @for (item of selectedItems(); track $index) {\r\n        <span class=\"nxe-tag\">\r\n            <span class=\"nxe-tag-text\">{{ display(item) }}</span>\r\n            @if (!readOnly() && !disabled()) {\r\n                <span class=\"nxe-tag-remove\" (mousedown)=\"removeTag(item, $event)\" aria-hidden=\"true\"></span>\r\n            }\r\n        </span>\r\n    }\r\n\r\n    <input\r\n        #input\r\n        class=\"nxe-editor-input nxe-tag-input\"\r\n        type=\"text\"\r\n        [readOnly]=\"readOnly() || !searchEnabled()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"selectedItems().length ? null : (placeholder() || null)\"\r\n        autocomplete=\"off\"\r\n        (input)=\"onSearchInput($event)\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n    @if (showDropDownButton() && !readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #dropdown>\r\n    <div class=\"nxe-select-panel\" [style.width.px]=\"panelWidth()\">\r\n        @for (item of filteredItems(); track $index) {\r\n            <div\r\n                class=\"nxe-list-item nxe-tag-item\"\r\n                [class.nxe-list-item-selected]=\"isSelected(item)\"\r\n                (mousedown)=\"toggle(item, $event)\">\r\n                <span class=\"nxe-tag-check\" [class.nxe-tag-checked]=\"isSelected(item)\" aria-hidden=\"true\"></span>\r\n                <span class=\"nxe-tag-item-text\">{{ display(item) }}</span>\r\n            </div>\r\n        } @empty {\r\n            <div class=\"nxe-list-empty\">No data to display</div>\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-tag-box{cursor:pointer}nxe-tag-box .nxe-tag-container{flex-wrap:wrap;align-items:center;gap:4px;padding:3px 4px;min-height:36px}nxe-tag-box .nxe-tag-input{flex:1 1 60px;min-width:60px;width:auto;min-height:26px;padding:0 4px}nxe-tag-box .nxe-tag{position:relative;display:inline-flex;align-items:center;max-width:calc(100% - 1px);min-width:40px;padding:3px 25px 4px 6px;background-color:#dcdcdc;border-radius:2px;color:#333;line-height:1.2}nxe-tag-box .nxe-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nxe-tag-box .nxe-tag-remove{position:absolute;inset-inline-end:0;top:0;width:25px;height:100%;cursor:pointer}nxe-tag-box .nxe-tag-remove:before,nxe-tag-box .nxe-tag-remove:after{position:absolute;top:50%;content:\"\";transform:rotate(45deg);inset-inline-end:9px;margin-top:-5px;width:3px;height:11px;background:#a9a9aa}nxe-tag-box .nxe-tag-remove:after{inset-inline-end:5px;margin-top:-1px;width:11px;height:3px}nxe-tag-box .nxe-select-clear,nxe-tag-box .nxe-select-arrow{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:#333}nxe-tag-box .nxe-select-clear svg,nxe-tag-box .nxe-select-arrow svg{width:16px;height:16px;fill:currentColor}nxe-tag-box .nxe-select-clear{width:22px;color:#999}nxe-tag-box .nxe-select-clear:hover{color:#333}nxe-tag-box .nxe-select-arrow{width:28px}nxe-tag-box .nxe-select-arrow svg{width:18px;height:18px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 32px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-tag-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 54px}.nxe-tag-item{display:flex;align-items:center;gap:8px}.nxe-tag-check{box-sizing:border-box;position:relative;flex-shrink:0;width:18px;height:18px;border:1px solid #ddd;border-radius:2px;background:#fff}.nxe-tag-check.nxe-tag-checked{border-color:#337ab7}.nxe-tag-check.nxe-tag-checked:after{content:\"\";position:absolute;top:1px;inset-inline-start:5px;width:5px;height:9px;border:solid #337ab7;border-width:0 2px 2px 0;transform:rotate(45deg)}\n"] }]
+        }], propDecorators: { dropdownTemplate: [{ type: i0.ViewChild, args: ['dropdown', { isSignal: true }] }], inputEl: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], displayExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayExpr", required: false }] }], valueExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueExpr", required: false }] }], searchExprInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchExpr", required: false }] }], searchEnabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchEnabled", required: false }] }], showClearButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showDropDownButtonInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDropDownButton", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }] } });
+
+/**
+ * `nxe-drop-down-options` — drop-in for DevExtreme `dxo-drop-down-options`, a no-template config
+ * child of `nxe-drop-down-box`. Only `wrapperAttr` (a `{class}` applied to the overlay panel) and
+ * `width` are used in this codebase.
+ */
+class NxeDropDownOptionsComponent {
+    wrapperAttr = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "wrapperAttr" }] : /* istanbul ignore next */ []));
+    width = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.5", type: NxeDropDownOptionsComponent, isStandalone: true, selector: "nxe-drop-down-options", inputs: { wrapperAttr: { classPropertyName: "wrapperAttr", publicName: "wrapperAttr", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeDropDownOptionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-drop-down-options',
+                    standalone: true,
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { wrapperAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapperAttr", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
+
+/**
+ * `nxe-drop-down-box` — drop-in replacement for DevExtreme `dx-drop-down-box`.
+ *
+ * A signal-CVA editor whose dropdown hosts ARBITRARY projected content (a `nxeTemplate="content"`
+ * block — usually a data-grid picker) in a CDK overlay. The closed field shows the value's
+ * `displayExpr` (looked up in `[dataSource]`), or the raw value when no `displayExpr`. The inner
+ * grid sets the bound form value and closes the popup via `#ref.instance.close()` (16 call sites),
+ * so this exposes an `.instance` facade + `close()`, and an `(onClosed)` output. Projects
+ * `nxe-validator` via {@link NXE_VALIDATION_TARGET}.
+ */
+class NxeDropDownBoxComponent extends NxeFormControlBase {
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    panelTemplate = viewChild.required('panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelTemplate" }] : /* istanbul ignore next */ []));
+    templates = contentChildren(NxeTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    options = contentChild(NxeDropDownOptionsComponent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Field name shown in the closed box; empty => the raw value string. */
+    displayExprInput = input(undefined, { ...(ngDevMode ? { debugName: "displayExprInput" } : /* istanbul ignore next */ {}), alias: 'displayExpr' });
+    displayExpr = computed(() => this.displayExprInput() ?? this.nxeDefaults.dropDownBox?.displayExpr ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayExpr" }] : /* istanbul ignore next */ []));
+    valueExprInput = input(undefined, { ...(ngDevMode ? { debugName: "valueExprInput" } : /* istanbul ignore next */ {}), alias: 'valueExpr' });
+    valueExpr = computed(() => this.valueExprInput() ?? this.nxeDefaults.dropDownBox?.valueExpr ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueExpr" }] : /* istanbul ignore next */ []));
+    placeholderInput = input(undefined, { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
+    placeholder = computed(() => this.placeholderInput() ?? this.nxeDefaults.dropDownBox?.placeholder ?? '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `[dropDownOptions]` — accepted for parity (popup-class hook). */
+    dropDownOptions = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "dropDownOptions" }] : /* istanbul ignore next */ []));
+    /**
+     * DevExtreme `showClearButton` — a × left of the arrow that sets the value to null, matching
+     * {@link NxeSelectBoxComponent}/`nxe-tag-box`.
+     *
+     * Defaults to **false**, unlike those two: this component's dropdown hosts arbitrary content, and
+     * every existing call site picks from a grid where clearing was never offered. Opt in where null
+     * is a value the field can legitimately hold.
+     */
+    showClearButtonInput = input(undefined, { ...(ngDevMode ? { debugName: "showClearButtonInput" } : /* istanbul ignore next */ {}), alias: 'showClearButton', transform: nxeOptionalBoolean });
+    showClearButton = computed(() => this.showClearButtonInput() ?? this.nxeDefaults.dropDownBox?.showClearButton ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+    /**
+     * DevExtreme `[opened]` (orbit addition): programmatic open/close. Reflects the panel state
+     * outward and opens/closes the panel when the binding changes.
+     */
+    opened = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    onClosed = output();
+    focused = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+    open = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
+    panelWidth = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `.instance` facade — only `close()` is used (from inner-grid selection handlers). */
+    get instance() {
+        return this;
+    }
+    constructor() {
+        super();
+        // `[opened]` binding drives the panel; internal open/close writes back through the model.
+        /* ⚠ NOT an effect - UI-48. It takes the ONE input that asks for the panel; an effect
+           would also have depended on `open()`, which openPanel() and close() both WRITE — a
+           reaction that feeds itself, fenced only by the equality test above it. */
+        toObservable(this.opened, { injector: inject(Injector) })
+            .pipe(distinctUntilChanged(), takeUntilDestroyed())
+            .subscribe(wanted => {
+            if (wanted !== this.open()) {
+                wanted ? this.openPanel() : this.close();
+            }
+        });
+    }
+    overlayRef;
+    closeSub;
+    flipSub;
+    contentTemplateRef = computed(() => this.templates().find((t) => t.name() === 'content')?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentTemplateRef" }] : /* istanbul ignore next */ []));
+    /**
+     * DevExtreme sizes the popup to the editor, and every call site that says anything says
+     * `width="100%"` — which means that same thing. So the panel is fixed at the field's width and
+     * the content fits inside it (a grid picker lays its columns out to the panel) rather than the
+     * panel growing to whatever the content wants. Only an explicit px/em/rem width overrides.
+     */
+    panelStyleWidth = computed(() => {
+        const width = this.options()?.width();
+        if (typeof width === 'number') {
+            return `${width}px`;
+        }
+        if (width && width !== '100%') {
+            return width;
+        }
+        return `${this.panelWidth()}px`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelStyleWidth" }] : /* istanbul ignore next */ []));
+    displayText = computed(() => {
+        const v = this.value();
+        if (v == null || v === '') {
+            return '';
+        }
+        const de = this.displayExpr();
+        if (!de) {
+            return String(v);
+        }
+        // The bound value is the code; match it against valueExpr (default the implicit `lovCode`).
+        const ve = this.valueExpr() || 'lovCode';
+        const item = (this.dataSource() ?? []).find((it) => it?.[ve] === v);
+        return item ? String(item[de] ?? '') : String(v);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
+    hasValue = computed(() => {
+        const v = this.value();
+        return v != null && v !== '';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    onFieldMousedown(event) {
+        if (this.readOnly() || this.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        this.open() ? this.close() : this.openPanel();
+    }
+    /** Stops the mousedown reaching the field, which would otherwise toggle the panel open. */
+    onClear(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.commitValue(null, event);
+    }
+    onBlur() {
+        this.focused.set(false);
+        this.markAsTouched();
+    }
+    /** Imperative close (DevExtreme `.instance.close()`). */
+    close() {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        this.open.set(false);
+        this.opened.set(false);
+        this.onClosed.emit();
+    }
+    openPanel() {
+        this.panelWidth.set(this.elementRef.nativeElement.offsetWidth);
+        const wrapperClass = this.options()?.wrapperAttr()?.class ?? '';
+        if (this.overlayRef) {
+            this.flipSub?.unsubscribe();
+            this.overlayRef.dispose();
+        }
+        this.overlayRef = this.overlay.create({
+            positionStrategy: this.overlay
+                .position()
+                .flexibleConnectedTo(this.elementRef)
+                .withPositions([
+                { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+            ]),
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            panelClass: nxePane('nxe-dropdownbox-pane', ...wrapperClass.split(/\s+/)),
+        });
+        this.flipSub = trackPaneFlip(this.overlayRef);
+        this.overlayRef.attach(new TemplatePortal(this.panelTemplate(), this.viewContainerRef));
+        this.closeSub = this.overlayRef.backdropClick().subscribe(() => this.close());
+        this.open.set(true);
+        this.opened.set(true);
+    }
+    ngOnDestroy() {
+        this.closeSub?.unsubscribe();
+        this.flipSub?.unsubscribe();
+        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: [
+            { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDropDownBoxComponent), multi: true },
+            { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDropDownBoxComponent) },
+        ], queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }, { propertyName: "options", first: true, predicate: NxeDropDownOptionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "panelTemplate", first: true, predicate: ["panel"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        type=\"text\"\r\n        readonly\r\n        [value]=\"displayText()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"placeholder() || null\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (!readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #panel>\r\n    <div class=\"nxe-dropdownbox-panel\" [style.width]=\"panelStyleWidth()\">\r\n        @if (contentTemplateRef(); as tpl) {\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{flex:0 0 22px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:22px;color:#999;cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{width:16px;height:16px;fill:currentColor}nxe-drop-down-box .nxe-select-clear:hover{color:#333}nxe-drop-down-box .nxe-select-arrow{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;color:#333;border-radius:4px}nxe-drop-down-box .nxe-select-arrow svg{width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}.nxe-dropdownbox-panel{box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;overflow:auto;max-height:420px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+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-open]': 'open()',
+                    }, providers: [
+                        { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => NxeDropDownBoxComponent), multi: true },
+                        { provide: NXE_VALIDATION_TARGET, useExisting: forwardRef(() => NxeDropDownBoxComponent) },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"nxe-editor-container\" (mousedown)=\"onFieldMousedown($event)\">\r\n    <input\r\n        class=\"nxe-editor-input nxe-dropdownbox-input\"\r\n        type=\"text\"\r\n        readonly\r\n        [value]=\"displayText()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.placeholder]=\"placeholder() || null\"\r\n        (focus)=\"focused.set(true)\"\r\n        (blur)=\"onBlur()\" />\r\n    @if (showClearButton() && hasValue() && !readOnly() && !disabled()) {\r\n        <span class=\"nxe-select-clear\" (mousedown)=\"onClear($event)\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" /></svg>\r\n        </span>\r\n    }\r\n\r\n    @if (!readOnly()) {\r\n        <span class=\"nxe-select-arrow\" aria-hidden=\"true\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M7 10l5 5 5-5z\" /></svg>\r\n        </span>\r\n    }\r\n</div>\r\n\r\n<ng-content />\r\n\r\n@if (validationError(); as error) {\r\n    @if (focused()) {\r\n        <div class=\"nxe-invalid-message\">{{ error }}</div>\r\n    }\r\n}\r\n\r\n<ng-template #panel>\r\n    <div class=\"nxe-dropdownbox-panel\" [style.width]=\"panelStyleWidth()\">\r\n        @if (contentTemplateRef(); as tpl) {\r\n            <ng-container *ngTemplateOutlet=\"tpl; context: { $implicit: value() }\" />\r\n        }\r\n    </div>\r\n</ng-template>\r\n", styles: ["nxe-drop-down-box{cursor:pointer}nxe-drop-down-box .nxe-dropdownbox-input{cursor:pointer}nxe-drop-down-box .nxe-select-clear{flex:0 0 22px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:22px;color:#999;cursor:pointer}nxe-drop-down-box .nxe-select-clear svg{width:16px;height:16px;fill:currentColor}nxe-drop-down-box .nxe-select-clear:hover{color:#333}nxe-drop-down-box .nxe-select-arrow{flex:0 0 34px;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;width:34px;color:#333;border-radius:4px}nxe-drop-down-box .nxe-select-arrow svg{width:18px;height:18px;fill:currentColor}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow){--nxe-invalid-badge-inset: 38px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-clear){--nxe-invalid-badge-inset: 26px}nxe-drop-down-box .nxe-editor-container:has(>.nxe-select-arrow):has(>.nxe-select-clear){--nxe-invalid-badge-inset: 60px}.nxe-dropdownbox-panel{box-sizing:border-box;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 12px #0000002d;overflow:auto;max-height:420px}\n"] }]
+        }], 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. */
+const NXE_MENU = new InjectionToken('NXE_MENU');
+
+/**
+ * `nxe-list` — drop-in replacement for DevExtreme `dx-list` as used in this codebase: an action
+ * menu rendered inside `nxe-menu` (100% of usages). Renders each `[dataSource]` item with the
+ * named `itemTemplate` (`*nxeTemplate`), emits `(onItemClick)` (`{itemData}`), and closes the
+ * parent `nxe-menu` on click. Emits `.nxe-list`/`.nxe-list-item-row`/`.nxe-list-item-content` classes so
+ * the app's existing menu/list CSS applies unchanged.
+ */
+class NxeListComponent {
+    menu = inject(NXE_MENU, { optional: true });
+    templates = contentChildren(NxeTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    dataSource = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
+    /** Named template ('listItem'/'actionButton') for each row; `$implicit` = the item. */
+    itemTemplate = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "itemTemplate" }] : /* istanbul ignore next */ []));
+    /** DevExtreme `[elementAttr]` — `{ id, class }` applied to the host. */
+    elementAttr = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "elementAttr" }] : /* istanbul ignore next */ []));
+    onItemClick = output();
+    items = computed(() => this.dataSource() ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    itemTemplateRef = computed(() => this.templates().find((t) => t.name() === this.itemTemplate())?.templateRef ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemTemplateRef" }] : /* istanbul ignore next */ []));
+    text(item) {
+        return item?.['text'] ?? '';
+    }
+    /** dx parity: dx-list honors `item.disabled` (grayed, non-interactive). */
+    isDisabled(item) {
+        return item?.['disabled'] === true;
+    }
+    select(item) {
+        if (this.isDisabled(item)) {
+            return;
+        }
+        this.onItemClick.emit({ itemData: item });
+        this.menu?.closeMenu();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: NxeListComponent, isStandalone: true, selector: "nxe-list", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, elementAttr: { classPropertyName: "elementAttr", publicName: "elementAttr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onItemClick: "onItemClick" }, host: { properties: { "class": "'nxe-widget nxe-list ' + (elementAttr()?.class ?? '')", "attr.id": "elementAttr()?.id ?? null" } }, queries: [{ propertyName: "templates", predicate: NxeTemplateDirective, isSignal: true }], ngImport: i0, template: `
+        @for (item of items(); track $index; let last = $last) {
+            <div
+                class="nxe-list-item-row"
+                [class.nxe-state-disabled]="isDisabled(item)"
+                (click)="select(item)">
+                <div class="nxe-list-item-content">
+                    @if (itemTemplateRef(); as tpl) {
+                        <ng-container
+                            *ngTemplateOutlet="tpl; context: { $implicit: item, last: last }" />
+                    } @else {
+                        {{ text(item) }}
+                    }
+                </div>
+            </div>
+        }
+    `, isInline: true, styles: ["nxe-list{display:block}nxe-list .nxe-list-item-row{display:block;cursor:pointer}nxe-list .nxe-list-item-row.nxe-state-disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none}nxe-list .nxe-list-item-content{display:block}\n"], 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: NxeListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nxe-list', standalone: true, imports: [NgTemplateOutlet], template: `
+        @for (item of items(); track $index; let last = $last) {
+            <div
+                class="nxe-list-item-row"
+                [class.nxe-state-disabled]="isDisabled(item)"
+                (click)="select(item)">
+                <div class="nxe-list-item-content">
+                    @if (itemTemplateRef(); as tpl) {
+                        <ng-container
+                            *ngTemplateOutlet="tpl; context: { $implicit: item, last: last }" />
+                    } @else {
+                        {{ text(item) }}
+                    }
+                </div>
+            </div>
+        }
+    `, host: {
+                        '[class]': "'nxe-widget nxe-list ' + (elementAttr()?.class ?? '')",
+                        '[attr.id]': 'elementAttr()?.id ?? null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-list{display:block}nxe-list .nxe-list-item-row{display:block;cursor:pointer}nxe-list .nxe-list-item-row.nxe-state-disabled{opacity:.5;cursor:default;-webkit-user-select:none;user-select:none}nxe-list .nxe-list-item-content{display:block}\n"] }]
+        }], propDecorators: { templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => NxeTemplateDirective), { isSignal: true }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], elementAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "elementAttr", required: false }] }], onItemClick: [{ type: i0.Output, args: ["onItemClick"] }] } });
+
+/** DI token the autocomplete provides so projected `nxe-option`s can close it on click. */
+const NXE_AUTOCOMPLETE = new InjectionToken('NXE_AUTOCOMPLETE');
+/**
+ * `nxe-autocomplete` — drop-in replacement for Material's `mat-autocomplete` (as used by the global
+ * search). Holds the dropdown panel as a `TemplateRef` that the `[nxeAutocomplete]` trigger renders
+ * in a CDK overlay; projects `nxe-option`s. Emits the Material panel/option classes so Material's
+ * loaded autocomplete CSS + the consumer's classes apply. Exposes `isOpen` (read by the search).
+ */
+class NxeAutocompleteComponent {
+    elementRef = inject(ElementRef);
+    templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
+    /** Open state (the `[nxeAutocomplete]` trigger drives this; the search reads `isOpen`). */
+    opened = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Fires when a projected `nxe-option` is selected, so the trigger closes the panel. */
+    optionSelected = new Subject();
+    /** Panel classes: Material's + the consumer's class on `<nxe-autocomplete>`. */
+    panelClass = signal('nxe-autocomplete-panel mat-mdc-autocomplete-panel', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    get isOpen() {
+        return this.opened();
+    }
+    ngOnInit() {
+        const consumer = this.elementRef.nativeElement.getAttribute('class') ?? '';
+        this.panelClass.set(`nxe-autocomplete-panel mat-mdc-autocomplete-panel ${consumer}`.trim());
+    }
+    closeFromOption() {
+        this.optionSelected.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: NxeAutocompleteComponent, isStandalone: true, selector: "nxe-autocomplete", providers: [{ provide: NXE_AUTOCOMPLETE, useExisting: forwardRef(() => NxeAutocompleteComponent) }], viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["nxeAutocomplete"], ngImport: i0, template: `
+        <ng-template>
+            <div [class]="panelClass()" role="listbox" (mousedown)="$event.preventDefault()">
+                <ng-content />
+            </div>
+        </ng-template>
+    `, isInline: true, styles: ["nxe-autocomplete{display:none}\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-autocomplete', exportAs: 'nxeAutocomplete', standalone: true, template: `
+        <ng-template>
+            <div [class]="panelClass()" role="listbox" (mousedown)="$event.preventDefault()">
+                <ng-content />
+            </div>
+        </ng-template>
+    `, providers: [{ provide: NXE_AUTOCOMPLETE, useExisting: forwardRef(() => NxeAutocompleteComponent) }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["nxe-autocomplete{display:none}\n"] }]
+        }], propDecorators: { templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+/**
+ * `[nxeAutocomplete]` — drop-in for Material's `matAutocomplete` trigger. Applied to a text input;
+ * opens the referenced {@link NxeAutocompleteComponent}'s panel in a CDK overlay (width-matched to
+ * the input) on focus/input, closes on blur/Escape/option-select.
+ */
+class NxeAutocompleteTriggerDirective {
+    autocomplete = input.required({ ...(ngDevMode ? { debugName: "autocomplete" } : /* istanbul ignore next */ {}), alias: 'nxeAutocomplete' });
+    overlay = inject(Overlay);
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    overlayRef;
+    sub;
+    openPanel() {
+        const ac = this.autocomplete();
+        const width = this.elementRef.nativeElement.offsetWidth;
+        if (!this.overlayRef) {
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay
+                    .position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+                    { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+                ]),
+                scrollStrategy: this.overlay.scrollStrategies.reposition(),
+                width,
+                panelClass: nxePane('nxe-autocomplete-pane'),
+            });
+        }
+        else {
+            this.overlayRef.updateSize({ width });
+        }
+        if (this.overlayRef.hasAttached()) {
+            return;
+        }
+        this.overlayRef.attach(new TemplatePortal(ac.templateRef(), this.viewContainerRef));
+        ac.opened.set(true);
+        this.sub = ac.optionSelected.subscribe(() => this.closePanel());
+    }
+    closePanel() {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+        this.overlayRef.detach();
+        this.sub?.unsubscribe();
+        this.autocomplete().opened.set(false);
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+        this.overlayRef?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAutocompleteTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: NxeAutocompleteTriggerDirective, isStandalone: true, selector: "input[nxeAutocomplete], textarea[nxeAutocomplete]", inputs: { autocomplete: { classPropertyName: "autocomplete", publicName: "nxeAutocomplete", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "autocomplete": "off" }, listeners: { "focusin": "openPanel()", "input": "openPanel()", "blur": "closePanel()", "keydown.escape": "closePanel()" } }, exportAs: ["nxeAutocompleteTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeAutocompleteTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[nxeAutocomplete], textarea[nxeAutocomplete]',
+                    exportAs: 'nxeAutocompleteTrigger',
+                    standalone: true,
+                    host: {
+                        '(focusin)': 'openPanel()',
+                        '(input)': 'openPanel()',
+                        '(blur)': 'closePanel()',
+                        '(keydown.escape)': 'closePanel()',
+                        autocomplete: 'off',
+                    },
+                }]
+        }], propDecorators: { autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "nxeAutocomplete", required: true }] }] } });
+
+/**
+ * `nxe-option` — drop-in for Material's `mat-option` inside an `nxe-autocomplete`. Emits the MDC
+ * option classes (so Material's option CSS applies) and closes the parent autocomplete on click;
+ * the consumer's own `(click)` (e.g. navigate) still fires.
+ */
+class NxeOptionComponent {
+    autocomplete = inject(NXE_AUTOCOMPLETE, { optional: true });
+    select() {
+        this.autocomplete?.closeFromOption();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.5", type: NxeOptionComponent, isStandalone: true, selector: "nxe-option", host: { attributes: { "role": "option" }, listeners: { "click": "select()" }, classAttribute: "nxe-option mat-mdc-option mdc-list-item" }, exportAs: ["nxeOption"], ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: NxeOptionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'nxe-option',
+                    exportAs: 'nxeOption',
+                    standalone: true,
+                    template: '<ng-content />',
+                    host: {
+                        class: 'nxe-option mat-mdc-option mdc-list-item',
+                        role: 'option',
+                        '(click)': 'select()',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }] });
+
+// @nexterajs/ui/dropdowns — public API.
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NXE_AUTOCOMPLETE, NxeAutocompleteComponent, NxeAutocompleteTriggerDirective, NxeDropDownBoxComponent, NxeDropDownOptionsComponent, NxeListComponent, NxeOptionComponent, NxeSelectBoxComponent, NxeTagBoxComponent };
+//# sourceMappingURL=nexterajs-ui-dropdowns.mjs.map