@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,641 @@
+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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { 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, DropdownPopupInputToken, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { createElementControlId, restoreOverlayScroll, rxFromResize } from '@nanahoshi/mona-ui/internal';
+import { IndicatorIconComponent } from '@nanahoshi/mona-ui/internal/indicator-icon';
+import { ListService, ListComponent, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListFooterTemplateDirective, ListHeaderTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { none } from '@mirei/ts-collections';
+import { filter, tap } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+class MultiSelectTagTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectTagTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MultiSelectTagTemplateDirective, isStandalone: true, selector: "ng-template[monaMultiSelectTagTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectTagTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMultiSelectTagTemplate]"
+                }]
+        }] });
+
+class MultiSelectService {
+    constructor() {
+        this.summaryTagTemplate = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "summaryTagTemplate" }] : /* istanbul ignore next */ []));
+        this.tagCount = signal(-1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tagCount" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectService, decorators: [{
+            type: Injectable
+        }] });
+
+const multiSelectBaseVariants = cva(`
+        flex items-center justify-between
+        border border-input-border outline-none
+        bg-background shadow-xs
+        cursor-pointer
+        focus-within:ring-1 focus-within:ring-primary/40
+        transition-[color,box-shadow,border] ease-in-out duration-300
+    `, {
+    variants: {
+        disabled: {
+            true: "pointer-events-none opacity-50 cursor-not-allowed"
+        },
+        focused: {
+            true: "ring-1 ring-primary/40"
+        },
+        invalid: {
+            true: "border-error ring-1 ring-error/40",
+            false: ""
+        },
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        },
+        size: {
+            small: "min-h-8 text-xs",
+            medium: "min-h-9 text-sm",
+            large: "min-h-10 text-md"
+        }
+    }
+});
+const multiSelectItemContainerVariants = cva(`
+        flex flex-1 items-center gap-1 flex-wrap p-1
+    `, {
+    variants: {
+        rounded: {
+            none: "rounded-none",
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full"
+        }
+    }
+});
+const multiSelectAffixContainerVariants = cva(`h-full flex flex-none items-center justify-center`);
+const multiSelectIndicatorContainerVariants = cva(`self-center`, {
+    variants: {
+        size: {
+            small: "h-8",
+            medium: "h-9",
+            large: "h-10"
+        }
+    }
+});
+
+const multiSelectBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return multiSelectBaseVariants;
+        default:
+            return multiSelectBaseVariants;
+    }
+};
+const multiSelectItemContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return multiSelectItemContainerVariants;
+        default:
+            return multiSelectItemContainerVariants;
+    }
+};
+const multiSelectAffixContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return multiSelectAffixContainerVariants;
+        default:
+            return multiSelectAffixContainerVariants;
+    }
+};
+const multiSelectIndicatorContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return multiSelectIndicatorContainerVariants;
+        default:
+            return multiSelectIndicatorContainerVariants;
+    }
+};
+
+class MultiSelectComponent {
+    #destroyRef;
+    #dropdownService;
+    #hostElementRef;
+    #listService;
+    #multiSelectService;
+    #popupRef;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#dropdownService = inject(DropdownService);
+        this.#hostElementRef = inject(ElementRef);
+        this.#listService = inject((ListService));
+        this.#multiSelectService = inject(MultiSelectService);
+        this.#popupRef = this.#dropdownService.popupRef;
+        this.#themeService = inject(ThemeService);
+        this.activeDescendant = computed(() => {
+            const highlightedItem = this.#listService.highlightedItem();
+            return highlightedItem ? highlightedItem.uid : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeDescendant" }] : /* istanbul ignore next */ []));
+        this.affixClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return multiSelectAffixContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "affixClass" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            const focused = this.#popupRef() != null;
+            const invalid = this.invalidState();
+            const rounded = this.rounded();
+            const size = this.size();
+            const variantClass = multiSelectBaseThemeVariants(theme)({ disabled, focused, invalid, rounded, size });
+            const userClass = this.userClass();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* 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 });
+        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.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && none(this.value())), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.indicatorClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const size = this.size();
+            return multiSelectIndicatorContainerThemeVariants(theme)({ size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "indicatorClass" }] : /* istanbul ignore next */ []));
+        this.itemContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            return multiSelectItemContainerThemeVariants(theme)({ rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "itemContainerClass" }] : /* istanbul ignore next */ []));
+        this.itemTemplate = contentChild(DropdownItemTemplateDirective, { ...(ngDevMode ? { debugName: "itemTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.listId = createElementControlId();
+        this.listPopupClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const userClass = this.popupClass();
+            const variantClass = dropdownPopupThemeVariants(theme)({ rounded, size });
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listPopupClass" }] : /* istanbul ignore next */ []));
+        this.noDataTemplate = contentChild(DropdownNoDataTemplateDirective, { ...(ngDevMode ? { debugName: "noDataTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.popupTemplate = viewChild.required("popupTemplate", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+        this.prefixTemplate = contentChild(DropdownPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.summaryTagTemplate = this.#multiSelectService.summaryTagTemplate.asReadonly();
+        this.tagCount = this.#multiSelectService.tagCount.asReadonly();
+        this.tagTemplate = contentChild(MultiSelectTagTemplateDirective, { ...(ngDevMode ? { debugName: "tagTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.selectedDataItems = computed(() => {
+            return this.selectedListItems()
+                .select(i => i.data)
+                .toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedDataItems" }] : /* istanbul ignore next */ []));
+        this.selectedListItems = computed(() => {
+            return this.#listService.selectedListItems();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedListItems" }] : /* istanbul ignore next */ []));
+        this.valueTextMap = computed(() => {
+            const tagCount = this.visibleTagCount();
+            return this.selectedListItems()
+                .take(tagCount)
+                .toImmutableDictionary(i => i, i => this.#listService.getItemText(i));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "valueTextMap" }] : /* istanbul ignore next */ []));
+        this.visibleTagCount = computed(() => {
+            const tagCount = this.tagCount();
+            const itemCount = this.selectedListItems().size();
+            if (tagCount < 0) {
+                return itemCount;
+            }
+            return tagCount;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleTagCount" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the aria-label attribute of the multi select component.
+         * @default ""
+         */
+        this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Sets the aria-labelledby attribute of the multi select component.
+         * @default ""
+         */
+        this.ariaLabelledBy = input("", { ...(ngDevMode ? { debugName: "ariaLabelledBy" } : /* istanbul ignore next */ {}), alias: "aria-labelledby" });
+        /**
+         * @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 */ []));
+        /**
+         * @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 */ []));
+        /**
+         * @description Emits when the popup is about to close. This event is preventable.
+         */
+        this.close = output();
+        /**
+         * @description Emits after the popup is closed.
+         */
+        this.closed = output();
+        /**
+         * @description Collection of items rendered in the popup list.
+         * @default []
+         */
+        this.data = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 */ []));
+        /**
+         * @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 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 */ []));
+        /**
+         * @description Sets the loading state of the multi select component.
+         * @default false
+         */
+        this.loading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the popup is about to open. This event is preventable.
+         */
+        this.open = output();
+        /**
+         * @description Emits after the popup is opened.
+         */
+        this.opened = output();
+        /**
+         * @description Sets the class of the popup element.
+         * @default ""
+         */
+        this.popupClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the height of the popup element.
+         * @default null
+         */
+        this.popupHeight = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the popup element.
+         * @default null
+         */
+        this.popupWidth = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the readonly state of the multi select component.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the required state of the multi select component.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the multi select component.
+         * @default "medium"
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 */ []));
+        /**
+         * @description The size of the multi select component.
+         * @default "medium"
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the text field of the multi select component.
+         * It can be null, string, or a function that takes an item and returns a string.
+         * If null, the item itself will be used as the text representation.
+         * @default null
+         */
+        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.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the multi select. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Additional CSS classes merged onto the host element via `tailwind-merge`.
+         * @default ""
+         */
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Sets the value field of the multi select component.
+         * It can be null, string, or a function that takes an item and returns a string.
+         * If null, the item itself will be used as the value representation.
+         * @default null
+         */
+        this.valueField = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "valueField" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Two-way bindable current selected values. Implements `FormValueControl<Iterable<TData>>`,
+         * enabling signal forms `[formField]` binding. When `valueField` is set, primitive field values can be
+         * written into this model to restore matching selected items.
+         * @default []
+         */
+        this.value = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.initialize();
+                this.setEventListeners();
+                this.setSubscriptions();
+            }
+        });
+        effect(() => {
+            const popupTemplate = this.popupTemplate();
+            untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
+        });
+        effect(() => {
+            const valueField = this.valueField();
+            const value = this.value();
+            untracked(() => {
+                this.#listService.setValueField(valueField ?? "");
+                this.#listService.setSelectedDataItems(value);
+            });
+        });
+        effect(() => {
+            const checkboxVisible = this.checkboxes();
+            untracked(() => this.#listService.setSelectableOptions({ checkboxes: checkboxVisible }));
+        });
+    }
+    focus() {
+        this.#hostElementRef.nativeElement.focus();
+    }
+    onBlur() {
+        this.touch.emit();
+    }
+    onItemSelect() {
+        this.updateValue(this.selectedDataItems().toArray());
+        if (this.autoClose()) {
+            this.#popupRef()?.close();
+        }
+    }
+    onSelectedItemRemove(event, listItem) {
+        event.stopImmediatePropagation();
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        this.#listService.deselectItems([listItem]);
+        this.updateValue(this.selectedDataItems().toArray());
+        this.focus();
+    }
+    onSelectedItemGroupRemove(event) {
+        event.stopImmediatePropagation();
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        const selectedItemCount = this.selectedListItems().size();
+        const removedItems = this.selectedListItems()
+            .takeLast(selectedItemCount - this.visibleTagCount())
+            .toArray();
+        this.#listService.deselectItems(removedItems);
+        this.updateValue(this.selectedDataItems().toArray());
+        this.focus();
+    }
+    onValueClear(event) {
+        if (this.readonly() || (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ")) {
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.updateValue([]);
+        this.#listService.clearSelections();
+        this.focus();
+    }
+    handleEnterKey() {
+        if (!this.#popupRef()) {
+            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.selectedDataItems().toArray());
+        if (this.autoClose()) {
+            this.#popupRef()?.close();
+        }
+    }
+    handlePopupPositionUpdate() {
+        const popupRef = this.#popupRef();
+        if (!popupRef) {
+            return;
+        }
+        restoreOverlayScroll(popupRef.overlayRef, this.#hostElementRef.nativeElement);
+    }
+    initialize() {
+        this.#listService.setNavigableOptions({ enabled: true, mode: "highlight", wrap: true });
+        this.#listService.setSelectableOptions({ enabled: true, mode: "multiple" });
+    }
+    setBackspaceKeySubscription() {
+        this.#dropdownService.keydown$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(e => e.key === "Backspace"), tap(e => e.preventDefault()))
+            .subscribe(() => {
+            const selectedItems = this.selectedListItems();
+            if (selectedItems.isEmpty()) {
+                return;
+            }
+            const lastSelectedItem = selectedItems.last();
+            this.#listService.deselectItems([lastSelectedItem]);
+            this.updateValue(this.selectedDataItems().toArray());
+        });
+    }
+    setEnterKeySubscription() {
+        this.#dropdownService.keydown$
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(e => e.key === "Enter"), tap(e => e.preventDefault()))
+            .subscribe(() => this.handleEnterKey());
+    }
+    setEventListeners() {
+        rxFromResize(this.#hostElementRef.nativeElement)
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.handlePopupPositionUpdate());
+    }
+    setSubscriptions() {
+        this.setBackspaceKeySubscription();
+        this.setEnterKeySubscription();
+    }
+    updateValue(value, notify = true) {
+        this.value.set(value);
+        if (notify) {
+            this.touch.emit();
+        }
+    }
+    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 }, itemDisabled: { classPropertyName: "itemDisabled", publicName: "itemDisabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", 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 }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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.role": "'combobox'", "attr.tabindex": "disabled() ? null : 0", "attr.data-invalid": "invalidState() || null", "class": "baseClass()" } }, providers: [
+            ListService,
+            DropdownService,
+            MultiSelectService,
+            {
+                provide: DropdownDataInputToken,
+                useExisting: forwardRef(() => MultiSelectComponent),
+                multi: false
+            },
+            {
+                provide: DropdownPopupInputToken,
+                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()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<div [class]=\"itemContainerClass()\">\r\n    @for (pair of valueTextMap(); track pair.key) {\r\n        <mona-chip\r\n            look=\"default\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\r\n            @if (tagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"tagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\r\n            } @else {\r\n                {{ pair.value }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n\r\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\r\n        <mona-chip\r\n            look=\"outline\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemGroupRemove($event)\">\r\n            @let remainingCount = selectedDataItems().length - tagCount();\r\n            @if (summaryTagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\r\n            } @else {\r\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\r\n                + {{ remainingCount }} {{ itemLabel }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n</div>\r\n\r\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [class]=\"indicatorClass()\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\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: "ngmodule", type: FontAwesomeModule }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-multi-select", providers: [
+                        ListService,
+                        DropdownService,
+                        MultiSelectService,
+                        {
+                            provide: DropdownDataInputToken,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: false
+                        },
+                        {
+                            provide: DropdownPopupInputToken,
+                            useExisting: forwardRef(() => MultiSelectComponent),
+                            multi: false
+                        }
+                    ], imports: [
+                        ChipComponent,
+                        NgTemplateOutlet,
+                        FontAwesomeModule,
+                        ListComponent,
+                        ListGroupHeaderTemplateDirective,
+                        ListItemTemplateDirective,
+                        ListFooterTemplateDirective,
+                        ListHeaderTemplateDirective,
+                        ListNoDataTemplateDirective,
+                        DropdownLiveRegionDirective,
+                        IndicatorIconComponent
+                    ], hostDirectives: [DropdownDataHandlerDirective, DropdownListPopupHandlerDirective], host: {
+                        "[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.role]": "'combobox'",
+                        "[attr.tabindex]": "disabled() ? null : 0",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[class]": "baseClass()",
+                        "(blur)": "onBlur()"
+                    }, template: "@if (prefixTemplate()) {\r\n    <span [class]=\"affixClass()\">\r\n        <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n    </span>\r\n}\r\n\r\n<div [class]=\"itemContainerClass()\">\r\n    @for (pair of valueTextMap(); track pair.key) {\r\n        <mona-chip\r\n            look=\"default\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemRemove($event, pair.key!)\">\r\n            @if (tagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"tagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: pair.key!.data }\"></ng-container>\r\n            } @else {\r\n                {{ pair.value }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n\r\n    @if (tagCount() >= 0 && selectedListItems().length > tagCount()) {\r\n        <mona-chip\r\n            look=\"outline\"\r\n            [tabindex]=\"-1\"\r\n            [removable]=\"true\"\r\n            [removeTabIndex]=\"-1\"\r\n            [disabled]=\"disabled()\"\r\n            [rounded]=\"rounded()\"\r\n            [size]=\"size()\"\r\n            (remove)=\"onSelectedItemGroupRemove($event)\">\r\n            @let remainingCount = selectedDataItems().length - tagCount();\r\n            @if (summaryTagTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"summaryTagTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{ $implicit: selectedDataItems(), tagCount: tagCount() }\"></ng-container>\r\n            } @else {\r\n                @let itemLabel = remainingCount === 1 ? \"item\" : \"items\";\r\n                + {{ remainingCount }} {{ itemLabel }}\r\n            }\r\n        </mona-chip>\r\n    }\r\n</div>\r\n\r\n@if (showClearButton() && selectedListItems().length !== 0 && !loading()) {\r\n    <mona-indicator-icon\r\n        preset=\"clear\"\r\n        [class]=\"indicatorClass()\"\r\n        [interactive]=\"true\"\r\n        label=\"Clear\"\r\n        (activate)=\"onValueClear($event)\"></mona-indicator-icon>\r\n}\r\n\r\n@if (loading()) {\r\n    <mona-indicator-icon preset=\"loading\" [class]=\"indicatorClass()\" [size]=\"12\"></mona-indicator-icon>\r\n}\r\n\r\n<mona-indicator-icon preset=\"dropdown\" [class]=\"indicatorClass()\" [size]=\"18\"></mona-indicator-icon>\r\n\r\n<span monaDropdownLiveRegion></span>\r\n\r\n<ng-template #popupTemplate>\r\n    <div [class]=\"listPopupClass()\">\r\n        <mona-list [listId]=\"listId\" [focusOnMount]=\"false\" [size]=\"size()\" (itemSelect)=\"onItemSelect()\">\r\n            @if (footerTemplate()) {\r\n                <ng-template monaListFooterTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"footerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (groupHeaderTemplate()) {\r\n                <ng-template monaListGroupHeaderTemplate let-group>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (headerTemplate()) {\r\n                <ng-template monaListHeaderTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"headerTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (itemTemplate()) {\r\n                <ng-template monaListItemTemplate let-dataItem>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"itemTemplate() ?? null\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: dataItem }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (noDataTemplate()) {\r\n                <ng-template monaListNoDataTemplate>\r\n                    <ng-container [ngTemplateOutlet]=\"noDataTemplate() ?? null\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-list>\r\n    </div>\r\n</ng-template>\r\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"] }], itemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDisabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", 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 }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class MultiSelectSummaryTagTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectSummaryTagTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: MultiSelectSummaryTagTemplateDirective, isStandalone: true, selector: "ng-template[monaMultiSelectSummaryTagTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectSummaryTagTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaMultiSelectSummaryTagTemplate]"
+                }]
+        }] });
+
+class MultiSelectSummaryTagDirective {
+    #multiSelectService;
+    constructor() {
+        this.#multiSelectService = inject(MultiSelectService);
+        this.summaryTagTemplate = contentChild(MultiSelectSummaryTagTemplateDirective, { ...(ngDevMode ? { debugName: "summaryTagTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        /**
+         * @description Number of selected item tags to display before collapsing the rest into a summary tag.
+         * A negative value shows every selected item as its own tag and never renders the summary tag.
+         * @default -1
+         */
+        this.tagCount = input(-1, { ...(ngDevMode ? { debugName: "tagCount" } : /* istanbul ignore next */ {}), alias: "monaMultiSelectSummaryTag" });
+        effect(() => {
+            const tagCount = this.tagCount();
+            untracked(() => this.#multiSelectService.tagCount.set(tagCount));
+        });
+        effect(() => {
+            const tagTemplate = this.summaryTagTemplate();
+            untracked(() => this.#multiSelectService.summaryTagTemplate.set(tagTemplate ?? null));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectSummaryTagDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.0.6", type: MultiSelectSummaryTagDirective, isStandalone: true, selector: "mona-multi-select[monaMultiSelectSummaryTag]", inputs: { tagCount: { classPropertyName: "tagCount", publicName: "monaMultiSelectSummaryTag", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "summaryTagTemplate", first: true, predicate: MultiSelectSummaryTagTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectSummaryTagDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "mona-multi-select[monaMultiSelectSummaryTag]"
+                }]
+        }], ctorParameters: () => [], propDecorators: { summaryTagTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MultiSelectSummaryTagTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], tagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaMultiSelectSummaryTag", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/multi-select
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MultiSelectComponent, MultiSelectSummaryTagDirective, MultiSelectSummaryTagTemplateDirective, MultiSelectTagTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-multi-select.mjs.map