@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,460 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, computed, linkedSignal, contentChild, viewChild, TemplateRef, output, input, model, effect, untracked, afterNextRender, forwardRef, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, CalendarComponent } from '@nanahoshi/mona-ui/calendar';
+import { CalendarService, datePopupThemeVariants, DateInputPrefixTemplateDirective } from '@nanahoshi/mona-ui/date-input';
+import * as i1 from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownService, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { TextBoxComponent, TextBoxSuffixTemplateDirective, TextBoxPrefixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { any } from '@mirei/ts-collections';
+import { DateTime } from 'luxon';
+import { fromEvent } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const datePickerBaseVariants = cva(`
+        flex items-center w-auto
+        border border-border
+        focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
+        data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        [&_mona-text-box]:h-full
+        [&_mona-text-box]:border-none
+    `, {
+    variants: {
+        focused: {
+            true: `ring-2 ring-primary/40 border-primary`,
+            false: ""
+        },
+        rounded: {
+            full: "rounded-full",
+            large: "rounded-lg",
+            medium: "rounded-md",
+            none: "rounded-none",
+            small: "rounded-sm"
+        },
+        size: {
+            large: "h-10 text-md",
+            medium: "h-9 text-sm",
+            small: "h-8 text-xs"
+        }
+    }
+});
+
+const datePickerBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return datePickerBaseVariants;
+        default:
+            return datePickerBaseVariants;
+    }
+};
+
+class DatePickerComponent {
+    #calendarService;
+    #destroyRef;
+    #dropdownService;
+    #hostElementRef;
+    #id;
+    #themeService;
+    constructor() {
+        this.#calendarService = inject(CalendarService);
+        this.#destroyRef = inject(DestroyRef);
+        this.#dropdownService = inject(DropdownService);
+        this.#hostElementRef = inject(ElementRef);
+        this.#id = createElementControlId();
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const focused = this.#dropdownService.popupRef() != null;
+            const rounded = this.rounded();
+            const size = this.size();
+            const variantClass = datePickerBaseThemeVariants(theme)({ focused, rounded, size });
+            const userClass = this.userClass();
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.currentDateString = linkedSignal(() => {
+            const value = this.value();
+            const format = this.format();
+            if (!value) {
+                return "";
+            }
+            return DateTime.fromJSDate(value).toFormat(format);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "currentDateString" }] : /* istanbul ignore next */ []));
+        this.decadeCellTemplate = contentChild(CalendarDecadeCellTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decadeCellTemplate" }] : /* istanbul ignore next */ []));
+        this.expanded = computed(() => this.#dropdownService.popupRef() !== null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        this.inputAttributes = computed(() => {
+            const controls = this.popupId;
+            const expanded = this.#dropdownService.popupRef() != null;
+            const hasPopup = "grid";
+            const invalid = this.invalid();
+            return {
+                "aria-autocomplete": "none",
+                "aria-controls": controls,
+                "aria-expanded": expanded,
+                "aria-haspopup": hasPopup,
+                "aria-invalid": invalid,
+                id: this.#id,
+                role: "combobox"
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
+        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.monthCellTemplate = contentChild(CalendarMonthCellTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "monthCellTemplate" }] : /* istanbul ignore next */ []));
+        this.navigatedDate = linkedSignal(() => this.value() ?? new Date(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.pickerPopupClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const rounded = this.rounded();
+            const size = this.size();
+            const userClass = this.popupClass();
+            const variantClass = datePopupThemeVariants(theme)({ rounded, size });
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerPopupClass" }] : /* istanbul ignore next */ []));
+        this.popupId = createElementControlId();
+        this.popupTemplate = viewChild.required("popupTemplate", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+        this.prefixTemplate = contentChild(DateInputPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.yearCellTemplate = contentChild(CalendarYearCellTemplateDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "yearCellTemplate" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emits when the popup is about to close. This event is preventable.
+         */
+        this.close = output();
+        /**
+         * @description Emits after the popup is closed.
+         */
+        this.closed = output();
+        /**
+         * @description Sets the disabled state of the date picker.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the disabled dates of the date picker.
+         * Accepts either an iterable of Date objects or a predicate function.
+         */
+        this.disabledDates = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "disabledDates" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the first day of the week.
+         */
+        this.firstDay = input("monday", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "firstDay" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the date format of the date picker.
+         */
+        this.format = input("dd/MM/yyyy", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the date picker as invalid. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.invalid = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the maximum date of the date picker.
+         */
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
+        /**
+         * @description Sets the minimum date of the date picker.
+         */
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
+        /**
+         * @description Emits when the popup is about to open. This event is preventable.
+         */
+        this.open = output();
+        /**
+         * @description Emits after the popup is opened.
+         */
+        this.opened = output();
+        /**
+         * @description Sets the placeholder of the date picker.
+         */
+        this.placeholder = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the class of the popup element.
+         * @default ""
+         */
+        this.popupClass = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupClass" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the height of the popup element.
+         * @default 200
+         */
+        this.popupHeight = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the popup element.
+         * @default null
+         */
+        this.popupWidth = input("", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the readonly state of the date picker.
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description When true, the input is readonly but the calendar button remains enabled.
+         * @default false
+         */
+        this.readonlyInput = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonlyInput" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the required state of the date picker.
+         * When bound to a signal form field via `[formField]`, this is written by the `FormField` directive.
+         * @default false
+         */
+        this.required = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the border radius of the date picker.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the visibility of the clear button.
+         */
+        this.showClearButton = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the size of the date picker.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the date picker is interacted with via blur, selection, or clear.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the date picker. When bound to a signal form field via `[formField]`,
+         * this is written by the `FormField` directive.
+         * @default false
+         */
+        this.touched = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.userClass = input("", { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: "class" });
+        /**
+         * @description Two-way bindable current date value.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Enables the display of week numbers in the calendar.
+         * @default false
+         */
+        this.weekNumber = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "weekNumber" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const popupTemplate = this.popupTemplate();
+            untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
+        });
+        afterNextRender({
+            read: () => {
+                this.setSubscriptions();
+                this.setPopupCloseSubscriptions();
+            }
+        });
+    }
+    onCalendarValueChange(date) {
+        const singleDate = Array.isArray(date) ? null : date;
+        this.setCurrentDate(singleDate);
+        this.#dropdownService.popupRef()?.close();
+    }
+    onDateInputBlur() {
+        if (this.#dropdownService.popupRef()) {
+            this.touch.emit();
+            return;
+        }
+        if (!this.currentDateString() && this.value()) {
+            this.setCurrentDate(null);
+            this.touch.emit();
+            return;
+        }
+        const dateTime = DateTime.fromFormat(this.currentDateString(), this.format());
+        if (this.dateStringEquals(this.value(), dateTime.toJSDate())) {
+            this.touch.emit();
+            return;
+        }
+        if (dateTime.isValid) {
+            const value = this.value();
+            if (value && DateTime.fromJSDate(value).equals(dateTime)) {
+                this.touch.emit();
+                return;
+            }
+            this.setCurrentDate(dateTime.toJSDate());
+        }
+        else {
+            this.setCurrentDate(null);
+            this.currentDateString.set("");
+        }
+        this.touch.emit();
+    }
+    onDateInputButtonClick() {
+        const popupRef = this.#dropdownService.popupRef();
+        if (!this.popupTemplate() || this.disabled() || this.readonly()) {
+            return;
+        }
+        if (popupRef) {
+            popupRef.close();
+            return;
+        }
+        this.openPopup();
+    }
+    onDateStringEdit(dateString) {
+        this.currentDateString.set(dateString);
+    }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
+    }
+    compareDatesEqual(date1, date2) {
+        return (date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate());
+    }
+    dateStringEquals(date1, date2) {
+        if (date1 && date2) {
+            return (DateTime.fromJSDate(date1).toFormat(this.format()) ===
+                DateTime.fromJSDate(date2).toFormat(this.format()));
+        }
+        return date1 === date2;
+    }
+    focus() {
+        const input = this.#hostElementRef.nativeElement.querySelector("input");
+        if (input && !this.readonly()) {
+            input.focus();
+            input.setSelectionRange(input.value.length, input.value.length);
+        }
+    }
+    handleKeydown(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (event.altKey && event.key === "ArrowDown") {
+            event.preventDefault();
+            this.openPopup();
+        }
+        else if ((event.altKey && event.key === "ArrowUp") || event.key === "Escape") {
+            event.preventDefault();
+            this.closePopup();
+        }
+    }
+    isDateDisabledByInput(date, disabledDates) {
+        if (typeof disabledDates === "function") {
+            return disabledDates(date);
+        }
+        else if (disabledDates) {
+            return any(disabledDates, d => this.compareDatesEqual(date, d));
+        }
+        return false;
+    }
+    openPopup() {
+        if (!this.#dropdownService.popupRef()) {
+            this.#dropdownService.triggerPopupOpen$.next({
+                height: this.popupHeight() || "auto",
+                maxHeight: "auto",
+                width: this.popupWidth() || "auto",
+                closeOnScroll: false,
+                withScrollTracking: true
+            });
+        }
+    }
+    setCurrentDate(date) {
+        const newDate = date ? new Date(date) : null;
+        this.value.set(newDate);
+        this.touch.emit();
+    }
+    setKeyboardSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => this.handleKeydown(event));
+        this.#calendarService.keydown$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(event => {
+            const keyboardEvent = event.originalEvent;
+            if (keyboardEvent &&
+                (keyboardEvent.key === "Escape" || (keyboardEvent.altKey && keyboardEvent.key === "ArrowUp"))) {
+                keyboardEvent.preventDefault();
+                this.closePopup();
+            }
+        });
+    }
+    setPopupCloseSubscriptions() {
+        this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.focus();
+        });
+    }
+    setSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "focusin")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.focus());
+        this.setKeyboardSubscriptions();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DatePickerComponent, isStandalone: true, selector: "mona-date-picker", 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 }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, 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: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "class": "baseClass()" } }, providers: [
+            DropdownService,
+            CalendarService,
+            {
+                provide: DropdownPopupInputToken,
+                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\r\n    (inputBlur)=\"onDateInputBlur()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    [disabled]=\"disabled()\"\r\n    [value]=\"currentDateString()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [required]=\"required()\"\r\n    [clearButton]=\"showClearButton()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\">\r\n    @if (prefixTemplate()) {\r\n        <ng-template monaTextBoxPrefixTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    <ng-template monaTextBoxSuffixTemplate>\r\n        <button\r\n            monaButton\r\n            look=\"ghost\"\r\n            [iconOnly]=\"true\"\r\n            [rounded]=\"'none'\"\r\n            [size]=\"size()\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open calendar'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\"\r\n            (click)=\"onDateInputButtonClick()\">\r\n            <i class=\"ri-calendar-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #popupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        aria-label=\"Date picker\"\r\n        cdkTrapFocus>\r\n        <mona-calendar\r\n            [disabledDates]=\"disabledDates()\"\r\n            [minDate]=\"min()\"\r\n            [maxDate]=\"max()\"\r\n            [readonly]=\"readonly()\"\r\n            [rounded]=\"rounded()\"\r\n            [weekNumber]=\"weekNumber()\"\r\n            [firstDay]=\"firstDay()\"\r\n            [value]=\"value()\"\r\n            (valueChange)=\"onCalendarValueChange($event)\">\r\n            @if (decadeCellTemplate()) {\r\n                <ng-template monaCalendarDecadeCellTemplate let-year>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (monthCellTemplate()) {\r\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (yearCellTemplate()) {\r\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-calendar>\r\n    </div>\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: FontAwesomeModule }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DatePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-date-picker", providers: [
+                        DropdownService,
+                        CalendarService,
+                        {
+                            provide: DropdownPopupInputToken,
+                            useExisting: forwardRef(() => DatePickerComponent),
+                            multi: false
+                        }
+                    ], imports: [
+                        FontAwesomeModule,
+                        CalendarComponent,
+                        TextBoxComponent,
+                        TextBoxSuffixTemplateDirective,
+                        CalendarDecadeCellTemplateDirective,
+                        NgTemplateOutlet,
+                        CalendarMonthCellTemplateDirective,
+                        CalendarYearCellTemplateDirective,
+                        TextBoxPrefixTemplateDirective,
+                        ButtonDirective,
+                        CdkTrapFocus
+                    ], hostDirectives: [DropdownPopupHandlerDirective], host: {
+                        "[attr.tabindex]": "disabled() ? null : -1",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        "[attr.data-expanded]": "expanded()",
+                        "[attr.data-invalid]": "invalidState() || null",
+                        "[class]": "baseClass()"
+                    }, template: "<mona-text-box\r\n    (inputBlur)=\"onDateInputBlur()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    [disabled]=\"disabled()\"\r\n    [value]=\"currentDateString()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [required]=\"required()\"\r\n    [clearButton]=\"showClearButton()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\">\r\n    @if (prefixTemplate()) {\r\n        <ng-template monaTextBoxPrefixTemplate>\r\n            <ng-container [ngTemplateOutlet]=\"prefixTemplate()\"></ng-container>\r\n        </ng-template>\r\n    }\r\n    <ng-template monaTextBoxSuffixTemplate>\r\n        <button\r\n            monaButton\r\n            look=\"ghost\"\r\n            [iconOnly]=\"true\"\r\n            [rounded]=\"'none'\"\r\n            [size]=\"size()\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open calendar'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\"\r\n            (click)=\"onDateInputButtonClick()\">\r\n            <i class=\"ri-calendar-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #popupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        aria-label=\"Date picker\"\r\n        cdkTrapFocus>\r\n        <mona-calendar\r\n            [disabledDates]=\"disabledDates()\"\r\n            [minDate]=\"min()\"\r\n            [maxDate]=\"max()\"\r\n            [readonly]=\"readonly()\"\r\n            [rounded]=\"rounded()\"\r\n            [weekNumber]=\"weekNumber()\"\r\n            [firstDay]=\"firstDay()\"\r\n            [value]=\"value()\"\r\n            (valueChange)=\"onCalendarValueChange($event)\">\r\n            @if (decadeCellTemplate()) {\r\n                <ng-template monaCalendarDecadeCellTemplate let-year>\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"decadeCellTemplate()?.templateRef\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: year }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (monthCellTemplate()) {\r\n                <ng-template monaCalendarMonthCellTemplate let-day let-date=\"date\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"monthCellTemplate()?.templateRef\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: day, date }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n            @if (yearCellTemplate()) {\r\n                <ng-template monaCalendarYearCellTemplate let-year let-text=\"text\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"yearCellTemplate()?.templateRef\"\r\n                        [ngTemplateOutletContext]=\"{ $implicit: year, text }\"></ng-container>\r\n                </ng-template>\r\n            }\r\n        </mona-calendar>\r\n    </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { decadeCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarDecadeCellTemplateDirective), { isSignal: true }] }], monthCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarMonthCellTemplateDirective), { isSignal: true }] }], popupTemplate: [{ type: i0.ViewChild, args: ["popupTemplate", { isSignal: true }] }], prefixTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DateInputPrefixTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], yearCellTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CalendarYearCellTemplateDirective), { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledDates", required: false }] }], firstDay: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDay", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], weekNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "weekNumber", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/date-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DatePickerComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-date-picker.mjs.map