@nanahoshi/mona-ui 0.1.0 → 0.1.1

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

@@ -3,12 +3,12 @@ import * as i0 from '@angular/core';
 import { inject, TemplateRef, Directive, computed, input, output, DestroyRef, ElementRef, signal, contentChild, linkedSignal, model, afterNextRender, effect, untracked, Component } from '@angular/core';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LucideChevronLeft, LucideChevronRight } from '@lucide/angular';
+import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent, TakeFirstPipe } from '@nanahoshi/mona-ui/common';
 import { CalendarService } from '@nanahoshi/mona-ui/date-input';
 import { createElementControlId, rxTimeout } from '@nanahoshi/mona-ui/internal';
 import { ThemeService } from '@nanahoshi/mona-ui/theme';
-import { any, exactly, Dictionary, lastOrDefault, range, index, select } from '@mirei/ts-collections';
 import { DateTime } from 'luxon';
 import { skip, fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
@@ -56,13 +56,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }] });
 
-const calendarBaseVariants = cva(`
-        flex flex-col gap-2 p-2 min-w-64
-        bg-background text-foreground
-        border border-input-border
-        shadow-sm select-none
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const calendarBaseVariants = cva(`
+        flex flex-col gap-2 p-2 min-w-64
+        bg-background text-foreground
+        border border-input-border
+        shadow-sm select-none
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         disabled: {
@@ -80,18 +80,18 @@ const calendarBaseVariants = cva(`
         }
     }
 });
-const calendarHeaderVariants = cva(`
-        flex items-center justify-center
-        [&>button+button]:not-focus:border-s-0
-        [&>button:nth-of-type(2)]:flex-1
-        [&>button:nth-of-type(3)]:rounded-se-none
-        [&>button:nth-of-type(3)]:rounded-ee-none
-        [&>button:nth-of-type(4)]:rounded-ss-none
-        [&>button:nth-of-type(4)]:rounded-es-none
-        [&>button]:outline-none
+const calendarHeaderVariants = cva(`
+        flex items-center justify-center
+        [&>button+button]:not-focus:border-s-0
+        [&>button:nth-of-type(2)]:flex-1
+        [&>button:nth-of-type(3)]:rounded-se-none
+        [&>button:nth-of-type(3)]:rounded-ee-none
+        [&>button:nth-of-type(4)]:rounded-ss-none
+        [&>button:nth-of-type(4)]:rounded-es-none
+        [&>button]:outline-none
     `);
-const calendarMonthViewDayVariants = cva(`
-        hover:bg-hover cursor-pointer
+const calendarMonthViewDayVariants = cva(`
+        hover:bg-hover cursor-pointer
     `, {
     variants: {
         disabled: {
@@ -131,31 +131,31 @@ const calendarMonthViewDayVariants = cva(`
         rounded: "medium"
     }
 });
-const calendarMonthViewGridVariants = cva(`
-        grid gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:aspect-square
+const calendarMonthViewGridVariants = cva(`
+        grid gap-0.5
+        justify-center
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:aspect-square
     `);
-const calendarMonthViewGridHeaderVariants = cva(`
-        grid justify-center
-        gap-0.5 font-semibold text-sm
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:aspect-square
+const calendarMonthViewGridHeaderVariants = cva(`
+        grid justify-center
+        gap-0.5 font-semibold text-sm
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:aspect-square
     `);
-const calendarYearViewGridVariants = cva(`
-        grid grid-cols-3 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
+const calendarYearViewGridVariants = cva(`
+        grid grid-cols-3 gap-0.5
+        justify-center
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:h-12
     `);
-const calendarYearViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarYearViewCellVariants = cva(`
+        py-2 cursor-pointer
+        hover:bg-hover
+        active:bg-active
     `, {
     variants: {
         focused: {
@@ -170,17 +170,17 @@ const calendarYearViewCellVariants = cva(`
         }
     }
 });
