@nanahoshi/mona-ui 0.6.1 → 0.7.1

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

@@ -382,6 +382,13 @@ class ButtonDirective {
          * @default 0
          */
         this.tabindex = input(0, { ...(ngDevMode ? { debugName: "tabindex" } : /* istanbul ignore next */ {}), transform: (value) => (typeof value === "string" ? parseInt(value, 10) : value) });
+        /**
+         * @description Native `type` attribute of the button. Defaults to `"button"` to prevent accidental
+         * form submission; set to `"submit"` or `"reset"` explicitly when that behavior is intended.
+         * @default "button"
+         */
+        this.type = input("button", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
         /**
          * @description Enables toggle behavior — each click flips the `selected` state and `aria-pressed` is managed.
          * Must use `[toggleable]="true"` binding syntax, not bare attribute form.
@@ -464,7 +471,7 @@ class ButtonDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", loading: "loadingChange", look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "displaysPressedState() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() || loading() ? '' : undefined", "attr.tabindex": "effectiveDisabled() || loading() ? -1 : tabindex()", "attr.type": "'button'", "class": "baseClass()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ButtonDirective, isStandalone: true, selector: "button[monaButton]", inputs: { ariaHasPopup: { classPropertyName: "ariaHasPopup", publicName: "aria-haspopup", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", loading: "loadingChange", look: "lookChange", selected: "selectedChange" }, host: { properties: { "attr.aria-busy": "loading() ? 'true' : undefined", "attr.aria-disabled": "effectiveDisabled() || loading() ? 'true' : undefined", "attr.aria-haspopup": "ariaHasPopup() !== 'false' ? ariaHasPopup() : null", "attr.aria-pressed": "displaysPressedState() ? (selected() ? 'true' : 'false') : undefined", "attr.data-look": "effectiveLook()", "attr.data-size": "effectiveSize()", "attr.disabled": "effectiveDisabled() || loading() ? '' : undefined", "attr.tabindex": "effectiveDisabled() || loading() ? -1 : tabindex()", "attr.type": "type()", "class": "baseClass()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
@@ -479,11 +486,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-size]": "effectiveSize()",
                         "[attr.disabled]": "effectiveDisabled() || loading() ? '' : undefined",
                         "[attr.tabindex]": "effectiveDisabled() || loading() ? -1 : tabindex()",
-                        "[attr.type]": "'button'",
+                        "[attr.type]": "type()",
                         "[class]": "baseClass()"
                     }
                 }]
-        }], ctorParameters: () => [], propDecorators: { ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-haspopup", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { ariaHasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-haspopup", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }, { type: i0.Output, args: ["lookChange"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], toggleable: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleable", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/button

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

@@ -1436,7 +1436,7 @@ class CalendarComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>Today</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.short) {\n            <div>{{ day.short }}</div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = firstEntry.key | date: \"w\";\n                    <div>{{ week }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ entry.value }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ year }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CalendarComponent, isStandalone: true, selector: "mona-calendar", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledDates: { classPropertyName: "disabledDates", publicName: "disabledDates", isSignal: true, isRequired: false, transformFunction: null }, firstDay: { classPropertyName: "firstDay", publicName: "firstDay", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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 }, weekNumber: { classPropertyName: "weekNumber", publicName: "weekNumber", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touch: "touch", value: "valueChange" }, host: { attributes: { "role": "application" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || null", "attr.data-required": "required() || null", "attr.tabindex": "disabled() ? -1 : 0", "class": "baseClass()" } }, queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onTodayButtonClick()\"\n        [attr.aria-label]=\"todayButtonLabel()\">\n        <span>Today</span>\n    </button>\n    @switch (calendarView()) {\n        @case (\"month\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('year')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"year\") {\n            <button\n                monaButton\n                look=\"ghost\"\n                [rounded]=\"rounded()\"\n                (click)=\"onViewChangeClick('decade')\"\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\n                    navigatedDate() | date: \"yyyy\" : timezone\n                }}</span>\n            </button>\n        }\n        @case (\"decade\") {\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\n                >\n            </button>\n        }\n    }\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('prev')\"\n        [attr.aria-label]=\"prevButtonLabel()\">\n        <svg lucideChevronLeft></svg>\n    </button>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        (click)=\"onNavigationClick('next')\"\n        [attr.aria-label]=\"nextButtonLabel()\">\n        <svg lucideChevronRight></svg>\n    </button>\n</div>\n\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\n\n@if (calendarView() === \"month\") {\n    @let columnCount = weekNumber() ? 8 : 7;\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @if (weekNumber()) {\n            <div></div>\n        }\n        @for (day of weekdays(); track day.short) {\n            <div>{{ day.short }}</div>\n        }\n    </div>\n    <div\n        [class]=\"monthGridClass()\"\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\n        (pointerleave)=\"onMonthGridPointerLeave()\"\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\n        @for (row of monthDictChunked(); track $index) {\n            @if (weekNumber()) {\n                @let firstEntry = row | monaTakeFirst;\n                @if (firstEntry) {\n                    @let week = firstEntry.key | date: \"w\";\n                    <div>{{ week }}</div>\n                }\n            }\n            @for (entry of row; track entry.key) {\n                <div\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\n                    monaMonthDay\n                    [disabled]=\"disabled()\"\n                    [disabledDates]=\"disabledDates()\"\n                    [min]=\"minDate()\"\n                    [max]=\"maxDate()\"\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rangePreview]=\"rangePreviewDates()\"\n                    [rounded]=\"rounded()\"\n                    [value]=\"selectedDates()\"\n                    [entry]=\"entry\">\n                    @if (monthCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\n                    } @else {\n                        <span>{{ entry.value }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"year\") {\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of months(); track $index) {\n            @for (monthItem of row; track monthItem) {\n                <div\n                    (click)=\"onMonthClick(monthItem[0])\"\n                    monaYearMonth\n                    [month]=\"monthItem[0]\"\n                    [monthName]=\"monthItem[1]\"\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (yearCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ monthItem[1] }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n} @else if (calendarView() === \"decade\") {\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\n        @for (row of decadeYears(); track $index) {\n            @for (year of row; track year) {\n                <div\n                    (click)=\"onYearClick(year)\"\n                    monaDecadeYear\n                    [navigatedDate]=\"navigatedDate()\"\n                    [rounded]=\"rounded()\"\n                    [year]=\"year\"\n                    [selectedDate]=\"selectedDates()[0]\">\n                    @if (decadeCellTemplate()) {\n                        <ng-container\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\n                        </ng-container>\n                    } @else {\n                        <span>{{ year }}</span>\n                    }\n                </div>\n            }\n        }\n    </div>\n}\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: "directive", type: MonthDayDirective, selector: "[monaMonthDay]", inputs: ["disabled", "disabledDates", "entry", "max", "min", "monthBounds", "navigatedDate", "rangePreview", "rounded", "value"], outputs: ["dayPointerEnter", "daySelect"] }, { kind: "directive", type: DecadeYearDirective, selector: "[monaDecadeYear]", inputs: ["navigatedDate", "rounded", "selectedDate", "year"] }, { kind: "directive", type: YearMonthDirective, selector: "[monaYearMonth]", inputs: ["month", "monthName", "navigatedDate", "rounded", "selectedDate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronLeft, selector: "svg[lucideChevronLeft]" }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TakeFirstPipe, name: "monaTakeFirst" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,

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

@@ -417,7 +417,7 @@ class ChipComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", 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 } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ChipComponent, isStandalone: true, selector: "mona-chip", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, removeLabel: { classPropertyName: "removeLabel", publicName: "removeLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTabIndex: { classPropertyName: "removeTabIndex", publicName: "removeTabIndex", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, toggleable: { classPropertyName: "toggleable", publicName: "toggleable", 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 } }, outputs: { contentClick: "contentClick", remove: "remove", selected: "selectedChange" }, host: { properties: { "class": "baseClass()", "attr.tabindex": "effectiveTabIndex()", "attr.aria-disabled": "disabled() ? 'true' : undefined", "attr.role": "role()", "attr.aria-checked": "ariaChecked()", "attr.aria-label": "effectiveAriaLabel()" } }, queries: [{ propertyName: "prefixTemplate", first: true, predicate: ChipPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (prefixTemplate()) {\n    <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n}\n\n@if (label()) {\n    <span>{{ label() }}</span>\n} @else {\n    <ng-content></ng-content>\n}\n\n@if (removable()) {\n    @let removeAriaLabel = removeLabel() ?? \"Remove, \" + (label() || \"item\");\n    <button\n        monaButton\n        look=\"link\"\n        [iconOnly]=\"true\"\n        [size]=\"'small'\"\n        [attr.aria-label]=\"removeAriaLabel\"\n        [tabindex]=\"removeTabIndex()\"\n        [disabled]=\"disabled()\"\n        (click)=\"onRemoveClick($event)\"\n        [attr.data-chip-remove]=\"true\">\n        <svg lucideCircleX [size]=\"iconSize()\"></svg>\n    </button>\n}\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,

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

@@ -766,7 +766,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]=\"'Color saturation and value'\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\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 mr-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\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\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                    aria-label=\"Switch color mode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\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\" aria-label=\"Copy color\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        label=\"Copy as HEX\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        label=\"Copy as RGB\"\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()\">Apply</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">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-r border-r-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "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", "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]=\"'Color saturation and value'\"\n        [attr.aria-valuemin]=\"0\"\n        [attr.aria-valuemax]=\"100\"\n        [attr.aria-valuenow]=\"hsv().s\"\n        [attr.aria-valuetext]=\"'Saturation ' + hsv().s + '%, Value ' + hsv().v + '%'\"\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 mr-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\" aria-label=\"Clear color\" (click)=\"onClearClick()\">\n        <i class=\"ri-blur-off-line\"></i>\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                    aria-label=\"Switch color mode\"\n                    (click)=\"onSwitchColorModeClick()\">\n                    <i class=\"ri-expand-up-down-line\"></i>\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\" aria-label=\"Copy color\" class=\"h-full\">\n                    <svg lucideCopy [size]=\"12\"></svg>\n                    <mona-dropdown-button-item\n                        label=\"Copy as HEX\"\n                        (menuClick)=\"onCopyColorSelect('hex')\"></mona-dropdown-button-item>\n                    <mona-dropdown-button-item\n                        label=\"Copy as RGB\"\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()\">Apply</button>\n            <button monaButton [rounded]=\"rounded()\" (click)=\"onCancel()\">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-r border-r-input-border\"\n        >{{ text }}</span\n    >\n</ng-template>\n", dependencies: [{ kind: "component", type: NumericTextBoxComponent, selector: "mona-numeric-text-box", inputs: ["aria-label", "decimals", "disabled", "formatter", "maxValue", "minValue", "nullable", "readonly", "required", "invalid", "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]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorGradientComponent, decorators: [{
             type: Component,

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

@@ -447,7 +447,7 @@ class ColorPickerComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "mona-color-picker", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", 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 }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-open": "expanded() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'combobox'", "attr.aria-controls": "popupId", "attr.aria-expanded": "expanded() || null", "attr.aria-haspopup": "'dialog'", "attr.aria-label": "'Color picker'", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ColorPickerValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <svg lucideXCircle [size]=\"16\"></svg>\n        }\n    </div>\n}\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"palettePopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"gradientPopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["columns", "disabled", "invalid", "palette", "readonly", "rounded", "required", "tileSize", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: ColorGradientComponent, selector: "mona-color-gradient", inputs: ["disabled", "format", "invalid", "opacity", "required", "rounded", "showButtons", "showHexInput", "showColorInputs", "touched", "value"], outputs: ["apply", "cancel", "touch", "valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }, { kind: "component", type: IndicatorIconComponent, selector: "mona-indicator-icon", inputs: ["icon", "interactive", "label", "preset", "size", "class"], outputs: ["activate"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: ColorPickerComponent, isStandalone: true, selector: "mona-color-picker", inputs: { closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", 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 }, opacity: { classPropertyName: "opacity", publicName: "opacity", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", 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: { touch: "touch", value: "valueChange" }, host: { properties: { "class": "baseClasses()", "attr.tabindex": "disabled() ? -1 : 0", "attr.data-disabled": "disabled()", "attr.data-invalid": "invalidState() || null", "attr.data-open": "expanded() || null", "attr.data-readonly": "readonly()", "attr.data-required": "required() || null", "attr.role": "'combobox'", "attr.aria-controls": "popupId", "attr.aria-expanded": "expanded() || null", "attr.aria-haspopup": "'dialog'", "attr.aria-label": "'Color picker'", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()" } }, queries: [{ propertyName: "valueTemplate", first: true, predicate: ColorPickerValueTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (valueTemplate()) {\n    <ng-container\n        [ngTemplateOutlet]=\"valueTemplate() ?? null\"\n        [ngTemplateOutletContext]=\"{ $implicit: value() }\"></ng-container>\n} @else {\n    <div [style.background]=\"value()\" [class]=\"colorClasses()\">\n        @if (!value()) {\n            <svg lucideXCircle [size]=\"16\"></svg>\n        }\n    </div>\n}\n<mona-indicator-icon preset=\"dropdown\" [size]=\"18\"></mona-indicator-icon>\n\n<ng-template #popupTemplate>\n    @if (view() === \"palette\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"palettePopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color palette picker\"\n            data-palette-container\n            (keydown)=\"onPaletteContainerKeyDown($event)\">\n            @if (showClearButton()) {\n                <div class=\"flex items-center justify-end p-1\">\n                    <button monaButton look=\"ghost\" size=\"small\" (click)=\"onClearClick()\">\n                        <i class=\"ri-blur-off-line\"></i>\n                    </button>\n                </div>\n            }\n            <mona-color-palette\n                [palette]=\"palette()\"\n                [columns]=\"columns()\"\n                [readonly]=\"readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorPaletteValueChange($event)\"\n                (touch)=\"onColorPaletteTouch()\"></mona-color-palette>\n        </div>\n    } @else if (view() === \"gradient\") {\n        <div\n            [id]=\"popupId\"\n            [class]=\"gradientPopupClasses\"\n            tabindex=\"0\"\n            role=\"dialog\"\n            aria-label=\"Color gradient picker\">\n            <mona-color-gradient\n                [opacity]=\"opacity()\"\n                [rounded]=\"rounded()\"\n                [disabled]=\"disabled() || readonly()\"\n                [value]=\"value()\"\n                (valueChange)=\"onColorGradientValueChange($event)\"\n                (touch)=\"onColorGradientTouch()\"\n                (apply)=\"onColorGradientApply()\"\n                (cancel)=\"onColorGradientCancel()\"></mona-color-gradient>\n        </div>\n    }\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: ColorPaletteComponent, selector: "mona-color-palette", inputs: ["columns", "disabled", "invalid", "palette", "readonly", "rounded", "required", "tileSize", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: ColorGradientComponent, selector: "mona-color-gradient", inputs: ["disabled", "format", "invalid", "opacity", "required", "rounded", "showButtons", "showHexInput", "showColorInputs", "touched", "value"], outputs: ["apply", "cancel", "touch", "valueChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideCircleX, selector: "svg[lucideCircleX], svg[lucideXCircle]" }, { 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: ColorPickerComponent, decorators: [{
             type: Component,

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

@@ -425,7 +425,7 @@ class DatePickerComponent {
                 useExisting: forwardRef(() => DatePickerComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open calendar'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"Date picker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\n            @if (decadeCellTemplate()) {\n                <ng-template monaCalendarDecadeCellTemplate let-year>\n                    <ng-container\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                </ng-template>\n            }\n            @if (monthCellTemplate()) {\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                </ng-template>\n            }\n            @if (yearCellTemplate()) {\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                </ng-template>\n            }\n        </mona-calendar>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "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: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [disabled]=\"disabled()\"\n    [value]=\"currentDateString()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [required]=\"required()\"\n    [clearButton]=\"showClearButton()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [rounded]=\"'none'\"\n            [size]=\"size()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open calendar'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\"\n            (click)=\"onDateInputButtonClick()\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #popupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"Date picker\"\n        cdkTrapFocus>\n        <mona-calendar\n            [disabledDates]=\"disabledDates()\"\n            [minDate]=\"min()\"\n            [maxDate]=\"max()\"\n            [readonly]=\"readonly()\"\n            [rounded]=\"rounded()\"\n            [weekNumber]=\"weekNumber()\"\n            [firstDay]=\"firstDay()\"\n            [value]=\"value()\"\n            (valueChange)=\"onCalendarValueChange($event)\">\n            @if (decadeCellTemplate()) {\n                <ng-template monaCalendarDecadeCellTemplate let-year>\n                    <ng-container\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                </ng-template>\n            }\n            @if (monthCellTemplate()) {\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                </ng-template>\n            }\n            @if (yearCellTemplate()) {\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                </ng-template>\n            }\n        </mona-calendar>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "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: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }, { 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: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,

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

@@ -607,7 +607,7 @@ class DateTimePickerComponent {
                 useExisting: forwardRef(() => DateTimePickerComponent),
                 multi: false
             }
-        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open date and time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    Date\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    Time\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" aria-label=\"Calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" aria-label=\"Time picker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                Set\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                Cancel\n            </button>\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["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: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { 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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    (inputBlur)=\"onDateInputBlur()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    [clearButton]=\"showClearButton()\"\n    [disabled]=\"disabled()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [value]=\"currentDateString()\">\n    @if (prefixTemplate()) {\n        <ng-template monaTextBoxPrefixTemplate>\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\n        </ng-template>\n    }\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open date and time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            (click)=\"onDateInputButtonClick()\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-calendar-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #datePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        class=\"flex h-68 flex-col\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        cdkTrapFocus>\n        <div [class]=\"headerClass()\">\n            <mona-button-group\n                selection=\"single\"\n                [allowEmpty]=\"false\"\n                class=\"w-full\"\n                [disabled]=\"disabled()\"\n                [size]=\"size()\"\n                [rounded]=\"rounded()\"\n                role=\"tablist\">\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\n                    Date\n                </button>\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\n                    Time\n                </button>\n            </mona-button-group>\n        </div>\n        <div class=\"overflow-hidden\">\n            @if (activeView() === \"date\") {\n                <div class=\"flex h-full items-center justify-center\" aria-label=\"Calendar\">\n                    <mona-calendar\n                        [disabledDates]=\"disabledDates()\"\n                        [minDate]=\"min()\"\n                        [maxDate]=\"max()\"\n                        [firstDay]=\"firstDay()\"\n                        [weekNumber]=\"weekNumber()\"\n                        [value]=\"navigatedDate()\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [rounded]=\"rounded()\"\n                        (valueChange)=\"onCalendarValueChange($event)\"\n                        class=\"flex-1 border-none shadow-none\">\n                        @if (decadeCellTemplate()) {\n                            <ng-template monaCalendarDecadeCellTemplate let-year>\n                                <ng-container\n                                    [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (monthCellTemplate()) {\n                            <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\n                            </ng-template>\n                        }\n                        @if (yearCellTemplate()) {\n                            <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\n                                <ng-container\n                                    [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\n                            </ng-template>\n                        }\n                    </mona-calendar>\n                </div>\n            }\n            @if (activeView() === \"time\") {\n                <div class=\"flex h-full max-h-64 items-center justify-center\" aria-label=\"Time picker\">\n                    <mona-time-selector\n                        [value]=\"navigatedDate()\"\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\n                        [disabled]=\"disabled()\"\n                        [readonly]=\"readonly()\"\n                        [max]=\"timePickerMax()\"\n                        [min]=\"timePickerMin()\"\n                        [footer]=\"false\"\n                        [size]=\"size()\"\n                        [rounded]=\"rounded()\"\n                        [hourStep]=\"hourStep()\"\n                        [minuteStep]=\"minuteStep()\"\n                        [secondStep]=\"secondStep()\"\n                        [hourFormat]=\"hourFormat()\"\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\n                </div>\n            }\n        </div>\n        <div [class]=\"footerClass()\">\n            <button\n                monaButton\n                look=\"primary\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onSetDateClick()\">\n                Set\n            </button>\n            <button\n                monaButton\n                look=\"default\"\n                [disabled]=\"disabled()\"\n                [rounded]=\"rounded()\"\n                [size]=\"size()\"\n                (click)=\"onCancelClick()\">\n                Cancel\n            </button>\n        </div>\n    </div>\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: CalendarComponent, selector: "mona-calendar", inputs: ["disabled", "disabledDates", "firstDay", "invalid", "maxDate", "minDate", "readonly", "rounded", "selection", "required", "touched", "class", "value", "weekNumber"], outputs: ["disabledChange", "touch", "valueChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["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: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { 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: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,

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

@@ -299,7 +299,7 @@ class DialogContentComponent {
         focusElement(dialogElement, element);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close dialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (data.actions | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of data.actions; track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DialogContentComponent, isStandalone: true, selector: "ng-component", host: { properties: { "class": "baseClass()", "attr.aria-describedby": "describedById()", "attr.aria-labelledby": "headerId", "attr.role": "role()" } }, hostDirectives: [{ directive: i1.CdkTrapFocus }], ngImport: i0, template: "@let dialogIcon = icon();\n@let data = dialogData();\n\n<div [class]=\"contentContainerClass()\">\n    @if (dialogIcon) {\n        <div [class]=\"iconContainerClass()\">\n            @if (data.iconTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.iconTemplate\"></ng-container>\n            } @else {\n                <div [class]=\"iconClass()\">\n                    <span aria-hidden=\"true\"></span>\n                    <svg [lucideIcon]=\"dialogIcon.icon\" [size]=\"24\" [style.color]=\"dialogIcon.color\"></svg>\n                </div>\n            }\n        </div>\n    }\n    <div [class]=\"bodyClass()\">\n        <div [class]=\"headerClass()\">\n            <div [id]=\"headerId\" [class]=\"titleContainerClass()\">\n                @if (data.titleTemplate) {\n                    <ng-container [ngTemplateOutlet]=\"data.titleTemplate\"></ng-container>\n                } @else {\n                    <h2 [class]=\"titleClass()\">{{ data.title }}</h2>\n                }\n            </div>\n            @if (data.closable) {\n                <div [class]=\"closeButtonContainerClass()\">\n                    <button\n                        monaButton\n                        look=\"ghost\"\n                        size=\"small\"\n                        [iconOnly]=\"true\"\n                        aria-label=\"Close dialog\"\n                        (click)=\"onCloseClick()\">\n                        <svg lucideX [size]=\"16\"></svg>\n                    </button>\n                </div>\n            }\n        </div>\n\n        @let descriptionTemplateId = data.descriptionTemplate ? descriptionId : undefined;\n        <div class=\"p-1\" [attr.id]=\"descriptionTemplateId\">\n            @if (data.descriptionTemplate) {\n                <ng-container [ngTemplateOutlet]=\"data.descriptionTemplate\"></ng-container>\n            } @else if (data.description) {\n                <p [id]=\"descriptionId\" [class]=\"descriptionClass()\">{{ data.description }}</p>\n            }\n        </div>\n\n        <div [class]=\"contentClass()\">\n            @if (data.content) {\n                <ng-container [ngTemplateOutlet]=\"data.content\"></ng-container>\n            } @else if (data.text) {\n                <p class=\"select-none\">{{ data.text }}</p>\n            }\n        </div>\n    </div>\n</div>\n\n@if (data.footerTemplate || (data.actions | monaAny)) {\n    @if (data.footerTemplate) {\n        <ng-container [ngTemplateOutlet]=\"data.footerTemplate\"></ng-container>\n    } @else {\n        <div [class]=\"footerClass()\">\n            @for (action of data.actions; track $index) {\n                <button\n                    monaButton\n                    type=\"button\"\n                    [class]=\"action.cssClass || ''\"\n                    [iconOnly]=\"action.iconOnly || false\"\n                    [look]=\"action.look\"\n                    [rounded]=\"action.rounded || data.rounded\"\n                    (click)=\"onActionClick(action)\">\n                    {{ action.text }}\n                </button>\n            }\n        </div>\n    }\n}\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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "pipe", type: AnyPipe, name: "monaAny" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DialogContentComponent, decorators: [{
             type: Component,

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

@@ -271,7 +271,7 @@ class DropdownButtonComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", 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 }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DropdownButtonComponent, isStandalone: true, selector: "mona-dropdown-button", 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 }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", 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 }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { menuItemClick: "menuItemClick" }, host: { properties: { "class": "userClass()" } }, queries: [{ propertyName: "menuItemComponents", predicate: PopupMenuToken, isSignal: true }, { propertyName: "groupTemplate", first: true, predicate: DropdownButtonMenuGroupTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemIconTemplate", first: true, predicate: DropdownButtonMenuItemIconTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemShortcutTemplate", first: true, predicate: DropdownButtonMenuItemShortcutTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "menuItemTextTemplate", first: true, predicate: DropdownButtonMenuItemTextTemplateDirective, read: TemplateRef, isSignal: true }, { propertyName: "textTemplate", first: true, predicate: DropdownButtonTextTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["dropdownButton"], descendants: true, isSignal: true }, { propertyName: "popupMenuRef", first: true, predicate: ["popupMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<button\n    monaButton\n    [look]=\"look()\"\n    [size]=\"size()\"\n    [iconOnly]=\"iconOnly()\"\n    [loading]=\"loading()\"\n    [rounded]=\"rounded()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-label]=\"ariaLabelledby() ? null : dropdownButtonAriaLabel() || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n    [attr.aria-haspopup]=\"'menu'\"\n    [attr.aria-expanded]=\"isMenuOpen()\"\n    [attr.aria-controls]=\"menuId\"\n    #dropdownButton>\n    @if (textTemplate()) {\n        <ng-container\n            [ngTemplateOutlet]=\"textTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: text() }\"></ng-container>\n    } @else {\n        {{ text() }}\n    }\n</button>\n\n<mona-popup-menu\n    #popupMenu\n    (close)=\"onMenuClose()\"\n    (menuClick)=\"onMenuItemClick($event)\"\n    (open)=\"onMenuOpen()\"\n    [anchorConnectionPoint]=\"'bottomcenter'\"\n    [id]=\"menuId\"\n    [items]=\"menuItems()\"\n    [offset]=\"{ horizontal: 0, vertical: 2 }\"\n    [popupConnectionPoint]=\"'topcenter'\"\n    [size]=\"size()\"\n    [target]=\"dropdownButton\"\n    [trigger]=\"'click'\">\n    @if (groupTemplate()) {\n        <ng-template monaPopupMenuGroupTemplate let-group>\n            <ng-container\n                [ngTemplateOutlet]=\"groupTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: group }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemIconTemplate()) {\n        <ng-template monaPopupMenuIconTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemIconTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemShortcutTemplate()) {\n        <ng-template monaPopupMenuShortcutTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemShortcutTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n    @if (menuItemTextTemplate()) {\n        <ng-template monaPopupMenuTextTemplate let-item>\n            <ng-container\n                [ngTemplateOutlet]=\"menuItemTextTemplate()\"\n                [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\n        </ng-template>\n    }\n</mona-popup-menu>\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: PopupMenuComponent, selector: "mona-popup-menu", inputs: ["anchor", "anchorConnectionPoint", "items", "id", "minWidth", "offset", "popupConnectionPoint", "precise", "rounded", "size", "target", "trigger", "width", "class"], outputs: ["close", "menuClick", "navigate", "open"] }, { kind: "directive", type: PopupMenuGroupTemplateDirective, selector: "ng-template[monaPopupMenuGroupTemplate]" }, { kind: "directive", type: PopupMenuIconTemplateDirective, selector: "ng-template[monaPopupMenuIconTemplate]" }, { kind: "directive", type: PopupMenuShortcutTemplateDirective, selector: "ng-template[monaPopupMenuShortcutTemplate]" }, { kind: "directive", type: PopupMenuTextTemplateDirective, selector: "ng-template[monaPopupMenuTextTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DropdownButtonComponent, decorators: [{
             type: Component,