@nanahoshi/mona-ui 0.1.1 → 0.2.1

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

@@ -5,27 +5,46 @@ 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 { createElementControlId } from '@nanahoshi/mona-ui/internal';
+import { themeControlSurfaceClasses, createElementControlId } from '@nanahoshi/mona-ui/internal';
 import { TextBoxComponent, TextBoxSuffixTemplateDirective } from '@nanahoshi/mona-ui/text-box';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { TimeSelectorComponent } from '@nanahoshi/mona-ui/time-selector';
 import { DateTime } from 'luxon';
 import { fromEvent } from 'rxjs';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 
-const timePickerBaseVariants = cva(`
-        flex items-center w-full
-        border border-border
-        focus-within:ring-2 focus-within:ring-primary/40 focus-within:border-primary
+const timePickerBaseThemeVariants = cva(`
+        flex w-full items-center
+        ${themeControlSurfaceClasses} text-foreground
+        border border-input-border shadow-(--shadow-control)
+        outline-none
+
+        data-[disabled='true']:pointer-events-none
+        data-[disabled='true']:cursor-not-allowed
+        data-[disabled='true']:border-disabled-border
+        data-[disabled='true']:bg-disabled-background
+        data-[disabled='true']:text-disabled-foreground
+        data-[disabled='true']:shadow-none
+        data-[readonly='true']:cursor-default
+
+        focus-within:border-focus-indicator
+        focus-within:ring-2 focus-within:ring-focus-indicator/35
+
         data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
+        data-[invalid='true']:focus-within:border-error
+        data-[invalid='true']:focus-within:ring-error/35
+
         [&_mona-text-box]:h-full
         [&_mona-text-box]:border-none
+        [&_mona-text-box]:shadow-none
+        [&_mona-text-box]:focus-within:ring-0
+        [&_mona-text-box[data-invalid='true']]:ring-0
     `, {
     variants: {
         focused: {
-            true: `ring-2 ring-primary/40 border-primary`
+            true: "border-focus-indicator ring-2 ring-focus-indicator/35",
+            false: ""
         },
         rounded: {
             full: "rounded-full",
@@ -39,36 +58,30 @@ const timePickerBaseVariants = cva(`
             medium: "h-9 text-sm",
             small: "h-8 text-xs"
         }
-    }
+    },
+    compoundVariants: [
+        {
+            focused: true,
+            class: "data-[invalid='true']:border-error data-[invalid='true']:ring-error/35"
+        }
+    ]
 });
 
