@nanahoshi/mona-ui 0.23.3 → 0.24.0

package/fesm2022/nanahoshi-mona-ui-auto-complete.mjs

@@ -16,6 +16,8 @@ import { Subject, filter, debounceTime, identity, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const AUTO_COMPLETE_DEFAULT_MESSAGES = {
     clear: "Clear"
 };

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

@@ -97,6 +97,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const BREADCRUMB_DEFAULT_MESSAGES = {
     breadcrumb: "Breadcrumb"
 };

package/fesm2022/nanahoshi-mona-ui-button-group.mjs

@@ -7,6 +7,8 @@ import { map, pairwise } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const BUTTON_GROUP_DEFAULT_MESSAGES = {
     buttonGroup: "Button group"
 };

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

@@ -14,25 +14,27 @@ import { twMerge } from 'tailwind-merge';
 import { formatNumber, MonaI18nService, injectComponentDirection, gregorianDateTime, formatGregorianDateToLocaleString, getLocaleFirstDayOfWeek, gregorianDateTimeFromObject } from '@nanahoshi/mona-ui/i18n';
 import { cva } from 'class-variance-authority';
 
-function localizeYear(year) {
-    return formatNumber(year, "en-US", { useGrouping: false });
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
 }
 const CALENDAR_DEFAULT_MESSAGES = {
     calendarLabel: (formattedMonthAndYear) => `Calendar, ${formattedMonthAndYear}`,
-    yearViewLabel: (year) => `Year view, ${year}`,
-    decadeViewLabel: (start, end) => `Decade view, ${localizeYear(start)} - ${localizeYear(end)}`,
+    decadeRange: (start, end) => `${localizeNumber(start, { useGrouping: false })} to ${localizeNumber(end, { useGrouping: false })}`,
+    decadeViewLabel: (start, end) => `Decade view, ${localizeNumber(start, { useGrouping: false })} - ${localizeNumber(end, { useGrouping: false })}`,
+    goToToday: (formattedDate) => `Go to today, ${formattedDate}`,
+    nextDecade: "Next decade",
     nextMonth: "Next month",
     nextYear: "Next year",
-    nextDecade: "Next decade",
+    previousDecade: "Previous decade",
     previousMonth: "Previous month",
     previousYear: "Previous year",
-    previousDecade: "Previous decade",
-    today: "Today",
-    goToToday: (formattedDate) => `Go to today, ${formattedDate}`,
-    switchToYearView: (currentMonthAndYear) => `Switch to year view, currently ${currentMonthAndYear}`,
     switchToDecadeView: (currentYear) => `Switch to decade view, currently ${currentYear}`,
-    decadeRange: (start, end) => `${localizeYear(start)} to ${localizeYear(end)}`,
-    yearCellLabel: (year) => `Year ${localizeYear(year)}`
+    switchToYearView: (currentMonthAndYear) => `Switch to year view, currently ${currentMonthAndYear}`,
+    today: "Today",
+    yearCellLabel: (year) => `Year ${localizeNumber(year, { useGrouping: false })}`,
+    yearViewLabel: (year) => `Year view, ${year}`
 };
 
 class CalendarDecadeCellTemplateDirective {

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

@@ -21,6 +21,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const CARD_DEFAULT_MESSAGES = {
     actionsLabel: "Card actions"
 };

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

@@ -53,6 +53,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const CHART_DEFAULT_MESSAGES = {
     change: "Change",
     chart: "Chart",
@@ -61,7 +63,7 @@ const CHART_DEFAULT_MESSAGES = {
     closeAbbreviation: "C",
     colorScale: "Color scale",
     conversion: "Conversion",
-    divergingRangeDescription: (title, min, mid, max) => `${title}, ${min} to ${mid} to ${max}`,
+    divergingRangeDescription: (title, minimum, midpoint, maximum) => `${title}, ${minimum} to ${midpoint} to ${maximum}`,
     dropOff: "Drop-off",
     falling: "Falling",
     high: "High",
@@ -74,7 +76,7 @@ const CHART_DEFAULT_MESSAGES = {
     openAbbreviation: "O",
     overall: "Overall",
     range: "Range",
-    rangeDescription: (title, min, max) => `${title}, ${min} to ${max}`,
+    rangeDescription: (title, minimum, maximum) => `${title}, ${minimum} to ${maximum}`,
     rising: "Rising",
     runningTotal: "Running Total",
     size: "size",

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

@@ -11,6 +11,8 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { themeRaisedSurfaceClasses } from '@nanahoshi/mona-ui/internal';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const CHIP_DEFAULT_MESSAGES = {
     removeLabel: (label) => (label ? `Remove, ${label}` : "Remove, item")
 };

package/fesm2022/nanahoshi-mona-ui-color-gradient.mjs

@@ -14,8 +14,10 @@ import { formatNumber, MonaI18nService } from '@nanahoshi/mona-ui/i18n';
 import { Subject, fromEvent, switchMap, takeUntil, distinctUntilChanged } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
-function localizeNumber(value) {
-    return formatNumber(value, "en-US");
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
 }
 const COLOR_GRADIENT_DEFAULT_MESSAGES = {
     apply: "Apply",
@@ -787,7 +789,7 @@ class ColorGradientComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", 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 }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 me-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <svg lucideChevronsUpDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { 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: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { 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: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorGradientComponent, isStandalone: true, selector: "mona-color-gradient", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, opacity: { classPropertyName: "opacity", publicName: "opacity", 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 }, showButtons: { classPropertyName: "showButtons", publicName: "showButtons", isSignal: true, isRequired: false, transformFunction: null }, showHexInput: { classPropertyName: "showHexInput", publicName: "showHexInput", isSignal: true, isRequired: false, transformFunction: null }, showColorInputs: { classPropertyName: "showColorInputs", publicName: "showColorInputs", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", cancel: "cancel", touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.aria-invalid": "invalidState() ? 'true' : null" } }, viewQueries: [{ propertyName: "hsvHandle", first: true, predicate: ["hsvPointer"], descendants: true, isSignal: true }, { propertyName: "hsvRectangle", first: true, predicate: ["hsvRectangle"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"hsvRectangleClasses()\" [style.background-color]=\"hsvRectangleBackground()\" #hsvRectangle>\n    <div\n        [class]=\"hsvRectangleHandleClasses()\"\n        [style.left.px]=\"hsvHandleLeft()\"\n        [style.top.px]=\"hsvHandleTop()\"\n        [attr.tabindex]=\"disabled() ? -1 : 0\"\n        [attr.role]=\"'slider'\"\n        [attr.aria-label]=\"messages().saturationAndValue\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"messages().saturationAndValueText(hsv().s ?? 0, hsv().v ?? 0)\"\n        [attr.aria-disabled]=\"disabled() || null\"\n        (keydown)=\"onHsvHandleKeyDown($event)\"\n        (blur)=\"onHsvHandleBlur()\"\n        #hsvPointer></div>\n</div>\n<div class=\"flex items-center gap-2\">\n    <div class=\"flex flex-1 flex-col gap-1 me-2\">\n        <mona-slider\n            [minValue]=\"0\"\n            [maxValue]=\"360\"\n            [trackBackground]=\"'linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'\"\n            [selectionBackground]=\"'transparent'\"\n            [handleClasses]=\"sliderHandleClasses()\"\n            [trackSize]=\"sliderHeight\"\n            [rounded]=\"rounded()\"\n            [value]=\"hsv().h ?? 0\"\n            (valueChange)=\"hueValue$.next($event)\"\n            (touch)=\"onSliderBlur()\"></mona-slider>\n        @if (opacity()) {\n            <mona-slider\n                [minValue]=\"0\"\n                [maxValue]=\"255\"\n                [trackBackground]=\"alphaSliderBackground()\"\n                [selectionBackground]=\"'transparent'\"\n                [handleClasses]=\"sliderHandleClasses()\"\n                [trackSize]=\"sliderHeight\"\n                [rounded]=\"rounded()\"\n                [value]=\"alpha()\"\n                (valueChange)=\"onAlphaChange($event)\"\n                (touch)=\"onSliderBlur()\"></mona-slider>\n        }\n    </div>\n    @for (preview of colorPreviews(); track preview.type) {\n        <div\n            [class]=\"colorPreviewClasses()\"\n            [class.cursor-pointer]=\"$index === 1\"\n            [style.background-color]=\"preview.color\"\n            [attr.title]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-label]=\"$index === 1 ? preview.title : null\"\n            [attr.aria-hidden]=\"$index === 0 ? 'true' : null\"\n            [attr.role]=\"$index === 1 ? 'button' : null\"\n            [attr.tabindex]=\"$index === 1 ? 0 : null\"\n            (click)=\"preview.onClick?.()\"\n            (keydown)=\"onPreviousColorKeyDown($event, preview.onClick)\"></div>\n    }\n    <button monaButton look=\"ghost\" size=\"small\" [attr.aria-label]=\"messages().clearColor\" (click)=\"onClearClick()\">\n        <svg lucideDropletOff [size]=\"16\" aria-hidden=\"true\"></svg>\n    </button>\n</div>\n<div class=\"flex flex-col gap-2\">\n    @if (showColorInputs()) {\n        <div class=\"flex gap-2\">\n            <div class=\"flex gap-1\">\n                @for (input of colorInputs(); track input.key) {\n                    <mona-numeric-text-box\n                        [value]=\"input.value\"\n                        [minValue]=\"input.min\"\n                        [maxValue]=\"input.max\"\n                        [decimals]=\"0\"\n                        [spinners]=\"false\"\n                        [nullable]=\"false\"\n                        [rounded]=\"rounded()\"\n                        [size]=\"'small'\"\n                        class=\"w-18\"\n                        (valueChange)=\"input.change($event)\"\n                        (inputBlur)=\"onNumericInputBlur()\">\n                        <ng-template monaNumericTextBoxPrefixTemplate>\n                            <ng-container\n                                [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                                [ngTemplateOutletContext]=\"{ $implicit: input.label }\"></ng-container>\n                        </ng-template>\n                    </mona-numeric-text-box>\n                }\n            </div>\n            <div class=\"flex flex-1 items-center justify-end\">\n                <button\n                    monaButton\n                    look=\"ghost\"\n                    [rounded]=\"rounded()\"\n                    size=\"small\"\n                    [attr.aria-label]=\"messages().switchColorMode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <svg lucideChevronsUpDown [size]=\"16\" aria-hidden=\"true\"></svg>\n                </button>\n            </div>\n        </div>\n    }\n    @if (showHexInput()) {\n        <mona-text-box\n            [rounded]=\"rounded()\"\n            [value]=\"hex()\"\n            (valueChange)=\"onHexChange($event)\"\n            (inputBlur)=\"onHexInputBlur()\"\n            (inputFocus)=\"onHexInputFocus()\"\n            class=\"w-full\">\n            <ng-template monaTextBoxPrefixTemplate>\n                <ng-container\n                    [ngTemplateOutlet]=\"numericInputPrefixTemplate\"\n                    [ngTemplateOutletContext]=\"{ $implicit: 'HEX', classes: 'w-auto px-2' }\"></ng-container>\n            </ng-template>\n            <ng-template monaTextBoxSuffixTemplate>\n                <mona-dropdown-button look=\"ghost\" [attr.aria-label]=\"messages().copyColor\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsHex\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        [label]=\"messages().copyAsRgb\"\n                        (menuClick)=\"onCopyColorSelect('rgb')\"></mona-dropdown-button-item>\n                </mona-dropdown-button>\n            </ng-template>\n        </mona-text-box>\n    }\n    @if (showButtons()) {\n        <div class=\"flex items-center justify-end gap-2\">\n            <button monaButton [rounded]=\"rounded()\" look=\"primary\" (click)=\"onApply()\">{{ messages().apply }}</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n        </div>\n    }\n</div>\n\n<ng-template #numericInputPrefixTemplate let-text let-classes=\"classes\">\n    <span\n        [class]=\"classes\"\n        class=\"inline-flex items-center justify-center select-none w-7.5 [background-color:var(--mona-input-addon-background,var(--color-secondary))] h-full text-foreground text-xs font-semibold border-e border-e-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: LucideDropletOff, selector: "svg[lucideDropletOff]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NumericTextBoxPrefixTemplateDirective, selector: "ng-template[monaNumericTextBoxPrefixTemplate]" }, { 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: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: SliderComponent, selector: "mona-slider", inputs: ["aria-label", "aria-labelledby", "value"], outputs: ["valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DropdownButtonComponent, selector: "mona-dropdown-button", inputs: ["aria-label", "aria-labelledby", "iconOnly", "disabled", "loading", "look", "rounded", "size", "text", "class"], outputs: ["menuItemClick"] }, { kind: "component", type: DropdownButtonItemComponent, selector: "mona-dropdown-button-item" }, { kind: "component", type: LucideCopy, selector: "svg[lucideCopy]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,

package/fesm2022/nanahoshi-mona-ui-color-palette.mjs

@@ -42,6 +42,8 @@ const colorPaletteItemThemeVariants = cva(`
     }
 });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const COLOR_PALETTE_DEFAULT_MESSAGES = {
     color: (color) => `Color ${color}`,
     colorPalette: "Color palette"

package/fesm2022/nanahoshi-mona-ui-color-picker.mjs

@@ -25,6 +25,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const COLOR_PICKER_DEFAULT_MESSAGES = {
     clearColor: "Clear color",
     colorGradientPicker: "Color gradient picker",

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

@@ -16,6 +16,8 @@ import { Subject, fromEvent, filter, debounceTime, take, tap } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const COMBO_BOX_DEFAULT_MESSAGES = {
     clear: "Clear"
 };

package/fesm2022/nanahoshi-mona-ui-date-picker.mjs

@@ -17,6 +17,8 @@ import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const DATE_PICKER_DEFAULT_MESSAGES = {
     datePicker: "Date picker",
     openCalendar: "Open calendar"

package/fesm2022/nanahoshi-mona-ui-datetime-picker.mjs

@@ -20,6 +20,8 @@ import { fromEvent, mergeWith } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const DATETIME_PICKER_DEFAULT_MESSAGES = {
     calendar: "Calendar",
     cancel: "Cancel",

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

@@ -85,6 +85,8 @@ class DialogActionEvent extends PreventableEvent {
     }
 }
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const DIALOG_DEFAULT_MESSAGES = {
     cancel: "Cancel",
     closeDialog: "Close dialog",

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

@@ -23,6 +23,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const DROPDOWN_LIST_DEFAULT_MESSAGES = {
     clear: "Clear"
 };

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

@@ -593,13 +593,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-function localizeNumber(value) {
-    return formatNumber(value, "en-US");
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
 }
 const DROPDOWNS_DEFAULT_MESSAGES = {
     itemPosition: (text, position, total) => `${text}, ${localizeNumber(position)} of ${localizeNumber(total)}`,
     noResultsFound: "No results found",
-    resultsAvailable: (count) => `${localizeNumber(count)} result${count === 1 ? "" : "s"} available`
+    resultsAvailable: (count) => count === 1 ? `${localizeNumber(count)} result available` : `${localizeNumber(count)} results available`
 };
 
 class DropdownLiveRegionDirective {

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

@@ -256,8 +256,10 @@ const Indent = Extension.create({
     }
 });
 
-function localizeNumber(value) {
-    return formatNumber(value, "en-US");
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
+function localizeNumber(value, options) {
+    return formatNumber(value, "en-US", options);
 }
 const EDITOR_DEFAULT_MESSAGES = {
     addColumnAfter: "Add column after",
@@ -1172,7 +1174,7 @@ class EditorImageInserterComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageInserterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorImageInserterComponent, isStandalone: true, selector: "mona-editor-image-inserter", outputs: { cancel: "cancel", insert: "insert" }, ngImport: i0, template: "<form [formRoot]=\"iForm\" [class]=\"formClass()\">\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().imageUrl }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().altText }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.alt\"></mona-text-box>\n    </div>\n    <div class=\"flex gap-2\">\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().widthPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.width\"></mona-numeric-text-box>\n        </div>\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().heightPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.height\"></mona-numeric-text-box>\n        </div>\n    </div>\n    <div [class]=\"actionsClass()\">\n        <button monaButton [size]=\"'small'\" [disabled]=\"!iForm().valid()\" look=\"primary\" (click)=\"onImageInsert()\">\n            {{ messages().insert }}\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n    </div>\n</form>\n", dependencies: [{ kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { 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: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.6", type: EditorImageInserterComponent, isStandalone: true, selector: "mona-editor-image-inserter", outputs: { cancel: "cancel", insert: "insert" }, ngImport: i0, template: "<form [formRoot]=\"iForm\" [class]=\"formClass()\">\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().imageUrl }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.link\"></mona-text-box>\n    </div>\n    <div [class]=\"rowClass()\">\n        <div [class]=\"rowLabelClass()\">{{ messages().altText }}</div>\n        <mona-text-box [size]=\"'small'\" [formField]=\"iForm.alt\"></mona-text-box>\n    </div>\n    <div class=\"flex gap-2\">\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().widthPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.width\"></mona-numeric-text-box>\n        </div>\n        <div [class]=\"rowClass()\">\n            <div [class]=\"rowLabelClass()\">{{ messages().heightPx }}</div>\n            <mona-numeric-text-box [size]=\"'small'\" [formField]=\"iForm.height\"></mona-numeric-text-box>\n        </div>\n    </div>\n    <div [class]=\"actionsClass()\">\n        <button monaButton [size]=\"'small'\" [disabled]=\"!iForm().valid()\" look=\"primary\" (click)=\"onImageInsert()\">\n            {{ messages().insert }}\n        </button>\n        <button monaButton [size]=\"'small'\" [look]=\"'secondary'\" (click)=\"onCancel()\">{{ messages().cancel }}</button>\n    </div>\n</form>\n", dependencies: [{ kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { 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: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditorImageInserterComponent, decorators: [{
             type: Component,

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

@@ -56,6 +56,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
+// Generated from i18n/catalogs/en-US.messages.json by scripts/generate-locale-catalogs.ts. Do not edit.
+// Edit the JSON file and run `npm run generate:locale-catalogs`.
 const FILTER_DEFAULT_MESSAGES = {
     and: "AND",
     apply: "Apply",
@@ -702,7 +704,7 @@ class FilterMenuComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\n    @if (type() === \"string\") {\n        <mona-dropdown-list\n            [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-text-box\n            [ngModel]=\"stringFilterValues()[0]\"\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\n            [size]=\"size()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\n    }\n\n    @if (type() === \"number\") {\n        <mona-dropdown-list\n            [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-numeric-text-box\n            [ngModel]=\"numberFilterValues()[0]\"\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\n    }\n\n    @if (type() === \"date\") {\n        <mona-dropdown-list\n            [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n\n        @if (type() === \"date\") {\n            <mona-date-picker\n                [ngModel]=\"dateFilterValues()[0]\"\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\n                [format]=\"effectiveDateOptions().format\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\n        }\n    }\n\n    @if (type() === \"boolean\") {\n        <mona-dropdown-list\n            [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n    }\n</div>\n@if (firstFilterValid()) {\n    <div [class]=\"filterMenuItemClass()\">\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\n            @for (item of connectorDataItems(); track item.value) {\n                <button\n                    monaButton\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\n                    {{ item.text }}\n                </button>\n            }\n        </mona-button-group>\n    </div>\n}\n@if (!!selectedConnectorItem()) {\n    <div [class]=\"filterMenuItemClass()\">\n        @if (type() === \"string\") {\n            <mona-dropdown-list\n                [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n            <mona-text-box\n                [ngModel]=\"stringFilterValues()[1]\"\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\n        }\n\n        @if (type() === \"number\") {\n            <mona-dropdown-list\n                [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            <mona-numeric-text-box\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"numberFilterValues()[1]\"\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\n        }\n\n        @if (type() === \"date\") {\n            <mona-dropdown-list\n                [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            @if (type() === \"date\") {\n                <mona-date-picker\n                    [ngModel]=\"dateFilterValues()[1]\"\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\n                    [format]=\"effectiveDateOptions().format\"\n                    [size]=\"size()\"\n                    [rounded]=\"rounded()\"\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\n            }\n        }\n\n        @if (type() === \"boolean\") {\n            <mona-dropdown-list\n                [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n        }\n    </div>\n}\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\n    <button\n        monaButton\n        (click)=\"onFilterApply()\"\n        [look]=\"'primary'\"\n        [size]=\"size()\"\n        [rounded]=\"rounded()\"\n        [disabled]=\"applyDisabled()\">\n        {{ messages().apply }}\n    </button>\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">{{ messages().clear }}</button>\n</div>\n", dependencies: [{ 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: "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: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { 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: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { 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: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FilterMenuComponent, isStandalone: true, selector: "mona-filter-menu", inputs: { dateOptions: { classPropertyName: "dateOptions", publicName: "dateOptions", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, operators: { classPropertyName: "operators", publicName: "operators", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", field: "fieldChange", operators: "operatorsChange", type: "typeChange", value: "valueChange" }, host: { properties: { "class": "baseClass()" } }, ngImport: i0, template: "<div [class]=\"filterMenuItemClass()\">\n    @if (type() === \"string\") {\n        <mona-dropdown-list\n            [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-text-box\n            [ngModel]=\"stringFilterValues()[0]\"\n            (ngModelChange)=\"stringFilterValues.set([$event, stringFilterValues()[1]])\"\n            [size]=\"size()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-text-box>\n    }\n\n    @if (type() === \"number\") {\n        <mona-dropdown-list\n            [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n        <mona-numeric-text-box\n            [ngModel]=\"numberFilterValues()[0]\"\n            (ngModelChange)=\"numberFilterValues.set([$event, numberFilterValues()[1]])\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-numeric-text-box>\n    }\n\n    @if (type() === \"date\") {\n        <mona-dropdown-list\n            [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n\n        @if (type() === \"date\") {\n            <mona-date-picker\n                [ngModel]=\"dateFilterValues()[0]\"\n                (ngModelChange)=\"dateFilterValues.set([$event, dateFilterValues()[1]])\"\n                [format]=\"effectiveDateOptions().format\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"selectedFilterMenuDataItemList()[0]?.value | valuelessOperator\"></mona-date-picker>\n        }\n    }\n\n    @if (type() === \"boolean\") {\n        <mona-dropdown-list\n            [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n            textField=\"text\"\n            valueField=\"value\"\n            [ngModel]=\"selectedFilterMenuDataItemList()[0]\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            (ngModelChange)=\"onFilterOperatorChange(0, $event)\"></mona-dropdown-list>\n    }\n</div>\n@if (firstFilterValid()) {\n    <div [class]=\"filterMenuItemClass()\">\n        <mona-button-group selection=\"single\" [size]=\"size()\" [rounded]=\"rounded()\" [disabled]=\"!firstFilterValid()\">\n            @for (item of connectorDataItems(); track item.value) {\n                <button\n                    monaButton\n                    [selected]=\"item.value === selectedConnectorItem()?.value\"\n                    (selectedChange)=\"onConnectorChange(item, $event)\">\n                    {{ item.text }}\n                </button>\n            }\n        </mona-button-group>\n    </div>\n}\n@if (!!selectedConnectorItem()) {\n    <div [class]=\"filterMenuItemClass()\">\n        @if (type() === \"string\") {\n            <mona-dropdown-list\n                [data]=\"stringFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n            <mona-text-box\n                [ngModel]=\"stringFilterValues()[1]\"\n                (ngModelChange)=\"stringFilterValues.set([stringFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-text-box>\n        }\n\n        @if (type() === \"number\") {\n            <mona-dropdown-list\n                [data]=\"numericFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            <mona-numeric-text-box\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"numberFilterValues()[1]\"\n                (ngModelChange)=\"numberFilterValues.set([numberFilterValues()[0], $event])\"\n                [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-numeric-text-box>\n        }\n\n        @if (type() === \"date\") {\n            <mona-dropdown-list\n                [data]=\"dateFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n\n            @if (type() === \"date\") {\n                <mona-date-picker\n                    [ngModel]=\"dateFilterValues()[1]\"\n                    (ngModelChange)=\"dateFilterValues.set([dateFilterValues()[0], $event])\"\n                    [format]=\"effectiveDateOptions().format\"\n                    [size]=\"size()\"\n                    [rounded]=\"rounded()\"\n                    [disabled]=\"selectedFilterMenuDataItemList()[1]?.value | valuelessOperator\"></mona-date-picker>\n            }\n        }\n\n        @if (type() === \"boolean\") {\n            <mona-dropdown-list\n                [data]=\"booleanFilterMenuDataItems() | operatorFilter: operators()\"\n                textField=\"text\"\n                valueField=\"value\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                [ngModel]=\"selectedFilterMenuDataItemList()[1]\"\n                (ngModelChange)=\"onFilterOperatorChange(1, $event)\"></mona-dropdown-list>\n        }\n    </div>\n}\n<div [class]=\"`${filterMenuItemClass()} ${filterMenuActionsClass()}`\">\n    <button\n        monaButton\n        (click)=\"onFilterApply()\"\n        [look]=\"'primary'\"\n        [size]=\"size()\"\n        [rounded]=\"rounded()\"\n        [disabled]=\"applyDisabled()\">\n        {{ messages().apply }}\n    </button>\n    <button monaButton (click)=\"onFilterClear()\" [look]=\"'default'\" [size]=\"size()\" [rounded]=\"rounded()\">{{ messages().clear }}</button>\n</div>\n", dependencies: [{ 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: "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: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { 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: "pipe", type: ValuelessOperatorPipe, name: "valuelessOperator" }, { kind: "pipe", type: OperatorFilterPipe, name: "operatorFilter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,

package/fesm2022/{nanahoshi-mona-ui-grid-grid-footer-row.component-BSVlcB9_.mjs → nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, computed, input, Directive, ChangeDetectionStrategy, Component } from '@angular/core';
-import { a as GridService, v as gridFooterTableCellThemeVariants, w as gridFooterTableRowThemeVariants, m as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DeRc_QcP.mjs';
+import { a as GridService, v as gridFooterTableCellThemeVariants, w as gridFooterTableRowThemeVariants, m as GridLockedCellDirective } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
 import { NgTemplateOutlet } from '@angular/common';
 import { ImmutableDictionary } from '@mirei/ts-collections';
 
@@ -166,4 +166,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { groupKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupKey", required: false }] }] } });
 
 export { GridFooterRowComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-row.component-BSVlcB9_.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-list.component-B2pBOuLa.mjs → nanahoshi-mona-ui-grid-grid-list.component-DxY6bfTX.mjs}

@@ -5,9 +5,9 @@ import { inject, DestroyRef, ElementRef, viewChild, computed, input, afterNextRe
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ImmutableList } from '@mirei/ts-collections';
 import { fromEvent } from 'rxjs';
-import { G as GridNavigationService, g as gridListBaseThemeVariants, a as GridService, b as gridRowDragPreviewThemeVariants, c as gridListTableThemeVariants, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DeRc_QcP.mjs';
-import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-Buf4evf5.mjs';
-import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component-BSVlcB9_.mjs';
+import { G as GridNavigationService, g as gridListBaseThemeVariants, a as GridService, b as gridRowDragPreviewThemeVariants, c as gridListTableThemeVariants, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
+import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs';
+import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs';
 
 const ROW_MOVE_DURATION = 200;
 const ROW_MOVE_EASING = "cubic-bezier(0.2, 0, 0, 1)";
@@ -173,4 +173,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 export { GridListComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-B2pBOuLa.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-list.component-DxY6bfTX.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-row.component-Buf4evf5.mjs → nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs}

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { inject, computed, input, Directive, Component, signal, ElementRef, viewChild, output, effect, untracked, afterNextRender, ChangeDetectionStrategy, model, Injector, LOCALE_ID } from '@angular/core';
-import { a as GridService, i as gridListTableCellThemeVariants, j as gridCellEditorBaseThemeVariants, k as gridCellEditorInputThemeVariants, l as gridListTableRowThemeVariants, m as GridLockedCellDirective, n as GridLogicalCellDirective, o as gridGroupRowThemeVariants, G as GridNavigationService, p as gridCellBaseThemeVariants, q as gridCellContainerThemeVariants, r as gridCellDirtyIndicatorThemeVariants, s as gridCellTextThemeVariants, t as gridRowReorderHandleThemeVariants, u as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DeRc_QcP.mjs';
+import { a as GridService, i as gridListTableCellThemeVariants, j as gridCellEditorBaseThemeVariants, k as gridCellEditorInputThemeVariants, l as gridListTableRowThemeVariants, m as GridLockedCellDirective, n as GridLogicalCellDirective, o as gridGroupRowThemeVariants, G as GridNavigationService, p as gridCellBaseThemeVariants, q as gridCellContainerThemeVariants, r as gridCellDirtyIndicatorThemeVariants, s as gridCellTextThemeVariants, t as gridRowReorderHandleThemeVariants, u as gridSelectionCellThemeVariants } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
 import { NgTemplateOutlet, formatDate } from '@angular/common';
 import { ContextMenuComponent } from '@nanahoshi/mona-ui/contextmenu';
 import { twMerge } from 'tailwind-merge';
@@ -380,7 +380,7 @@ class GridEditorComponent {
         this.formField()().value.set(value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridEditorComponent, isStandalone: true, selector: "mona-grid-editor", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: true, transformFunction: null }, tabNavigationEnabled: { classPropertyName: "tabNavigationEnabled", publicName: "tabNavigationEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEdit: "cancelEdit", commit: "commit", tabNavigate: "tabNavigate" }, host: { listeners: { "keydown": "onHostKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "numericTextBoxRef", first: true, predicate: NumericTextBoxComponent, descendants: true, isSignal: true }, { propertyName: "textBoxRef", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (column().editTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().editTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\n} @else {\n    <div class=\"relative flex items-center w-full min-h-8\">\n        @switch (column().dataType) {\n            @case (\"string\") {\n                <mona-text-box\n                    [class]=\"editorInputClass()\"\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-text-box>\n            }\n            @case (\"number\") {\n                <mona-numeric-text-box\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-numeric-text-box>\n            }\n            @case (\"boolean\") {\n                <mona-check-box\n                    class=\"{{ editorInputClass() }} ms-2\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (click)=\"onBooleanEditorClick()\"\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\n            }\n            @case (\"date\") {\n                <mona-date-picker\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (focusout)=\"onDatePickerFocusOut($event)\"\n                    (opened)=\"onDatePickerOpen()\"\n                    (closed)=\"onDatePickerClose()\"\n                    size=\"small\"></mona-date-picker>\n            }\n        }\n        @if (hasFieldError()) {\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\n            </span>\n            <mona-tooltip [target]=\"fieldErrorIcon\">\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\n            </mona-tooltip>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: GridEditorComponent, isStandalone: true, selector: "mona-grid-editor", inputs: { autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: true, transformFunction: null }, isNew: { classPropertyName: "isNew", publicName: "isNew", isSignal: true, isRequired: false, transformFunction: null }, session: { classPropertyName: "session", publicName: "session", isSignal: true, isRequired: true, transformFunction: null }, tabNavigationEnabled: { classPropertyName: "tabNavigationEnabled", publicName: "tabNavigationEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cancelEdit: "cancelEdit", commit: "commit", tabNavigate: "tabNavigate" }, host: { listeners: { "keydown": "onHostKeydown($event)" }, properties: { "class": "baseClass()" } }, viewQueries: [{ propertyName: "numericTextBoxRef", first: true, predicate: NumericTextBoxComponent, descendants: true, isSignal: true }, { propertyName: "textBoxRef", first: true, predicate: TextBoxComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (column().editTemplate) {\n    <ng-container\n        [ngTemplateOutlet]=\"column().editTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: editTemplateContext() }\"></ng-container>\n} @else {\n    <div class=\"relative flex items-center w-full min-h-8\">\n        @switch (column().dataType) {\n            @case (\"string\") {\n                <mona-text-box\n                    [class]=\"editorInputClass()\"\n                    [inputAttributes]=\"{ autocomplete: 'off' }\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-text-box>\n            }\n            @case (\"number\") {\n                <mona-numeric-text-box\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"commit.emit()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (inputBlur)=\"commit.emit()\"\n                    [size]=\"'small'\"></mona-numeric-text-box>\n            }\n            @case (\"boolean\") {\n                <mona-check-box\n                    class=\"{{ editorInputClass() }} ms-2\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (click)=\"onBooleanEditorClick()\"\n                    (focusout)=\"onBooleanEditorFocusOut($event)\"\n                    (pointerdown)=\"onBooleanEditorPointerDown()\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (keydown.enter)=\"commit.emit()\"></mona-check-box>\n            }\n            @case (\"date\") {\n                <mona-date-picker\n                    [class]=\"editorInputClass()\"\n                    [rounded]=\"'none'\"\n                    [formField]=\"$any(formField())\"\n                    (keydown.enter)=\"onDatePickerEnter($event)\"\n                    (keydown.escape)=\"onEditCancel()\"\n                    (focusout)=\"onDatePickerFocusOut($event)\"\n                    (opened)=\"onDatePickerOpen()\"\n                    (closed)=\"onDatePickerClose()\"\n                    size=\"small\"></mona-date-picker>\n            }\n        }\n        @if (hasFieldError()) {\n            <span class=\"shrink-0 px-1 text-error\" #fieldErrorIcon>\n                <svg lucideOctagonAlert [size]=\"12\"></svg>\n            </span>\n            <mona-tooltip [target]=\"fieldErrorIcon\">\n                <span class=\"p-1\">{{ fieldErrorMessage() }}</span>\n            </mona-tooltip>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: CheckBoxComponent, selector: "mona-check-box", inputs: ["checked", "disabled", "indeterminate", "invalid", "label", "labelPosition", "labelSize", "required", "rounded", "tabIndex", "touched", "class"], outputs: ["checkedChange", "inputBlur", "inputChange", "inputFocus", "touch"] }, { kind: "component", type: DatePickerComponent, selector: "mona-date-picker", inputs: ["disabled", "disabledDates", "firstDay", "format", "invalid", "max", "min", "placeholder", "popupClass", "popupHeight", "popupWidth", "readonly", "readonlyInput", "required", "rounded", "showClearButton", "size", "touched", "class", "value", "weekNumber"], outputs: ["close", "closed", "open", "opened", "touch", "valueChange"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: LucideOctagonAlert, selector: "svg[lucideOctagonAlert], svg[lucideAlertOctagon]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["formatter", "maxValue", "minValue", "step", "value"], outputs: ["valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "component", type: TooltipComponent, selector: "mona-tooltip", inputs: ["disabled", "hideDelay", "position", "rounded", "showDelay", "target"], outputs: ["hidden", "shown"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: GridEditorComponent, decorators: [{
             type: Component,
@@ -943,4 +943,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], propDecorators: { index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }] } });
 
 export { GridAddRowComponent as G, GridDetailRowComponent as a, GridGroupRowComponent as b, GridRowComponent as c };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-row.component-Buf4evf5.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs.map

package/fesm2022/{nanahoshi-mona-ui-grid-grid-virtual-list.component-1RdqLEa9.mjs → nanahoshi-mona-ui-grid-grid-virtual-list.component-jNYtqg5B.mjs}

@@ -1,4 +1,4 @@
-import { G as GridNavigationService, a as GridService, g as gridListBaseThemeVariants, e as gridFooterThemeVariants, f as gridFooterTableThemeVariants, c as gridListTableThemeVariants, h as GRID_DEFAULT_VIRTUAL_ROW_HEIGHT, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-DeRc_QcP.mjs';
+import { G as GridNavigationService, a as GridService, g as gridListBaseThemeVariants, e as gridFooterThemeVariants, f as gridFooterTableThemeVariants, c as gridListTableThemeVariants, h as GRID_DEFAULT_VIRTUAL_ROW_HEIGHT, d as GridColgroupComponent } from './nanahoshi-mona-ui-grid-nanahoshi-mona-ui-grid-9FtfCutf.mjs';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
 import { inject, DestroyRef, ElementRef, Injector, viewChild, computed, input, effect, untracked, afterNextRender, ChangeDetectionStrategy, Component } from '@angular/core';
@@ -6,8 +6,8 @@ import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ImmutableList } from '@mirei/ts-collections';
 import { rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { fromEvent } from 'rxjs';
-import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-Buf4evf5.mjs';
-import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component-BSVlcB9_.mjs';
+import { G as GridAddRowComponent, a as GridDetailRowComponent, b as GridGroupRowComponent, c as GridRowComponent } from './nanahoshi-mona-ui-grid-grid-row.component-CaO5Lae6.mjs';
+import { GridFooterRowComponent } from './nanahoshi-mona-ui-grid-grid-footer-row.component-CnPhVIr4.mjs';
 
 class GridVirtualListComponent {
     #destroyRef;
@@ -170,4 +170,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }], ctorParameters: () => [], propDecorators: { addRowScrollElementRef: [{ type: i0.ViewChild, args: ["addRowScrollElement", { isSignal: true }] }], bodyTableElementRef: [{ type: i0.ViewChild, args: ["bodyTable", { isSignal: true }] }], footerScrollElementRef: [{ type: i0.ViewChild, args: ["footerScrollElement", { isSignal: true }] }], viewport: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkVirtualScrollViewport), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
 
 export { GridVirtualListComponent };
-//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-1RdqLEa9.mjs.map
+//# sourceMappingURL=nanahoshi-mona-ui-grid-grid-virtual-list.component-jNYtqg5B.mjs.map