@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,450 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, computed, linkedSignal, signal, viewChild, output, input, model, afterNextRender, effect, untracked, 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 * as i1 from '@nanahoshi/mona-ui/dropdowns';
+import { DropdownService, dropdownPopupThemeVariants, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
+import { DateTime } from 'luxon';
+import { fromEvent } from 'rxjs';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+
+const timePickerBaseVariants = 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 timePickerBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timePickerBaseVariants;
+        default:
+            return timePickerBaseVariants;
+    }
+};
+
+class TimePickerComponent {
+    #destroyRef;
+    #dropdownService;
+    #hostElementRef;
+    #id;
+    #themeService;
+    constructor() {
+        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 = timePickerBaseThemeVariants(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.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 = "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: "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.navigatedDate = signal(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 = dropdownPopupThemeVariants(theme)({ rounded, size });
+            return twMerge(variantClass, userClass);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pickerPopupClass" }] : /* istanbul ignore next */ []));
+        this.popupId = createElementControlId();
+        this.timePopupTemplateRef = viewChild.required("timePopupTemplate", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "timePopupTemplateRef" }] : /* 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 time picker.
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the format of the time picker.
+         */
+        this.format = input("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 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 time picker.
+         * @default null
+         */
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
+        /**
+         * @description Sets the minimum date of the time picker.
+         * @default null
+         */
+        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 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 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 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 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 time picker.
+         */
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the 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 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 time value.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.setDateValues();
+                this.setSubscriptions();
+            }
+        });
+        effect(() => {
+            const popupTemplate = this.timePopupTemplateRef();
+            untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
+        });
+    }
+    onDateStringEdit(dateString) {
+        this.currentDateString.set(dateString);
+    }
+    onTimeInputBlur() {
+        if (this.#dropdownService.popupRef()) {
+            this.touch.emit();
+            return;
+        }
+        this.processTimeInput(this.currentDateString());
+        this.touch.emit();
+    }
+    onTimeInputButtonClick() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.openPopup();
+    }
+    onTimeSelectorValueChange(date) {
+        this.setCurrentDate(date);
+        this.#dropdownService.popupRef()?.close();
+        this.focus();
+    }
+    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);
+        }
+    }
+    generateValidDateTime(dateString) {
+        const value = this.value();
+        const valueDate = value ? DateTime.fromJSDate(value) : DateTime.now();
+        let dateTime = DateTime.fromFormat(dateString, this.format());
+        if (dateTime.isValid) {
+            return dateTime.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
+        }
+        const maxDate = this.max();
+        const minDate = this.min();
+        const date = minDate ?? maxDate;
+        if (date) {
+            const newDate = DateTime.fromJSDate(date);
+            dateTime = newDate.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
+            return dateTime;
+        }
+        return null;
+    }
+    handleKeydown(e) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (e.key === "ArrowDown" && e.altKey) {
+            e.preventDefault();
+            this.openPopup();
+            return;
+        }
+    }
+    openPopup() {
+        if (this.#dropdownService.popupRef()) {
+            return;
+        }
+        this.#dropdownService.triggerPopupOpen$.next({
+            height: this.popupHeight() || "fit-content",
+            width: this.popupWidth() || "auto"
+        });
+    }
+    processTimeInput(inputText) {
+        let dateTime = this.generateValidDateTime(inputText);
+        if (!dateTime) {
+            this.setCurrentDate(null);
+            return;
+        }
+        if (this.dateStringEquals(dateTime.toJSDate(), this.value())) {
+            this.setCurrentDateString(this.value());
+            return;
+        }
+        if (dateTime.isValid) {
+            this.setCurrentDate(dateTime.toJSDate());
+            this.navigatedDate.set(dateTime.toJSDate());
+        }
+        else {
+            this.setCurrentDate(null);
+        }
+    }
+    setCurrentDate(date) {
+        this.value.set(date);
+        this.setCurrentDateString(date);
+        this.touch.emit();
+    }
+    setCurrentDateString(date) {
+        this.updateCurrentDateString(date, this.format());
+    }
+    setDateValues() {
+        const value = this.value();
+        this.navigatedDate.set(value ?? DateTime.now().toJSDate());
+        if (value) {
+            this.updateCurrentDateString(value, this.format());
+        }
+    }
+    setKeyboardNavigation() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(e => this.handleKeydown(e));
+    }
+    setSubscriptions() {
+        this.setKeyboardNavigation();
+        fromEvent(this.#hostElementRef.nativeElement, "focusin")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.focus());
+        this.#dropdownService.popupCloseComplete$
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(() => this.focus());
+    }
+    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: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onTimeInputBlur()" }, 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,
+            {
+                provide: DropdownPopupInputToken,
+                useExisting: forwardRef(() => TimePickerComponent),
+                multi: false
+            }
+        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [value]=\"currentDateString()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [clearButton]=\"showClearButton()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    (inputBlur)=\"onTimeInputBlur()\">\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            (click)=\"onTimeInputButtonClick()\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\r\n            <i class=\"ri-time-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #timePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        aria-label=\"Time picker\"\r\n        cdkTrapFocus>\r\n        <mona-time-selector\r\n            [value]=\"value()\"\r\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n            [max]=\"max()\"\r\n            [min]=\"min()\"\r\n            [disabled]=\"disabled()\"\r\n            [readonly]=\"readonly()\"\r\n            [hourFormat]=\"hourFormat()\"\r\n            [hourStep]=\"hourStep()\"\r\n            [minuteStep]=\"minuteStep()\"\r\n            [secondStep]=\"secondStep()\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\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: 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: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-time-picker", providers: [
+                        DropdownService,
+                        {
+                            provide: DropdownPopupInputToken,
+                            useExisting: forwardRef(() => TimePickerComponent),
+                            multi: false
+                        }
+                    ], imports: [
+                        ButtonDirective,
+                        FontAwesomeModule,
+                        TimeSelectorComponent,
+                        TextBoxComponent,
+                        TextBoxSuffixTemplateDirective,
+                        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()",
+                        "(blur)": "onTimeInputBlur()"
+                    }, template: "<mona-text-box\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly() || readonlyInput()\"\r\n    [required]=\"required()\"\r\n    [value]=\"currentDateString()\"\r\n    [inputAttributes]=\"inputAttributes()\"\r\n    [invalid]=\"invalid()\"\r\n    [placeholder]=\"placeholder()\"\r\n    [rounded]=\"rounded()\"\r\n    [size]=\"size()\"\r\n    [touched]=\"touched()\"\r\n    [clearButton]=\"showClearButton()\"\r\n    (valueChange)=\"onDateStringEdit($event)\"\r\n    (inputBlur)=\"onTimeInputBlur()\">\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            (click)=\"onTimeInputButtonClick()\"\r\n            class=\"h-full w-auto aspect-square\"\r\n            [attr.aria-label]=\"'Open time picker'\"\r\n            [attr.aria-expanded]=\"expanded()\"\r\n            [attr.aria-controls]=\"popupId\"\r\n            [disabled]=\"disabled() || readonly()\"\r\n            [tabindex]=\"-1\">\r\n            <i class=\"ri-time-line\"></i>\r\n        </button>\r\n    </ng-template>\r\n</mona-text-box>\r\n\r\n<ng-template #timePopupTemplate>\r\n    <div\r\n        [class]=\"pickerPopupClass()\"\r\n        [id]=\"popupId\"\r\n        aria-modal=\"true\"\r\n        role=\"dialog\"\r\n        aria-label=\"Time picker\"\r\n        cdkTrapFocus>\r\n        <mona-time-selector\r\n            [value]=\"value()\"\r\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\r\n            [max]=\"max()\"\r\n            [min]=\"min()\"\r\n            [disabled]=\"disabled()\"\r\n            [readonly]=\"readonly()\"\r\n            [hourFormat]=\"hourFormat()\"\r\n            [hourStep]=\"hourStep()\"\r\n            [minuteStep]=\"minuteStep()\"\r\n            [secondStep]=\"secondStep()\"\r\n            [size]=\"size()\"\r\n            [rounded]=\"rounded()\"\r\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\r\n    </div>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { timePopupTemplateRef: [{ type: i0.ViewChild, args: ["timePopupTemplate", { 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 }] }], 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"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/time-picker
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimePickerComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-time-picker.mjs.map