-const timePickerBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timePickerBaseVariants;
-        default:
-            return timePickerBaseVariants;
-    }
-};
-
 class TimePickerComponent {
     #destroyRef;
     #dropdownService;
     #hostElementRef;
     #id;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#dropdownService = inject(DropdownService);
         this.#hostElementRef = inject(ElementRef);
         this.#id = createElementControlId();
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const focused = this.#dropdownService.popupRef() != null;
             const rounded = this.rounded();
             const size = this.size();
-            const variantClass = timePickerBaseThemeVariants(theme)({ focused, rounded, size });
+            const variantClass = timePickerBaseThemeVariants({ focused, rounded, size });
             const userClass = this.userClass();
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
@@ -88,7 +101,7 @@ class TimePickerComponent {
             const controls = this.popupId;
             const expanded = this.#dropdownService.popupRef() != null;
             const hasPopup = "dialog";
-            const invalid = this.invalid();
+            const invalid = this.invalidState();
             return {
                 "aria-autocomplete": "none",
                 "aria-controls": controls,
@@ -100,16 +113,15 @@ class TimePickerComponent {
             };
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "inputAttributes" }] : /* istanbul ignore next */ []));
-        this.invalidState = computed(() => this.invalid() || (this.required() && this.touched() && !this.value()), /* @ts-ignore */
+        this.invalidState = computed(() => this.touched() && (this.invalid() || (this.required() && !this.value())), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "invalidState" }] : /* istanbul ignore next */ []));
         this.navigatedDate = signal(new Date(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "navigatedDate" }] : /* istanbul ignore next */ []));
         this.pickerPopupClass = computed(() => {
-            const theme = this.#themeService.theme();
             const rounded = this.rounded();
             const size = this.size();
             const userClass = this.popupClass();
-            const variantClass = dropdownPopupThemeVariants(theme)({ rounded, size });
+            const variantClass = dropdownPopupThemeVariants({ rounded, size });
             return twMerge(variantClass, userClass);
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "pickerPopupClass" }] : /* istanbul ignore next */ []));
@@ -402,14 +414,14 @@ class TimePickerComponent {
         this.currentDateString.set(dateString);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onTimeInputBlur()" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "class": "baseClass()" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: TimePickerComponent, isStandalone: true, selector: "mona-time-picker", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, hourFormat: { classPropertyName: "hourFormat", publicName: "hourFormat", isSignal: true, isRequired: false, transformFunction: null }, hourStep: { classPropertyName: "hourStep", publicName: "hourStep", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, popupClass: { classPropertyName: "popupClass", publicName: "popupClass", isSignal: true, isRequired: false, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: false, transformFunction: null }, popupWidth: { classPropertyName: "popupWidth", publicName: "popupWidth", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonlyInput", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close", closed: "closed", open: "open", opened: "opened", touch: "touch", value: "valueChange" }, host: { listeners: { "blur": "onTimeInputBlur()" }, properties: { "attr.tabindex": "disabled() ? null : -1", "attr.aria-invalid": "invalidState() ? 'true' : null", "attr.data-disabled": "disabled() || null", "attr.data-expanded": "expanded()", "attr.data-invalid": "invalidState() || null", "attr.data-readonly": "readonly() || null", "class": "baseClass()" } }, providers: [
             DropdownService,
             {
                 provide: DropdownPopupInputToken,
                 useExisting: forwardRef(() => TimePickerComponent),
                 multi: false
             }
-        ], viewQueries: [{ propertyName: "timePopupTemplateRef", first: true, predicate: ["timePopupTemplate"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.DropdownPopupHandlerDirective }], ngImport: i0, template: "<mona-text-box\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=\"h-full w-auto aspect-square\"\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", "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]=\"'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", "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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
@@ -423,11 +435,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                     ], imports: [ButtonDirective, TimeSelectorComponent, TextBoxComponent, TextBoxSuffixTemplateDirective, CdkTrapFocus], hostDirectives: [DropdownPopupHandlerDirective], host: {
                         "[attr.tabindex]": "disabled() ? null : -1",
                         "[attr.aria-invalid]": "invalidState() ? 'true' : null",
+                        "[attr.data-disabled]": "disabled() || null",
                         "[attr.data-expanded]": "expanded()",
                         "[attr.data-invalid]": "invalidState() || null",
+                        "[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=\"h-full w-auto aspect-square\"\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]=\"'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" }]
         }], 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"] }] } });
 
 /*

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

@@ -6,20 +6,19 @@ import { ButtonDirective } from '@nanahoshi/mona-ui/button';
 import { PreventableEvent } from '@nanahoshi/mona-ui/common';
 import { TimeSelectorService, generateMinuteSet, generateSecondSet, generateHourSet, TimeLimiterPipe } from '@nanahoshi/mona-ui/date-input';
 import { rxTimeout, createElementControlId } from '@nanahoshi/mona-ui/internal';
-import { ThemeService } from '@nanahoshi/mona-ui/theme';
 import { DateTime } from 'luxon';
 import { tap, fromEvent } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { cva } from 'class-variance-authority';
 
-const timeSelectorBaseVariants = cva(`
-        flex flex-col w-full h-full overflow-hidden
+const timeSelectorBaseThemeVariants = cva(`
+        flex h-full w-full flex-col overflow-hidden
         data-[invalid='true']:border data-[invalid='true']:border-error
-        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/40
+        data-[invalid='true']:ring-2 data-[invalid='true']:ring-error/35
     `, {
     variants: {
         disabled: {
-            true: "opacity-50 cursor-not-allowed pointer-events-none",
+            true: "pointer-events-none cursor-not-allowed text-disabled-foreground",
             false: ""
         },
         size: {
@@ -29,32 +28,37 @@ const timeSelectorBaseVariants = cva(`
         }
     }
 });
-const timeSelectorFooterVariants = cva(`
-        w-full flex items-center justify-end px-1 py-1 border-0 border-t border-input-border bg-accent
+const timeSelectorFooterThemeVariants = cva(`
+        flex w-full items-center justify-end px-1 py-1
+        bg-surface-muted
+        border-0 border-t border-border-subtle
     `);
-const timeSelectorHeaderVariants = cva(`
-        flex bg-accent text-accent-foreground
-        border-b border-input-border
+const timeSelectorHeaderThemeVariants = cva(`
+        flex
         text-xs font-semibold uppercase
+        bg-surface-muted text-foreground
+        border-b border-border-subtle
         [&>div]:flex-1 [&>div]:py-2 [&>div]:text-center
     `);
-const timeSelectorInfoContainerVariants = cva(`
+const timeSelectorInfoContainerThemeVariants = cva(`
         flex items-center justify-between
-        px-2 py-1 border-b border-input-border/40
+        px-2 py-1
+        border-b border-border-subtle
         [&>span]:text-xs [&>span]:font-medium [&>span]:select-none
     `);
-const timeSelectorListContainerVariants = cva(`
-        flex flex-row w-full relative overflow-hidden
+const timeSelectorListContainerThemeVariants = cva(`
+        relative flex w-full flex-row overflow-hidden
     `);
-const timeSelectorListVariants = cva(`
-        flex-1 overflow-y-auto h-full
+const timeSelectorListThemeVariants = cva(`
+        h-full flex-1 overflow-y-auto
+        [scrollbar-color:var(--color-scrollbar-thumb)_var(--color-scrollbar-track)] [scrollbar-width:thin]
         scrollbar-hide scroll-smooth
         snap-y snap-mandatory
         scrollbar-width:none
         select-none outline-none
         [&::-webkit-scrollbar]:hidden
-        focus-visible:bg-accent
-        focus-within:bg-accent
+        focus-visible:bg-(--color-focus-surface)
+        focus-within:bg-(--color-focus-surface)
     `, {
     variants: {
         size: {
@@ -64,13 +68,14 @@ const timeSelectorListVariants = cva(`
         }
     }
 });
-const timeSelectorListItemVariants = cva(`
-        flex items-center justify-center cursor-pointer
-        snap-center relative z-10
+const timeSelectorListItemThemeVariants = cva(`
+        relative z-10 flex cursor-pointer snap-center items-center justify-center
+        text-foreground
+        hover:bg-hover active:bg-active
     `, {
     variants: {
         selected: {
-            true: "bg-primary text-primary-foreground",
+            true: "bg-active font-medium text-foreground hover:bg-active",
             false: ""
         },
         size: {
@@ -84,79 +89,19 @@ const timeSelectorListItemVariants = cva(`
     }
 });
 
-const timeSelectorBaseThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorBaseVariants;
-        default:
-            return timeSelectorBaseVariants;
-    }
-};
-const timeSelectorFooterThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorFooterVariants;
-        default:
-            return timeSelectorFooterVariants;
-    }
-};
-const timeSelectorHeaderThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorHeaderVariants;
-        default:
-            return timeSelectorHeaderVariants;
-    }
-};
-const timeSelectorInfoContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorInfoContainerVariants;
-        default:
-            return timeSelectorInfoContainerVariants;
-    }
-};
-const timeSelectorListContainerThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorListContainerVariants;
-        default:
-            return timeSelectorListContainerVariants;
-    }
-};
-const timeSelectorListThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorListVariants;
-        default:
-            return timeSelectorListVariants;
-    }
-};
-const timeSelectorListItemThemeVariants = (theme) => {
-    switch (theme) {
-        case "mona":
-            return timeSelectorListItemVariants;
-        default:
-            return timeSelectorListItemVariants;
-    }
-};
-
 class TimeSelectorItemDirective {
     #destroyRef;
     #host;
     #scrollBehavior;
-    #themeService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#host = inject((ElementRef));
         this.#scrollBehavior = signal("instant", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#scrollBehavior" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const selected = this.selected();
             const size = this.size();
-            return timeSelectorListItemThemeVariants(theme)({ selected, size });
+            return timeSelectorListItemThemeVariants({ selected, size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.selected = input.required(/* @ts-ignore */
@@ -200,10 +145,9 @@ class TimeSelectorListDirective {
             return size === "small" ? 24 : size === "medium" ? 28 : 32; // TODO: Get rid of magic numbers
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#itemHeight" }] : /* istanbul ignore next */ []));
-        this.#themeService = inject(ThemeService);
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return timeSelectorListThemeVariants(theme)();
+            const size = this.size();
+            return timeSelectorListThemeVariants({ size });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.listPadding = computed(() => {
@@ -220,7 +164,6 @@ class TimeSelectorListDirective {
         ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     }
     #itemHeight;
-    #themeService;
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: TimeSelectorListDirective, isStandalone: true, selector: "ol[monaTimeSelectorList]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, popupHeight: { classPropertyName: "popupHeight", publicName: "popupHeight", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: true, transformFunction: null } }, host: { attributes: { "role": "listbox" }, properties: { "class": "baseClass()", "style.padding-top.px": "listPadding()", "style.padding-bottom.px": "listPadding()", "attr.tabindex": "active() ? 0 : -1" } }, ngImport: i0 }); }
 }
@@ -242,14 +185,12 @@ class TimeSelectorComponent {
     #destroyRef;
     #height;
     #hostElementRef;
-    #themeService;
     #timeSelectorService;
     constructor() {
         this.#destroyRef = inject(DestroyRef);
         this.#height = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#height" }] : /* istanbul ignore next */ []));
         this.#hostElementRef = inject((ElementRef));
-        this.#themeService = inject(ThemeService);
         this.#timeSelectorService = inject(TimeSelectorService, { optional: true });
         this.amMeridiemVisible = computed(() => {
             const min = this.min();
@@ -257,22 +198,19 @@ class TimeSelectorComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "amMeridiemVisible" }] : /* istanbul ignore next */ []));
         this.baseClass = computed(() => {
-            const theme = this.#themeService.theme();
             const disabled = this.disabled();
-            return timeSelectorBaseThemeVariants(theme)({ disabled });
+            return timeSelectorBaseThemeVariants({ disabled });
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
         this.computedPopupHeight = this.#height.asReadonly();
         this.focusedList = signal("hours", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "focusedList" }] : /* istanbul ignore next */ []));
         this.footerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return timeSelectorFooterThemeVariants(theme)();
+            return timeSelectorFooterThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
         this.headerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return timeSelectorHeaderThemeVariants(theme)();
+            return timeSelectorHeaderThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
         this.hour = computed(() => {
@@ -288,13 +226,13 @@ class TimeSelectorComponent {
         this.hourListRef = viewChild.required("hourList", /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hourListRef" }] : /* istanbul ignore next */ []));
         this.infoContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return timeSelectorInfoContainerThemeVariants(theme)();
+            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.listContainerClass = computed(() => {
-            const theme = this.#themeService.theme();
-            return timeSelectorListContainerThemeVariants(theme)();
+            return timeSelectorListContainerThemeVariants();
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "listContainerClass" }] : /* istanbul ignore next */ []));
         this.maxDate = computed(() => {
@@ -692,7 +630,7 @@ 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": "invalid() ? 'true' : null", "attr.aria-readonly": "readonly()", "attr.aria-required": "required()", "attr.data-invalid": "invalid() || null", "attr.data-readonly": "readonly() || null", "attr.data-required": "required() || null", "class": "baseClass()" } }, viewQueries: [{ propertyName: "hourListRef", first: true, predicate: ["hourList"], descendants: true, isSignal: true }, { propertyName: "meridiemListRef", first: true, predicate: ["meridiemList"], descendants: true, isSignal: true }, { propertyName: "minuteListRef", first: true, predicate: ["minuteList"], descendants: true, isSignal: true }, { propertyName: "secondListRef", first: true, predicate: ["secondList"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n    <div>Hr</div>\n    <div>Min</div>\n    @if (showSeconds()) {\n        <div>Sec</div>\n    }\n</div>\n\n<div [class]=\"infoContainerClass()\">\n    <span>{{ navigatedDateText() }}</span>\n    <button\n        monaButton\n        look=\"ghost\"\n        [rounded]=\"rounded()\"\n        [size]=\"'small'\"\n        (click)=\"onNowClick($event)\"\n        (keydown.enter)=\"onNowClick($event)\"\n        (keydown.space)=\"onNowClick($event)\">\n        Now\n    </button>\n</div>\n\n<div [class]=\"listContainerClass()\">\n    <ol\n        #hourList\n        monaTimeSelectorList\n        aria-label=\"Hours\"\n        [attr.aria-activedescendant]=\"`${hourListId}${navigatedDate().hour}`\"\n        [active]=\"focusedList() === 'hours'\"\n        [id]=\"hourListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (h of viewHours() | timeLimiter: \"h\" : navigatedDate() : minDate() : maxDate(); track h) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"h.viewValue === hour()\"\n                [value]=\"h.value\"\n                [id]=\"`${hourListId}${h.value}`\"\n                (click)=\"onHourChange(h.value)\">\n                {{ h.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    <ol\n        #minuteList\n        monaTimeSelectorList\n        aria-label=\"Minutes\"\n        [attr.aria-activedescendant]=\"`${minuteListId}${navigatedDate().minute}`\"\n        [active]=\"focusedList() === 'minutes'\"\n        [id]=\"minuteListId\"\n        [popupHeight]=\"computedPopupHeight()\"\n        [size]=\"size()\">\n        @for (m of minutes() | timeLimiter: \"m\" : navigatedDate() : minDate() : maxDate(); track m) {\n            <li\n                monaTimeSelectorItem\n                [size]=\"size()\"\n                [selected]=\"m.value === minute()\"\n                [value]=\"m.value\"\n                [id]=\"`${minuteListId}${m.value}`\"\n                (click)=\"onMinuteChange(m.value)\">\n                {{ m.viewValue | number: \"2.0\" }}\n            </li>\n        }\n    </ol>\n    @if (showSeconds()) {\n        <ol\n            #secondList\n            monaTimeSelectorList\n            aria-label=\"Seconds\"\n            [attr.aria-activedescendant]=\"`${secondListId}${navigatedDate().second}`\"\n            [active]=\"focusedList() === 'seconds'\"\n            [id]=\"secondListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @for (s of seconds() | timeLimiter: \"s\" : navigatedDate() : minDate() : maxDate(); track s) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"s.value === second()\"\n                    [value]=\"s.value\"\n                    [id]=\"`${secondListId}${s.value}`\"\n                    (click)=\"onSecondChange(s.value)\">\n                    {{ s.value | number: \"2.0\" }}\n                </li>\n            }\n        </ol>\n    }\n    @if (hourFormat() === \"12\") {\n        <ol\n            #meridiemList\n            monaTimeSelectorList\n            aria-label=\"AM/PM\"\n            [attr.aria-activedescendant]=\"`${meridiemListId}${meridiem()}`\"\n            [active]=\"focusedList() === 'meridiem'\"\n            [id]=\"meridiemListId\"\n            [popupHeight]=\"computedPopupHeight()\"\n            [size]=\"size()\">\n            @if (amMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'AM'\"\n                    [value]=\"'AM'\"\n                    (click)=\"onMeridiemClick('AM')\"\n                    [id]=\"`${meridiemListId}AM`\">\n                    AM\n                </li>\n            }\n            @if (pmMeridiemVisible()) {\n                <li\n                    monaTimeSelectorItem\n                    [size]=\"size()\"\n                    [selected]=\"meridiem() === 'PM'\"\n                    [value]=\"'PM'\"\n                    (click)=\"onMeridiemClick('PM')\"\n                    [id]=\"`${meridiemListId}PM`\">\n                    PM\n                </li>\n            }\n        </ol>\n    }\n</div>\n\n@if (footer()) {\n    <div [class]=\"footerClass()\">\n        <button monaButton look=\"primary\" [rounded]=\"rounded()\" [size]=\"size()\" (click)=\"onSetTimeClick()\">Set</button>\n    </div>\n}\n", dependencies: [{ kind: "directive", type: TimeSelectorItemDirective, selector: "li[monaTimeSelectorItem]", inputs: ["selected", "size", "value"] }, { kind: "directive", type: ButtonDirective, selector: "button[monaButton]", inputs: ["aria-haspopup", "disabled", "iconOnly", "loading", "look", "rounded", "selected", "size", "tabindex", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
+    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", "toggleable", "class"], outputs: ["disabledChange", "loadingChange", "lookChange", "selectedChange"] }, { kind: "directive", type: TimeSelectorListDirective, selector: "ol[monaTimeSelectorList]", inputs: ["active", "popupHeight", "size"] }, { kind: "pipe", type: DecimalPipe, name: "number" }, { kind: "pipe", type: TimeLimiterPipe, name: "timeLimiter" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
@@ -700,10 +638,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                         role: "group",
                         "[attr.aria-label]": "ariaLabel()",
                         "[attr.aria-disabled]": "disabled()",
-                        "[attr.aria-invalid]": "invalid() ? 'true' : null",
+                        "[attr.aria-invalid]": "invalidState() ? 'true' : null",
                         "[attr.aria-readonly]": "readonly()",
                         "[attr.aria-required]": "required()",
-                        "[attr.data-invalid]": "invalid() || null",
+                        "[attr.data-invalid]": "invalidState() || null",
                         "[attr.data-readonly]": "readonly() || null",
                         "[attr.data-required]": "required() || null",
                         "[class]": "baseClass()",