@raintonic/formaui 0.4.0 → 0.9.0

package/fesm2022/raintonic-formaui-components-time-picker.mjs

@@ -1,33 +1,39 @@
 import * as i0 from '@angular/core';
-import { Injectable, input, output, signal, inject, ChangeDetectorRef, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, computed, ElementRef, NgZone } from '@angular/core';
+import { Injectable, input, output, signal, computed, inject, ChangeDetectorRef, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, booleanAttribute } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { DOCUMENT } from '@angular/common';
-import { Subject, Subscription, fromEvent } from 'rxjs';
-import { filter } from 'rxjs/operators';
-import { injectNgControl, updateErrorState, syncRequiredState, syncNgControlDisabled } from '@raintonic/formaui/cdk/form-field';
+import { NgForm, FormGroupDirective, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { Subject } from 'rxjs';
+import * as i1 from '@raintonic/formaui/cdk/form-field';
+import { FuiPopupOverlayDirective, FuiFormControlSyncDirective, injectNgControl } from '@raintonic/formaui/cdk/form-field';
 import { FuiIntlBase, DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
-import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 
+/** Standard time arithmetic constants — avoid magic numbers in time parsing/generation. */
+const HOURS_PER_DAY = 24;
+const MINUTES_PER_HOUR = 60;
+const SECONDS_PER_MINUTE = 60;
+const NOON_HOUR = 12;
+const MIDNIGHT_HOUR = 0;
 /**
- * Convert a TimeValue to total minutes for comparison purposes.
+ * @deprecated Use `timeToSeconds()` for integer-precise comparison. Will be removed in v0.6.0.
  */
 function timeToMinutes(time) {
-    return time.hours * 60 + time.minutes + (time.seconds ? time.seconds / 60 : 0);
+    return time.hours * MINUTES_PER_HOUR + time.minutes + (time.seconds ? time.seconds / MINUTES_PER_HOUR : 0);
+}
+/**
+ * Converts a `TimeValue` to total seconds since 00:00:00.
+ * Integer-precise; safe for comparison without floating-point error.
+ */
+function timeToSeconds(t) {
+    return t.hours * (MINUTES_PER_HOUR * SECONDS_PER_MINUTE) + t.minutes * SECONDS_PER_MINUTE + (t.seconds ?? 0);
 }
 /**
  * Compare two TimeValue objects.
- * Returns -1 if a < b, 0 if equal, 1 if a > b.
+ * Returns a negative number if a < b, 0 if equal, positive if a > b.
  */
 function compareTime(a, b) {
-    const aMin = timeToMinutes(a);
-    const bMin = timeToMinutes(b);
-    if (aMin < bMin)
-        return -1;
-    if (aMin > bMin)
-        return 1;
-    return 0;
+    return timeToSeconds(a) - timeToSeconds(b);
 }
 /**
  * Check if a time is within an optional min/max range (inclusive).
@@ -56,12 +62,12 @@ function formatTime(value, format, showSeconds) {
         return showSeconds ? `${base}:${pad(s)}` : base;
     }
     // 12h format
-    const period = h >= 12 ? 'PM' : 'AM';
+    const period = h >= NOON_HOUR ? 'PM' : 'AM';
     let displayHour = h;
-    if (h === 0)
-        displayHour = 12;
-    else if (h > 12)
-        displayHour = h - 12;
+    if (h === MIDNIGHT_HOUR)
+        displayHour = NOON_HOUR;
+    else if (h > NOON_HOUR)
+        displayHour = h - NOON_HOUR;
     const base = `${displayHour}:${pad(m)}`;
     return showSeconds ? `${base}:${pad(s)} ${period}` : `${base} ${period}`;
 }
@@ -83,14 +89,14 @@ function parseTimeString(str, format) {
         const minutes = parseInt(match12[2], 10);
         const seconds = match12[3] ? parseInt(match12[3], 10) : undefined;
         const period = match12[4].toUpperCase();
-        if (hours < 1 || hours > 12 || minutes < 0 || minutes > 59)
+        if (hours < 1 || hours > NOON_HOUR || minutes < 0 || minutes > 59)
             return null;
         if (seconds !== undefined && (seconds < 0 || seconds > 59))
             return null;
-        if (period === 'AM' && hours === 12)
-            hours = 0;
-        else if (period === 'PM' && hours !== 12)
-            hours += 12;
+        if (period === 'AM' && hours === NOON_HOUR)
+            hours = MIDNIGHT_HOUR;
+        else if (period === 'PM' && hours !== NOON_HOUR)
+            hours += NOON_HOUR;
         return { hours, minutes, ...(seconds !== undefined ? { seconds } : {}) };
     }
     // 24h format: "HH:mm" or "HH:mm:ss"
@@ -100,7 +106,7 @@ function parseTimeString(str, format) {
     const hours = parseInt(match24[1], 10);
     const minutes = parseInt(match24[2], 10);
     const seconds = match24[3] ? parseInt(match24[3], 10) : undefined;
-    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59)
+    if (hours < 0 || hours > HOURS_PER_DAY - 1 || minutes < 0 || minutes > 59)
         return null;
     if (seconds !== undefined && (seconds < 0 || seconds > 59))
         return null;
@@ -111,9 +117,9 @@ function parseTimeString(str, format) {
  */
 function generateTimeOptions(format, minuteStep, showSeconds, min, max) {
     const options = [];
-    const step = Math.max(1, Math.min(60, minuteStep));
-    for (let h = 0; h < 24; h++) {
-        for (let m = 0; m < 60; m += step) {
+    const step = Math.max(1, Math.min(MINUTES_PER_HOUR, minuteStep));
+    for (let h = 0; h < HOURS_PER_DAY; h++) {
+        for (let m = 0; m < MINUTES_PER_HOUR; m += step) {
             const value = { hours: h, minutes: m, ...(showSeconds ? { seconds: 0 } : {}) };
             const label = formatTime(value, format, showSeconds);
             const disabled = !isTimeInRange(value, min, max);
@@ -165,6 +171,23 @@ class FuiTimeListComponent {
     optionSelected = output();
     /** Index of the currently focused option for keyboard navigation. */
     _focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_focusedIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Label of the currently active option for the aria-live announcement region.
+     * Resolves to the focused option during keyboard navigation, falling back to
+     * the selected option's label when no keyboard focus is active.
+     */
+    activeOptionLabel = computed(() => {
+        const opts = this.options();
+        const focusedIdx = this._focusedIndex();
+        if (focusedIdx >= 0 && focusedIdx < opts.length) {
+            return opts[focusedIdx].label;
+        }
+        const selected = this.selectedValue();
+        if (!selected)
+            return '';
+        const match = opts.find((o) => compareTime(o.value, selected) === 0);
+        return match?.label ?? '';
+    }, ...(ngDevMode ? [{ debugName: "activeOptionLabel" }] : /* istanbul ignore next */ []));
     listContainer;
     intl = inject(FuiTimePickerIntl);
     _cdr = inject(ChangeDetectorRef);
@@ -289,13 +312,13 @@ class FuiTimeListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimeListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTimeListComponent, isStandalone: true, selector: "fui-time-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { classAttribute: "fui-time-list" }, viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }], ngImport: i0, template: "<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"intl.availableTimesAriaLabel\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-02) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-02) var(--fui-spacing-04);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-02);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-surface-02)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-font-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-border-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTimeListComponent, isStandalone: true, selector: "fui-time-list", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectedValue: { classPropertyName: "selectedValue", publicName: "selectedValue", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { classAttribute: "fui-time-list" }, viewQueries: [{ propertyName: "listContainer", first: true, predicate: ["listContainer"], descendants: true }], ngImport: i0, template: "<span class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ activeOptionLabel() }}</span>\r\n<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"intl.availableTimesAriaLabel\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-2) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-2) var(--fui-spacing-6);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:var(--fui-leading-normal);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-bg-subtle)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimeListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-time-list', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-time-list',
-                    }, template: "<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"intl.availableTimesAriaLabel\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-02) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-surface-01);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-color);border-radius:var(--fui-border-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-02) var(--fui-spacing-04);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);line-height:var(--fui-line-height-02);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color var(--fui-duration-fast-01) var(--fui-ease-standard) 0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-surface-02)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-font-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-border-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"] }]
+                    }, template: "<span class=\"fui-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">{{ activeOptionLabel() }}</span>\r\n<div\r\n  #listContainer\r\n  class=\"fui-time-list__container\"\r\n  role=\"listbox\"\r\n  tabindex=\"0\"\r\n  [attr.aria-label]=\"intl.availableTimesAriaLabel\"\r\n  (keydown)=\"onKeydown($event)\"\r\n>\r\n  @for (option of options(); track option.label) {\r\n    <div\r\n      class=\"fui-time-list__option\"\r\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\r\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\r\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\r\n      [attr.id]=\"'fui-time-option-' + $index\"\r\n      [attr.aria-selected]=\"_isSelected(option)\"\r\n      [attr.aria-disabled]=\"option.disabled\"\r\n      role=\"option\"\r\n      (click)=\"_selectOption(option)\"\r\n    >\r\n      {{ option.label }}\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-list{display:block}.fui-time-list__container{max-height:200px;overflow-y:auto;overflow-x:hidden;padding:var(--fui-spacing-2) 0}.fui-time-list__container::-webkit-scrollbar{width:8px}.fui-time-list__container::-webkit-scrollbar-track{background:var(--fui-bg-default);border-radius:var(--fui-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb{background:var(--fui-border-default);border-radius:var(--fui-radius-sm)}.fui-time-list__container::-webkit-scrollbar-thumb:hover{background:var(--fui-text-secondary)}.fui-time-list__option{display:flex;align-items:center;padding:var(--fui-spacing-2) var(--fui-spacing-6);font-family:var(--fui-font-sans);font-size:var(--fui-text-base);line-height:var(--fui-leading-normal);color:var(--fui-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-list__option:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-bg-subtle)}.fui-time-list__option--selected{background-color:var(--fui-primary-20);color:var(--fui-primary-80);font-weight:var(--fui-weight-medium)}.fui-time-list__option--selected:hover:not(.fui-time-list__option--disabled){background-color:var(--fui-primary-30)}.fui-time-list__option--focused{outline:2px solid var(--fui-primary-60);outline-offset:-2px;border-radius:var(--fui-radius-sm)}.fui-time-list__option--disabled{color:var(--fui-text-disabled);cursor:not-allowed;opacity:.5}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectedValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedValue", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], listContainer: [{
                 type: ViewChild,
                 args: ['listContainer', { static: false }]