-const calendarDecadeViewGridVariants = cva(`
-        grid grid-cols-4 gap-0.5
-        justify-center
-        [&>div]:h-full [&>div]:flex
-        [&>div]:items-center [&>div]:justify-center
-        [&>div]:h-12
+const calendarDecadeViewGridVariants = cva(`
+        grid grid-cols-4 gap-0.5
+        justify-center
+        [&>div]:h-full [&>div]:flex
+        [&>div]:items-center [&>div]:justify-center
+        [&>div]:h-12
     `);
-const calendarDecadeViewCellVariants = cva(`
-        py-2 cursor-pointer
-        hover:bg-hover
-        active:bg-active
+const calendarDecadeViewCellVariants = cva(`
+        py-2 cursor-pointer
+        hover:bg-hover
+        active:bg-active
     `, {
     variants: {
         focused: {
@@ -1532,7 +1532,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()\">\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onTodayButtonClick()\"\r\n        [attr.aria-label]=\"todayButtonLabel()\">\r\n        <span>Today</span>\r\n    </button>\r\n    @switch (calendarView()) {\r\n        @case (\"month\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('year')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"year\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('decade')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"decade\") {\r\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\r\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\r\n                >\r\n            </button>\r\n        }\r\n    }\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('prev')\"\r\n        [attr.aria-label]=\"prevButtonLabel()\">\r\n        <svg lucideChevronLeft></svg>\r\n    </button>\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('next')\"\r\n        [attr.aria-label]=\"nextButtonLabel()\">\r\n        <svg lucideChevronRight></svg>\r\n    </button>\r\n</div>\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\r\n\r\n@if (calendarView() === \"month\") {\r\n    @let columnCount = weekNumber() ? 8 : 7;\r\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @if (weekNumber()) {\r\n            <div></div>\r\n        }\r\n        @for (day of weekdays(); track day.short) {\r\n            <div>{{ day.short }}</div>\r\n        }\r\n    </div>\r\n    <div\r\n        [class]=\"monthGridClass()\"\r\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\r\n        (pointerleave)=\"onMonthGridPointerLeave()\"\r\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @for (row of monthDictChunked(); track $index) {\r\n            @if (weekNumber()) {\r\n                @let firstEntry = row | monaTakeFirst;\r\n                @if (firstEntry) {\r\n                    @let week = firstEntry.key | date: \"w\";\r\n                    <div>{{ week }}</div>\r\n                }\r\n            }\r\n            @for (entry of row; track entry.key) {\r\n                <div\r\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\r\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\r\n                    monaMonthDay\r\n                    [disabled]=\"disabled()\"\r\n                    [disabledDates]=\"disabledDates()\"\r\n                    [min]=\"minDate()\"\r\n                    [max]=\"maxDate()\"\r\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rangePreview]=\"rangePreviewDates()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [value]=\"selectedDates()\"\r\n                    [entry]=\"entry\">\r\n                    @if (monthCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ entry.value }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"year\") {\r\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of months(); track $index) {\r\n            @for (monthItem of row; track monthItem) {\r\n                <div\r\n                    (click)=\"onMonthClick(monthItem[0])\"\r\n                    monaYearMonth\r\n                    [month]=\"monthItem[0]\"\r\n                    [monthName]=\"monthItem[1]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (yearCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ monthItem[1] }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"decade\") {\r\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of decadeYears(); track $index) {\r\n            @for (year of row; track year) {\r\n                <div\r\n                    (click)=\"onYearClick(year)\"\r\n                    monaDecadeYear\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [year]=\"year\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (decadeCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ year }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n}\r\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", "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,
@@ -1554,7 +1554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-required]": "required() || null",
                         "[attr.tabindex]": "disabled() ? -1 : 0",
                         "[class]": "baseClass()"
-                    }, template: "<div [class]=\"headerClass()\">\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onTodayButtonClick()\"\r\n        [attr.aria-label]=\"todayButtonLabel()\">\r\n        <span>Today</span>\r\n    </button>\r\n    @switch (calendarView()) {\r\n        @case (\"month\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('year')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"MMMM yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"year\") {\r\n            <button\r\n                monaButton\r\n                look=\"ghost\"\r\n                [rounded]=\"rounded()\"\r\n                (click)=\"onViewChangeClick('decade')\"\r\n                [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\">{{\r\n                    navigatedDate() | date: \"yyyy\" : timezone\r\n                }}</span>\r\n            </button>\r\n        }\r\n        @case (\"decade\") {\r\n            <button monaButton look=\"ghost\" [rounded]=\"rounded()\" [attr.aria-label]=\"viewSwitchButtonLabel()\">\r\n                <span class=\"text-primary font-semibold\" [id]=\"gridId + '-heading'\"\r\n                    >{{ decadeStart() }} - {{ decadeEnd() }}</span\r\n                >\r\n            </button>\r\n        }\r\n    }\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('prev')\"\r\n        [attr.aria-label]=\"prevButtonLabel()\">\r\n        <svg lucideChevronLeft></svg>\r\n    </button>\r\n    <button\r\n        monaButton\r\n        look=\"ghost\"\r\n        [rounded]=\"rounded()\"\r\n        [iconOnly]=\"true\"\r\n        [size]=\"'small'\"\r\n        (click)=\"onNavigationClick('next')\"\r\n        [attr.aria-label]=\"nextButtonLabel()\">\r\n        <svg lucideChevronRight></svg>\r\n    </button>\r\n</div>\r\n\r\n<div aria-live=\"polite\" aria-atomic=\"true\" class=\"sr-only\">{{ ariaLabel() }}</div>\r\n\r\n@if (calendarView() === \"month\") {\r\n    @let columnCount = weekNumber() ? 8 : 7;\r\n    <div [class]=\"monthGridHeaderClass()\" [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @if (weekNumber()) {\r\n            <div></div>\r\n        }\r\n        @for (day of weekdays(); track day.short) {\r\n            <div>{{ day.short }}</div>\r\n        }\r\n    </div>\r\n    <div\r\n        [class]=\"monthGridClass()\"\r\n        [attr.aria-labelledby]=\"gridId + '-heading'\"\r\n        (pointerleave)=\"onMonthGridPointerLeave()\"\r\n        [style.grid-template-columns]=\"`repeat(${columnCount}, 32px)`\">\r\n        @for (row of monthDictChunked(); track $index) {\r\n            @if (weekNumber()) {\r\n                @let firstEntry = row | monaTakeFirst;\r\n                @if (firstEntry) {\r\n                    @let week = firstEntry.key | date: \"w\";\r\n                    <div>{{ week }}</div>\r\n                }\r\n            }\r\n            @for (entry of row; track entry.key) {\r\n                <div\r\n                    (dayPointerEnter)=\"onDayPointerEnter($event)\"\r\n                    (daySelect)=\"onDayClick($event.date, $event.event)\"\r\n                    monaMonthDay\r\n                    [disabled]=\"disabled()\"\r\n                    [disabledDates]=\"disabledDates()\"\r\n                    [min]=\"minDate()\"\r\n                    [max]=\"maxDate()\"\r\n                    [monthBounds]=\"[monthBounds().start, monthBounds().end]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rangePreview]=\"rangePreviewDates()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [value]=\"selectedDates()\"\r\n                    [entry]=\"entry\">\r\n                    @if (monthCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: entry.value, date: entry.key }\"></ng-container>\r\n                    } @else {\r\n                        <span>{{ entry.value }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"year\") {\r\n    <div [class]=\"yearGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of months(); track $index) {\r\n            @for (monthItem of row; track monthItem) {\r\n                <div\r\n                    (click)=\"onMonthClick(monthItem[0])\"\r\n                    monaYearMonth\r\n                    [month]=\"monthItem[0]\"\r\n                    [monthName]=\"monthItem[1]\"\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (yearCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: monthItem[0], text: monthItem[1] }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ monthItem[1] }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n} @else if (calendarView() === \"decade\") {\r\n    <div [class]=\"decadeGridClass()\" [attr.aria-labelledby]=\"gridId + '-heading'\">\r\n        @for (row of decadeYears(); track $index) {\r\n            @for (year of row; track year) {\r\n                <div\r\n                    (click)=\"onYearClick(year)\"\r\n                    monaDecadeYear\r\n                    [navigatedDate]=\"navigatedDate()\"\r\n                    [rounded]=\"rounded()\"\r\n                    [year]=\"year\"\r\n                    [selectedDate]=\"selectedDates()[0]\">\r\n                    @if (decadeCellTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                            [ngTemplateOutletContext]=\"{ $implicit: year }\">\r\n                        </ng-container>\r\n                    } @else {\r\n                        <span>{{ year }}</span>\r\n                    }\r\n                </div>\r\n            }\r\n        }\r\n    </div>\r\n}\r\n" }]
+                    }, 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" }]
         }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
 
 /*

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

@@ -8,38 +8,38 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
 const checkboxVariants = cva(`sr-only appearance-none outline-none peer`);
-const checkmarkVariants = cva(`
-        flex items-center justify-center
-        w-4.5 h-4.5 pl-0.25
-        overflow-hidden outline-none
-
-        bg-input-background border border-input-border
-        cursor-pointer
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
-
-        peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40
-        peer-focus-visible:border-primary
-
-        peer-checked:bg-primary
-        peer-checked:text-primary-foreground
-
-        peer-indeterminate:bg-primary
-        peer-indeterminate:text-primary-foreground
-        peer-indeterminate:after:content-['']
-        peer-indeterminate:after:absolute
-        peer-indeterminate:after:inset-[3px_0_3px_0]
-        peer-indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
-        peer-indeterminate:after:[mask-repeat:no-repeat]
-        peer-indeterminate:after:[mask-size:contain]
-        peer-indeterminate:after:bg-current
-
-        [&.ng-touched.ng-invalid]:border-error
-
-        data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+const checkmarkVariants = cva(`
+        flex items-center justify-center
+        w-4.5 h-4.5 pl-0.25
+        overflow-hidden outline-none
+
+        bg-input-background border border-input-border
+        cursor-pointer
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
+
+        peer-focus-visible:ring-2 peer-focus-visible:ring-primary/40
+        peer-focus-visible:border-primary
+
+        peer-checked:bg-primary
+        peer-checked:text-primary-foreground
+
+        peer-indeterminate:bg-primary
+        peer-indeterminate:text-primary-foreground
+        peer-indeterminate:after:content-['']
+        peer-indeterminate:after:absolute
+        peer-indeterminate:after:inset-[3px_0_3px_0]
+        peer-indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
+        peer-indeterminate:after:[mask-repeat:no-repeat]
+        peer-indeterminate:after:[mask-size:contain]
+        peer-indeterminate:after:bg-current
+
+        [&.ng-touched.ng-invalid]:border-error
+
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
     `, {
     variants: {
         rounded: {
@@ -51,16 +51,16 @@ const checkmarkVariants = cva(`
         }
     }
 });
-const checkboxContainerLabelVariants = cva(`
-        w-full h-full
-        inline-flex items-center gap-2
-        relative
-
-        select-none
-
-        data-[disabled='true']:pointer-events-none
-        data-[disabled='true']:cursor-not-allowed
-        data-[disabled='true']:opacity-50
+const checkboxContainerLabelVariants = cva(`
+        w-full h-full
+        inline-flex items-center gap-2
+        relative
+
+        select-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:opacity-50
     `, {
     variants: {
         labelSize: {
@@ -70,42 +70,42 @@ const checkboxContainerLabelVariants = cva(`
         }
     }
 });
-const checkboxDirectiveVariants = cva(`
-        appearance-none outline-none
-        w-4.5 h-4.5
-        bg-input-background border border-input-border
-        cursor-pointer
-        relative
-
-        disabled:pointer-events-none
-        disabled:cursor-not-allowed
-        disabled:opacity-50
-
-        checked:text-primary-foreground
-        indeterminate:text-primary-foreground
-        indeterminate:bg-primary
-        checked:bg-primary
-
-        focus-visible:ring-2 focus-visible:ring-primary/40
-        focus-visible:border-primary
-
-        checked:after:content-['']
-        checked:after:absolute
-        checked:after:inset-[1px_0_0_1px]
-        checked:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%209%2017l-5-5'/%3E%3C/svg%3E")]
-        checked:after:[mask-repeat:no-repeat]
-        checked:after:[mask-size:contain]
-        checked:after:bg-current
-
-        indeterminate:after:content-['']
-        indeterminate:after:absolute
-        indeterminate:after:inset-[1px_0_1px_1px]
-        indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
-        indeterminate:after:[mask-repeat:no-repeat]
-        indeterminate:after:[mask-size:contain]
-        indeterminate:after:bg-current
-
-        [&.ng-touched.ng-invalid]:border-error
+const checkboxDirectiveVariants = cva(`
+        appearance-none outline-none
+        w-4.5 h-4.5
+        bg-input-background border border-input-border
+        cursor-pointer
+        relative
+
+        disabled:pointer-events-none
+        disabled:cursor-not-allowed
+        disabled:opacity-50
+
+        checked:text-primary-foreground
+        indeterminate:text-primary-foreground
+        indeterminate:bg-primary
+        checked:bg-primary
+
+        focus-visible:ring-2 focus-visible:ring-primary/40
+        focus-visible:border-primary
+
+        checked:after:content-['']
+        checked:after:absolute
+        checked:after:inset-[1px_0_0_1px]
+        checked:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%206%209%2017l-5-5'/%3E%3C/svg%3E")]
+        checked:after:[mask-repeat:no-repeat]
+        checked:after:[mask-size:contain]
+        checked:after:bg-current
+
+        indeterminate:after:content-['']
+        indeterminate:after:absolute
+        indeterminate:after:inset-[1px_0_1px_1px]
+        indeterminate:after:[mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14'%2F%3E%3C%2Fsvg%3E")]
+        indeterminate:after:[mask-repeat:no-repeat]
+        indeterminate:after:[mask-size:contain]
+        indeterminate:after:bg-current
+
+        [&.ng-touched.ng-invalid]:border-error
     `, {
     variants: {
         rounded: {
@@ -278,7 +278,7 @@ class CheckBoxComponent {
         this.touch.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", 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 }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", 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 } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n\r\n    <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"disabled()\"\r\n        [indeterminate]=\"indeterminate()\"\r\n        [required]=\"required()\"\r\n        [ngModel]=\"checked()\"\r\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n        [class]=\"checkBoxClasses()\"\r\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\r\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\r\n        [attr.aria-label]=\"label() || null\"\r\n        (change)=\"onInputChange($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (ngModelChange)=\"onCheckedChange($event)\"\r\n        #checkBox />\r\n\r\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\r\n        @if (checked()) {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"16\"\r\n                height=\"16\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-check stroke-primary-foreground\">\r\n                <path d=\"M18 6 9 17l-5-5\" />\r\n            </svg>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CheckBoxComponent, isStandalone: true, selector: "mona-check-box", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, labelSize: { classPropertyName: "labelSize", publicName: "labelSize", 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 }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", 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 } }, outputs: { checked: "checkedChange", inputBlur: "inputBlur", inputChange: "inputChange", inputFocus: "inputFocus", touch: "touch" }, host: { properties: { "class": "'flex'", "attr.data-checked": "checked()", "attr.data-disabled": "disabled()", "attr.data-indeterminate": "indeterminate()" } }, ngImport: i0, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [ngModel]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (ngModelChange)=\"onCheckedChange($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CheckBoxComponent, decorators: [{
             type: Component,
@@ -287,7 +287,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-checked]": "checked()",
                         "[attr.data-disabled]": "disabled()",
                         "[attr.data-indeterminate]": "indeterminate()"
-                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\r\n    @if (labelPosition() === \"before\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n\r\n    <input\r\n        type=\"checkbox\"\r\n        [disabled]=\"disabled()\"\r\n        [indeterminate]=\"indeterminate()\"\r\n        [required]=\"required()\"\r\n        [ngModel]=\"checked()\"\r\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\r\n        [class]=\"checkBoxClasses()\"\r\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\r\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\r\n        [attr.aria-label]=\"label() || null\"\r\n        (change)=\"onInputChange($event)\"\r\n        (blur)=\"onInputBlur($event)\"\r\n        (focus)=\"inputFocus.emit($event)\"\r\n        (ngModelChange)=\"onCheckedChange($event)\"\r\n        #checkBox />\r\n\r\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\r\n        @if (checked()) {\r\n            <svg\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n                width=\"16\"\r\n                height=\"16\"\r\n                viewBox=\"0 0 24 24\"\r\n                fill=\"none\"\r\n                stroke-width=\"2\"\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                class=\"lucide lucide-check stroke-primary-foreground\">\r\n                <path d=\"M18 6 9 17l-5-5\" />\r\n            </svg>\r\n        }\r\n    </span>\r\n    @if (labelPosition() === \"after\") {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n    }\r\n</label>\r\n\r\n<ng-template #labelTemplate>\r\n    @if (label()) {\r\n        <span>{{ label() }}</span>\r\n    } @else {\r\n        <ng-content></ng-content>\r\n    }\r\n</ng-template>\r\n" }]
+                    }, template: "<label [class]=\"containerLabelClasses()\" [attr.data-disabled]=\"disabled()\">\n    @if (labelPosition() === \"before\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n\n    <input\n        type=\"checkbox\"\n        [disabled]=\"disabled()\"\n        [indeterminate]=\"indeterminate()\"\n        [required]=\"required()\"\n        [ngModel]=\"checked()\"\n        [tabindex]=\"disabled() ? -1 : tabIndex()\"\n        [class]=\"checkBoxClasses()\"\n        [attr.aria-checked]=\"indeterminate() ? 'mixed' : null\"\n        [attr.aria-invalid]=\"invalidState() ? 'true' : null\"\n        [attr.aria-label]=\"label() || null\"\n        (change)=\"onInputChange($event)\"\n        (blur)=\"onInputBlur($event)\"\n        (focus)=\"inputFocus.emit($event)\"\n        (ngModelChange)=\"onCheckedChange($event)\"\n        #checkBox />\n\n    <span [class]=\"checkMarkClasses()\" [attr.data-invalid]=\"invalidState() || null\" aria-hidden=\"true\">\n        @if (checked()) {\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width=\"16\"\n                height=\"16\"\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                class=\"lucide lucide-check stroke-primary-foreground\">\n                <path d=\"M18 6 9 17l-5-5\" />\n            </svg>\n        }\n    </span>\n    @if (labelPosition() === \"after\") {\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\n    }\n</label>\n\n<ng-template #labelTemplate>\n    @if (label()) {\n        <span>{{ label() }}</span>\n    } @else {\n        <ng-content></ng-content>\n    }\n</ng-template>\n" }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], inputBlur: [{ type: i0.Output, args: ["inputBlur"] }], inputChange: [{ type: i0.Output, args: ["inputChange"] }], inputFocus: [{ type: i0.Output, args: ["inputFocus"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], labelSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelSize", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], tabIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabIndex", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
 
 class CheckboxDirective {