@nanahoshi/mona-ui 0.24.4 → 0.24.6

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

@@ -1,14 +1,13 @@
 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 { inject, DestroyRef, ElementRef, signal, computed, input, effect, Directive, viewChild, booleanAttribute, output, model, afterNextRender, untracked, Component } from '@angular/core';
+import { 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 { TimeLimiterPipe, TimeSelectorService, getLocaleHourFormat, generateMinuteSet, generateSecondSet, generateHourSet } from '@nanahoshi/mona-ui/date-input';
 import { injectComponentDirection, MonaI18nService, formatNumber } from '@nanahoshi/mona-ui/i18n';
 import { rxTimeout, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { DateTime } from 'luxon';
-import { tap, fromEvent } from 'rxjs';
-import { filter } from 'rxjs/operators';
+import { fromEvent, filter } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
 const timeSelectorBaseThemeVariants = cva(`
@@ -198,6 +197,7 @@ const TIME_SELECTOR_DEFAULT_MESSAGES = {
     timeSelector: "Time selector"
 };
 
+const TIME_LIMITER = new TimeLimiterPipe();
 class TimeSelectorComponent {
     #destroyRef;
     #direction;
@@ -213,8 +213,6 @@ class TimeSelectorComponent {
         this.#hostElementRef = inject((ElementRef));
         this.#i18n = inject(MonaI18nService);
         this.#timeSelectorService = inject(TimeSelectorService, { optional: true });
-        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.amMeridiemVisible = computed(() => {
             const min = this.min();
             return !(min && min.getHours() >= 12);
@@ -226,6 +224,9 @@ class TimeSelectorComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.computedPopupHeight = this.#height.asReadonly();
+        /** The clock in use: the `hourFormat` input, or the locale's own when it isn't set. */
+        this.effectiveHourFormat = computed(() => this.hourFormat() ?? getLocaleHourFormat(this.#i18n.localeId()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveHourFormat" }] : /* istanbul ignore next */ []));
         this.focusedList = signal("hours", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusedList" }] : /* istanbul ignore next */ []));
         this.footerClass = computed(() => {
@@ -238,8 +239,7 @@ class TimeSelectorComponent {
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.hour = computed(() => {
             const hour = this.navigatedDate().hour;
-            const hourFormat = this.hourFormat();
-            if (hourFormat === "24") {
+            if (this.effectiveHourFormat() === "24") {
                 return hour;
             }
             return hour % 12 || 12;
@@ -248,12 +248,17 @@ class TimeSelectorComponent {
         this.hourListId = createElementControlId();
         this.hourListRef = viewChild.required("hourList", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hourListRef" }] : /* istanbul ignore next */ []));
+        /** The hours shown and reachable with the keyboard: on the step, within min and max. */
+        this.hourOptions = computed(() => this.limit(this.viewHours(), "h"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hourOptions" }] : /* istanbul ignore next */ []));
         this.infoContainerClass = computed(() => {
             return timeSelectorInfoContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "infoContainerClass" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.isRtl = computed(() => this.#direction() === "rtl", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRtl" }] : /* istanbul ignore next */ []));
         this.listContainerClass = computed(() => {
             return timeSelectorListContainerThemeVariants();
         }, /* @ts-ignore */
@@ -281,16 +286,15 @@ class TimeSelectorComponent {
         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.minuteOptions = computed(() => this.limit(generateMinuteSet(this.minuteStep()), "m"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minuteOptions" }] : /* istanbul ignore next */ []));
         this.navigatedDate = signal(DateTime.now(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.navigatedDateText = computed(() => {
-            const hourFormat = this.hourFormat();
             const locale = this.#i18n.localeId();
             return this.navigatedDate()
                 .setLocale(locale)
-                .toLocaleString({ hour: "numeric", minute: "numeric", hour12: hourFormat === "12" });
+                .toLocaleString({ hour: "numeric", minute: "numeric", hour12: this.effectiveHourFormat() === "12" });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDateText" }] : /* istanbul ignore next */ []));
         this.pmMeridiemVisible = computed(() => {
@@ -303,27 +307,34 @@ class TimeSelectorComponent {
         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 */
+        this.secondOptions = computed(() => this.limit(generateSecondSet(this.secondStep()), "s"), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "secondOptions" }] : /* istanbul ignore next */ []));
+        this.viewHours = computed(() => generateHourSet(this.effectiveHourFormat(), this.meridiem(), this.hourStep()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "viewHours" }] : /* istanbul ignore next */ []));
         /**
          * @description Accessible label for the time selector group.
          * @default ""
          */
         this.ariaLabel = input("", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
-        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 */
+        this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description Moves focus to the hour list when the selector first renders. The pickers set it for their popups;
+         * an inline selector leaves focus where it is, so the page doesn't jump to it on load.
+         * @default false
+         */
+        this.focusOnMount = input(false, { ...(ngDevMode ? { debugName: "focusOnMount" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description Shows the Set button. Without it, every change of hour, minute, second or AM/PM made by the user
+         * is written to the value at once.
+         * @default true
+         */
+        this.footer = input(true, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        /**
+         * @description The clock to show: "12" with an AM/PM list, or "24". When not set, the active locale's own clock
+         * is used (12-hour for en-US, 24-hour for de-DE).
+         * @default null
+         */
+        this.hourFormat = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hourFormat" }] : /* istanbul ignore next */ []));
         this.hourStep = input(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hourStep" }] : /* istanbul ignore next */ []));
@@ -332,8 +343,7 @@ class TimeSelectorComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.invalid = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+        this.invalid = input(false, { ...(ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         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 */
@@ -342,26 +352,23 @@ class TimeSelectorComponent {
          * @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 */ []));
+        this.readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
          * @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.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         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.showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         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.
+         * @description Emitted when focus leaves the time selector, as a native input is touched on blur. Moving between
+         * its lists and buttons doesn't count. The `FormField` directive listens to this to mark the field as touched.
          */
         this.touch = output();
         /**
@@ -369,10 +376,10 @@ class TimeSelectorComponent {
          * this is written by the `FormField` directive.
          * @default false
          */
-        this.touched = input(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+        this.touched = input(false, { ...(ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         /**
-         * @description Two-way bindable current time value.
+         * @description Two-way bindable current time value. It is written by the Set button and Enter, or, without a
+         * footer, by each change the user makes; never on its own.
          * @default null
          */
         this.value = model(null, /* @ts-ignore */
@@ -401,12 +408,22 @@ class TimeSelectorComponent {
             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());
+    /**
+     * Moves focus to the active list.
+     * @param options passed to the native `focus()` call, for example `{ preventScroll: true }`.
+     */
+    focus(options) {
+        this.focusList(this.focusedList(), options);
+    }
+    /** The id of the active option, or null while the time isn't one of the options (between steps, say). */
+    activeOptionId(listId, options, value) {
+        for (const option of options) {
+            if (option.value === value) {
+                return `${listId}${value}`;
+            }
+        }
+        return null;
     }
     formatTwoDigit(value) {
         return formatNumber(value, this.#i18n.localeId(), {
@@ -414,14 +431,22 @@ class TimeSelectorComponent {
             useGrouping: false
         });
     }
-    onBlur() {
+    onFocusOut(event) {
+        // Removing a focused selector from the page fires focusout after it is destroyed.
+        if (this.#destroyRef.destroyed) {
+            return;
+        }
+        const nextTarget = event.relatedTarget;
+        if (nextTarget instanceof Node && this.#hostElementRef.nativeElement.contains(nextTarget)) {
+            return;
+        }
         this.touch.emit();
     }
     onHourChange(hour) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        this.navigatedDate.update(d => d.set({ hour }));
+        this.navigateTo(this.navigatedDate().set({ hour }));
     }
     onMeridiemClick(meridiem) {
         if (this.disabled() || this.readonly()) {
@@ -432,57 +457,67 @@ class TimeSelectorComponent {
         }
         const hour = this.navigatedDate().hour;
         if (meridiem === "PM" && hour < 12) {
-            this.navigatedDate.update(date => date.set({ hour: hour + 12 }));
+            this.navigateTo(this.navigatedDate().set({ hour: hour + 12 }));
         }
         else if (meridiem === "AM" && hour >= 12) {
-            this.navigatedDate.update(date => date.set({ hour: hour - 12 }));
+            this.navigateTo(this.navigatedDate().set({ hour: hour - 12 }));
         }
-        this.meridiem.set(meridiem);
     }
     onMinuteChange(minute) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        this.navigatedDate.update(date => date.set({ minute }));
+        this.navigateTo(this.navigatedDate().set({ minute }));
     }
-    onNowClick(_event) {
+    onNowClick() {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        let now = DateTime.now().setLocale(this.#i18n.localeId());
-        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");
+        const now = DateTime.now();
+        this.navigateTo(this.navigatedDate().set({
+            hour: now.hour,
+            minute: now.minute,
+            second: now.second,
+            millisecond: now.millisecond
+        }));
     }
     onSecondChange(second) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        this.navigatedDate.update(date => date.set({ second }));
+        this.navigateTo(this.navigatedDate().set({ second }));
     }
     onSetTimeClick() {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        this.updateValue(this.navigatedDate().toJSDate(), true);
+        this.updateValue(this.clampToRange(this.navigatedDate()).toJSDate());
+    }
+    /** Moves a time inside min and max, on the same day. */
+    clampToRange(date) {
+        const day = { year: date.year, month: date.month, day: date.day };
+        const min = this.minDate()?.set(day);
+        const max = this.maxDate()?.set(day);
+        const timeOf = (bound) => ({
+            hour: bound.hour,
+            minute: bound.minute,
+            second: bound.second,
+            millisecond: bound.millisecond
+        });
+        if (min && date < min) {
+            return date.set(timeOf(min));
+        }
+        if (max && date > max) {
+            return date.set(timeOf(max));
+        }
+        return date;
     }
     dateValuesEqual(date1, date2) {
         return date1?.getTime() === date2?.getTime();
     }
-    focusList(listType) {
+    focusList(listType, options) {
         const listRef = this.getListRef(listType);
-        listRef?.nativeElement.focus();
+        listRef?.nativeElement.focus(options);
     }
     getListRef(listType) {
         switch (listType) {
@@ -501,7 +536,7 @@ class TimeSelectorComponent {
         if (this.showSeconds()) {
             lists.push("seconds");
         }
-        if (this.hourFormat() === "12") {
+        if (this.effectiveHourFormat() === "12") {
             lists.push("meridiem");
         }
         const currentIndex = lists.indexOf(current);
@@ -514,6 +549,10 @@ class TimeSelectorComponent {
             return lists[(currentIndex - 1 + lists.length) % lists.length];
         }
     }
+    getOptions(listType) {
+        const options = listType === "hours" ? this.hourOptions : listType === "minutes" ? this.minuteOptions : this.secondOptions;
+        return Array.from(options());
+    }
     handleKeydown(event) {
         if (this.disabled() || this.readonly()) {
             return;
@@ -523,6 +562,10 @@ class TimeSelectorComponent {
         if (preventableEvent.isDefaultPrevented()) {
             return;
         }
+        // Keys pressed on the Now and Set buttons belong to the buttons, which act on click.
+        if (event.target.closest("button")) {
+            return;
+        }
         const focusedList = this.focusedList();
         switch (event.key) {
             case "ArrowUp":
@@ -559,7 +602,9 @@ class TimeSelectorComponent {
                 break;
             case "Enter":
             case " ":
-                this.updateValue(this.navigatedDate().toJSDate(), true);
+                // Space would otherwise scroll the focused list.
+                event.preventDefault();
+                this.updateValue(this.clampToRange(this.navigatedDate()).toJSDate());
                 break;
         }
     }
@@ -589,60 +634,55 @@ class TimeSelectorComponent {
             }
         }
     }
+    /** The options of a list that pass the step and the min/max bounds for the time being edited. */
+    limit(values, type) {
+        return TIME_LIMITER.transform(values, type, this.navigatedDate(), this.minDate(), this.maxDate());
+    }
+    /** Moves through the options of a list, so the keyboard reaches what the mouse can: steps within min and max. */
     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;
+        if (listType === "meridiem") {
+            const target = this.meridiem() === "AM" ? "PM" : "AM";
+            if (target === "AM" ? this.amMeridiemVisible() : this.pmMeridiemVisible()) {
+                this.onMeridiemClick(target);
             }
+            return;
+        }
+        const options = this.getOptions(listType);
+        if (options.length === 0) {
+            return;
+        }
+        const current = listType === "hours" ? this.navigatedDate().hour : listType === "minutes" ? this.minute() : this.second();
+        const index = options.findIndex(option => option.value === current);
+        let target;
+        if (index >= 0) {
+            target = options[Math.max(0, Math.min(options.length - 1, index + direction))];
+        }
+        else {
+            // Between steps: go to the nearest option in the direction of the key.
+            target =
+                direction > 0
+                    ? (options.find(option => option.value > current) ?? options[options.length - 1])
+                    : ([...options].reverse().find(option => option.value < current) ?? options[0]);
+        }
+        this.setUnit(listType, target.value);
+    }
+    navigateTo(date) {
+        const clamped = this.clampToRange(date);
+        this.navigatedDate.set(clamped);
+        this.meridiem.set(clamped.hour >= 12 ? "PM" : "AM");
+        if (!this.footer()) {
+            this.updateValue(clamped.toJSDate());
         }
     }
     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;
-            }
+        if (listType === "meridiem") {
+            this.onMeridiemClick(edge === "first" ? "AM" : "PM");
+            return;
+        }
+        const options = this.getOptions(listType);
+        const target = edge === "first" ? options[0] : options[options.length - 1];
+        if (target) {
+            this.setUnit(listType, target.value);
         }
     }
     setDateValues(value = this.value()) {
@@ -653,41 +693,46 @@ class TimeSelectorComponent {
         const meridiem = this.navigatedDate().hour >= 12 ? "PM" : "AM";
         this.meridiem.set(meridiem);
     }
+    setUnit(listType, value) {
+        switch (listType) {
+            case "hours":
+                this.onHourChange(value);
+                break;
+            case "minutes":
+                this.onMinuteChange(value);
+                break;
+            case "seconds":
+                this.onSecondChange(value);
+                break;
+        }
+    }
     setupKeyboardNavigation() {
         fromEvent(this.#hostElementRef.nativeElement, "keydown")
             .pipe(takeUntilDestroyed(this.#destroyRef), filter(() => !this.disabled()))
             .subscribe(event => this.handleKeydown(event));
     }
-    updateValue(date, notify) {
+    updateValue(date) {
         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: "aria-label", 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() || messages().timeSelector", "attr.aria-disabled": "disabled()", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalidState() || 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>{{ messages().headerHours }}</div>\n    <div>{{ messages().headerMinutes }}</div>\n    @if (showSeconds()) {\n        <div>{{ messages().headerSeconds }}</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        {{ messages().now }}\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().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                {{ formatTwoDigit(h.viewValue) }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().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                {{ formatTwoDigit(m.viewValue) }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().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                    {{ formatTwoDigit(s.value) }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().amPm\"\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                    {{ messages().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                    {{ messages().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()\">\n            {{ messages().set }}\n        </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", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
+    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: "aria-label", 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: { "focusout": "onFocusOut($event)" }, properties: { "attr.aria-label": "ariaLabel() || messages().timeSelector", "attr.aria-disabled": "disabled() || null", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-invalid": "invalidState() || 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>{{ messages().headerHours }}</div>\n    <div>{{ messages().headerMinutes }}</div>\n    @if (showSeconds()) {\n        <div>{{ messages().headerSeconds }}</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()\">\n        {{ messages().now }}\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().hours\"\n        [attr.aria-activedescendant]=\"activeOptionId(hourListId, hourOptions(), navigatedDate().hour)\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of hourOptions(); track h.value) {\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                {{ formatTwoDigit(h.viewValue) }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().minutes\"\n        [attr.aria-activedescendant]=\"activeOptionId(minuteListId, minuteOptions(), minute())\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minuteOptions(); track m.value) {\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                {{ formatTwoDigit(m.viewValue) }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().seconds\"\n            [attr.aria-activedescendant]=\"activeOptionId(secondListId, secondOptions(), second())\"\n            [attr.aria-readonly]=\"readonly() || null\"\n            [attr.aria-required]=\"required() || null\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of secondOptions(); track s.value) {\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                    {{ formatTwoDigit(s.value) }}\n                </li>\n            }\n        </ol>\n    }\n    @if (effectiveHourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().amPm\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [attr.aria-readonly]=\"readonly() || null\"\n            [attr.aria-required]=\"required() || null\"\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                    {{ messages().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                    {{ messages().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()\">\n            {{ messages().set }}\n        </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", "type", "class"], outputs: ["lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: "mona-time-selector", imports: [TimeLimiterPipe, TimeSelectorItemDirective, ButtonDirective, TimeSelectorListDirective], host: {
+            args: [{ selector: "mona-time-selector", imports: [TimeSelectorItemDirective, ButtonDirective, TimeSelectorListDirective], host: {
                         role: "group",
                         "[attr.aria-label]": "ariaLabel() || messages().timeSelector",
-                        "[attr.aria-disabled]": "disabled()",
+                        "[attr.aria-disabled]": "disabled() || null",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
-                        "[attr.aria-readonly]": "readonly()",
-                        "[attr.aria-required]": "required()",
                         "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null",
                         "[class]": "baseClass()",
-                        "(blur)": "onBlur()"
-                    }, template: "<div [class]=\"headerClass()\">\n    <div>{{ messages().headerHours }}</div>\n    <div>{{ messages().headerMinutes }}</div>\n    @if (showSeconds()) {\n        <div>{{ messages().headerSeconds }}</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        {{ messages().now }}\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().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                {{ formatTwoDigit(h.viewValue) }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().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                {{ formatTwoDigit(m.viewValue) }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().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                    {{ formatTwoDigit(s.value) }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().amPm\"\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                    {{ messages().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                    {{ messages().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()\">\n            {{ messages().set }}\n        </button>\n    </div>\n}\n" }]
+                        "(focusout)": "onFocusOut($event)"
+                    }, template: "<div [class]=\"headerClass()\">\n    <div>{{ messages().headerHours }}</div>\n    <div>{{ messages().headerMinutes }}</div>\n    @if (showSeconds()) {\n        <div>{{ messages().headerSeconds }}</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()\">\n        {{ messages().now }}\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().hours\"\n        [attr.aria-activedescendant]=\"activeOptionId(hourListId, hourOptions(), navigatedDate().hour)\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of hourOptions(); track h.value) {\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                {{ formatTwoDigit(h.viewValue) }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        [attr.aria-label]=\"messages().minutes\"\n        [attr.aria-activedescendant]=\"activeOptionId(minuteListId, minuteOptions(), minute())\"\n        [attr.aria-readonly]=\"readonly() || null\"\n        [attr.aria-required]=\"required() || null\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minuteOptions(); track m.value) {\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                {{ formatTwoDigit(m.viewValue) }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().seconds\"\n            [attr.aria-activedescendant]=\"activeOptionId(secondListId, secondOptions(), second())\"\n            [attr.aria-readonly]=\"readonly() || null\"\n            [attr.aria-required]=\"required() || null\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of secondOptions(); track s.value) {\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                    {{ formatTwoDigit(s.value) }}\n                </li>\n            }\n        </ol>\n    }\n    @if (effectiveHourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            [attr.aria-label]=\"messages().amPm\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [attr.aria-readonly]=\"readonly() || null\"\n            [attr.aria-required]=\"required() || null\"\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                    {{ messages().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                    {{ messages().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()\">\n            {{ messages().set }}\n        </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: "aria-label", 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"] }] } });
 
 /*

package/i18n/catalogs/en-US.messages.json

@@ -251,7 +251,8 @@
     },
     "multiSelect": {
         "clear": "Clear",
-        "itemsCount": "{count, plural, =1 {+ # item} other {+ # items}}"
+        "itemsCount": "{count, plural, =1 {+ # item} other {+ # items}}",
+        "removeMoreItems": "{count, plural, =1 {Remove # more item} other {Remove # more items}}"
     },
     "notification": {
         "close": "Close",