@nanahoshi/mona-ui 0.19.0 → 0.20.1

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 }); }

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

@@ -8,9 +8,9 @@ import { range } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, SlicePipe } from '@nanahoshi/mona-ui/common';
 import { DropdownListComponent, DropdownListValueTemplateDirective } from '@nanahoshi/mona-ui/dropdown-list';
-import { DropdownVirtualScrollDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownVirtualScrollDirective, DropdownItemTemplateDirective } from '@nanahoshi/mona-ui/dropdowns';
 import { themeRaisedBackdropClasses, NavigationKeys } from '@nanahoshi/mona-ui/internal';
-import { injectComponentDirection, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
+import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { NumericTextBoxComponent } from '@nanahoshi/mona-ui/numeric-text-box';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -469,6 +469,15 @@ class PagerComponent {
         });
         inject(DestroyRef).onDestroy(() => this.#widthObserver?.disconnect());
     }
+    formatPageNumber(value) {
+        if (value == null) {
+            return "";
+        }
+        return formatNumber(value, this.#i18n.localeId(), {
+            maximumFractionDigits: 0,
+            useGrouping: false
+        });
+    }
     onJumpNextClick() {
         const page = Math.min(this.page() + this.visiblePages(), this.pageCount());
         this.setPage(page);
@@ -654,28 +663,28 @@ class PagerComponent {
         const pages = [];
         if (maxPages <= 5) {
             for (index = 1; index <= maxPages; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
         }
         else if (currentPage < visiblePages) {
-            pages.push({ page: first, text: first.toString() });
+            pages.push({ page: first, text: this.formatPageNumber(first) });
             for (index = 2; index < (maxPages < visiblePages ? maxPages : visiblePages) + 1; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
-            pages.push({ page: maxPages, text: maxPages.toString() });
+            pages.push({ page: maxPages, text: this.formatPageNumber(maxPages) });
         }
         else if (currentPage >= visiblePages && currentPage <= maxPages - visiblePages) {
-            pages.push({ page: first, text: first.toString() });
+            pages.push({ page: first, text: this.formatPageNumber(first) });
             for (index = currentPage - half; index < currentPage + visiblePages - half; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
-            pages.push({ page: maxPages, text: maxPages.toString() });
+            pages.push({ page: maxPages, text: this.formatPageNumber(maxPages) });
         }
         else if (currentPage >= maxPages - visiblePages) {
-            pages.push({ page: first, text: first.toString() });
+            pages.push({ page: first, text: this.formatPageNumber(first) });
             index = maxPages - visiblePages < currentPage ? maxPages - visiblePages : currentPage;
             for (; index <= maxPages; index++) {
-                pages.push({ page: index, text: index.toString() });
+                pages.push({ page: index, text: this.formatPageNumber(index) });
             }
         }
         return pages;
@@ -727,7 +736,7 @@ class PagerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            1\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                 <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>{{ messages().pageText }}</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>{{ messages().ofText }}</span>\n                    <span>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "itemDisabled", "invalid", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "valueField", "valuePrimitive", "value"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: PagerComponent, isStandalone: true, selector: "mona-pager", inputs: { firstLast: { classPropertyName: "firstLast", publicName: "firstLast", isSignal: true, isRequired: false, transformFunction: null }, navigable: { classPropertyName: "navigable", publicName: "navigable", isSignal: true, isRequired: false, transformFunction: null }, pageInput: { classPropertyName: "pageInput", publicName: "pageInput", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeValues: { classPropertyName: "pageSizeValues", publicName: "pageSizeValues", isSignal: true, isRequired: false, transformFunction: null }, previousNext: { classPropertyName: "previousNext", publicName: "previousNext", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showInfo: { classPropertyName: "showInfo", publicName: "showInfo", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, skip: { classPropertyName: "skip", publicName: "skip", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, userClasses: { classPropertyName: "userClasses", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, visiblePages: { classPropertyName: "visiblePages", publicName: "visiblePages", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "attr.tabindex": "navigable() ? 0 : null", "class": "baseClasses()" } }, queries: [{ propertyName: "navigationButtonsTemplateList", predicate: PagerNavigationButtonsTemplateDirective, isSignal: true }, { propertyName: "numericButtonsTemplate", first: true, predicate: PagerNumericButtonsTemplateDirective, descendants: true, isSignal: true }, { propertyName: "pageSizeTemplate", first: true, predicate: PagerPageSizeTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "pagerInfoTemplate", first: true, predicate: PagerInfoTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "pageSizeDropdownList", first: true, predicate: ["pageSizeDropdownList"], descendants: true, isSignal: true }], ngImport: i0, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            {{ formatPageNumber(1) }}\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ formatPageNumber(pageCount()) }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                 <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                            <ng-template monaDropDownItemTemplate let-item>\n                                 <span>{{ formatPageNumber(item) }}</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>{{ messages().pageText }}</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>{{ messages().ofText }}</span>\n                    <span>{{ formatPageNumber(pageCount()) }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\">\n                    <ng-template monaDropDownListValueTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                    <ng-template monaDropDownItemTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                </mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "invalid", "maxValue", "minValue", "nullable", "readonly", "required", "rounded", "size", "spinners", "step", "tabindex", "touched", "class", "value"], outputs: ["inputBlur", "inputFocus", "inputFocusOut", "touch", "valueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DropdownListComponent, selector: "mona-dropdown-list", inputs: ["aria-label", "aria-labelledby", "data", "disabled", "invalid", "itemDisabled", "loading", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "required", "rounded", "showClearButton", "size", "textField", "touched", "class", "value", "valueField", "valuePrimitive"], outputs: ["close", "closed", "disabledChange", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: PagerFocusableDirective, selector: "[monaPagerFocusable]" }, { kind: "directive", type: DropdownVirtualScrollDirective, selector: "        mona-auto-complete[monaDropDownVirtualScroll],        mona-dropdown-list[monaDropDownVirtualScroll],        mona-combo-box[monaDropDownVirtualScroll],        mona-multi-select[monaDropDownVirtualScroll]    ", inputs: ["monaDropDownVirtualScroll"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownListValueTemplateDirective, selector: "ng-template[monaDropDownListValueTemplate]" }, { kind: "directive", type: DropdownItemTemplateDirective, selector: "        ng-template[monaDropDownItemTemplate],        ng-template[monaAutoCompleteItemTemplate],        ng-template[monaDropDownListItemTemplate],        ng-template[monaComboBoxItemTemplate],        ng-template[monaMultiSelectItemTemplate]    " }, { kind: "component", type: LucideEllipsis, selector: "svg[lucideEllipsis], svg[lucideMoreHorizontal]" }, { kind: "component", type: LucideChevronsLeft, selector: "svg[lucideChevronsLeft]" }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: LucideChevronsRight, selector: "svg[lucideChevronsRight]" }, { kind: "pipe", type: SlicePipe, name: "monaSlice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PagerComponent, decorators: [{
             type: Component,
@@ -741,6 +750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         DropdownVirtualScrollDirective,
                         NgTemplateOutlet,
                         DropdownListValueTemplateDirective,
+                        DropdownItemTemplateDirective,
                         LucideEllipsis,
                         LucideChevronsLeft,
                         LucideChevronLeft,
@@ -750,7 +760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.tabindex]": "navigable() ? 0 : null",
                         "[class]": "baseClasses()",
                         "(keydown)": "onKeydown($event)"
-                    }, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            1\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ pageCount() }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                 <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>{{ messages().pageText }}</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>{{ messages().ofText }}</span>\n                    <span>{{ pageCount() }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\"></mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n" }]
+                    }, template: "@let numericButtonsTemplateRef = numericButtonsTemplate()?.templateRef;\n@let pageSizeTemplateRef = pageSizeTemplate();\n@let pagerInfoTemplateRef = pagerInfoTemplate()?.templateRef;\n\n@if (type() === \"numeric\") {\n    @if (pageListVisible()) {\n        <ol [class]=\"listClasses()\">\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n            }\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n            }\n\n            @if (numericButtonsTemplateRef) {\n                <ng-container\n                    [ngTemplateOutlet]=\"numericButtonsTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ totalPages: pageCount() }\"></ng-container>\n            } @else {\n                @if (pages().length !== 0) {\n                    <li [class]=\"pageItemClasses(page() === 1)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === 1\"\n                            [attr.aria-label]=\"messages().pageLabel(1)\"\n                            [attr.aria-current]=\"page() === 1 ? 'page' : null\"\n                            (click)=\"onPageClick(1)\">\n                            {{ formatPageNumber(1) }}\n                        </button>\n                    </li>\n                }\n                @if (previousJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpPreviousLabel()\"\n                            (click)=\"onJumpPreviousClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @for (pageItem of pages() | monaSlice: 1 : pages().length - 1; track $index) {\n                    <li [attr.data-page]=\"pageItem.page\" [class]=\"pageItemClasses(page() === pageItem.page)\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageItem.page\"\n                            [attr.aria-label]=\"messages().pageLabel(pageItem.page)\"\n                            [attr.aria-current]=\"page() === pageItem.page ? 'page' : null\"\n                            (click)=\"onPageClick(pageItem.page)\">\n                            {{ pageItem.text }}\n                        </button>\n                    </li>\n                }\n\n                @if (nextJumperVisible()) {\n                    <li>\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [attr.aria-label]=\"jumpNextLabel()\"\n                            (click)=\"onJumpNextClick()\">\n                            <svg lucideEllipsis [size]=\"iconSize()\"></svg>\n                        </button>\n                    </li>\n                }\n\n                @if (pages().length > 1) {\n                    <li [class]=\"pageItemClasses(page() === pageCount())\">\n                        <button\n                            monaPagerFocusable\n                            monaButton\n                            look=\"ghost\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            [selected]=\"page() === pageCount()\"\n                            [attr.aria-label]=\"messages().pageLabel(pageCount())\"\n                            [attr.aria-current]=\"page() === pageCount() ? 'page' : null\"\n                            (click)=\"onPageClick(pageCount())\">\n                            {{ formatPageNumber(pageCount()) }}\n                        </button>\n                    </li>\n                }\n            }\n\n            @if (previousNext()) {\n                <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n            }\n\n            @if (firstLast()) {\n                <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n            }\n\n            @if (pageInputVisible() && pageInput()) {\n                <li>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                </li>\n            }\n\n            @if (pageInputVisible() && pageSizeDropdownData().length > 0) {\n                <li>\n                    @if (pageSizeTemplateRef) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"pageSizeTemplateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: pageSizeDropdownData() }\">\n                        </ng-container>\n                    } @else {\n                        <mona-dropdown-list\n                            monaPagerFocusable\n                            [data]=\"pageSizeDropdownData()\"\n                            [ngModel]=\"pageSize()\"\n                            [rounded]=\"rounded()\"\n                            [size]=\"size()\"\n                            (ngModelChange)=\"onPageSizeValueChange($event)\"\n                            #pageSizeDropdownList>\n                            <ng-template monaDropDownListValueTemplate let-item>\n                                 <span>{{ messages().pageSizeLabel(item) }}</span>\n                            </ng-template>\n                            <ng-template monaDropDownItemTemplate let-item>\n                                 <span>{{ formatPageNumber(item) }}</span>\n                            </ng-template>\n                        </mona-dropdown-list>\n                    }\n                </li>\n            }\n        </ol>\n    }\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (type() === \"input\") {\n    <div [class]=\"inputClasses()\">\n        @if (pageListVisible()) {\n            <ol [class]=\"listClasses()\">\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n                }\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n                }\n                <li class=\"flex items-center gap-2 mx-2\">\n                    <span>{{ messages().pageText }}</span>\n                    <mona-numeric-text-box\n                        monaPagerFocusable\n                        [spinners]=\"false\"\n                        [minValue]=\"1\"\n                        [maxValue]=\"pageCount()\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"size()\"\n                        [aria-label]=\"messages().pageStatus(page(), pageCount())\"\n                        [ngModel]=\"inputValue()\"\n                        (ngModelChange)=\"inputValue.set($event)\"\n                        (inputBlur)=\"onPageInputBlur()\"></mona-numeric-text-box>\n                    <span>{{ messages().ofText }}</span>\n                    <span>{{ formatPageNumber(pageCount()) }}</span>\n                </li>\n                @if (previousNext()) {\n                    <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n                }\n                @if (firstLast()) {\n                    <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n                }\n            </ol>\n        }\n    </div>\n    @if (infoVisible()) {\n        @if (pagerInfoTemplateRef) {\n            <ng-container\n                [ngTemplateOutlet]=\"pagerInfoTemplateRef\"\n                [ngTemplateOutletContext]=\"pagerInfoTemplateContext()\"></ng-container>\n        } @else {\n            <span [class]=\"infoClasses()\">{{ pagerInfo() }}</span>\n        }\n    }\n}\n@if (!pageListVisible()) {\n    <ol [class]=\"listClasses()\">\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"firstPageButton\"></ng-container>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"previousPageButton\"></ng-container>\n        }\n        @if (pageCount() !== 0) {\n            <li>\n                <mona-dropdown-list\n                    monaPagerFocusable\n                    [data]=\"pageList()\"\n                    [ngModel]=\"page()\"\n                    [rounded]=\"rounded()\"\n                    [size]=\"size()\"\n                    monaDropDownVirtualScroll\n                    (ngModelChange)=\"onPageClick($event)\"\n                    style=\"width: 75px\">\n                    <ng-template monaDropDownListValueTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                    <ng-template monaDropDownItemTemplate let-item>\n                        <span>{{ formatPageNumber(item) }}</span>\n                    </ng-template>\n                </mona-dropdown-list>\n            </li>\n        }\n        @if (previousNext()) {\n            <ng-container [ngTemplateOutlet]=\"nextPageButton\"></ng-container>\n        }\n        @if (firstLast()) {\n            <ng-container [ngTemplateOutlet]=\"lastPageButton\"></ng-container>\n        }\n    </ol>\n}\n\n<ng-template #firstPageButton>\n    <li>\n        @let firstPageTemplate = firstPageNavigationTemplate();\n        @if (firstPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"firstPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().firstPageLabel\"\n                (click)=\"onPageClick(1)\"\n                [disabled]=\"page() === 1\">\n                <svg lucideChevronsLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #previousPageButton>\n    <li>\n        @let previousPageTemplate = previousPageNavigationTemplate();\n        @if (previousPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"previousPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() <= 1\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() <= 1\"\n                [attr.aria-label]=\"messages().previousPageLabel\"\n                (click)=\"onPreviousPageClick()\">\n                <svg lucideChevronLeft class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #nextPageButton>\n    <li>\n        @let nextPageTemplate = nextPageNavigationTemplate();\n        @if (nextPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"nextPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() < 1 || page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [disabled]=\"page() < 1 || page() === pageCount()\"\n                [attr.aria-label]=\"messages().nextPageLabel\"\n                (click)=\"onNextPageClick()\">\n                <svg lucideChevronRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n\n<ng-template #lastPageButton>\n    <li>\n        @let lastPageTemplate = lastPageNavigationTemplate();\n        @if (lastPageTemplate) {\n            <ng-container\n                [ngTemplateOutlet]=\"lastPageTemplate.templateRef\"\n                [ngTemplateOutletContext]=\"{\n                    totalPages: pageCount(),\n                    pageSize: pagerPageSize(),\n                    disabled: page() === pageCount()\n                }\">\n            </ng-container>\n        } @else {\n            <button\n                monaPagerFocusable\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                [attr.aria-label]=\"messages().lastPageLabel\"\n                (click)=\"onPageClick(pageCount())\"\n                [disabled]=\"page() === pageCount()\">\n                <svg lucideChevronsRight class=\"rtl:rotate-180\" [size]=\"iconSize()\"></svg>\n            </button>\n        }\n    </li>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { navigationButtonsTemplateList: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PagerNavigationButtonsTemplateDirective), { isSignal: true }] }], numericButtonsTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerNumericButtonsTemplateDirective), { isSignal: true }] }], pageSizeDropdownList: [{ type: i0.ViewChild, args: ["pageSizeDropdownList", { isSignal: true }] }], pageSizeTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerPageSizeTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], pagerInfoTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PagerInfoTemplateDirective), { isSignal: true }] }], firstLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstLast", required: false }] }], navigable: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigable", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageInput", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], pageSizeValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeValues", required: false }] }], previousNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousNext", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInfo", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], skip: [{ type: i0.Input, args: [{ isSignal: true, alias: "skip", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], userClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], visiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "visiblePages", required: false }] }] } });
 
 /*

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

@@ -46,7 +46,7 @@ const sheetHeaderVariants = cva(`flex shrink-0 items-start gap-3 p-4`);
 const sheetTitleVariants = cva(`text-lg font-semibold leading-none tracking-tight`);
 const sheetDescriptionVariants = cva(`mt-1.5 text-sm text-muted-foreground`);
 const sheetContentVariants = cva(`
-        min-w-0 min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 pb-4
+        min-w-0 min-h-0 flex-1 overflow-y-auto overscroll-contain
         [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
     `);
 /** 2.75rem keeps the close button at the WCAG 2.5.5 minimum target size. */