@nanahoshi/mona-ui 0.24.2 → 0.24.5

package/fesm2022/nanahoshi-mona-ui-multi-select.mjs

@@ -1,11 +1,11 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, signal, Injectable, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, viewChild, input, output, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
+import { Directive, signal, Injectable, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, viewChild, input, booleanAttribute, output, model, afterNextRender, effect, untracked, forwardRef, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { none } from '@mirei/ts-collections';
-import { ChipComponent } from '@nanahoshi/mona-ui/chip';
+import { CHIP_DEFAULT_MESSAGES, ChipComponent } from '@nanahoshi/mona-ui/chip';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
-import { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { 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 { formatNumber, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId, restoreOverlayScroll, rxFromResize } from '@nanahoshi/mona-ui/internal';
 import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
@@ -32,7 +32,8 @@ function localizeNumber(value, options) {
 }
 const MULTI_SELECT_DEFAULT_MESSAGES = {
     clear: "Clear",
-    itemsCount: (count) => count === 1 ? `+ ${localizeNumber(count)} item` : `+ ${localizeNumber(count)} items`
+    itemsCount: (count) => count === 1 ? `+ ${localizeNumber(count)} item` : `+ ${localizeNumber(count)} items`,
+    removeMoreItems: (count) => count === 1 ? `Remove ${localizeNumber(count)} more item` : `Remove ${localizeNumber(count)} more items`
 };
 
 class MultiSelectService {
@@ -83,7 +84,7 @@ const multiSelectBaseThemeVariants = cva(`
         size: {
             small: "min-h-8 text-xs",
             medium: "min-h-9 text-sm",
-            large: "min-h-10 text-md"
+            large: "min-h-10 text-base"
         }
     },
     compoundVariants: [
@@ -154,6 +155,15 @@ class MultiSelectComponent {
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.chipMessages = this.#i18n.componentMessages("chip", CHIP_DEFAULT_MESSAGES);
+        this.clearButtonVisible = computed(() => this.showClearButton() &&
+            this.selectedListItems().any() &&
+            !this.loading() &&
+            !this.disabled() &&
+            !this.readonly(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "clearButtonVisible" }] : /* istanbul ignore next */ []));
+        this.effectiveAriaLabel = computed(() => this.ariaLabel() || (this.ariaLabelledBy() ? "" : this.placeholder()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#dropdownService.popupRef() !== null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.footerTemplate = contentChild(DropdownFooterTemplateDirective, { ...(ngDevMode ? { debugName: "footerTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
@@ -178,7 +188,9 @@ class MultiSelectComponent {
             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("multiSelect", MULTI_SELECT_DEFAULT_MESSAGES);
@@ -216,7 +228,13 @@ class MultiSelectComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "visibleTagCount" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the aria-label attribute of the multi select component.
+         * @description ID of an element that describes the multi select, such as help text or an error message.
+         * @default ""
+         */
+        this.ariaDescribedBy = input("", { ...(ngDevMode ? { debugName: "ariaDescribedBy" } : /* istanbul ignore next */ {}), alias: "aria-describedby" });
+        /**
+         * @description Accessible name for the multi select. Describe what it represents.
+         * Falls back to {@link placeholder} when neither this nor {@link ariaLabelledBy} is set.
          * @default ""
          */
         this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
@@ -229,17 +247,16 @@ class MultiSelectComponent {
          * @description Closes the popup automatically after an item is selected or deselected.
          * @default false
          */
-        this.autoClose = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "autoClose" }] : /* istanbul ignore next */ []));
+        this.autoClose = input(false, { ...(ngDevMode ? { debugName: "autoClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Renders a checkbox next to each item in the popup list to indicate its selected state.
          * @default false
          */
-        this.checkboxes = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "checkboxes" }] : /* istanbul ignore next */ []));
+        this.checkboxes = input(false, { ...(ngDevMode ? { debugName: "checkboxes" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @description Emits 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 Emits after the popup is closed.
@@ -255,26 +272,24 @@ class MultiSelectComponent {
          * @description Disables the component, preventing the popup from opening and blocking tag removal.
          * @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 Marks the multi select 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.
          */
         this.itemDisabled = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "itemDisabled" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the loading state of the multi select component.
+         * @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 Emits when the popup is about to open. This event is preventable.
          */
@@ -283,6 +298,13 @@ class MultiSelectComponent {
          * @description Emits after the popup is opened.
          */
         this.opened = output();
+        /**
+         * @description Text shown when nothing is selected. It also names the multi select when neither {@link ariaLabel}
+         * nor {@link ariaLabelledBy} is set.
+         * @default ""
+         */
+        this.placeholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the class of the popup element.
          * @default ""
@@ -290,7 +312,8 @@ class MultiSelectComponent {
         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 */
@@ -305,14 +328,12 @@ class MultiSelectComponent {
          * @description Sets the readonly state of the multi select component.
          * @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 multi select 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 Sets the border radius of the multi select component.
          * @default "medium"
@@ -323,8 +344,7 @@ class MultiSelectComponent {
          * @description Renders a button that clears all selected items when at least one 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 The size of the multi select component.
          * @default "medium"
@@ -340,8 +360,8 @@ class MultiSelectComponent {
         this.textField = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "textField" }] : /* istanbul ignore next */ []));
         /**
-         * @description Emitted when the multi select is interacted with on blur, selection, remove, or clear.
-         * The `FormField` directive listens to this to mark the field as touched.
+         * @description Emitted when focus leaves the multi select. Moving between it, its chips, its clear button and its
+         * popup doesn't count. The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
         /**
@@ -349,8 +369,7 @@ class MultiSelectComponent {
          * 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 ""
@@ -385,8 +404,7 @@ class MultiSelectComponent {
          *
          * @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 });
         afterNextRender({
             read: () => {
                 this.initialize();
@@ -412,14 +430,25 @@ class MultiSelectComponent {
             untracked(() => this.#listService.setSelectableOptions({ checkboxes: checkboxVisible }));
         });
     }
-    focus() {
-        this.#hostElementRef.nativeElement.focus();
+    /**
+     * @description Moves focus to the multi select.
+     * @param options Passed to `HTMLElement.focus()`, for example `{ preventScroll: true }`.
+     */
+    focus(options) {
+        this.#hostElementRef.nativeElement.focus(options);
     }
-    onBlur(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.touch.emit();
     }
     onItemSelect() {
@@ -457,7 +486,9 @@ class MultiSelectComponent {
         this.focus();
     }
     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();
@@ -479,21 +510,7 @@ class MultiSelectComponent {
             this.#dropdownService.triggerPopupOpen$.next({});
             return;
         }
-        const highlightedItem = this.#listService.highlightedItem();
-        if (!highlightedItem) {
-            return;
-        }
-        const selected = this.#listService.isSelected(highlightedItem);
-        if (selected) {
-            this.#listService.deselectItems([highlightedItem]);
-        }
-        else {
-            this.#listService.selectItem(highlightedItem);
-        }
-        this.updateValue(this.getSelectedControlValues());
-        if (this.autoClose()) {
-            this.#popupRef()?.close();
-        }
+        this.toggleHighlightedItem();
     }
     handlePopupPositionUpdate() {
         const popupRef = this.#popupRef();
@@ -529,9 +546,30 @@ class MultiSelectComponent {
             .pipe(takeUntilDestroyed(this.#destroyRef))
             .subscribe(() => this.handlePopupPositionUpdate());
     }
+    setPopupCloseSubscription() {
+        this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            if (!this.#dropdownService.focusCanReturn() && !this.#destroyRef.destroyed) {
+                // Focus left from inside the popup (its filter box), so the host never saw a focusout.
+                this.touch.emit();
+            }
+        });
+    }
+    setSpaceKeySubscription() {
+        // While the popup is open, Space toggles the highlighted option, as Enter does. While it is closed, the shared
+        // handler opens the popup.
+        this.#dropdownService.beforeKeydown$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(e => e.originalEvent?.key === " " && this.#popupRef() != null))
+            .subscribe(event => {
+            event.preventDefault();
+            event.originalEvent?.preventDefault();
+            this.toggleHighlightedItem();
+        });
+    }
     setSubscriptions() {
         this.setBackspaceKeySubscription();
         this.setEnterKeySubscription();
+        this.setPopupCloseSubscription();
+        this.setSpaceKeySubscription();
     }
     synchronizeSelection(value) {
         if (this.valuePrimitive()) {
@@ -541,19 +579,33 @@ class MultiSelectComponent {
             this.#listService.setSelectedDataItems(value);
         }
     }
-    updateValue(value, notify = true) {
-        this.value.set(value);
-        if (notify) {
-            this.touch.emit();
+    toggleHighlightedItem() {
+        const highlightedItem = this.#listService.highlightedItem();
+        if (!highlightedItem) {
+            return;
+        }
+        const selected = this.#listService.isSelected(highlightedItem);
+        if (selected) {
+            this.#listService.deselectItems([highlightedItem]);
+        }
+        else {
+            this.#listService.selectItem(highlightedItem);
         }
+        this.updateValue(this.getSelectedControlValues());
+        if (this.autoClose()) {
+            this.#popupRef()?.close();
+        }
+    }
+    updateValue(value) {
+        this.value.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "mona-multi-select", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, checkboxes: { classPropertyName: "checkboxes", publicName: "checkboxes", 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 }, 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" }, host: { listeners: { "blur": "onBlur()" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "ariaLabel()", "attr.aria-labelledby": "ariaLabelledBy()", "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.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: MultiSelectComponent, isStandalone: true, selector: "mona-multi-select", inputs: { 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 }, autoClose: { classPropertyName: "autoClose", publicName: "autoClose", isSignal: true, isRequired: false, transformFunction: null }, checkboxes: { classPropertyName: "checkboxes", publicName: "checkboxes", 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", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-activedescendant": "activeDescendant()", "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-controls": "listId", "attr.aria-describedby": "ariaDescribedBy() || null", "attr.aria-disabled": "disabled() ? true : undefined", "attr.aria-expanded": "expanded()", "attr.aria-haspopup": "'listbox'", "attr.aria-invalid": "invalidState() ? true : undefined", "attr.aria-label": "effectiveAriaLabel() || null", "attr.aria-labelledby": "ariaLabelledBy() || null", "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.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "class": "baseClass()" } }, providers: [
             ListService,
             DropdownService,
             MultiSelectService,
             {
-                provide: DropdownDataInputToken,
+                provide: DROPDOWN_DATA_INPUT_TOKEN,
                 useExisting: forwardRef(() => MultiSelectComponent),
                 multi: false
             },
@@ -562,7 +614,7 @@ class MultiSelectComponent {
                 useExisting: forwardRef(() => MultiSelectComponent),
                 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 }, { propertyName: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, 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<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                {{ messages().itemsCount(remainingCount) }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\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\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [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 [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { 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: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { 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: 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 }, { propertyName: "tagTemplate", first: true, predicate: MultiSelectTagTemplateDirective, 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<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"chipMessages().removeLabel(pair.value)\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        @let remainingCount = selectedDataItems().length - tagCount();\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"messages().removeMoreItems(remainingCount)\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                {{ messages().itemsCount(remainingCount) }}\n            }\n        </mona-chip>\n    }\n\n    @if (placeholder() && selectedListItems().isEmpty()) {\n        <span class=\"px-1.5 text-muted-foreground\">{{ placeholder() }}</span>\n    }\n</div>\n\n@if (clearButtonVisible()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\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\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: ChipComponent, selector: "mona-chip", inputs: ["aria-label", "disabled", "label", "look", "removable", "removeLabel", "removeTabIndex", "rounded", "selected", "size", "tabindex", "toggleable", "class", "value"], outputs: ["contentClick", "remove", "selectedChange"] }, { 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: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { 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: "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: MultiSelectComponent, decorators: [{
             type: Component,
@@ -571,7 +623,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         DropdownService,
                         MultiSelectService,
                         {
-                            provide: DropdownDataInputToken,
+                            provide: DROPDOWN_DATA_INPUT_TOKEN,
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: false
                         },
@@ -589,18 +641,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         ListFooterTemplateDirective,
                         ListHeaderTemplateDirective,
                         ListNoDataTemplateDirective,
-                        DropdownLiveRegionDirective,
                         IndicatorIconComponent
-                    ], hostDirectives: [DropdownDataHandlerDirective, DropdownListPopupHandlerDirective], host: {
+                    ], hostDirectives: [DropdownDataHandlerDirective, DropdownListPopupHandlerDirective, DropdownLiveRegionDirective], host: {
                         "[attr.aria-activedescendant]": "activeDescendant()",
                         "[attr.aria-busy]": "loading() ? 'true' : undefined",
                         "[attr.aria-controls]": "listId",
+                        "[attr.aria-describedby]": "ariaDescribedBy() || null",
                         "[attr.aria-disabled]": "disabled() ? true : undefined",
                         "[attr.aria-expanded]": "expanded()",
                         "[attr.aria-haspopup]": "'listbox'",
                         "[attr.aria-invalid]": "invalidState() ? true : undefined",
-                        "[attr.aria-label]": "ariaLabel()",
-                        "[attr.aria-labelledby]": "ariaLabelledBy()",
+                        "[attr.aria-label]": "effectiveAriaLabel() || null",
+                        "[attr.aria-labelledby]": "ariaLabelledBy() || null",
                         "[attr.aria-readonly]": "readonly() ? true : undefined",
                         "[attr.aria-required]": "required() ? true : undefined",
                         "[attr.data-disabled]": "disabled() || null",
@@ -609,11 +661,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.role]": "'combobox'",
                         "[attr.tabindex]": "disabled() ? null : 0",
                         "[class]": "baseClass()",
-                        "(blur)": "onBlur()"
-                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @let remainingCount = selectedDataItems().length - tagCount();\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                {{ messages().itemsCount(remainingCount) }}\n            }\n        </mona-chip>\n    }\n</div>\n\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\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\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [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 [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n        </mona-list>\n    </div>\n</ng-template>\n" }]
+                        "(focusout)": "onFocusOut($event)"
+                    }, template: "@if (prefixTemplate()) {\n    <span [class]=\"affixClass()\">\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n    </span>\n}\n\n<div [class]=\"itemContainerClass()\">\n    @for (pair of valueTextMap(); track pair.key) {\n        <mona-chip\n            look=\"default\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"chipMessages().removeLabel(pair.value)\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\n            @if (tagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"tagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\n            } @else {\n                {{ pair.value }}\n            }\n        </mona-chip>\n    }\n\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\n        @let remainingCount = selectedDataItems().length - tagCount();\n        <mona-chip\n            look=\"outline\"\n            [tabindex]=\"-1\"\n            [removable]=\"true\"\n            [removeTabIndex]=\"-1\"\n            [disabled]=\"disabled()\"\n            [removeLabel]=\"messages().removeMoreItems(remainingCount)\"\n            [rounded]=\"rounded()\"\n            [size]=\"size()\"\n            (remove)=\"onSelectedItemGroupRemove($event)\">\n            @if (summaryTagTemplate()) {\n                <ng-container\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\n            } @else {\n                {{ messages().itemsCount(remainingCount) }}\n            }\n        </mona-chip>\n    }\n\n    @if (placeholder() && selectedListItems().isEmpty()) {\n        <span class=\"px-1.5 text-muted-foreground\">{{ placeholder() }}</span>\n    }\n</div>\n\n@if (clearButtonVisible()) {\n    <mona-indicator-icon\n        preset=\"clear\"\n        [class]=\"indicatorClass()\"\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\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\n}\n\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    <div [class]=\"listPopupClass()\" (pointerdown)=\"onPopupPointerDown($event)\">\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\n            @if (footerTemplate()) {\n                <ng-template monaListFooterTemplate>\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (groupHeaderTemplate()) {\n                <ng-template monaListGroupHeaderTemplate let-group>\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n                </ng-template>\n            }\n            @if (headerTemplate()) {\n                <ng-template monaListHeaderTemplate>\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\n                </ng-template>\n            }\n            @if (itemTemplate()) {\n                <ng-template monaListItemTemplate let-dataItem>\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\n                </ng-template>\n            }\n            @if (noDataTemplate()) {\n                <ng-template monaListNoDataTemplate>\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></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 }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MultiSelectTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], checkboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxes", 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"] }], 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"] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], valuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrimitive", required: false }] }] } });
+                        }, 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 }] }], tagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MultiSelectTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], 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 }] }], autoClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoClose", required: false }] }], checkboxes: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxes", 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 }] }], 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"] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], valuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrimitive", required: false }] }] } });
 
 class MultiSelectSummaryTagTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectSummaryTagTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }

package/fesm2022/nanahoshi-mona-ui-numeric-text-box.mjs

@@ -128,7 +128,7 @@ const numericTextboxThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 text-md",
+            large: "h-10 text-base",
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }

package/fesm2022/nanahoshi-mona-ui-otp-input.mjs

@@ -78,7 +78,7 @@ const otpInputSlotThemeVariants = cva(`
             small: "rounded-sm"
         },
         size: {
-            large: "h-10 w-10 min-w-10 text-md",
+            large: "h-10 w-10 min-w-10 text-base",
             medium: "h-9 w-9 min-w-9 text-sm",
             small: "h-8 w-8 min-w-8 text-xs"
         }