@nanahoshi/mona-ui 0.18.6 → 0.20.0

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

@@ -5,6 +5,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import * as i1 from '@nanahoshi/mona-ui/dropdowns';
 import { DropdownService, dropdownPopupThemeVariants, DropdownPopupInputToken, DropdownPopupHandlerDirective } from '@nanahoshi/mona-ui/dropdowns';
+import { MonaI18nService, gregorianDateTime, getLocaleTimeInputFormat, parseGregorianDate } from '@nanahoshi/mona-ui/i18n';
 import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
@@ -13,6 +14,11 @@ import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
+const TIME_PICKER_DEFAULT_MESSAGES = {
+    openTimePicker: "Open time picker",
+    timePicker: "Time picker"
+};
+
 const timePickerBaseThemeVariants = cva(`
         flex w-full items-center
         ${themeControlSurfaceClasses} text-foreground
@@ -71,11 +77,13 @@ class TimePickerComponent {
     #destroyRef;
     #dropdownService;
     #hostElementRef;
+    #i18n;
     #id;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject(ElementRef);
+        this.#i18n = inject(MonaI18nService);
         this.#id = createElementControlId();
         this.baseClass = computed(() => {
             const focused = this.#dropdownService.popupRef() != null;
@@ -88,13 +96,22 @@ class TimePickerComponent {
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.currentDateString = linkedSignal(() => {
             const value = this.value();
-            const format = this.format();
+            const format = this.effectiveFormat();
+            const locale = this.#i18n.localeId();
             if (!value) {
                 return "";
             }
-            return DateTime.fromJSDate(value).toFormat(format);
+            return gregorianDateTime(value, locale).toFormat(format);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentDateString" }] : /* istanbul ignore next */ []));
+        this.effectiveFormat = computed(() => {
+            return (this.format() ??
+                getLocaleTimeInputFormat(this.#i18n.localeId(), {
+                    hourFormat: this.hourFormat(),
+                    showSeconds: this.showSeconds()
+                }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveFormat" }] : /* istanbul ignore next */ []));
         this.expanded = computed(() => this.#dropdownService.popupRef() != null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
         this.inputAttributes = computed(() => {
@@ -115,6 +132,7 @@ class TimePickerComponent {
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
         this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("timePicker", TIME_PICKER_DEFAULT_MESSAGES);
         this.navigatedDate = signal(new Date(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.pickerPopupClass = computed(() => {
@@ -131,6 +149,7 @@ class TimePickerComponent {
         /**
          * @description Emits when the popup is about to close. This event is preventable.
          */
+        // eslint-disable-next-line @angular-eslint/no-output-native
         this.close = output();
         /**
          * @description Emits after the popup is closed.
@@ -142,9 +161,10 @@ class TimePickerComponent {
         this.disabled = input(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         /**
-         * @description Sets the format of the time picker.
+         * @description Sets the format of the time picker. If not specified, derives from the active locale, hourFormat, and showSeconds.
+         * @default null
          */
-        this.format = input("HH:mm", /* @ts-ignore */
+        this.format = input(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
         /**
          * @description Sets the hour format of the time picker.
@@ -286,6 +306,13 @@ class TimePickerComponent {
             untracked(() => this.#dropdownService.popupTemplate.set(popupTemplate));
         });
     }
+    focus() {
+        const input = this.#hostElementRef.nativeElement.querySelector("input");
+        if (input && !this.readonly()) {
+            input.focus();
+            input.setSelectionRange(input.value.length, input.value.length);
+        }
+    }
     onDateStringEdit(dateString) {
         this.currentDateString.set(dateString);
     }
@@ -310,22 +337,17 @@ class TimePickerComponent {
     }
     dateStringEquals(date1, date2) {
         if (date1 && date2) {
-            return (DateTime.fromJSDate(date1).toFormat(this.format()) ===
-                DateTime.fromJSDate(date2).toFormat(this.format()));
+            const locale = this.#i18n.localeId();
+            return (gregorianDateTime(date1, locale).toFormat(this.effectiveFormat()) ===
+                gregorianDateTime(date2, locale).toFormat(this.effectiveFormat()));
         }
         return date1 === date2;
     }
-    focus() {
-        const input = this.#hostElementRef.nativeElement.querySelector("input");
-        if (input && !this.readonly()) {
-            input.focus();
-            input.setSelectionRange(input.value.length, input.value.length);
-        }
-    }
     generateValidDateTime(dateString) {
         const value = this.value();
-        const valueDate = value ? DateTime.fromJSDate(value) : DateTime.now();
-        let dateTime = DateTime.fromFormat(dateString, this.format());
+        const locale = this.#i18n.localeId();
+        const valueDate = value ? gregorianDateTime(value, locale) : gregorianDateTime(new Date(), locale);
+        let dateTime = parseGregorianDate(dateString, this.effectiveFormat(), locale);
         if (dateTime.isValid) {
             return dateTime.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
         }
@@ -333,7 +355,7 @@ class TimePickerComponent {
         const minDate = this.min();
         const date = minDate ?? maxDate;
         if (date) {
-            const newDate = DateTime.fromJSDate(date);
+            const newDate = gregorianDateTime(date, locale);
             dateTime = newDate.set({ year: valueDate.year, month: valueDate.month, day: valueDate.day });
             return dateTime;
         }
@@ -359,7 +381,7 @@ class TimePickerComponent {
         });
     }
     processTimeInput(inputText) {
-        let dateTime = this.generateValidDateTime(inputText);
+        const dateTime = this.generateValidDateTime(inputText);
         if (!dateTime) {
             this.setCurrentDate(null);
             return;
@@ -382,13 +404,14 @@ class TimePickerComponent {
         this.touch.emit();
     }
     setCurrentDateString(date) {
-        this.updateCurrentDateString(date, this.format());
+        this.updateCurrentDateString(date, this.effectiveFormat());
     }
     setDateValues() {
         const value = this.value();
-        this.navigatedDate.set(value ?? DateTime.now().toJSDate());
+        const locale = this.#i18n.localeId();
+        this.navigatedDate.set(value ?? DateTime.now().setLocale(locale).toJSDate());
         if (value) {
-            this.updateCurrentDateString(value, this.format());
+            this.updateCurrentDateString(value, this.effectiveFormat());
         }
     }
     setKeyboardNavigation() {
@@ -410,7 +433,7 @@ class TimePickerComponent {
             this.currentDateString.set("");
             return;
         }
-        const dateString = DateTime.fromJSDate(date).toFormat(format);
+        const dateString = gregorianDateTime(date, this.#i18n.localeId()).toFormat(format);
         this.currentDateString.set(dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -421,7 +444,7 @@ class TimePickerComponent {
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: false
             }
-        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-time-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"Time picker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["ariaLabel", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
+        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-time-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "component", type: TimeSelectorComponent, selector: "mona-time-selector", inputs: ["aria-label", "disabled", "focusOnMount", "footer", "hourFormat", "hourStep", "invalid", "max", "min", "minuteStep", "readonly", "required", "rounded", "secondStep", "showSeconds", "size", "touched", "value"], outputs: ["touch", "valueChange"] }, { kind: "component", type: TextBoxComponent, selector: "mona-text-box", inputs: ["clearButton", "disabled", "inputAttributes", "inputClass", "inputStyle", "invalid", "placeholder", "readonly", "required", "rounded", "size", "touched", "type", "class", "value"], outputs: ["inputBlur", "inputFocus", "touch", "valueChange"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "ng-template[monaTextBoxSuffixTemplate]" }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -441,7 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[attr.data-readonly]": "readonly() || null",
                         "[class]": "baseClass()",
                         "(blur)": "onTimeInputBlur()"
-                    }, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"'Open time picker'\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-time-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        aria-label=\"Time picker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
+                    }, template: "<mona-text-box\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly() || readonlyInput()\"\n    [required]=\"required()\"\n    [value]=\"currentDateString()\"\n    [inputAttributes]=\"inputAttributes()\"\n    [invalid]=\"invalid()\"\n    [placeholder]=\"placeholder()\"\n    [rounded]=\"rounded()\"\n    [size]=\"size()\"\n    [touched]=\"touched()\"\n    [clearButton]=\"showClearButton()\"\n    (valueChange)=\"onDateStringEdit($event)\"\n    (inputBlur)=\"onTimeInputBlur()\">\n    <ng-template monaTextBoxSuffixTemplate>\n        <button\n            monaButton\n            look=\"ghost\"\n            [iconOnly]=\"true\"\n            [size]=\"size()\"\n            [rounded]=\"'none'\"\n            (click)=\"onTimeInputButtonClick()\"\n            class=\"aspect-square h-full w-auto\"\n            [attr.aria-label]=\"messages().openTimePicker\"\n            [attr.aria-expanded]=\"expanded()\"\n            [attr.aria-controls]=\"popupId\"\n            [disabled]=\"disabled() || readonly()\"\n            [tabindex]=\"-1\">\n            <i class=\"ri-time-line\"></i>\n        </button>\n    </ng-template>\n</mona-text-box>\n\n<ng-template #timePopupTemplate>\n    <div\n        [class]=\"pickerPopupClass()\"\n        [id]=\"popupId\"\n        aria-modal=\"true\"\n        role=\"dialog\"\n        [attr.aria-label]=\"messages().timePicker\"\n        cdkTrapFocus>\n        <mona-time-selector\n            [value]=\"value()\"\n            (valueChange)=\"onTimeSelectorValueChange($event)\"\n            [max]=\"max()\"\n            [min]=\"min()\"\n            [disabled]=\"disabled()\"\n            [readonly]=\"readonly()\"\n            [hourFormat]=\"hourFormat()\"\n            [hourStep]=\"hourStep()\"\n            [minuteStep]=\"minuteStep()\"\n            [secondStep]=\"secondStep()\"\n            [size]=\"size()\"\n            [rounded]=\"rounded()\"\n            [showSeconds]=\"showSeconds()\"></mona-time-selector>\n    </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { timePopupTemplateRef: [{ type: i0.ViewChild, args: ["timePopupTemplate", { isSignal: true }] }], close: [{ type: i0.Output, args: ["close"] }], closed: [{ type: i0.Output, args: ["closed"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], hourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourFormat", required: false }] }], hourStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "hourStep", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], open: [{ type: i0.Output, args: ["open"] }], opened: [{ type: i0.Output, args: ["opened"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], popupClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupClass", required: false }] }], popupHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupHeight", required: false }] }], popupWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popupWidth", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonlyInput", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 /*
@@ -452,5 +475,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TimePickerComponent };
+export { TIME_PICKER_DEFAULT_MESSAGES, TimePickerComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-time-picker.mjs.map

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

@@ -1,10 +1,10 @@
-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 { 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';
@@ -181,17 +181,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 }]
         }], 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 }] }] } });
 
+const TIME_SELECTOR_DEFAULT_MESSAGES = {
+    am: "AM",
+    amPm: "AM/PM",
+    headerHours: "Hr",
+    headerMinutes: "Min",
+    headerSeconds: "Sec",
+    hours: "Hours",
+    minutes: "Minutes",
+    now: "Now",
+    pm: "PM",
+    seconds: "Seconds",
+    set: "Set",
+    timeSelector: "Time selector"
+};
+
 class TimeSelectorComponent {
     #destroyRef;
+    #direction;
     #height;
     #hostElementRef;
+    #i18n;
     #timeSelectorService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
+        this.#direction = injectComponentDirection();
         this.#height = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#height" }] : /* istanbul ignore next */ []));
         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);
@@ -237,7 +258,8 @@ class TimeSelectorComponent {
         ...(ngDevMode ? [{ debugName: "listContainerClass" }] : /* istanbul ignore next */ []));
         this.maxDate = computed(() => {
             const max = this.max();
-            return max ? DateTime.fromJSDate(max) : null;
+            const locale = this.#i18n.localeId();
+            return max ? DateTime.fromJSDate(max).setLocale(locale) : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "maxDate" }] : /* istanbul ignore next */ []));
         this.meridiem = signal("AM", /* @ts-ignore */
@@ -245,9 +267,11 @@ class TimeSelectorComponent {
         this.meridiemListId = createElementControlId();
         this.meridiemListRef = viewChild("meridiemList", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "meridiemListRef" }] : /* istanbul ignore next */ []));
+        this.messages = this.#i18n.componentMessages("timeSelector", TIME_SELECTOR_DEFAULT_MESSAGES);
         this.minDate = computed(() => {
             const min = this.min();
-            return min ? DateTime.fromJSDate(min) : null;
+            const locale = this.#i18n.localeId();
+            return min ? DateTime.fromJSDate(min).setLocale(locale) : null;
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "minDate" }] : /* istanbul ignore next */ []));
         this.minute = computed(() => this.navigatedDate().minute, /* @ts-ignore */
@@ -261,7 +285,10 @@ class TimeSelectorComponent {
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.navigatedDateText = computed(() => {
             const hourFormat = this.hourFormat();
-            return this.navigatedDate().toLocaleString({ hour: "numeric", minute: "numeric", hour12: hourFormat === "12" });
+            const locale = this.#i18n.localeId();
+            return this.navigatedDate()
+                .setLocale(locale)
+                .toLocaleString({ hour: "numeric", minute: "numeric", hour12: hourFormat === "12" });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDateText" }] : /* istanbul ignore next */ []));
         this.pmMeridiemVisible = computed(() => {
@@ -283,8 +310,11 @@ class TimeSelectorComponent {
             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 */ []));
+        /**
+         * @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 */
@@ -351,7 +381,7 @@ class TimeSelectorComponent {
                 this.setDateValues();
                 const value = this.value();
                 if (value) {
-                    const dt = DateTime.fromJSDate(value);
+                    const dt = DateTime.fromJSDate(value).setLocale(this.#i18n.localeId());
                     if (dt.isValid) {
                         this.navigatedDate.set(dt);
                     }
@@ -376,6 +406,12 @@ class TimeSelectorComponent {
     focus() {
         this.focusList(this.focusedList());
     }
+    formatTwoDigit(value) {
+        return formatNumber(value, this.#i18n.localeId(), {
+            minimumIntegerDigits: 2,
+            useGrouping: false
+        });
+    }
     onBlur() {
         this.touch.emit();
     }
@@ -407,11 +443,11 @@ class TimeSelectorComponent {
         }
         this.navigatedDate.update(date => date.set({ minute }));
     }
-    onNowClick(event) {
+    onNowClick(_event) {
         if (this.disabled() || this.readonly()) {
             return;
         }
-        let now = DateTime.now();
+        let now = DateTime.now().setLocale(this.#i18n.localeId());
         const min = this.minDate();
         const max = this.maxDate();
         if (min && now < min) {
@@ -439,6 +475,13 @@ class TimeSelectorComponent {
         }
         this.updateValue(this.navigatedDate().toJSDate(), true);
     }
+    dateValuesEqual(date1, date2) {
+        return date1?.getTime() === date2?.getTime();
+    }
+    focusList(listType) {
+        const listRef = this.getListRef(listType);
+        listRef?.nativeElement.focus();
+    }
     getListRef(listType) {
         switch (listType) {
             case "hours":
@@ -460,7 +503,9 @@ class TimeSelectorComponent {
             lists.push("meridiem");
         }
         const currentIndex = lists.indexOf(current);
-        if (direction === "right") {
+        const isRtl = this.isRtl();
+        const effectiveDirection = isRtl ? (direction === "left" ? "right" : "left") : direction;
+        if (effectiveDirection === "right") {
             return lists[(currentIndex + 1) % lists.length];
         }
         else {
@@ -516,33 +561,27 @@ class TimeSelectorComponent {
                 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();
+        const locale = this.#i18n.localeId();
         if (!date) {
-            this.navigatedDate.set(DateTime.now());
+            this.navigatedDate.set(DateTime.now().setLocale(locale));
         }
         else if (min && date < min) {
-            const minDate = DateTime.fromJSDate(min);
+            const minDate = DateTime.fromJSDate(min).setLocale(locale);
             if (minDate.isValid) {
                 this.navigatedDate.set(minDate);
             }
         }
         else if (max && date > max) {
-            const maxDate = DateTime.fromJSDate(max);
+            const maxDate = DateTime.fromJSDate(max).setLocale(locale);
             if (maxDate.isValid) {
                 this.navigatedDate.set(maxDate);
             }
         }
         else {
-            const dateToSet = DateTime.fromJSDate(date);
+            const dateToSet = DateTime.fromJSDate(date).setLocale(locale);
             if (dateToSet.isValid) {
                 this.navigatedDate.set(dateToSet);
             }
@@ -630,13 +669,13 @@ class TimeSelectorComponent {
         }
     }
     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": "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>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", "type", "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" }] }); }
+    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", "type", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { 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: {
+            args: [{ selector: "mona-time-selector", imports: [TimeLimiterPipe, TimeSelectorItemDirective, ButtonDirective, TimeSelectorListDirective], host: {
                         role: "group",
-                        "[attr.aria-label]": "ariaLabel()",
+                        "[attr.aria-label]": "ariaLabel() || messages().timeSelector",
                         "[attr.aria-disabled]": "disabled()",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-readonly]": "readonly()",
@@ -646,8 +685,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         "[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"] }] } });
+                    }, 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" }]
+        }], 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"] }] } });
 
 /*
  * Public API Surface of @nanahoshi/mona-ui/time-selector
@@ -657,5 +696,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TimeSelectorComponent };
+export { TIME_SELECTOR_DEFAULT_MESSAGES, TimeSelectorComponent };
 //# sourceMappingURL=nanahoshi-mona-ui-time-selector.mjs.map