@nanahoshi/mona-ui 0.20.0 → 0.21.0

package/fesm2022/nanahoshi-mona-ui-grid.mjs

@@ -1,2 +1,2 @@
-export { C as CellEditEvent, A as GRID_DEFAULT_MESSAGES, B as GridAddCommandDirective, D as GridAddEvent, E as GridCancelCommandDirective, F as GridCancelEvent, H as GridCellTemplateDirective, I as GridColumnComponent, J as GridColumnTitleTemplateDirective, K as GridCommandColumnComponent, L as GridComponent, M as GridContextMenuDirective, N as GridDetailTemplateDirective, O as GridEditCommandDirective, P as GridEditEvent, Q as GridEditTemplateDirective, R as GridEditableDirective, S as GridExportDirective, T as GridFilterableDirective, U as GridFooterTemplateDirective, V as GridGroupFooterTemplateDirective, W as GridGroupableDirective, X as GridHeaderTemplateDirective, Y as GridNoDataTemplateDirective, Z as GridRemoveCommandDirective, _ as GridRemoveEvent, $ as GridReorderableDirective, a0 as GridResizableDirective, a1 as GridRowReorderableDirective, a2 as GridSaveCommandDirective, a3 as GridSaveEvent, a4 as GridSelectableDirective, a5 as GridSortableDirective, a6 as GridStatePersistenceDirective, a7 as GridToolbarTemplateDirective, a8 as GridVirtualScrollDirective, a9 as RowEditEvent, aa as RowReorderEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-CyzJFQIy.mjs';
+export { C as CellEditEvent, B as GRID_DEFAULT_MESSAGES, D as GridAddCommandDirective, E as GridAddEvent, F as GridCancelCommandDirective, H as GridCancelEvent, I as GridCellTemplateDirective, J as GridColumnComponent, K as GridColumnTitleTemplateDirective, L as GridCommandColumnComponent, M as GridComponent, N as GridContextMenuDirective, O as GridDetailTemplateDirective, P as GridEditCommandDirective, Q as GridEditEvent, R as GridEditTemplateDirective, S as GridEditableDirective, T as GridExportDirective, U as GridFilterableDirective, V as GridFooterTemplateDirective, W as GridGroupFooterTemplateDirective, X as GridGroupableDirective, Y as GridHeaderTemplateDirective, Z as GridNoDataTemplateDirective, _ as GridRemoveCommandDirective, $ as GridRemoveEvent, a0 as GridReorderableDirective, a1 as GridResizableDirective, a2 as GridRowReorderableDirective, a3 as GridSaveCommandDirective, a4 as GridSaveEvent, a5 as GridSelectableDirective, a6 as GridServerBindingDirective, a7 as GridSortableDirective, a8 as GridStatePersistenceDirective, a9 as GridToolbarTemplateDirective, aa as GridVirtualScrollDirective, ab as RowEditEvent, ac as RowReorderEvent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-BGfDw6_5.mjs';
 //# sourceMappingURL=nanahoshi-mona-ui-grid.mjs.map

package/fesm2022/nanahoshi-mona-ui-list-view.mjs

@@ -274,7 +274,7 @@ class ListViewComponent {
                 },
                 deps: [[new Optional(), new SkipSelf(), ListService]]
             }
-        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\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-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></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\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            [size]=\"size()\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-x-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { 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: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
+        ], queries: [{ propertyName: "footerTemplate", first: true, predicate: ListViewFooterTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: ListViewGroupHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: ListViewHeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "itemTemplate", first: true, predicate: ListViewItemTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "noDataTemplate", first: true, predicate: ListViewNoDataTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [focusOnMount]=\"false\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\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-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></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\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <mona-pager\n        [firstLast]=\"pageableOptions.firstLast\"\n        [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n        [visiblePages]=\"pageableOptions.visiblePages\"\n        [total]=\"itemCount()\"\n        [skip]=\"pageState.skip\"\n        [responsive]=\"false\"\n        [rounded]=\"rounded()\"\n        [pageSize]=\"pageState.take\"\n        [previousNext]=\"pageableOptions.previousNext\"\n        [showInfo]=\"pageableOptions.showInfo\"\n        [size]=\"size()\"\n        (pageChange)=\"onPageChange($event)\"\n        (pageSizeChange)=\"onPageSizeChange($event)\"\n        class=\"border-b-0 border-x-0 rounded-t-none\"></mona-pager>\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PagerComponent, selector: "mona-pager", inputs: ["firstLast", "navigable", "pageInput", "pageSize", "pageSizeValues", "previousNext", "responsive", "rounded", "showInfo", "size", "skip", "total", "type", "class", "visiblePages"], outputs: ["pageChange", "pageSizeChange"] }, { 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: ListHeaderTemplateDirective, selector: "ng-template[monaListHeaderTemplate]" }, { kind: "directive", type: ListFooterTemplateDirective, selector: "ng-template[monaListFooterTemplate]" }, { kind: "directive", type: ListGroupHeaderTemplateDirective, selector: "ng-template[monaListGroupHeaderTemplate]" }, { kind: "directive", type: ListItemTemplateDirective, selector: "ng-template[monaListItemTemplate]" }, { kind: "directive", type: ListNoDataTemplateDirective, selector: "ng-template[monaListNoDataTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -298,7 +298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], host: {
                         "[class]": "baseClasses()",
                         "[attr.tabindex]": "-1"
-                    }, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\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-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></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\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <div class=\"mona-list-view-pager\">\n        <mona-pager\n            [firstLast]=\"pageableOptions.firstLast\"\n            [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n            [visiblePages]=\"pageableOptions.visiblePages\"\n            [total]=\"itemCount()\"\n            [skip]=\"pageState.skip\"\n            [responsive]=\"false\"\n            [rounded]=\"rounded()\"\n            [pageSize]=\"pageState.take\"\n            [previousNext]=\"pageableOptions.previousNext\"\n            [showInfo]=\"pageableOptions.showInfo\"\n            [size]=\"size()\"\n            (pageChange)=\"onPageChange($event)\"\n            (pageSizeChange)=\"onPageSizeChange($event)\"\n            class=\"border-b-0 border-x-0 rounded-t-none\"></mona-pager>\n    </div>\n}\n" }]
+                    }, template: "<mona-list\n    [ariaLabel]=\"ariaLabel()\"\n    [data]=\"viewItems()\"\n    [height]=\"listHeight()\"\n    [focusOnMount]=\"false\"\n    [width]=\"listWidth()\"\n    [maxHeight]=\"listMaxHeight()\"\n    [maxWidth]=\"listMaxWidth()\"\n    [listItemClass]=\"listItemClass()\"\n    [listItemStyle]=\"listItemStyle()\"\n    [listClass]=\"listClass()\"\n    [listStyle]=\"listStyle()\">\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-groupHeader>\n            <ng-container\n                [ngTemplateOutlet]=\"groupHeaderTemplate() ?? null\"\n                [ngTemplateOutletContext]=\"{ $implicit: groupHeader }\"></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\n@let pageableOptions = listService.pageableOptions();\n@if (pageableOptions.enabled && !listService.virtualScrollOptions().enabled && viewItems().length > 0) {\n    @let pageState = listService.pageState();\n    <mona-pager\n        [firstLast]=\"pageableOptions.firstLast\"\n        [pageSizeValues]=\"pageableOptions.pageSizeValues\"\n        [visiblePages]=\"pageableOptions.visiblePages\"\n        [total]=\"itemCount()\"\n        [skip]=\"pageState.skip\"\n        [responsive]=\"false\"\n        [rounded]=\"rounded()\"\n        [pageSize]=\"pageState.take\"\n        [previousNext]=\"pageableOptions.previousNext\"\n        [showInfo]=\"pageableOptions.showInfo\"\n        [size]=\"size()\"\n        (pageChange)=\"onPageChange($event)\"\n        (pageSizeChange)=\"onPageSizeChange($event)\"\n        class=\"border-b-0 border-x-0 rounded-t-none\"></mona-pager>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { footerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewFooterTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], groupHeaderTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewGroupHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], headerTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewHeaderTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], itemTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewItemTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], noDataTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ListViewNoDataTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], listClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listClass", required: false }] }], listItemClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemClass", required: false }] }], listItemStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemStyle", required: false }] }], listStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "listStyle", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], scrollBottom: [{ type: i0.Output, args: ["scrollBottom"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 
 class ListViewGroupableDirective {

package/fesm2022/nanahoshi-mona-ui-locales.mjs

@@ -246,6 +246,7 @@ const AR_SA_MESSAGES = {
         rowReorderDisabledEditing: "أكمل التحرير قبل إعادة ترتيب الصفوف.",
         rowReorderDisabledFiltered: "امسح التصفية قبل إعادة ترتيب الصفوف.",
         rowReorderDisabledGrouped: "ألغِ التجميع قبل إعادة ترتيب الصفوف.",
+        rowReorderDisabledServerBinding: "لا يمكن إعادة ترتيب الصفوف مع ربط الخادم.",
         rowReorderDisabledSingleRow: "يلزم صفّان على الأقل لإعادة ترتيب الصفوف.",
         rowReorderDisabledSorted: "ألغِ الفرز قبل إعادة ترتيب الصفوف.",
         rowReorderDisabledVirtualScroll: "لا يمكن إعادة ترتيب الصفوف أثناء استخدام التمرير الافتراضي.",
@@ -624,6 +625,7 @@ const ES_ES_MESSAGES = {
         rowReorderDisabledEditing: "Termina la edición para reordenar las filas.",
         rowReorderDisabledFiltered: "Limpia los filtros para reordenar las filas.",
         rowReorderDisabledGrouped: "Quita la agrupación para reordenar las filas.",
+        rowReorderDisabledServerBinding: "No se pueden reordenar filas con vinculación al servidor.",
         rowReorderDisabledSingleRow: "Se necesitan al menos dos filas para reordenarlas.",
         rowReorderDisabledSorted: "Quita la ordenación para reordenar las filas.",
         rowReorderDisabledVirtualScroll: "La reordenación de filas no está disponible mientras el desplazamiento virtual está activado.",
@@ -669,8 +671,8 @@ const ES_ES_MESSAGES = {
     },
     pager: {
         firstPageLabel: "Primera página",
-        jumpBackwardLabel: (pages) => pages === 1 ? "Retroceder 1 página" : `Retroceder ${pages} páginas`,
-        jumpForwardLabel: (pages) => pages === 1 ? "Avanzar 1 página" : `Avanzar ${pages} páginas`,
+        jumpBackwardLabel: (pages) => (pages === 1 ? "Retroceder 1 página" : `Retroceder ${pages} páginas`),
+        jumpForwardLabel: (pages) => (pages === 1 ? "Avanzar 1 página" : `Avanzar ${pages} páginas`),
         lastPageLabel: "Última página",
         nextPageLabel: "Página siguiente",
         ofText: "de",
@@ -891,7 +893,7 @@ const DE_DE_MESSAGES = {
     dropdowns: {
         itemPosition: (text, position, total) => `${text}, ${position} von ${total}`,
         noResultsFound: "Keine Ergebnisse gefunden",
-        resultsAvailable: (count) => count === 1 ? "1 Ergebnis verfügbar" : `${count} Ergebnisse verfügbar`
+        resultsAvailable: (count) => (count === 1 ? "1 Ergebnis verfügbar" : `${count} Ergebnisse verfügbar`)
     },
     editor: {
         addColumnAfter: "Spalte danach einfügen",
@@ -978,7 +980,7 @@ const DE_DE_MESSAGES = {
         cancel: "Abbrechen",
         cancelRowEdit: "Zeilenbearbeitung abbrechen",
         columns: "Spalten",
-        columnsSelected: (count) => count === 1 ? "1 Spalte ausgewählt" : `${count} Spalten ausgewählt`,
+        columnsSelected: (count) => (count === 1 ? "1 Spalte ausgewählt" : `${count} Spalten ausgewählt`),
         delete: "Löschen",
         deleteRowConfirmation: "Diese Zeile wirklich löschen?",
         deleteRowTitle: "Zeile löschen?",
@@ -1002,6 +1004,7 @@ const DE_DE_MESSAGES = {
         rowReorderDisabledEditing: "Bearbeitung abschließen, um Zeilen neu anzuordnen.",
         rowReorderDisabledFiltered: "Filter aufheben, um Zeilen neu anzuordnen.",
         rowReorderDisabledGrouped: "Gruppierung aufheben, um Zeilen neu anzuordnen.",
+        rowReorderDisabledServerBinding: "Bei Serverbindung können Zeilen nicht neu angeordnet werden.",
         rowReorderDisabledSingleRow: "Zum Neuanordnen sind mindestens zwei Zeilen erforderlich.",
         rowReorderDisabledSorted: "Sortierung aufheben, um Zeilen neu anzuordnen.",
         rowReorderDisabledVirtualScroll: "Bei aktiviertem virtuellem Scrollen können Zeilen nicht neu angeordnet werden.",
@@ -1269,7 +1272,7 @@ const FR_FR_MESSAGES = {
     dropdowns: {
         itemPosition: (text, position, total) => `${text}, ${position} sur ${total}`,
         noResultsFound: "Aucun résultat trouvé",
-        resultsAvailable: (count) => count === 1 ? "1 résultat disponible" : `${count} résultats disponibles`
+        resultsAvailable: (count) => (count === 1 ? "1 résultat disponible" : `${count} résultats disponibles`)
     },
     editor: {
         addColumnAfter: "Insérer une colonne après",
@@ -1380,6 +1383,7 @@ const FR_FR_MESSAGES = {
         rowReorderDisabledEditing: "Terminez la modification avant de réordonner les lignes.",
         rowReorderDisabledFiltered: "Supprimez les filtres avant de réordonner les lignes.",
         rowReorderDisabledGrouped: "Supprimez le regroupement avant de réordonner les lignes.",
+        rowReorderDisabledServerBinding: "La réorganisation des lignes est indisponible avec la liaison serveur.",
         rowReorderDisabledSingleRow: "Au moins deux lignes sont nécessaires pour les réordonner.",
         rowReorderDisabledSorted: "Supprimez le tri avant de réordonner les lignes.",
         rowReorderDisabledVirtualScroll: "La réorganisation des lignes n’est pas disponible lorsque le défilement virtuel est activé.",
@@ -1425,8 +1429,8 @@ const FR_FR_MESSAGES = {
     },
     pager: {
         firstPageLabel: "Première page",
-        jumpBackwardLabel: (pages) => pages === 1 ? "Reculer de 1 page" : `Reculer de ${pages} pages`,
-        jumpForwardLabel: (pages) => pages === 1 ? "Avancer de 1 page" : `Avancer de ${pages} pages`,
+        jumpBackwardLabel: (pages) => (pages === 1 ? "Reculer de 1 page" : `Reculer de ${pages} pages`),
+        jumpForwardLabel: (pages) => (pages === 1 ? "Avancer de 1 page" : `Avancer de ${pages} pages`),
         lastPageLabel: "Dernière page",
         nextPageLabel: "Page suivante",
         ofText: "sur",
@@ -1734,7 +1738,7 @@ const IT_IT_MESSAGES = {
         cancel: "Annulla",
         cancelRowEdit: "Annulla modifica della riga",
         columns: "Colonne",
-        columnsSelected: (count) => count === 1 ? "1 colonna selezionata" : `${count} colonne selezionate`,
+        columnsSelected: (count) => (count === 1 ? "1 colonna selezionata" : `${count} colonne selezionate`),
         delete: "Elimina",
         deleteRowConfirmation: "Sei sicuro di voler eliminare questo elemento?",
         deleteRowTitle: "Eliminare la riga?",
@@ -1758,6 +1762,7 @@ const IT_IT_MESSAGES = {
         rowReorderDisabledEditing: "Completa la modifica prima di riordinare le righe.",
         rowReorderDisabledFiltered: "Rimuovi i filtri prima di riordinare le righe.",
         rowReorderDisabledGrouped: "Rimuovi il raggruppamento prima di riordinare le righe.",
+        rowReorderDisabledServerBinding: "Il riordino delle righe non è disponibile con il binding al server.",
         rowReorderDisabledSingleRow: "Sono necessarie almeno due righe per riordinarle.",
         rowReorderDisabledSorted: "Rimuovi l'ordinamento prima di riordinare le righe.",
         rowReorderDisabledVirtualScroll: "Il riordinamento delle righe non è disponibile con lo scorrimento virtuale attivo.",
@@ -1804,7 +1809,7 @@ const IT_IT_MESSAGES = {
     pager: {
         firstPageLabel: "Prima pagina",
         jumpBackwardLabel: (pages) => pages === 1 ? "Torna indietro di 1 pagina" : `Torna indietro di ${pages} pagine`,
-        jumpForwardLabel: (pages) => pages === 1 ? "Avanza di 1 pagina" : `Avanza di ${pages} pagine`,
+        jumpForwardLabel: (pages) => (pages === 1 ? "Avanza di 1 pagina" : `Avanza di ${pages} pagine`),
         lastPageLabel: "Ultima pagina",
         nextPageLabel: "Pagina successiva",
         ofText: "di",
@@ -2136,6 +2141,7 @@ const JA_JP_MESSAGES = {
         rowReorderDisabledEditing: "行を並べ替える前に編集を完了してください。",
         rowReorderDisabledFiltered: "行を並べ替える前にフィルターを解除してください。",
         rowReorderDisabledGrouped: "行を並べ替える前にグループ化を解除してください。",
+        rowReorderDisabledServerBinding: "サーバーバインディングでは行を並べ替えられません。",
         rowReorderDisabledSingleRow: "行を並べ替えるには2行以上必要です。",
         rowReorderDisabledSorted: "行を並べ替える前にソートを解除してください。",
         rowReorderDisabledVirtualScroll: "仮想スクロールが有効な場合、行の並べ替えは使用できません。",
@@ -2514,6 +2520,7 @@ const KO_KR_MESSAGES = {
         rowReorderDisabledEditing: "편집을 완료한 후 행 순서를 변경하세요.",
         rowReorderDisabledFiltered: "필터를 지운 후 행 순서를 변경하세요.",
         rowReorderDisabledGrouped: "그룹화를 해제한 후 행 순서를 변경하세요.",
+        rowReorderDisabledServerBinding: "서버 바인딩에서는 행 순서를 변경할 수 없습니다.",
         rowReorderDisabledSingleRow: "행 순서를 변경하려면 행이 두 개 이상 필요합니다.",
         rowReorderDisabledSorted: "정렬을 해제한 후 행 순서를 변경하세요.",
         rowReorderDisabledVirtualScroll: "가상 스크롤을 사용하는 동안에는 행 순서를 변경할 수 없습니다.",
@@ -2868,7 +2875,7 @@ const PT_BR_MESSAGES = {
         cancel: "Cancelar",
         cancelRowEdit: "Cancelar edição da linha",
         columns: "Colunas",
-        columnsSelected: (count) => count === 1 ? "1 coluna selecionada" : `${count} colunas selecionadas`,
+        columnsSelected: (count) => (count === 1 ? "1 coluna selecionada" : `${count} colunas selecionadas`),
         delete: "Excluir",
         deleteRowConfirmation: "Tem certeza de que deseja excluir este item?",
         deleteRowTitle: "Excluir linha?",
@@ -2892,6 +2899,7 @@ const PT_BR_MESSAGES = {
         rowReorderDisabledEditing: "Conclua a edição antes de reordenar as linhas.",
         rowReorderDisabledFiltered: "Remova os filtros antes de reordenar as linhas.",
         rowReorderDisabledGrouped: "Remova o agrupamento antes de reordenar as linhas.",
+        rowReorderDisabledServerBinding: "A reordenação de linhas não está disponível com vinculação ao servidor.",
         rowReorderDisabledSingleRow: "São necessárias pelo menos duas linhas para reordenar.",
         rowReorderDisabledSorted: "Remova a ordenação antes de reordenar as linhas.",
         rowReorderDisabledVirtualScroll: "A reordenação de linhas não está disponível com a rolagem virtual ativada.",
@@ -2937,8 +2945,8 @@ const PT_BR_MESSAGES = {
     },
     pager: {
         firstPageLabel: "Primeira página",
-        jumpBackwardLabel: (pages) => pages === 1 ? "Retroceder 1 página" : `Retroceder ${pages} páginas`,
-        jumpForwardLabel: (pages) => pages === 1 ? "Avançar 1 página" : `Avançar ${pages} páginas`,
+        jumpBackwardLabel: (pages) => (pages === 1 ? "Retroceder 1 página" : `Retroceder ${pages} páginas`),
+        jumpForwardLabel: (pages) => (pages === 1 ? "Avançar 1 página" : `Avançar ${pages} páginas`),
         lastPageLabel: "Última página",
         nextPageLabel: "Próxima página",
         ofText: "de",
@@ -3270,6 +3278,7 @@ const ZH_CN_MESSAGES = {
         rowReorderDisabledEditing: "请完成编辑后再重新排列行。",
         rowReorderDisabledFiltered: "请清除筛选后再重新排列行。",
         rowReorderDisabledGrouped: "请清除分组后再重新排列行。",
+        rowReorderDisabledServerBinding: "服务器绑定时无法重新排列行。",
         rowReorderDisabledSingleRow: "至少需要两行才能重新排列。",
         rowReorderDisabledSorted: "请清除排序后再重新排列行。",
         rowReorderDisabledVirtualScroll: "启用虚拟滚动时无法重新排列行。",
@@ -3648,6 +3657,7 @@ const ZH_TW_MESSAGES = {
         rowReorderDisabledEditing: "請完成編輯後再重新排列資料列。",
         rowReorderDisabledFiltered: "請清除篩選後再重新排列資料列。",
         rowReorderDisabledGrouped: "請清除群組後再重新排列資料列。",
+        rowReorderDisabledServerBinding: "伺服器繫結時無法重新排列資料列。",
         rowReorderDisabledSingleRow: "至少需要兩個資料列才能重新排序。",
         rowReorderDisabledSorted: "請清除排序後再重新排列資料列。",
         rowReorderDisabledVirtualScroll: "啟用虛擬捲動時無法重新排列資料列。",
@@ -4026,6 +4036,7 @@ const TR_TR_MESSAGES = {
         rowReorderDisabledEditing: "Satırları yeniden sıralamadan önce düzenlemeyi tamamlayın.",
         rowReorderDisabledFiltered: "Satırları yeniden sıralamadan önce filtreleri kaldırın.",
         rowReorderDisabledGrouped: "Satırları yeniden sıralamadan önce gruplamayı kaldırın.",
+        rowReorderDisabledServerBinding: "Sunucu bağlaması etkinken satırlar yeniden sıralanamaz.",
         rowReorderDisabledSingleRow: "Yeniden sıralamak için en az iki satır gerekir.",
         rowReorderDisabledSorted: "Satırları yeniden sıralamadan önce sıralamayı kaldırın.",
         rowReorderDisabledVirtualScroll: "Sanal kaydırma etkinken satırlar yeniden sıralanamaz.",
@@ -4404,6 +4415,7 @@ const ID_ID_MESSAGES = {
         rowReorderDisabledEditing: "Selesaikan pengeditan sebelum menyusun ulang baris.",
         rowReorderDisabledFiltered: "Hapus filter sebelum menyusun ulang baris.",
         rowReorderDisabledGrouped: "Hapus pengelompokan sebelum menyusun ulang baris.",
+        rowReorderDisabledServerBinding: "Baris tidak dapat disusun ulang saat pengikatan server aktif.",
         rowReorderDisabledSingleRow: "Diperlukan setidaknya dua baris untuk menyusun ulang.",
         rowReorderDisabledSorted: "Hapus pengurutan sebelum menyusun ulang baris.",
         rowReorderDisabledVirtualScroll: "Baris tidak dapat disusun ulang saat pengguliran virtual aktif.",
@@ -4811,6 +4823,7 @@ const RU_RU_MESSAGES = {
         rowReorderDisabledEditing: "Завершите редактирование перед изменением порядка строк.",
         rowReorderDisabledFiltered: "Очистите фильтры перед изменением порядка строк.",
         rowReorderDisabledGrouped: "Отмените группировку перед изменением порядка строк.",
+        rowReorderDisabledServerBinding: "Изменение порядка строк недоступно при привязке к серверу.",
         rowReorderDisabledSingleRow: "Для изменения порядка нужны как минимум две строки.",
         rowReorderDisabledSorted: "Сбросьте сортировку перед изменением порядка строк.",
         rowReorderDisabledVirtualScroll: "Нельзя изменять порядок строк при включённой виртуальной прокрутке.",
@@ -4896,7 +4909,7 @@ const RU_RU_MESSAGES = {
     },
     splitButton: {
         menuButtonAriaLabel: "Показать параметры меню",
-        splitButton: (text) => text ? `${text}, разделённая кнопка` : "Разделённая кнопка"
+        splitButton: (text) => (text ? `${text}, разделённая кнопка` : "Разделённая кнопка")
     },
     splitter: {
         collapseDown: "Свернуть нижнюю панель",

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

@@ -5,7 +5,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { none } from '@mirei/ts-collections';
 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 { DropdownService, DropdownFooterTemplateDirective, DropdownGroupHeaderTemplateDirective, DropdownHeaderTemplateDirective, DropdownItemTemplateDirective, dropdownPopupThemeVariants, DropdownNoDataTemplateDirective, DropdownPrefixTemplateDirective, DropdownLiveRegionDirective, DropdownDataInputToken, DROPDOWN_POPUP_INPUT_TOKEN, DropdownDataHandlerDirective, DropdownListPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { 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';
@@ -154,13 +154,13 @@ class MultiSelectComponent {
         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.touched() && (this.invalid() || (this.required() && none(this.value()))), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.indicatorClass = computed(() => {
             const size = this.size();
             return multiSelectIndicatorContainerThemeVariants({ size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "indicatorClass" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && none(this.value()))), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.itemContainerClass = computed(() => {
             const rounded = this.rounded();
             return multiSelectItemContainerThemeVariants({ rounded });
@@ -181,9 +181,6 @@ class MultiSelectComponent {
         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)
@@ -194,6 +191,9 @@ class MultiSelectComponent {
             return this.#listService.selectedListItems();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "selectedListItems" }] : /* istanbul ignore next */ []));
+        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.valueTextMap = computed(() => {
             const tagCount = this.visibleTagCount();
             return this.selectedListItems()
@@ -252,11 +252,6 @@ class MultiSelectComponent {
          */
         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.
@@ -264,6 +259,11 @@ class MultiSelectComponent {
          */
         this.invalid = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalid" }] : /* 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 Sets the loading state of the multi select component.
          * @default false
@@ -351,6 +351,15 @@ class MultiSelectComponent {
          * @default ""
          */
         this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Two-way bindable current selected values. Implements `FormValueControl<Iterable<TValue>>`,
+         * enabling signal forms `[formField]` binding.
+         * Object mode contains selected data items; primitive mode (see {@link valuePrimitive}) contains values
+         * resolved through {@link valueField}. An empty selection is represented by an empty iterable/array.
+         * @default []
+         */
+        this.value = model([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the value field of the multi select component.
          * It is used for stable item identity, matching externally supplied values, and primitive
@@ -373,15 +382,6 @@ class MultiSelectComponent {
          */
         this.valuePrimitive = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "valuePrimitive" }] : /* istanbul ignore next */ []));
-        /**
-         * @description Two-way bindable current selected values. Implements `FormValueControl<Iterable<TValue>>`,
-         * enabling signal forms `[formField]` binding.
-         * Object mode contains selected data items; primitive mode (see {@link valuePrimitive}) contains values
-         * resolved through {@link valueField}. An empty selection is represented by an empty iterable/array.
-         * @default []
-         */
-        this.value = model([], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
         afterNextRender({
             read: () => {
                 this.initialize();
@@ -396,7 +396,7 @@ class MultiSelectComponent {
         effect(() => {
             const valueField = this.valueField();
             const value = this.value();
-            const valuePrimitive = this.valuePrimitive();
+            this.valuePrimitive();
             untracked(() => {
                 this.#listService.setValueField(valueField ?? "");
                 this.synchronizeSelection(value);
@@ -410,7 +410,11 @@ class MultiSelectComponent {
     focus() {
         this.#hostElementRef.nativeElement.focus();
     }
-    onBlur() {
+    onBlur(event) {
+        const popupElement = this.#dropdownService.popupRef()?.overlayRef.overlayElement;
+        if (popupElement && event?.relatedTarget instanceof Node && popupElement.contains(event.relatedTarget)) {
+            return;
+        }
         this.touch.emit();
     }
     onItemSelect() {
@@ -419,14 +423,11 @@ class MultiSelectComponent {
             this.#popupRef()?.close();
         }
     }
-    onSelectedItemRemove(event, listItem) {
-        event.stopImmediatePropagation();
-        if (this.readonly() || this.disabled()) {
-            return;
+    onPopupPointerDown(event) {
+        const target = event.target;
+        if (target?.tagName !== "INPUT") {
+            event.preventDefault();
         }
-        this.#listService.deselectItems([listItem]);
-        this.updateValue(this.getSelectedControlValues());
-        this.focus();
     }
     onSelectedItemGroupRemove(event) {
         event.stopImmediatePropagation();
@@ -441,6 +442,15 @@ class MultiSelectComponent {
         this.updateValue(this.getSelectedControlValues());
         this.focus();
     }
+    onSelectedItemRemove(event, listItem) {
+        event.stopImmediatePropagation();
+        if (this.readonly() || this.disabled()) {
+            return;
+        }
+        this.#listService.deselectItems([listItem]);
+        this.updateValue(this.getSelectedControlValues());
+        this.focus();
+    }
     onValueClear(event) {
         if (this.readonly() || (event instanceof KeyboardEvent && event.key !== "Enter" && event.key !== " ")) {
             return;
@@ -454,9 +464,7 @@ class MultiSelectComponent {
     getSelectedControlValues() {
         return this.selectedListItems()
             .select(item => {
-            const value = this.valuePrimitive()
-                ? this.#listService.getDataItemValue(item.data)
-                : item.data;
+            const value = this.valuePrimitive() ? this.#listService.getDataItemValue(item.data) : item.data;
             return value;
         })
             .toArray();
@@ -535,7 +543,7 @@ class MultiSelectComponent {
         }
     }
     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 }, valuePrimitive: { classPropertyName: "valuePrimitive", publicName: "valuePrimitive", 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.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: { 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: [
             ListService,
             DropdownService,
             MultiSelectService,
@@ -545,11 +553,11 @@ class MultiSelectComponent {
                 multi: false
             },
             {
-                provide: DropdownPopupInputToken,
+                provide: DROPDOWN_POPUP_INPUT_TOKEN,
                 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()\">\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 }], 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
@@ -563,7 +571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                             multi: false
                         },
                         {
-                            provide: DropdownPopupInputToken,
+                            provide: DROPDOWN_POPUP_INPUT_TOKEN,
                             useExisting: forwardRef(() => MultiSelectComponent),
                             multi: false
                         }
@@ -597,10 +605,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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()\">\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" }]
+                    }, 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" }]
         }], 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 }] }], valuePrimitive: [{ type: i0.Input, args: [{ isSignal: true, alias: "valuePrimitive", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+                        }, 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 }] }] } });
 
 class MultiSelectSummaryTagTemplateDirective {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: MultiSelectSummaryTagTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }