@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,659 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, signal, 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 { ButtonGroupComponent } from '@nanahoshi/mona-ui/button-group';
+import { CalendarDecadeCellTemplateDirective, CalendarMonthCellTemplateDirective, CalendarYearCellTemplateDirective, CalendarComponent } from '@nanahoshi/mona-ui/calendar';
+import { CalendarService, TimeSelectorService, 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 { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
+import { any } from '@mirei/ts-collections';
+import { DateTime } from 'luxon';
+import { fromEvent, mergeWith } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const dateTimePickerBaseVariants = cva(`
+        flex items-center w-full
+        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`
+        },
+        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 dateTimePickerHeaderVariants = cva(`
+        p-2 bg-accent/20 border-b border-border flex items-center
+        [&>mona-button-group]:w-full
+        [&>mona-button-group>[monaButton]]:flex-1
+    `);
+const dateTimePickerFooterVariants = cva(`
+        p-2 bg-accent/20 border-t border-border flex items-center justify-between gap-2
+        [&>[monaButton]]:flex-1
+    `);
+
+const dateTimePickerBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dateTimePickerBaseVariants;
+        default:
+            return dateTimePickerBaseVariants;
+    }
+};
+const dateTimePickerHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dateTimePickerHeaderVariants;
+        default:
+            return dateTimePickerHeaderVariants;
+    }
+};
+const dateTimePickerFooterThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return dateTimePickerFooterVariants;
+        default:
+            return dateTimePickerFooterVariants;
+    }
+};
+
+class DateTimePickerComponent {
+    #calendarService;
+    #destroyRef;
+    #dropdownService;
+    #hostElementRef;
+    #id;
+    #themeService;
+    #timeSelectorService;
+    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.#timeSelectorService = inject(TimeSelectorService);
+        this.activeView = signal("date", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeView" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const focused = this.#dropdownService.popupRef() != null;
+            const rounded = this.rounded();
+            const size = this.size();
+            const variantClass = dateTimePickerBaseThemeVariants(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.footerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dateTimePickerFooterThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.headerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return dateTimePickerHeaderThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.inputAttributes = computed(() => {
+            const controls = this.popupId;
+            const expanded = this.#dropdownService.popupRef() != null;
+            const hasPopup = "dialog";
+            const invalid = this.invalid();
+            return {
+                "aria-autocomplete": "none",
+                "aria-controls": controls,
+                "aria-expanded": expanded,
+                "aria-haspopup": hasPopup,
+                "aria-invalid": invalid,
+                id: this.#id,
+                role: "group"
+            };
+        }, /* @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("datePopupTemplate", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupTemplate" }] : /* istanbul ignore next */ []));
+        this.prefixTemplate = contentChild(DateInputPrefixTemplateDirective, { ...(ngDevMode ? { debugName: "prefixTemplate" } : /* istanbul ignore next */ {}), read: TemplateRef });
+        this.timePickerMax = computed(() => {
+            const maxDate = this.max();
+            const navigatedDate = this.navigatedDate();
+            if (!maxDate) {
+                return null;
+            }
+            const max = DateTime.fromJSDate(maxDate);
+            const date = DateTime.fromJSDate(navigatedDate);
+            if (max.year === date.year && max.month === date.month && max.day === date.day) {
+                return maxDate;
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timePickerMax" }] : /* istanbul ignore next */ []));
+        this.timePickerMin = computed(() => {
+            const minDate = this.min();
+            const navigatedDate = this.navigatedDate();
+            if (!minDate) {
+                return null;
+            }
+            const min = DateTime.fromJSDate(minDate);
+            const date = DateTime.fromJSDate(navigatedDate);
+            if (min.year === date.year && min.month === date.month && min.day === date.day) {
+                return minDate;
+            }
+            return null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timePickerMin" }] : /* istanbul ignore next */ []));
+        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 time picker.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the disabled dates of the date time 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 time picker.
+         */
+        this.format = input("dd/MM/yyyy HH:mm", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the hour format of the time picker.
+         * @default 24
+         */
+        this.hourFormat = input("24", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the hour step of the time picker.
+         * @default 1
+         */
+        this.hourStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the date time 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 time 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 time picker.
+         */
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
+        /**
+         * @description Sets the minute step of the time picker.
+         * @default 1
+         */
+        this.minuteStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @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 time 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 ? [undefined, { debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the width of the popup element.
+         * @default null
+         */
+        this.popupWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "popupWidth" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the readonly state of the date time picker.
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description When true, the input is readonly but the popup 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 time 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 time picker.
+         */
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the second step of the time picker.
+         * @default 1
+         */
+        this.secondStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondStep" }] : /* 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 visibility of the second selector.
+         */
+        this.showSeconds = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the size of the date time picker.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the date time 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 time 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 time 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();
+            }
+        });
+    }
+    onCancelClick() {
+        this.navigatedDate.set(this.value() ?? new Date());
+        this.#dropdownService.popupRef()?.close();
+        this.touch.emit();
+    }
+    onCalendarValueChange(date) {
+        const singleDate = Array.isArray(date) ? null : date;
+        if (singleDate) {
+            const inRangeDate = this.updateDateIfNotInRange(singleDate);
+            this.navigatedDate.set(inRangeDate);
+        }
+        this.activeView.set("time");
+    }
+    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() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (this.#dropdownService.popupRef()) {
+            this.closePopup();
+        }
+        else {
+            this.openPopup();
+        }
+    }
+    onDateStringEdit(dateString) {
+        this.currentDateString.set(dateString);
+    }
+    onSetDateClick() {
+        this.value.set(this.navigatedDate());
+        this.#dropdownService.popupRef()?.close();
+        this.touch.emit();
+    }
+    onTimeSelectorValueChange(date) {
+        if (date) {
+            const inRangeDate = this.updateDateIfNotInRange(date);
+            this.navigatedDate.set(inRangeDate);
+        }
+    }
+    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);
+        }
+    }
+    isDateDisabledByInput(date, disabledDates) {
+        if (typeof disabledDates === "function") {
+            return disabledDates(date);
+        }
+        else if (disabledDates) {
+            return any(disabledDates, d => this.compareDatesEqual(date, d));
+        }
+        return false;
+    }
+    setCurrentDate(date) {
+        this.value.set(date);
+        this.updateCurrentDateString(date, this.format());
+        this.touch.emit();
+    }
+    closePopup() {
+        this.#dropdownService.popupRef()?.close();
+    }
+    handleKeydown(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const popupOpen = this.#dropdownService.popupRef() !== null;
+        if (event.altKey && event.key === "ArrowDown") {
+            event.preventDefault();
+            this.openPopup();
+            return;
+        }
+        if (event.altKey && event.key === "ArrowUp") {
+            event.preventDefault();
+            console.warn("ArrowUp is not supported yet");
+            this.closePopup();
+            return;
+        }
+        if (event.key === "Escape" && popupOpen) {
+            event.preventDefault();
+            this.onCancelClick();
+            return;
+        }
+        if (event.altKey && event.key === "ArrowRight" && popupOpen) {
+            event.preventDefault();
+            this.activeView.set("time");
+            return;
+        }
+        if (event.altKey && event.key === "ArrowLeft" && popupOpen) {
+            event.preventDefault();
+            this.activeView.set("date");
+            return;
+        }
+        if (event.key === "Enter" && popupOpen) {
+            const target = event.target;
+            if (target.tagName === "BUTTON" || target.closest("button")) {
+                return;
+            }
+            event.preventDefault();
+            if (this.activeView() === "date") {
+                this.activeView.set("time");
+            }
+            else {
+                this.onSetDateClick();
+            }
+            return;
+        }
+    }
+    openPopup() {
+        if (!this.#dropdownService.popupRef()) {
+            this.#dropdownService.triggerPopupOpen$.next({
+                minWidth: this.popupWidth() || this.#hostElementRef.nativeElement.getBoundingClientRect().width,
+                width: this.popupWidth() || "fit-content",
+                height: this.popupHeight() || "fit-content",
+                closeOnScroll: false,
+                withScrollTracking: true
+            });
+        }
+    }
+    setKeyboardSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => this.handleKeydown(event));
+        this.#calendarService.keydown$
+            .pipe(mergeWith(this.#timeSelectorService.keydown$), takeUntilDestroyed(this.#destroyRef))
+            .subscribe(e => {
+            const keyboardEvent = e.originalEvent;
+            if (!keyboardEvent) {
+                return;
+            }
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.onCancelClick();
+            }
+            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowUp") {
+                keyboardEvent.preventDefault();
+                this.closePopup();
+            }
+            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowRight" && this.activeView() === "date") {
+                keyboardEvent.preventDefault();
+                this.activeView.set("time");
+            }
+            else if (keyboardEvent.altKey && keyboardEvent.key === "ArrowLeft" && this.activeView() === "time") {
+                keyboardEvent.preventDefault();
+                this.activeView.set("date");
+            }
+            else if (keyboardEvent.key === "Enter" && this.activeView() === "time") {
+                const target = keyboardEvent.target;
+                if (target.tagName === "BUTTON" || target.closest("button")) {
+                    return;
+                }
+                keyboardEvent.preventDefault();
+                this.onSetDateClick();
+            }
+        });
+    }
+    setPopupCloseSubscriptions() {
+        this.#dropdownService.popupCloseComplete$.pipe(takeUntilDestroyed(this.#destroyRef)).subscribe(() => {
+            this.focus();
+            this.activeView.set("date");
+            this.navigatedDate.set(this.value() ?? new Date());
+        });
+    }
+    setSubscriptions() {
+        fromEvent(this.#hostElementRef.nativeElement, "focusin")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.focus());
+        this.setKeyboardSubscriptions();
+    }
+    updateDateIfNotInRange(date) {
+        const maxDate = this.max();
+        const minDate = this.min();
+        if (minDate && date < minDate) {
+            return minDate;
+        }
+        if (maxDate && date > maxDate) {
+            return maxDate;
+        }
+        return date;
+    }
+    updateCurrentDateString(date, format) {
+        if (!date) {
+            this.currentDateString.set("");
+            return;
+        }
+        const dateString = DateTime.fromJSDate(date).toFormat(format);
+        this.currentDateString.set(dateString);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: DateTimePickerComponent, isStandalone: true, selector: "mona-datetime-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 }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", 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 }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", 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 }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", 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: { listeners: { "blur": "onDateInputBlur()" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "class": "baseClass()" } }, providers: [
+            CalendarService,
+            DropdownService,
+            TimeSelectorService,
+            {
+                provide: DropdownPopupInputToken,
+                useExisting: forwardRef(() => DateTimePickerComponent),
+                multi: false
+            }
+        ], queries: [{ propertyName: "decadeCellTemplate", first: true, predicate: CalendarDecadeCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "monthCellTemplate", first: true, predicate: CalendarMonthCellTemplateDirective, descendants: true, isSignal: true }, { propertyName: "prefixTemplate", first: true, predicate: DateInputPrefixTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "yearCellTemplate", first: true, predicate: CalendarYearCellTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "popupTemplate", first: true, predicate: ["datePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\r\n    (inputBlur)=\"onDateInputBlur()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    [clearButton]=\"showClearButton()\"\r\n    [disabled]=\"disabled()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [value]=\"currentDateString()\">\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            [size]=\"size()\"\r\n            [rounded]=\"'none'\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open date and time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            (click)=\"onDateInputButtonClick()\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\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 #datePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        class=\"flex flex-col h-68\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        cdkTrapFocus>\r\n        <div [class]=\"headerClass()\">\r\n            <mona-button-group\r\n                selection=\"single\"\r\n                [allowEmpty]=\"false\"\r\n                class=\"w-full\"\r\n                [disabled]=\"disabled()\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tablist\">\r\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\r\n                    Date\r\n                </button>\r\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\r\n                    Time\r\n                </button>\r\n            </mona-button-group>\r\n        </div>\r\n        <div class=\"overflow-hidden\">\r\n            @if (activeView() === \"date\") {\r\n                <div class=\"h-full flex items-center justify-center\" aria-label=\"Calendar\">\r\n                    <mona-calendar\r\n                        [disabledDates]=\"disabledDates()\"\r\n                        [minDate]=\"min()\"\r\n                        [maxDate]=\"max()\"\r\n                        [firstDay]=\"firstDay()\"\r\n                        [weekNumber]=\"weekNumber()\"\r\n                        [value]=\"navigatedDate()\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [rounded]=\"rounded()\"\r\n                        (valueChange)=\"onCalendarValueChange($event)\"\r\n                        class=\"shadow-none border-none flex-1\">\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            }\r\n            @if (activeView() === \"time\") {\r\n                <div class=\"h-full flex items-center justify-center max-h-64\" aria-label=\"Time picker\">\r\n                    <mona-time-selector\r\n                        [value]=\"navigatedDate()\"\r\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [max]=\"timePickerMax()\"\r\n                        [min]=\"timePickerMin()\"\r\n                        [footer]=\"false\"\r\n                        [size]=\"size()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [hourStep]=\"hourStep()\"\r\n                        [minuteStep]=\"minuteStep()\"\r\n                        [secondStep]=\"secondStep()\"\r\n                        [hourFormat]=\"hourFormat()\"\r\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n                </div>\r\n            }\r\n        </div>\r\n        <div [class]=\"footerClass()\">\r\n            <button\r\n                monaButton\r\n                look=\"primary\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onSetDateClick()\">\r\n                Set\r\n            </button>\r\n            <button\r\n                monaButton\r\n                look=\"default\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onCancelClick()\">\r\n                Cancel\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-template>\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: "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: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "component", type: ButtonGroupComponent, selector: "mona-button-group", inputs: ["allowEmpty", "aria-label", "disabled", "look", "rounded", "selection", "size", "class"], outputs: ["buttonClick", "disabledChange", "selectionChange"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CalendarDecadeCellTemplateDirective, selector: "ng-template[monaCalendarDecadeCellTemplate]" }, { kind: "directive", type: CalendarMonthCellTemplateDirective, selector: "ng-template[monaCalendarMonthCellTemplate]" }, { kind: "directive", type: CalendarYearCellTemplateDirective, selector: "ng-template[monaCalendarYearCellTemplate]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TextBoxPrefixTemplateDirective, selector: "ng-template[monaTextBoxPrefixTemplate]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-datetime-picker", providers: [
+                        CalendarService,
+                        DropdownService,
+                        TimeSelectorService,
+                        {
+                            provide: DropdownPopupInputToken,
+                            useExisting: forwardRef(() => DateTimePickerComponent),
+                            multi: false
+                        }
+                    ], imports: [
+                        ButtonDirective,
+                        FontAwesomeModule,
+                        CalendarComponent,
+                        TimeSelectorComponent,
+                        TextBoxComponent,
+                        TextBoxSuffixTemplateDirective,
+                        ButtonGroupComponent,
+                        CdkTrapFocus,
+                        CalendarDecadeCellTemplateDirective,
+                        CalendarMonthCellTemplateDirective,
+                        CalendarYearCellTemplateDirective,
+                        NgTemplateOutlet,
+                        TextBoxPrefixTemplateDirective
+                    ], 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()",
+                        "(blur)": "onDateInputBlur()"
+                    }, template: "<mona-text-box\r\n    (inputBlur)=\"onDateInputBlur()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    [clearButton]=\"showClearButton()\"\r\n    [disabled]=\"disabled()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [value]=\"currentDateString()\">\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            [size]=\"size()\"\r\n            [rounded]=\"'none'\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open date and time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            (click)=\"onDateInputButtonClick()\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\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 #datePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        class=\"flex flex-col h-68\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        cdkTrapFocus>\r\n        <div [class]=\"headerClass()\">\r\n            <mona-button-group\r\n                selection=\"single\"\r\n                [allowEmpty]=\"false\"\r\n                class=\"w-full\"\r\n                [disabled]=\"disabled()\"\r\n                [size]=\"size()\"\r\n                [rounded]=\"rounded()\"\r\n                role=\"tablist\">\r\n                <button monaButton [selected]=\"activeView() === 'date'\" (click)=\"activeView.set('date')\" role=\"tab\">\r\n                    Date\r\n                </button>\r\n                <button monaButton [selected]=\"activeView() === 'time'\" (click)=\"activeView.set('time')\" role=\"tab\">\r\n                    Time\r\n                </button>\r\n            </mona-button-group>\r\n        </div>\r\n        <div class=\"overflow-hidden\">\r\n            @if (activeView() === \"date\") {\r\n                <div class=\"h-full flex items-center justify-center\" aria-label=\"Calendar\">\r\n                    <mona-calendar\r\n                        [disabledDates]=\"disabledDates()\"\r\n                        [minDate]=\"min()\"\r\n                        [maxDate]=\"max()\"\r\n                        [firstDay]=\"firstDay()\"\r\n                        [weekNumber]=\"weekNumber()\"\r\n                        [value]=\"navigatedDate()\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [rounded]=\"rounded()\"\r\n                        (valueChange)=\"onCalendarValueChange($event)\"\r\n                        class=\"shadow-none border-none flex-1\">\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            }\r\n            @if (activeView() === \"time\") {\r\n                <div class=\"h-full flex items-center justify-center max-h-64\" aria-label=\"Time picker\">\r\n                    <mona-time-selector\r\n                        [value]=\"navigatedDate()\"\r\n                        (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n                        [disabled]=\"disabled()\"\r\n                        [readonly]=\"readonly()\"\r\n                        [max]=\"timePickerMax()\"\r\n                        [min]=\"timePickerMin()\"\r\n                        [footer]=\"false\"\r\n                        [size]=\"size()\"\r\n                        [rounded]=\"rounded()\"\r\n                        [hourStep]=\"hourStep()\"\r\n                        [minuteStep]=\"minuteStep()\"\r\n                        [secondStep]=\"secondStep()\"\r\n                        [hourFormat]=\"hourFormat()\"\r\n                        [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n                </div>\r\n            }\r\n        </div>\r\n        <div [class]=\"footerClass()\">\r\n            <button\r\n                monaButton\r\n                look=\"primary\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onSetDateClick()\">\r\n                Set\r\n            </button>\r\n            <button\r\n                monaButton\r\n                look=\"default\"\r\n                [disabled]=\"disabled()\"\r\n                [rounded]=\"rounded()\"\r\n                [size]=\"size()\"\r\n                (click)=\"onCancelClick()\">\r\n                Cancel\r\n            </button>\r\n        </div>\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: ["datePopupTemplate", { 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 }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", 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 }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", 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 }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", 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/datetime-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DateTimePickerComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-datetime-picker.mjs.map