@nanahoshi/mona-ui 0.24.4 → 0.24.5

package/fesm2022/nanahoshi-mona-ui-combo-box.mjs

@@ -1,18 +1,16 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, DestroyRef, ElementRef, signal, computed, contentChild, TemplateRef, viewChild, input, output, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
+import { inject, DestroyRef, ElementRef, signal, computed, contentChild, TemplateRef, viewChild, input, booleanAttribute, output, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import { FilterChangeEvent } from '@nanahoshi/mona-ui/common';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
-import { DropdownListService, DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
-import { themeControlSurfaceClasses, createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
+import { DropdownListService, DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DROPDOWN_DATA_INPUT_TOKEN, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective, DropdownLiveRegionDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
 import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective, ListItemTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { TextBoxDirective } from '@nanahoshi/mona-ui/text-box';
 import { MonaI18nService } from '@nanahoshi/mona-ui/i18n';
-import { Subject, fromEvent, filter, debounceTime, take, tap } from 'rxjs';
+import { Subject, debounceTime, filter, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
@@ -99,7 +97,6 @@ class ComboBoxComponent {
     #hostElementRef;
     #i18n;
     #listService;
-    #navigatedItem;
     #popupRef;
     #userNavigatedViaArrows;
     constructor() {
@@ -109,8 +106,6 @@ class ComboBoxComponent {
         this.#hostElementRef = inject(ElementRef);
         this.#i18n = inject(MonaI18nService);
         this.#listService = inject(ListService);
-        this.#navigatedItem = signal(null, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#navigatedItem" }] : /* istanbul ignore next */ []));
         this.#popupRef = this.#dropdownService.popupRef;
         this.#userNavigatedViaArrows = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#userNavigatedViaArrows" }] : /* istanbul ignore next */ []));
@@ -134,17 +129,20 @@ class ComboBoxComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.clearButtonVisible = computed(() => this.showClearButton() &&
+            this.selectedListItem() != null &&
+            !this.loading() &&
+            !this.disabled() &&
+            !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
         this.comboBoxValue = signal("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "comboBoxValue" }] : /* istanbul ignore next */ []));
         this.comboBoxValue$ = new Subject();
-        this.effectiveAriaLabel = computed(() => this.ariaLabel() || (this.ariaLabelledBy() ? "" : this.placeholder()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.footerTemplate = contentChild(DropdownFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.groupHeaderTemplate = contentChild(DropdownGroupHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "groupHeaderTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
         this.headerTemplate = contentChild(DropdownHeaderTemplateDirective, { ...(ngDevMode ? { debugName: "headerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
-        this.id = createElementControlId();
         this.inputClass = computed(() => {
             const rounded = this.rounded();
             return comboBoxTextInputThemeVariants({ rounded });
@@ -159,7 +157,9 @@ class ComboBoxComponent {
             const size = this.size();
             const userClass = this.popupClass();
             const variantClass = dropdownPopupThemeVariants({ rounded, size });
-            return twMerge(variantClass, userClass);
+            // With a popupHeight, the overlay sets the limit; the default max-h-64 would cut a taller popup short.
+            const heightClass = this.popupHeight() ? "max-h-none" : "";
+            return twMerge(variantClass, heightClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
         this.messages = this.#i18n.componentMessages("comboBox", COMBO_BOX_DEFAULT_MESSAGES);
@@ -188,16 +188,16 @@ class ComboBoxComponent {
          * @description Allows a custom value to be committed when it doesn't match any item in {@link data}.
          * @default false
          */
-        this.allowCustomValue = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "allowCustomValue" }] : /* istanbul ignore next */ []));
+        this.allowCustomValue = input(false, { ...(ngDevMode ? { debugName: "allowCustomValue" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description ID of an element that provides an extended description for the input.
          * @default ""
          */
         this.ariaDescribedBy = input("", { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
         /**
-         * @description Accessible name for the input. Describe what the combo box represents.
-         * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
+         * @description Accessible name for the input. Describe what the combo box represents. Prefer a visible label,
+         * linked through {@link inputId} or {@link ariaLabelledBy}; without any of them, browsers fall back to the
+         * {@link placeholder}.
          * @default ""
          */
         this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
@@ -209,6 +209,7 @@ class ComboBoxComponent {
         /**
          * @description Emitted when the popup is about to close. This event is preventable.
          */
+        // eslint-disable-next-line @angular-eslint/no-output-native -- renaming the output would break existing (close) bindings
         this.close = output();
         /**
          * @description Emitted after the popup is closed.
@@ -224,15 +225,20 @@ class ComboBoxComponent {
          * @description Renders the component with reduced visual emphasis and removes pointer interaction.
          * @default false
          */
-        this.disabled = model(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description Id of the inner `<input>` element. Point a `<label for>` or `<mona-label for>` at it to label the
+         * combo box. A unique id is generated when it isn't set.
+         * @default generated
+         */
+        this.inputId = input(createElementControlId(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
         /**
          * @description Marks the combo box as invalid. When bound to a signal form field via `[formField]`,
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description A predicate function or the name of the field that determines whether an item is disabled.
          * @default undefined
@@ -240,11 +246,11 @@ class ComboBoxComponent {
         this.itemDisabled = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "itemDisabled" }] : /* istanbul ignore next */ []));
         /**
-         * @description Displays a loading indicator and prevents interaction while an operation is in progress.
+         * @description Shows a loading indicator, in place of the clear button, and marks the field busy. It doesn't
+         * block interaction: the field stays usable while data loads.
          * @default false
          */
-        this.loading = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Emitted when the popup is about to open. This event is preventable.
          */
@@ -266,7 +272,8 @@ class ComboBoxComponent {
         this.popupClass = input("", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the height of the popup element.
+         * @description Maximum height of the popup, in pixels or as a CSS length. Shorter lists shrink to fit. When
+         * unset, the popup is at most 200 pixels tall.
          * @default null
          */
         this.popupHeight = input(null, /* @ts-ignore */
@@ -281,14 +288,12 @@ class ComboBoxComponent {
          * @description Prevents value changes while preserving the component's visual state.
          * @default false
          */
-        this.readonly = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Sets the required state of the combo box component.
          * @default false
          */
-        this.required = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Border-radius preset applied to the component.
          * @default "medium"
@@ -299,8 +304,7 @@ class ComboBoxComponent {
          * @description Displays a button that resets the value to empty when an item is selected.
          * @default false
          */
-        this.showClearButton = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+        this.showClearButton = input(false, { ...(ngDevMode ? { debugName: "showClearButton" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Size preset controlling the component's dimensions.
          * @default "medium"
@@ -315,8 +319,8 @@ class ComboBoxComponent {
         this.textField = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "textField" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the combo box is interacted with on blur, selection, clear, or committed input.
-         * The `FormField` directive listens to this to mark the field as touched.
+         * @description Emitted when focus leaves the combo box. Moving between its input, clear button and popup doesn't
+         * count. The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
         /**
@@ -324,8 +328,7 @@ class ComboBoxComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
          * @default ""
@@ -341,8 +344,8 @@ class ComboBoxComponent {
         this.value = model(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted with the entered text when the user presses Enter on unmatched input.
-         * Only emitted when {@link allowCustomValue} is true.
+         * @description Emitted with the entered text when the user presses Enter on text that matches no item, or leaves
+         * the field with it. Only emitted when {@link allowCustomValue} is true.
          */
         this.valueAdd = output();
         /**
@@ -364,8 +367,7 @@ class ComboBoxComponent {
          *
          * @default false
          */
-        this.valuePrimitive = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "valuePrimitive" }] : /* istanbul ignore next */ []));
+        this.valuePrimitive = input(false, { ...(ngDevMode ? { debugName: "valuePrimitive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         effect(() => {
             const popupTemplate = this.popupTemplate();
             untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
@@ -387,34 +389,58 @@ class ComboBoxComponent {
                 this.setSubscriptions();
             }
         });
-        fromEvent(this.#hostElementRef.nativeElement, "focusin")
-            .pipe(takeUntilDestroyed(), filter(() => !this.readonly()))
-            .subscribe(() => this.focus());
     }
-    focus() {
-        rxTimeout(this.#destroyRef, () => {
-            const input = this.#hostElementRef.nativeElement.querySelector("input");
-            if (input && !this.readonly()) {
-                input.focus();
-                input.setSelectionRange(input.value.length, input.value.length);
-            }
-        });
+    /**
+     * @description Moves focus to the inner input. The caret goes to the end of the text.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options) {
+        const input = this.#hostElementRef.nativeElement.querySelector("input");
+        if (input) {
+            input.focus(options);
+            input.setSelectionRange(input.value.length, input.value.length);
+        }
     }
-    onInputBlur(event) {
-        const popupElement = this.#dropdownService.popupRef()?.overlayRef.overlayElement;
-        if (popupElement && event?.relatedTarget instanceof Node && popupElement.contains(event.relatedTarget)) {
+    onFocusOut(event) {
+        // Removing a focused dropdown from the page fires focusout after it is destroyed.
+        if (this.#destroyRef.destroyed) {
             return;
         }
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node) {
+            const popupElement = this.#dropdownService.popupRef()?.overlayRef.overlayElement;
+            if (this.#hostElementRef.nativeElement.contains(nextTarget) || popupElement?.contains(nextTarget)) {
+                return;
+            }
+        }
+        this.resolveText();
         this.touch.emit();
     }
+    onHostPointerDown(event) {
+        // A press on the padding, the affixes or the arrow focuses the input instead of the host. Controls of
+        // their own (the input, the clear button, links or buttons in a prefix) keep the press.
+        const host = this.#hostElementRef.nativeElement;
+        const target = event.target;
+        const control = target?.closest("a, button, input, select, textarea, [tabindex]");
+        if (this.disabled() || (control != null && control !== host)) {
+            return;
+        }
+        event.preventDefault();
+        host.querySelector("input")?.focus();
+    }
+    onInput(text) {
+        // Keep the signal in step with the input on every keystroke, so that writing the same text back (a revert to
+        // the selected item's text, say) still reaches the DOM through the [value] binding.
+        this.comboBoxValue.set(text);
+        this.comboBoxValue$.next(text);
+    }
     onItemSelect(event) {
         if (this.#listService.filterableOptions().enabled &&
             event.source.via === "keyboard" &&
             event.source.key !== "Enter") {
-            this.#navigatedItem.set(event.item.data);
             return;
         }
-        this.updateValue(this.getControlValue(event.item.data), true);
+        this.updateValue(this.getControlValue(event.item.data));
         this.closePopup();
     }
     onPopupPointerDown(event) {
@@ -424,7 +450,9 @@ class ComboBoxComponent {
         }
     }
     onValueClear(event) {
-        if (this.readonly() || (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ")) {
+        if (this.disabled() ||
+            this.readonly() ||
+            (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ")) {
             return;
         }
         event.preventDefault();
@@ -435,7 +463,6 @@ class ComboBoxComponent {
         this.focus();
     }
     clear() {
-        this.#navigatedItem.set(null);
         this.updateValue(null);
         this.comboBoxValue.set("");
         this.#listService.clearSelections();
@@ -507,6 +534,36 @@ class ComboBoxComponent {
         this.#listService.filterChange$.next(event);
         return event;
     }
+    /**
+     * Settles typed text when focus leaves the combo box, so the field never shows text that isn't its value:
+     * an item whose text matches is selected, empty text clears the value, other text is offered through
+     * `valueAdd` when custom values are allowed, and otherwise the selected item's text comes back.
+     */
+    resolveText() {
+        // Read the input itself: with a filter debounce, the last keystrokes may not have reached comboBoxValue yet.
+        const input = this.#hostElementRef.nativeElement.querySelector("input");
+        const text = input?.value ?? this.comboBoxValue();
+        this.comboBoxValue.set(text);
+        const selectedItem = this.selectedListItem();
+        const selectedText = selectedItem ? this.#listService.getItemText(selectedItem) : "";
+        if (text === selectedText) {
+            return;
+        }
+        if (!text) {
+            this.clear();
+            return;
+        }
+        const matchingItem = this.#listService.getMatchingFilteredItem(text);
+        if (matchingItem && this.#listService.getItemText(matchingItem).toLowerCase() === text.toLowerCase()) {
+            this.selectItem(matchingItem);
+            return;
+        }
+        if (this.allowCustomValue()) {
+            this.valueAdd.emit(text);
+            return;
+        }
+        this.comboBoxValue.set(selectedText);
+    }
     selectItem(item) {
         this.#listService.selectItem(item);
         this.updateValue(this.getControlValue(item.data));
@@ -515,10 +572,9 @@ class ComboBoxComponent {
         this.#dropdownListService.navigate$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(({ item }) => {
             if (!this.expanded()) {
                 this.#listService.selectItem(item);
-                this.updateValue(this.getControlValue(item.data), true);
+                this.updateValue(this.getControlValue(item.data));
             }
             else {
-                this.#navigatedItem.set(item.data);
                 this.#userNavigatedViaArrows.set(true);
             }
         });
@@ -546,7 +602,6 @@ class ComboBoxComponent {
             this.comboBoxValue.set(value ?? "");
             const item = this.#listService.getMatchingFilteredItem(value);
             if (item) {
-                this.#navigatedItem.set(item.data);
                 this.#listService.highlightedItem.set(item);
                 if (this.#popupRef()) {
                     this.#listService.scrollToItem$.next({ item, focus: false });
@@ -562,19 +617,20 @@ class ComboBoxComponent {
     setEscapeKeySubscription() {
         this.#dropdownService.beforeKeydown$
             .pipe(takeUntilDestroyed(this.#destroyRef), filter(e => e.originalEvent?.key === "Escape"), tap(e => e.preventDefault()))
-            .subscribe(() => {
+            .subscribe(event => {
             if (this.#popupRef()) {
                 const selectedItem = this.selectedListItem();
                 if (selectedItem) {
                     this.comboBoxValue.set(this.#listService.getItemText(selectedItem));
-                    this.#navigatedItem.set(selectedItem.data);
                 }
                 else {
                     this.clear();
                 }
                 this.closePopup();
             }
-            else {
+            else if (this.comboBoxValue() || this.value() != null) {
+                // This Escape was used to clear the field; a dialog or window around it waits for the next.
+                event.originalEvent?.stopPropagation();
                 this.clear();
                 this.focus();
             }
@@ -592,11 +648,6 @@ class ComboBoxComponent {
             }
         });
     }
-    setNavigatedItemSubscription() {
-        this.#listService.navigatedItem$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(e => {
-            this.#navigatedItem.set(e?.data ?? null);
-        });
-    }
     setPopupCloseSubscriptions() {
         this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
             this.#userNavigatedViaArrows.set(false);
@@ -618,7 +669,6 @@ class ComboBoxComponent {
         this.setComboboxValueSubscription();
         this.setEscapeKeySubscription();
         this.setKeydownSubscription();
-        this.setNavigatedItemSubscription();
         this.setPopupCloseSubscriptions();
         this.setSpaceKeySubscription();
     }
@@ -634,23 +684,19 @@ class ComboBoxComponent {
             this.#listService.setSelectedDataItems([value]);
         }
     }
-    updateValue(value, notify = true) {
-        const oldValue = this.value();
-        if (oldValue !== value) {
+    updateValue(value) {
+        if (this.value() !== value) {
             this.value.set(value);
         }
         this.comboBoxValue.set(this.valueText());
-        if (notify && oldValue !== value) {
-            this.touch.emit();
-        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ComboBoxComponent, isStandalone: true, selector: "mona-combo-box", inputs: { allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, valuePrimitive: { classPropertyName: "valuePrimitive", publicName: "valuePrimitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", disabled: "disabledChange", open: "open", opened: "opened", touch: "touch", value: "valueChange", valueAdd: "valueAdd" }, host: { properties: { "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-readonly": "readonly() ? true : undefined", "attr.aria-required": "required() ? true : undefined", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.tabindex": "-1", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ComboBoxComponent, isStandalone: true, selector: "mona-combo-box", inputs: { allowCustomValue: { classPropertyName: "allowCustomValue", publicName: "allowCustomValue", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "aria-describedby", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, valuePrimitive: { classPropertyName: "valuePrimitive", publicName: "valuePrimitive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange", valueAdd: "valueAdd" }, host: { listeners: { "focusout": "onFocusOut($event)", "pointerdown": "onHostPointerDown($event)" }, properties: { "attr.aria-describedby": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.data-disabled": "disabled() || null", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "attr.tabindex": "-1", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             DropdownListService,
             {
-                provide: DropdownDataInputToken,
+                provide: DROPDOWN_DATA_INPUT_TOKEN,
                 useExisting: forwardRef(() => ComboBoxComponent),
                 multi: false
             },
@@ -659,7 +705,7 @@ class ComboBoxComponent {
                 useExisting: forwardRef(() => ComboBoxComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ngModel]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\n    (blur)=\"onInputBlur($event)\" />\n\n@if (showClearButton() && selectedListItem() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: DropdownLiveRegionDirective, selector: "span[monaDropdownLiveRegion]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: DropdownFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: DropdownGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: DropdownHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: DropdownItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: DropdownNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DropdownPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownDataHandlerDirective }, { directive: i1.DropdownListPopupHandlerDirective }, { directive: i1.DropdownLiveRegionDirective }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"ariaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (input)=\"onInput(textInput.value)\"\n    #textInput />\n\n@if (clearButtonVisible()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TextBoxDirective, selector: "input[monaTextBox]", inputs: ["invalid", "rounded", "size", "touched", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ListComponent, selector: "mona-list", inputs: ["ariaLabel", "data", "focusOnMount", "height", "listClass", "listId", "listItemClass", "listItemStyle", "listStyle", "maxHeight", "maxWidth", "size", "textField", "width"], outputs: ["itemSelect"] }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ComboBoxComponent, decorators: [{
             type: Component,
@@ -668,7 +714,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         DropdownService,
                         DropdownListService,
                         {
-                            provide: DropdownDataInputToken,
+                            provide: DROPDOWN_DATA_INPUT_TOKEN,
                             useExisting: forwardRef(() => ComboBoxComponent),
                             multi: false
                         },
@@ -679,7 +725,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         }
                     ], imports: [
                         TextBoxDirective,
-                        FormsModule,
                         NgTemplateOutlet,
                         ListComponent,
                         ListGroupHeaderTemplateDirective,
@@ -687,20 +732,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         ListHeaderTemplateDirective,
                         ListNoDataTemplateDirective,
                         ListItemTemplateDirective,
-                        DropdownLiveRegionDirective,
                         IndicatorIconComponent
-                    ], hostDirectives: [DropdownDataHandlerDirective, DropdownListPopupHandlerDirective], host: {
-                        "[attr.aria-disabled]": "disabled() ? true : undefined",
-                        "[attr.aria-invalid]": "invalidState() ? true : undefined",
-                        "[attr.aria-readonly]": "readonly() ? true : undefined",
-                        "[attr.aria-required]": "required() ? true : undefined",
+                    ], hostDirectives: [DropdownDataHandlerDirective, DropdownListPopupHandlerDirective, DropdownLiveRegionDirective], host: {
+                        // The host has no role: the inner input is the combobox and carries the name, description and state. A static
+                        // aria-* attribute written on <mona-combo-box> would otherwise stay on the host as well.
+                        "[attr.aria-describedby]": "null",
+                        "[attr.aria-label]": "null",
+                        "[attr.aria-labelledby]": "null",
                         "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.tabindex]": "-1",
-                        "[class]": "baseClass()"
-                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [ngModel]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"effectiveAriaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (ngModelChange)=\"comboBoxValue$.next($event)\"\n    (blur)=\"onInputBlur($event)\" />\n\n@if (showClearButton() && selectedListItem() && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<span monaDropdownLiveRegion></span>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
-        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueAdd: [{ type: i0.Output, args: ["valueAdd"] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], valuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrimitive", required: false }] }] } });
+                        "[class]": "baseClass()",
+                        "(focusout)": "onFocusOut($event)",
+                        "(pointerdown)": "onHostPointerDown($event)"
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<input\n    monaTextBox\n    [class]=\"inputClass()\"\n    [disabled]=\"disabled()\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly()\"\n    [required]=\"required()\"\n    [value]=\"comboBoxValue()\"\n    [attr.aria-activedescendant]=\"activeDescendant()\"\n    [attr.aria-autocomplete]=\"'list'\"\n    [attr.aria-busy]=\"loading()\"\n    [attr.aria-controls]=\"listId\"\n    [attr.aria-describedby]=\"ariaDescribedBy() || undefined\"\n    [attr.aria-expanded]=\"expanded()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-invalid]=\"invalidState() || undefined\"\n    [attr.aria-label]=\"ariaLabel() || undefined\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || undefined\"\n    role=\"combobox\"\n    (input)=\"onInput(textInput.value)\"\n    #textInput />\n\n@if (clearButtonVisible()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [interactive]=\"true\"\n        [label]=\"messages().clear\"\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\n}\n\n@if (loading()) {\n    <mona-indicator-icon preset=\"loading\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n        <mona-list (itemSelect)=\"onItemSelect($event)\" [focusOnMount]=\"false\" [size]=\"size()\" [listId]=\"listId\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate()\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate()\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate()\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DropdownPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], allowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowCustomValue", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-describedby", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], valueAdd: [{ type: i0.Output, args: ["valueAdd"] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], valuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrimitive", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/combo-box