@@ -304,6 +327,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
 class FuiTimePickerComponent {
     static nextId = 0;
     controlType = 'fui-time-picker';
+    // --- Injected dependencies ---
+    intl = inject(FuiTimePickerIntl);
+    _cdr = inject(ChangeDetectorRef);
+    _popup = inject(FuiPopupOverlayDirective);
+    _formSync = inject(FuiFormControlSyncDirective);
+    _elementRef = inject(ElementRef);
     // --- Inputs ---
     formatInput = input('24h', { ...(ngDevMode ? { debugName: "formatInput" } : /* istanbul ignore next */ {}), alias: 'format' });
     showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -313,7 +342,8 @@ class FuiTimePickerComponent {
     placeholderInput = input('', { ...(ngDevMode ? { debugName: "placeholderInput" } : /* istanbul ignore next */ {}), alias: 'placeholder' });
     disabledInput = input(false, { ...(ngDevMode ? { debugName: "disabledInput" } : /* istanbul ignore next */ {}), alias: 'disabled',
         transform: booleanAttribute });
-    readonly = input(false, { ...(ngDevMode ? { debugName: "readonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    readonlyInput = input(false, { ...(ngDevMode ? { debugName: "readonlyInput" } : /* istanbul ignore next */ {}), alias: 'readonly',
+        transform: booleanAttribute });
     errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
     // --- Outputs ---
     timeChange = output();
@@ -324,8 +354,8 @@ class FuiTimePickerComponent {
     _ngControlDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_ngControlDisabled" }] : /* istanbul ignore next */ []));
     _required = signal(false, ...(ngDevMode ? [{ debugName: "_required" }] : /* istanbul ignore next */ []));
     _errorState = signal(false, ...(ngDevMode ? [{ debugName: "_errorState" }] : /* istanbul ignore next */ []));
-    _readOnly = signal(false, ...(ngDevMode ? [{ debugName: "_readOnly" }] : /* istanbul ignore next */ []));
-    _panelOpen = signal(false, ...(ngDevMode ? [{ debugName: "_panelOpen" }] : /* istanbul ignore next */ []));
+    /** Whether the panel is open — projected from FuiPopupOverlayDirective. */
+    panelOpen = computed(() => this._popup.panelOpen(), ...(ngDevMode ? [{ debugName: "panelOpen" }] : /* istanbul ignore next */ []));
     // --- FuiFormFieldControl ---
     stateChanges = new Subject();
     _uid = `fui-time-picker-${FuiTimePickerComponent.nextId++}`;
@@ -347,6 +377,7 @@ class FuiTimePickerComponent {
     }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     focused = this._focused;
     disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = computed(() => this.readonlyInput(), ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
     errorState = this._errorState;
     id = this._uid;
     empty = computed(() => {
@@ -364,19 +395,11 @@ class FuiTimePickerComponent {
         const maxVal = this.max() ? parseISOTimeString(this.max()) : undefined;
         return generateTimeOptions(this.formatInput(), this.minuteStep(), this.showSeconds(), minVal ?? undefined, maxVal ?? undefined);
     }, ...(ngDevMode ? [{ debugName: "_timeOptions" }] : /* istanbul ignore next */ []));
-    // ViewChild
+    // ViewChild — static: true because the panel is always rendered via [hidden]
     inputElement;
     timeListPanel;
-    // Overlay
-    _overlayRef = null;
-    _overlaySubscriptions = new Subscription();
-    _overlayService = inject(FuiOverlayService);
-    _elementRef = inject(ElementRef);
-    _document = inject(DOCUMENT);
-    _ngZone = inject(NgZone);
-    intl = inject(FuiTimePickerIntl);
-    _cdr = inject(ChangeDetectorRef);
-    _outsideClickSub;
+    // ViewChild for fuiInput directive — delegates readonly/disabled/aria/state to it
+    _fuiInput;
     // CVA callbacks
     _onChange = () => {
         /* noop */
@@ -384,8 +407,12 @@ class FuiTimePickerComponent {
     _onTouched = () => {
         /* noop */
     };
+    // Validator callback — null until Angular calls registerOnValidatorChange
+    _validatorChange = null;
     constructor() {
-        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => { this._cdr.markForCheck(); });
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._cdr.markForCheck();
+        });
         void Promise.resolve().then(() => {
             if (this._ngControlRef.ngControl) {
                 this._ngControlRef.ngControl.valueAccessor = this;
@@ -410,20 +437,52 @@ class FuiTimePickerComponent {
             this._errorState();
             this.stateChanges.next();
         });
+        // Shift focus into the panel on open (a11y: moves ESC handling out of
+        // any ancestor focus-trap such as fui-dialog) and restore it on close.
+        // queueMicrotask defers until Angular has flushed the [hidden] binding,
+        // so the panel div is focusable when .focus() fires.
+        // _panelOpenInitialized skips the initial synchronous run so the input
+        // does not steal focus on first render.
+        let _panelOpenInitialized = false;
+        effect(() => {
+            const isOpen = this._popup.panelOpen();
+            if (!_panelOpenInitialized) {
+                _panelOpenInitialized = true;
+                return;
+            }
+            if (isOpen) {
+                queueMicrotask(() => this.timeListPanel?.nativeElement.focus());
+            }
+            else {
+                queueMicrotask(() => this.inputElement?.nativeElement.focus());
+            }
+        });
+        // Re-trigger validation when min/max signals change so Angular re-runs validate().
+        effect(() => {
+            this.min();
+            this.max();
+            this._validatorChange?.();
+        });
     }
-    ngDoCheck() {
-        if (this.ngControl) {
-            updateErrorState(this.ngControl, this._errorState, this.errorStateMatcher(), this._defaultErrorStateMatcher, this._parentForm, this._parentFormGroup, this.stateChanges);
-            syncRequiredState(this.ngControl, this._required, this.stateChanges);
-            syncNgControlDisabled(this.ngControl, this._ngControlDisabled, this.stateChanges);
-        }
+    ngAfterViewInit() {
+        // Wire popup-overlay directive — panel is always rendered via [hidden]
+        // so timeListPanel is available at this point.
+        this._popup.setTrigger(this._elementRef);
+        this._popup.setPanel(this.timeListPanel ?? null);
+        this._popup.panelClass.set(['fui-time-picker-overlay-panel']);
+        this._popup.backdropClass.set('fui-time-picker-backdrop');
+        // Wire form-control-sync directive signals
+        this._formSync.errorState.set(this._errorState);
+        this._formSync.errorStateMatcher.set(this.errorStateMatcher());
+        this._formSync.required.set(this._required);
+        this._formSync.ngControlDisabled.set(this._ngControlDisabled);
+        this._formSync.stateChanges.set(this.stateChanges);
     }
     ngOnDestroy() {
         this.stateChanges.complete();
-        this._outsideClickSub?.unsubscribe();
-        this._disposeOverlay();
     }
     // --- CVA ---
+    /** Sets the time value from the form model; accepts an ISO time string or null. */
     writeValue(value) {
         if (value) {
             const parsed = parseISOTimeString(value);
@@ -434,60 +493,84 @@ class FuiTimePickerComponent {
         }
         this.stateChanges.next();
     }
+    /** Registers the callback Angular calls when the value should propagate to the model. */
     registerOnChange(fn) {
         this._onChange = fn;
     }
+    /** Registers the callback Angular calls when the control should be marked as touched. */
     registerOnTouched(fn) {
         this._onTouched = fn;
     }
+    /** Enables or disables the control programmatically; mirrors the `disabled` form-control state. */
     setDisabledState(isDisabled) {
         this._disabled.set(isDisabled);
         this.stateChanges.next();
     }
+    // --- Validator ---
+    /** Stores the callback Angular calls when validator inputs (min/max) change so the form re-validates. */
+    registerOnValidatorChange(fn) {
+        this._validatorChange = fn;
+    }
+    /** Validates the current time value against min and max constraints. Returns null when valid. */
+    validate(control) {
+        const value = control.value;
+        if (value == null || value === '')
+            return null;
+        const parsed = parseISOTimeString(value);
+        if (!parsed)
+            return { timeInvalid: { value } };
+        const minStr = this.min();
+        if (minStr) {
+            const min = parseISOTimeString(minStr);
+            if (min && compareTime(parsed, min) < 0) {
+                return { minTime: { min: minStr, actual: value } };
+            }
+        }
+        const maxStr = this.max();
+        if (maxStr) {
+            const max = parseISOTimeString(maxStr);
+            if (max && compareTime(parsed, max) > 0) {
+                return { maxTime: { max: maxStr, actual: value } };
+            }
+        }
+        return null;
+    }
     // --- FuiFormFieldControl ---
+    /** Focuses the time input and opens the time panel when the form-field container is clicked, unless disabled. */
     onContainerClick(_event) {
         if (!this.disabled()) {
             this.inputElement?.nativeElement.focus();
-            if (!this._panelOpen()) {
+            if (!this.panelOpen()) {
                 this.open();
             }
         }
     }
+    /** Stores the space-separated list of IDs for the aria-describedby attribute. */
     setDescribedByIds(ids) {
         this._ariaDescribedby = ids.length ? ids.join(' ') : null;
-    }
-    setReadOnly(readOnly) {
-        this._readOnly.set(readOnly);
+        this._fuiInput?.setDescribedByIds(ids);
     }
     // --- Panel open/close ---
+    /** Opens the time list panel. No-op if disabled, readonly, or already open. */
     open() {
-        if (this.disabled() || this.readonly() || this._panelOpen())
+        if (this.disabled() || this.readonly() || this.panelOpen())
             return;
-        requestAnimationFrame(() => {
-            this._panelOpen.set(true);
-            this._focused.set(true);
-            setTimeout(() => {
-                this._createOverlay();
-                this._listenForOutsideClicks();
-            });
-        });
+        this._focused.set(true);
+        this._popup.open();
     }
+    /** Closes the time list panel. Focus is restored to the input by the constructor effect. No-op if already closed. */
     close() {
-        if (!this._panelOpen())
+        if (!this.panelOpen())
             return;
-        this._outsideClickSub?.unsubscribe();
-        this._panelOpen.set(false);
         this._focused.set(false);
-        this._disposeOverlay();
         this._onTouched();
-        setTimeout(() => {
-            this.inputElement?.nativeElement.focus();
-        }, 0);
+        this._popup.close();
+        // Focus restore is handled by the effect in the constructor.
     }
     _togglePanel() {
         if (this.disabled() || this.readonly())
             return;
-        if (this._panelOpen()) {
+        if (this.panelOpen()) {
             this.close();
         }
         else {
@@ -499,15 +582,16 @@ class FuiTimePickerComponent {
         // We handle parsing on blur, not on every keystroke
     }
     _onKeydown(event) {
-        if (event.key === 'Escape' && this._panelOpen()) {
+        if (event.key === 'Escape' && this.panelOpen()) {
             event.preventDefault();
+            event.stopPropagation();
             this.close();
         }
-        else if (event.key === 'ArrowDown' && !this._panelOpen()) {
+        else if (event.key === 'ArrowDown' && !this.panelOpen()) {
             event.preventDefault();
             this.open();
         }
-        else if (event.key === 'Enter' && !this._panelOpen()) {
+        else if (event.key === 'Enter' && !this.panelOpen()) {
             event.preventDefault();
             this.open();
         }
@@ -532,7 +616,7 @@ class FuiTimePickerComponent {
             // Invalid input — revert to previous formatted value
             input.value = this._displayValue();
         }
-        if (!this._panelOpen()) {
+        if (!this.panelOpen()) {
             this._onTouched();
         }
     }
@@ -541,26 +625,6 @@ class FuiTimePickerComponent {
         this._setValue(value);
         this.close();
     }
-    // Start listening for outside clicks when panel opens
-    _listenForOutsideClicks() {
-        this._outsideClickSub?.unsubscribe();
-        this._ngZone.runOutsideAngular(() => {
-            setTimeout(() => {
-                this._outsideClickSub = fromEvent(this._document, 'click')
-                    .pipe(filter(() => this._panelOpen()), filter((event) => {
-                    const target = event.target;
-                    const hostElement = this._elementRef.nativeElement;
-                    const overlayElement = this._overlayRef?.overlayElement;
-                    return !hostElement.contains(target) && !overlayElement?.contains(target);
-                }))
-                    .subscribe(() => {
-                    this._ngZone.run(() => {
-                        this.close();
-                    });
-                });
-            });
-        });
-    }
     // --- Private helpers ---
     _setValue(value) {
         this._value.set(value);
@@ -569,95 +633,71 @@ class FuiTimePickerComponent {
         this.timeChange.emit(stringVal ?? '');
         this.stateChanges.next();
     }
-    _createOverlay() {
-        if (this._overlayRef || !this.timeListPanel)
-            return;
-        const triggerElement = this._elementRef.nativeElement;
-        const triggerWidth = triggerElement.getBoundingClientRect().width;
-        const positions = [
-            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
-            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
-        ];
-        const positionStrategy = this._overlayService
-            .position()
-            .connectedTo(triggerElement, positions)
-            .withPush(true)
-            .withViewportMargin(8);
-        this._overlayRef = this._overlayService.create({
-            positionStrategy,
-            scrollStrategy: this._overlayService.scrollStrategies.reposition(),
-            hasBackdrop: true,
-            backdropClass: 'fui-time-picker-backdrop',
-            backdropClickBehavior: 'close',
-            panelClass: ['fui-time-picker-overlay-panel'],
-            minWidth: Math.max(triggerWidth, 160),
-        });
-        // Track overlay subscriptions for proper cleanup
-        this._overlaySubscriptions.unsubscribe();
-        this._overlaySubscriptions = new Subscription();
-        this._overlaySubscriptions.add(this._overlayRef.backdropClick.subscribe(() => {
-            this.close();
-        }));
-        this._overlaySubscriptions.add(this._overlayRef.keydownEvents.subscribe((event) => {
-            if (event.key === 'Escape') {
-                this.close();
-            }
-        }));
-        const panelElement = this.timeListPanel.nativeElement;
-        this._overlayRef.attach(panelElement);
-    }
-    _disposeOverlay() {
-        this._overlaySubscriptions.unsubscribe();
-        if (this._overlayRef) {
-            this._overlayRef.dispose();
-            this._overlayRef = null;
-        }
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTimePickerComponent, isStandalone: true, selector: "fui-time-picker", inputs: { formatInput: { classPropertyName: "formatInput", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, host: { properties: { "attr.id": "id", "class.fui-time-picker--open": "_panelOpen()", "class.fui-time-picker--disabled": "disabled()", "class.fui-time-picker--focused": "focused()", "class.fui-time-picker--error": "errorState()", "class.fui-time-picker--readonly": "_readOnly()" }, classAttribute: "fui-time-picker" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTimePickerComponent, isStandalone: true, selector: "fui-time-picker", inputs: { formatInput: { classPropertyName: "formatInput", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, placeholderInput: { classPropertyName: "placeholderInput", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonlyInput: { classPropertyName: "readonlyInput", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { timeChange: "timeChange" }, host: { properties: { "attr.id": "id", "class.fui-time-picker--open": "panelOpen()", "class.fui-time-picker--disabled": "disabled()", "class.fui-time-picker--focused": "focused()", "class.fui-time-picker--error": "errorState()", "class.fui-time-picker--readonly": "readonly()" }, classAttribute: "fui-time-picker" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: FuiTimePickerComponent,
                 multi: true,
             },
+            {
+                provide: NG_VALIDATORS,
+                useExisting: FuiTimePickerComponent,
+                multi: true,
+            },
             {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiTimePickerComponent,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "timeListPanel", first: true, predicate: ["timeListPanel"], descendants: true }], ngImport: i0, template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"_panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (_panelOpen()) {\r\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" [attr.aria-label]=\"intl.dialogAriaLabel\">\r\n    <fui-time-list\r\n      [options]=\"_timeOptions()\"\r\n      [selectedValue]=\"_value()\"\r\n      [format]=\"formatInput()\"\r\n      (optionSelected)=\"_onOptionSelected($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-picker{--fui-time-picker-font-size: var(--fui-font-size-02);--fui-time-picker-panel-border-radius: var(--fui-border-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-03);--fui-time-picker-panel-bg: var(--fui-surface-00);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker__panel{background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiTimeListComponent, selector: "fui-time-list", inputs: ["options", "selectedValue", "format"], outputs: ["optionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "timeListPanel", first: true, predicate: ["timeListPanel"], descendants: true, static: true }, { propertyName: "_fuiInput", first: true, predicate: FuiInputDirective, descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    fuiInput\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<div\r\n  #timeListPanel\r\n  class=\"fui-time-picker__panel\"\r\n  role=\"dialog\"\r\n  tabindex=\"-1\"\r\n  [attr.aria-label]=\"intl.dialogAriaLabel\"\r\n  [hidden]=\"!panelOpen()\"\r\n>\r\n  <fui-time-list\r\n    [options]=\"_timeOptions()\"\r\n    [selectedValue]=\"_value()\"\r\n    [format]=\"formatInput()\"\r\n    (optionSelected)=\"_onOptionSelected($event)\"\r\n  />\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-picker{--fui-time-picker-font-size: var(--fui-text-base);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker__panel{--fui-time-picker-panel-border-radius: var(--fui-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-md);--fui-time-picker-panel-bg: var(--fui-bg-default);--fui-time-picker-panel-border-color: var(--fui-border-default);background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-time-picker-panel-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition-property:opacity,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"], dependencies: [{ kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiTimeListComponent, selector: "fui-time-list", inputs: ["options", "selectedValue", "format"], outputs: ["optionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fui-time-picker', standalone: true, imports: [FuiIconComponent, FuiTimeListComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'fui-time-picker', standalone: true, imports: [FuiInputDirective, FuiIconComponent, FuiTimeListComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, hostDirectives: [
+                        {
+                            directive: FuiPopupOverlayDirective,
+                            inputs: ['positions', 'panelClass', 'backdropClass', 'scrollStrategy', 'minWidthFromTrigger'],
+                            outputs: ['openedChange', 'escapeKey'],
+                        },
+                        FuiFormControlSyncDirective,
+                    ], host: {
                         class: 'fui-time-picker',
                         '[attr.id]': 'id',
-                        '[class.fui-time-picker--open]': '_panelOpen()',
+                        '[class.fui-time-picker--open]': 'panelOpen()',
                         '[class.fui-time-picker--disabled]': 'disabled()',
                         '[class.fui-time-picker--focused]': 'focused()',
                         '[class.fui-time-picker--error]': 'errorState()',
-                        '[class.fui-time-picker--readonly]': '_readOnly()',
+                        '[class.fui-time-picker--readonly]': 'readonly()',
                     }, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: FuiTimePickerComponent,
                             multi: true,
                         },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: FuiTimePickerComponent,
+                            multi: true,
+                        },
                         {
                             provide: FUI_FORM_FIELD_CONTROL,
                             useExisting: FuiTimePickerComponent,
                         },
-                    ], template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [attr.placeholder]=\"placeholder()\"\r\n    [attr.disabled]=\"disabled() ? '' : null\"\r\n    [attr.readonly]=\"readonly() ? '' : null\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"_panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-describedby]=\"_ariaDescribedby\"\r\n    [attr.aria-required]=\"required()\"\r\n    [attr.aria-invalid]=\"errorState()\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!_readOnly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      [disabled]=\"disabled() || readonly()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n@if (_panelOpen()) {\r\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" [attr.aria-label]=\"intl.dialogAriaLabel\">\r\n    <fui-time-list\r\n      [options]=\"_timeOptions()\"\r\n      [selectedValue]=\"_value()\"\r\n      [format]=\"formatInput()\"\r\n      (optionSelected)=\"_onOptionSelected($event)\"\r\n    />\r\n  </div>\r\n}\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-picker{--fui-time-picker-font-size: var(--fui-font-size-02);--fui-time-picker-panel-border-radius: var(--fui-border-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-03);--fui-time-picker-panel-bg: var(--fui-surface-00);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-01);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-regular);line-height:var(--fui-line-height-02);letter-spacing:var(--fui-letter-spacing-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-border-radius-sm);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker__panel{background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition:opacity,transform var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], inputElement: [{
+                    ], template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    fuiInput\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<div\r\n  #timeListPanel\r\n  class=\"fui-time-picker__panel\"\r\n  role=\"dialog\"\r\n  tabindex=\"-1\"\r\n  [attr.aria-label]=\"intl.dialogAriaLabel\"\r\n  [hidden]=\"!panelOpen()\"\r\n>\r\n  <fui-time-list\r\n    [options]=\"_timeOptions()\"\r\n    [selectedValue]=\"_value()\"\r\n    [format]=\"formatInput()\"\r\n    (optionSelected)=\"_onOptionSelected($event)\"\r\n  />\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-time-picker{--fui-time-picker-font-size: var(--fui-text-base);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker__panel{--fui-time-picker-panel-border-radius: var(--fui-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-md);--fui-time-picker-panel-bg: var(--fui-bg-default);--fui-time-picker-panel-border-color: var(--fui-border-default);background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-time-picker-panel-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition-property:opacity,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { static: false }]
             }], timeListPanel: [{
                 type: ViewChild,
-                args: ['timeListPanel', { static: false }]
+                args: ['timeListPanel', { static: true }]
+            }], _fuiInput: [{
+                type: ViewChild,
+                args: [FuiInputDirective, { static: false }]
             }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { FuiTimeListComponent, FuiTimePickerComponent, FuiTimePickerIntl, compareTime, formatTime, generateTimeOptions, isTimeInRange, parseISOTimeString, parseTimeString, timeToMinutes, timeValueToString };
+export { FuiTimeListComponent, FuiTimePickerComponent, FuiTimePickerIntl, compareTime, formatTime, generateTimeOptions, isTimeInRange, parseISOTimeString, parseTimeString, timeToMinutes, timeToSeconds, timeValueToString };
 //# sourceMappingURL=raintonic-formaui-components-time-picker.mjs.map