@nanahoshi/mona-ui 0.1.0

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

@@ -0,0 +1,723 @@
+import { DecimalPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, ElementRef, signal, computed, input, effect, Directive, viewChild, output, model, afterNextRender, untracked, Component } from '@angular/core';
+import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ButtonDirective } from '@nanahoshi/mona-ui/button';
+import { PreventableEvent } from '@nanahoshi/mona-ui/common';
+import { TimeSelectorService, generateMinuteSet, generateSecondSet, generateHourSet, TimeLimiterPipe } from '@nanahoshi/mona-ui/date-input';
+import { rxTimeout, createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { DateTime } from 'luxon';
+import { tap, fromEvent } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { cva } from 'class-variance-authority';
+
+const timeSelectorBaseVariants = cva(`
+        flex flex-col w-full h-full overflow-hidden
+        data-[invalid='true']:border data-[invalid='true']:border-error
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+    `, {
+    variants: {
+        disabled: {
+            true: "opacity-50 cursor-not-allowed pointer-events-none",
+            false: ""
+        },
+        size: {
+            small: "text-xs",
+            medium: "text-sm",
+            large: "text-md"
+        }
+    }
+});
+const timeSelectorFooterVariants = cva(`
+        w-full flex items-center justify-end px-1 py-1 border-0 border-t border-input-border bg-accent
+    `);
+const timeSelectorHeaderVariants = cva(`
+        flex bg-accent text-accent-foreground
+        border-b border-input-border
+        text-xs font-semibold uppercase
+        [&>div]:flex-1 [&>div]:py-2 [&>div]:text-center
+    `);
+const timeSelectorInfoContainerVariants = cva(`
+        flex items-center justify-between
+        px-2 py-1 border-b border-input-border/40
+        [&>span]:text-xs [&>span]:font-medium [&>span]:select-none
+    `);
+const timeSelectorListContainerVariants = cva(`
+        flex flex-row w-full relative overflow-hidden
+    `);
+const timeSelectorListVariants = cva(`
+        flex-1 overflow-y-auto h-full
+        scrollbar-hide scroll-smooth
+        snap-y snap-mandatory
+        scrollbar-width:none
+        select-none outline-none
+        [&::-webkit-scrollbar]:hidden
+        focus-visible:bg-accent
+        focus-within:bg-accent
+    `, {
+    variants: {
+        size: {
+            small: "h-24",
+            medium: "h-32",
+            large: "h-40"
+        }
+    }
+});
+const timeSelectorListItemVariants = cva(`
+        flex items-center justify-center cursor-pointer
+        snap-center relative z-10
+    `, {
+    variants: {
+        selected: {
+            true: "bg-primary text-primary-foreground",
+            false: ""
+        },
+        size: {
+            small: "h-6",
+            medium: "h-7",
+            large: "h-8"
+        }
+    },
+    defaultVariants: {
+        selected: false
+    }
+});
+
+const timeSelectorBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorBaseVariants;
+        default:
+            return timeSelectorBaseVariants;
+    }
+};
+const timeSelectorFooterThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorFooterVariants;
+        default:
+            return timeSelectorFooterVariants;
+    }
+};
+const timeSelectorHeaderThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorHeaderVariants;
+        default:
+            return timeSelectorHeaderVariants;
+    }
+};
+const timeSelectorInfoContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorInfoContainerVariants;
+        default:
+            return timeSelectorInfoContainerVariants;
+    }
+};
+const timeSelectorListContainerThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorListContainerVariants;
+        default:
+            return timeSelectorListContainerVariants;
+    }
+};
+const timeSelectorListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorListVariants;
+        default:
+            return timeSelectorListVariants;
+    }
+};
+const timeSelectorListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return timeSelectorListItemVariants;
+        default:
+            return timeSelectorListItemVariants;
+    }
+};
+
+class TimeSelectorItemDirective {
+    #destroyRef;
+    #host;
+    #scrollBehavior;
+    #themeService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#host = inject((ElementRef));
+        this.#scrollBehavior = signal("instant", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#scrollBehavior" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const selected = this.selected();
+            const size = this.size();
+            return timeSelectorListItemThemeVariants(theme)({ selected, size });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.selected = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.size = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        this.value = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const selected = this.selected();
+            rxTimeout(this.#destroyRef, () => {
+                if (selected) {
+                    this.#host.nativeElement.scrollIntoView({ block: "center", behavior: this.#scrollBehavior() });
+                }
+                if (this.#scrollBehavior() === "instant") {
+                    this.#scrollBehavior.set("auto");
+                }
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TimeSelectorItemDirective, isStandalone: true, selector: "li[monaTimeSelectorItem]", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "attr.aria-selected": "selected()", "attr.data-value": "value()", "class": "baseClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "li[monaTimeSelectorItem]",
+                    host: {
+                        role: "option",
+                        "[attr.aria-selected]": "selected()",
+                        "[attr.data-value]": "value()",
+                        "[class]": "baseClass()"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }] } });
+
+class TimeSelectorListDirective {
+    constructor() {
+        this.#itemHeight = computed(() => {
+            const size = this.size();
+            return size === "small" ? 24 : size === "medium" ? 28 : 32; // TODO: Get rid of magic numbers
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#itemHeight" }] : /* istanbul ignore next */ []));
+        this.#themeService = inject(ThemeService);
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return timeSelectorListThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.listPadding = computed(() => {
+            const itemHeight = this.#itemHeight();
+            const popupHeight = this.popupHeight();
+            return popupHeight / 2 - itemHeight / 2;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listPadding" }] : /* istanbul ignore next */ []));
+        this.active = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.popupHeight = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "popupHeight" }] : /* istanbul ignore next */ []));
+        this.size = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    }
+    #itemHeight;
+    #themeService;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TimeSelectorListDirective, isStandalone: true, selector: "ol[monaTimeSelectorList]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "baseClass()", "style.padding-top.px": "listPadding()", "style.padding-bottom.px": "listPadding()", "attr.tabindex": "active() ? 0 : -1" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ol[monaTimeSelectorList]",
+                    host: {
+                        role: "listbox",
+                        "[class]": "baseClass()",
+                        "[style.padding-top.px]": "listPadding()",
+                        "[style.padding-bottom.px]": "listPadding()",
+                        "[attr.tabindex]": "active() ? 0 : -1"
+                    }
+                }]
+        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: true }] }] } });
+
+class TimeSelectorComponent {
+    #destroyRef;
+    #height;
+    #hostElementRef;
+    #themeService;
+    #timeSelectorService;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#height = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#height" }] : /* istanbul ignore next */ []));
+        this.#hostElementRef = inject((ElementRef));
+        this.#themeService = inject(ThemeService);
+        this.#timeSelectorService = inject(TimeSelectorService, { optional: true });
+        this.amMeridiemVisible = computed(() => {
+            const min = this.min();
+            return !(min && min.getHours() >= 12);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "amMeridiemVisible" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const disabled = this.disabled();
+            return timeSelectorBaseThemeVariants(theme)({ disabled });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.computedPopupHeight = this.#height.asReadonly();
+        this.focusedList = signal("hours", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusedList" }] : /* istanbul ignore next */ []));
+        this.footerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return timeSelectorFooterThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
+        this.headerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return timeSelectorHeaderThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
+        this.hour = computed(() => {
+            const hour = this.navigatedDate().hour;
+            const hourFormat = this.hourFormat();
+            if (hourFormat === "24") {
+                return hour;
+            }
+            return hour % 12 || 12;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hour" }] : /* istanbul ignore next */ []));
+        this.hourListId = createElementControlId();
+        this.hourListRef = viewChild.required("hourList", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourListRef" }] : /* istanbul ignore next */ []));
+        this.infoContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return timeSelectorInfoContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "infoContainerClass" }] : /* istanbul ignore next */ []));
+        this.listContainerClass = computed(() => {
+            const theme = this.#themeService.theme();
+            return timeSelectorListContainerThemeVariants(theme)();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listContainerClass" }] : /* istanbul ignore next */ []));
+        this.maxDate = computed(() => {
+            const max = this.max();
+            return max ? DateTime.fromJSDate(max) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
+        this.meridiem = signal("AM", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "meridiem" }] : /* istanbul ignore next */ []));
+        this.meridiemListId = createElementControlId();
+        this.meridiemListRef = viewChild("meridiemList", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "meridiemListRef" }] : /* istanbul ignore next */ []));
+        this.minDate = computed(() => {
+            const min = this.min();
+            return min ? DateTime.fromJSDate(min) : null;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
+        this.minute = computed(() => this.navigatedDate().minute, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minute" }] : /* istanbul ignore next */ []));
+        this.minuteListId = createElementControlId();
+        this.minuteListRef = viewChild.required("minuteList", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteListRef" }] : /* istanbul ignore next */ []));
+        this.minutes = computed(() => generateMinuteSet(this.minuteStep()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []));
+        this.navigatedDate = signal(DateTime.now(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
+        this.navigatedDateText = computed(() => {
+            const hourFormat = this.hourFormat();
+            return this.navigatedDate().toLocaleString({ hour: "numeric", minute: "numeric", hour12: hourFormat === "12" });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "navigatedDateText" }] : /* istanbul ignore next */ []));
+        this.pmMeridiemVisible = computed(() => {
+            const max = this.max();
+            return !(max && max.getHours() < 12);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pmMeridiemVisible" }] : /* istanbul ignore next */ []));
+        this.second = computed(() => this.navigatedDate().second, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "second" }] : /* istanbul ignore next */ []));
+        this.secondListId = createElementControlId();
+        this.secondListRef = viewChild("secondList", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondListRef" }] : /* istanbul ignore next */ []));
+        this.seconds = computed(() => generateSecondSet(this.secondStep()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "seconds" }] : /* istanbul ignore next */ []));
+        this.viewHours = computed(() => {
+            const meridiem = this.meridiem();
+            const hourFormat = this.hourFormat();
+            const hourStep = this.hourStep();
+            return generateHourSet(hourFormat, meridiem, hourStep);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewHours" }] : /* istanbul ignore next */ []));
+        this.ariaLabel = input("Time selector", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        this.focusOnMount = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusOnMount" }] : /* istanbul ignore next */ []));
+        this.footer = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "footer" }] : /* istanbul ignore next */ []));
+        this.hourFormat = input("24", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
+        this.hourStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Marks the time selector 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 */ []));
+        this.max = input(undefined, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
+        this.min = input(undefined, { ...(ngDevMode ? { debugName: "min" } : /* istanbul ignore next */ {}), transform: value => (value instanceof Date ? value : undefined) });
+        this.minuteStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Prevents value changes while preserving the component's visual state.
+         * @default false
+         */
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets whether the time selector is required. 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 */ []));
+        this.rounded = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        this.secondStep = input(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondStep" }] : /* istanbul ignore next */ []));
+        this.showSeconds = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showSeconds" }] : /* istanbul ignore next */ []));
+        this.size = input("medium", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Emitted when the time selector is interacted with via blur or value selection.
+         * The `FormField` directive listens to this to mark the field as touched.
+         */
+        this.touch = output();
+        /**
+         * @description Sets the touched state of the time selector. 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 */ []));
+        /**
+         * @description Two-way bindable current time value.
+         * @default null
+         */
+        this.value = model(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        afterNextRender({
+            read: () => {
+                this.#height.set(this.#hostElementRef.nativeElement.offsetHeight);
+                this.setDateValues();
+                const value = this.value();
+                if (value) {
+                    const dt = DateTime.fromJSDate(value);
+                    if (dt.isValid) {
+                        this.navigatedDate.set(dt);
+                    }
+                    else {
+                        this.initializeNavigatedDate(value);
+                    }
+                }
+                this.setupKeyboardNavigation();
+                if (this.focusOnMount()) {
+                    this.focusList(this.focusedList());
+                }
+            }
+        });
+        effect(() => {
+            const value = this.value();
+            untracked(() => this.setDateValues(value));
+        });
+        toObservable(this.navigatedDate)
+            .pipe(takeUntilDestroyed(), filter(() => !this.footer()), tap(() => this.updateValue(this.navigatedDate().toJSDate(), true)))
+            .subscribe();
+    }
+    focus() {
+        this.focusList(this.focusedList());
+    }
+    onBlur() {
+        this.touch.emit();
+    }
+    onHourChange(hour) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.navigatedDate.update(d => d.set({ hour }));
+    }
+    onMeridiemClick(meridiem) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        if (this.meridiem() === meridiem) {
+            return;
+        }
+        const hour = this.navigatedDate().hour;
+        if (meridiem === "PM" && hour < 12) {
+            this.navigatedDate.update(date => date.set({ hour: hour + 12 }));
+        }
+        else if (meridiem === "AM" && hour >= 12) {
+            this.navigatedDate.update(date => date.set({ hour: hour - 12 }));
+        }
+        this.meridiem.set(meridiem);
+    }
+    onMinuteChange(minute) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.navigatedDate.update(date => date.set({ minute }));
+    }
+    onNowClick(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        let now = DateTime.now();
+        const min = this.minDate();
+        const max = this.maxDate();
+        if (min && now < min) {
+            if (min.isValid) {
+                now = min;
+            }
+        }
+        else if (max && now > max) {
+            if (max.isValid) {
+                now = max;
+            }
+        }
+        this.navigatedDate.update(date => date.set({ hour: now.hour, minute: now.minute, second: now.second, millisecond: now.millisecond }));
+        this.meridiem.set(now.hour >= 12 ? "PM" : "AM");
+    }
+    onSecondChange(second) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.navigatedDate.update(date => date.set({ second }));
+    }
+    onSetTimeClick() {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        this.updateValue(this.navigatedDate().toJSDate(), true);
+    }
+    getListRef(listType) {
+        switch (listType) {
+            case "hours":
+                return this.hourListRef();
+            case "minutes":
+                return this.minuteListRef();
+            case "seconds":
+                return this.secondListRef();
+            case "meridiem":
+                return this.meridiemListRef();
+        }
+    }
+    getNextList(current, direction) {
+        const lists = ["hours", "minutes"];
+        if (this.showSeconds()) {
+            lists.push("seconds");
+        }
+        if (this.hourFormat() === "12") {
+            lists.push("meridiem");
+        }
+        const currentIndex = lists.indexOf(current);
+        if (direction === "right") {
+            return lists[(currentIndex + 1) % lists.length];
+        }
+        else {
+            return lists[(currentIndex - 1 + lists.length) % lists.length];
+        }
+    }
+    handleKeydown(event) {
+        if (this.disabled() || this.readonly()) {
+            return;
+        }
+        const preventableEvent = new PreventableEvent("calendarKeydown", event);
+        this.#timeSelectorService?.keydown$.next(preventableEvent);
+        if (preventableEvent.isDefaultPrevented()) {
+            return;
+        }
+        const focusedList = this.focusedList();
+        switch (event.key) {
+            case "ArrowUp":
+                event.preventDefault();
+                this.navigateItem(focusedList, -1);
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                this.navigateItem(focusedList, 1);
+                break;
+            case "ArrowLeft":
+                if (event.altKey) {
+                    return;
+                }
+                event.preventDefault();
+                this.focusedList.set(this.getNextList(focusedList, "left"));
+                this.focusList(this.focusedList());
+                break;
+            case "ArrowRight":
+                if (event.altKey) {
+                    return;
+                }
+                event.preventDefault();
+                this.focusedList.set(this.getNextList(focusedList, "right"));
+                this.focusList(this.focusedList());
+                break;
+            case "Home":
+                event.preventDefault();
+                this.navigateToEdge(focusedList, "first");
+                break;
+            case "End":
+                event.preventDefault();
+                this.navigateToEdge(focusedList, "last");
+                break;
+            case "Enter":
+            case " ":
+                this.updateValue(this.navigatedDate().toJSDate(), true);
+                break;
+        }
+    }
+    focusList(listType) {
+        const listRef = this.getListRef(listType);
+        listRef?.nativeElement.focus();
+    }
+    dateValuesEqual(date1, date2) {
+        return date1?.getTime() === date2?.getTime();
+    }
+    initializeNavigatedDate(date) {
+        const min = this.min();
+        const max = this.max();
+        if (!date) {
+            this.navigatedDate.set(DateTime.now());
+        }
+        else if (min && date < min) {
+            const minDate = DateTime.fromJSDate(min);
+            if (minDate.isValid) {
+                this.navigatedDate.set(minDate);
+            }
+        }
+        else if (max && date > max) {
+            const maxDate = DateTime.fromJSDate(max);
+            if (maxDate.isValid) {
+                this.navigatedDate.set(maxDate);
+            }
+        }
+        else {
+            const dateToSet = DateTime.fromJSDate(date);
+            if (dateToSet.isValid) {
+                this.navigatedDate.set(dateToSet);
+            }
+        }
+    }
+    navigateItem(listType, direction) {
+        switch (listType) {
+            case "hours": {
+                const hours = Array.from(this.viewHours());
+                const currentIndex = hours.findIndex(h => h.viewValue === this.hour());
+                const newIndex = Math.max(0, Math.min(hours.length - 1, currentIndex + direction));
+                if (hours[newIndex]) {
+                    this.onHourChange(hours[newIndex].value);
+                }
+                break;
+            }
+            case "minutes": {
+                const currentMinute = this.minute();
+                const newMinute = Math.max(0, Math.min(59, currentMinute + direction));
+                this.onMinuteChange(newMinute);
+                break;
+            }
+            case "seconds": {
+                const currentSecond = this.second();
+                const newSecond = Math.max(0, Math.min(59, currentSecond + direction));
+                this.onSecondChange(newSecond);
+                break;
+            }
+            case "meridiem": {
+                const current = this.meridiem();
+                if (direction !== 0) {
+                    this.onMeridiemClick(current === "AM" ? "PM" : "AM");
+                }
+                break;
+            }
+        }
+    }
+    navigateToEdge(listType, edge) {
+        switch (listType) {
+            case "hours": {
+                const hours = Array.from(this.viewHours());
+                const target = edge === "first" ? hours[0] : hours[hours.length - 1];
+                if (target) {
+                    this.onHourChange(target.value);
+                }
+                break;
+            }
+            case "minutes": {
+                this.onMinuteChange(edge === "first" ? 0 : 59);
+                break;
+            }
+            case "seconds": {
+                this.onSecondChange(edge === "first" ? 0 : 59);
+                break;
+            }
+            case "meridiem": {
+                this.onMeridiemClick(edge === "first" ? "AM" : "PM");
+                break;
+            }
+        }
+    }
+    setDateValues(value = this.value()) {
+        const currentDate = this.navigatedDate().toJSDate();
+        if (!this.dateValuesEqual(currentDate, value)) {
+            this.initializeNavigatedDate(value);
+        }
+        const meridiem = this.navigatedDate().hour >= 12 ? "PM" : "AM";
+        this.meridiem.set(meridiem);
+    }
+    setupKeyboardNavigation() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.disabled()))
+            .subscribe(event => this.handleKeydown(event));
+    }
+    updateValue(date, notify) {
+        if (this.dateValuesEqual(this.value(), date)) {
+            if (notify) {
+                this.touch.emit();
+            }
+            return;
+        }
+        this.value.set(date);
+        if (notify) {
+            this.touch.emit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: TimeSelectorComponent, isStandalone: true, selector: "mona-time-selector", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, focusOnMount: { classPropertyName: "focusOnMount", publicName: "focusOnMount", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange" }, host: { attributes: { "role": "group" }, listeners: { "blur": "onBlur()" }, properties: { "attr.aria-label": "ariaLabel()", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalid() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalid() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourList"], descendants: true, isSignal: true }, { propertyName: "meridiemListRef", first: true, predicate: ["meridiemList"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteList"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: TimeSelectorItemDirective, selector: "li[monaTimeSelectorItem]", inputs: ["selected", "size", "value"] }, { 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: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-time-selector", imports: [DecimalPipe, TimeLimiterPipe, TimeSelectorItemDirective, ButtonDirective, TimeSelectorListDirective], host: {
+                        role: "group",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-disabled]": "disabled()",
+                        "[attr.aria-invalid]": "invalid() ? 'true' : null",
+                        "[attr.aria-readonly]": "readonly()",
+                        "[attr.aria-required]": "required()",
+                        "[attr.data-invalid]": "invalid() || null",
+                        "[attr.data-readonly]": "readonly() || null",
+                        "[attr.data-required]": "required() || null",
+                        "[class]": "baseClass()",
+                        "(blur)": "onBlur()"
+                    }, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { hourListRef: [{ type: i0.ViewChild, args: ["hourList", { isSignal: true }] }], meridiemListRef: [{ type: i0.ViewChild, args: ["meridiemList", { isSignal: true }] }], minuteListRef: [{ type: i0.ViewChild, args: ["minuteList", { isSignal: true }] }], secondListRef: [{ type: i0.ViewChild, args: ["secondList", { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], focusOnMount: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusOnMount", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", 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 }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", 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 }] }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/time-selector
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TimeSelectorComponent };
+//# sourceMappingURL=nanahoshi-mona-ui-time-selector.mjs.map