@raintonic/formaui 0.2.0

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

@@ -0,0 +1,644 @@
+import * as i0 from '@angular/core';
+import { input, output, signal, effect, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, inject, computed, ElementRef, NgZone } from '@angular/core';
+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 { DefaultErrorStateMatcher, FUI_FORM_FIELD_CONTROL } from '@raintonic/formaui/core';
+import { FuiOverlayService } from '@raintonic/formaui/cdk/overlay';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+/**
+ * Convert a TimeValue to total minutes for comparison purposes.
+ */
+function timeToMinutes(time) {
+    return time.hours * 60 + time.minutes + (time.seconds ? time.seconds / 60 : 0);
+}
+/**
+ * Compare two TimeValue objects.
+ * Returns -1 if a < b, 0 if equal, 1 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;
+}
+/**
+ * Check if a time is within an optional min/max range (inclusive).
+ */
+function isTimeInRange(time, min, max) {
+    if (min && compareTime(time, min) < 0)
+        return false;
+    if (max && compareTime(time, max) > 0)
+        return false;
+    return true;
+}
+/**
+ * Format a TimeValue for display.
+ * - 24h: "14:30" or "14:30:00"
+ * - 12h: "2:30 PM" or "2:30:00 PM"
+ */
+function formatTime(value, format, showSeconds) {
+    if (!value)
+        return '';
+    const h = value.hours;
+    const m = value.minutes;
+    const s = value.seconds ?? 0;
+    const pad = (n) => n.toString().padStart(2, '0');
+    if (format === '24h') {
+        const base = `${pad(h)}:${pad(m)}`;
+        return showSeconds ? `${base}:${pad(s)}` : base;
+    }
+    // 12h format
+    const period = h >= 12 ? 'PM' : 'AM';
+    let displayHour = h;
+    if (h === 0)
+        displayHour = 12;
+    else if (h > 12)
+        displayHour = h - 12;
+    const base = `${displayHour}:${pad(m)}`;
+    return showSeconds ? `${base}:${pad(s)} ${period}` : `${base} ${period}`;
+}
+/**
+ * Parse a time string into a TimeValue.
+ * Supports formats: "HH:mm", "HH:mm:ss", "h:mm AM/PM", "h:mm:ss AM/PM"
+ * Returns null if the string cannot be parsed.
+ */
+function parseTimeString(str, format) {
+    if (!str?.trim())
+        return null;
+    const trimmed = str.trim();
+    if (format === '12h') {
+        // Match patterns like "2:30 PM", "12:30:45 AM"
+        const match12 = /^(\d{1,2}):(\d{2})(?::(\d{2}))?\s*(AM|PM)$/i.exec(trimmed);
+        if (!match12)
+            return null;
+        let hours = parseInt(match12[1], 10);
+        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)
+            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;
+        return { hours, minutes, ...(seconds !== undefined ? { seconds } : {}) };
+    }
+    // 24h format: "HH:mm" or "HH:mm:ss"
+    const match24 = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/.exec(trimmed);
+    if (!match24)
+        return null;
+    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)
+        return null;
+    if (seconds !== undefined && (seconds < 0 || seconds > 59))
+        return null;
+    return { hours, minutes, ...(seconds !== undefined ? { seconds } : {}) };
+}
+/**
+ * Generate time options for the dropdown list.
+ */
+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 value = { hours: h, minutes: m, ...(showSeconds ? { seconds: 0 } : {}) };
+            const label = formatTime(value, format, showSeconds);
+            const disabled = !isTimeInRange(value, min, max);
+            options.push({ label, value, disabled });
+        }
+    }
+    return options;
+}
+/**
+ * Convert a TimeValue to an ISO-like string "HH:mm" or "HH:mm:ss".
+ */
+function timeValueToString(value, showSeconds) {
+    if (!value)
+        return '';
+    const pad = (n) => n.toString().padStart(2, '0');
+    const base = `${pad(value.hours)}:${pad(value.minutes)}`;
+    return showSeconds ? `${base}:${pad(value.seconds ?? 0)}` : base;
+}
+/**
+ * Parse an ISO-like time string "HH:mm" or "HH:mm:ss" into a TimeValue.
+ * This always parses in 24h format regardless of display format.
+ */
+function parseISOTimeString(str) {
+    if (!str?.trim())
+        return null;
+    return parseTimeString(str.trim(), '24h');
+}
+
+class FuiTimeListComponent {
+    /** The list of time options to display. */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Currently selected time value. */
+    selectedValue = input(null, ...(ngDevMode ? [{ debugName: "selectedValue" }] : /* istanbul ignore next */ []));
+    /** Time format for display. */
+    format = input('24h', ...(ngDevMode ? [{ debugName: "format" }] : /* istanbul ignore next */ []));
+    /** Emitted when an option is selected. */
+    optionSelected = output();
+    /** Index of the currently focused option for keyboard navigation. */
+    _focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "_focusedIndex" }] : /* istanbul ignore next */ []));
+    listContainer;
+    constructor() {
+        // Scroll to selected option when options change
+        effect(() => {
+            this.selectedValue();
+            this.options();
+            // Defer to next microtask so DOM is rendered
+            void Promise.resolve().then(() => {
+                this._scrollToSelected();
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this._scrollToSelected();
+    }
+    /** Check if an option matches the selected value. */
+    _isSelected(option) {
+        const selected = this.selectedValue();
+        if (!selected)
+            return false;
+        return compareTime(option.value, selected) === 0;
+    }
+    /** Handle option click. */
+    _selectOption(option) {
+        if (option.disabled)
+            return;
+        this.optionSelected.emit(option.value);
+    }
+    /** Handle keyboard navigation. */
+    onKeydown(event) {
+        const opts = this.options();
+        if (!opts.length)
+            return;
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this._moveFocus(1);
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this._moveFocus(-1);
+                break;
+            case 'Enter':
+                event.preventDefault();
+                this._selectFocused();
+                break;
+            case 'Home':
+                event.preventDefault();
+                this._setFocusedIndex(0);
+                break;
+            case 'End':
+                event.preventDefault();
+                this._setFocusedIndex(opts.length - 1);
+                break;
+        }
+    }
+    /** Move focus by delta, skipping disabled options. */
+    _moveFocus(delta) {
+        const opts = this.options();
+        if (!opts.length)
+            return;
+        let current = this._focusedIndex();
+        const len = opts.length;
+        let attempts = 0;
+        do {
+            current = (current + delta + len) % len;
+            attempts++;
+        } while (opts[current].disabled && attempts < len);
+        if (!opts[current].disabled) {
+            this._setFocusedIndex(current);
+        }
+    }
+    /** Set focused index and scroll into view. */
+    _setFocusedIndex(index) {
+        this._focusedIndex.set(index);
+        this._scrollToIndex(index);
+    }
+    /** Select the currently focused option. */
+    _selectFocused() {
+        const idx = this._focusedIndex();
+        const opts = this.options();
+        if (idx >= 0 && idx < opts.length && !opts[idx].disabled) {
+            this.optionSelected.emit(opts[idx].value);
+        }
+    }
+    /** Scroll to a specific index in the list. */
+    _scrollToIndex(index) {
+        const container = this.listContainer?.nativeElement;
+        if (!container)
+            return;
+        const items = container.querySelectorAll('.fui-time-list__option');
+        const item = items[index];
+        if (!item)
+            return;
+        const itemTop = item.offsetTop;
+        const itemBottom = itemTop + item.offsetHeight;
+        const scrollTop = container.scrollTop;
+        const scrollBottom = scrollTop + container.clientHeight;
+        if (itemTop < scrollTop) {
+            container.scrollTop = itemTop;
+        }
+        else if (itemBottom > scrollBottom) {
+            container.scrollTop = itemBottom - container.clientHeight;
+        }
+    }
+    /** Scroll to the selected option. */
+    _scrollToSelected() {
+        const selected = this.selectedValue();
+        if (!selected)
+            return;
+        const opts = this.options();
+        const index = opts.findIndex((o) => compareTime(o.value, selected) === 0);
+        if (index >= 0) {
+            this._focusedIndex.set(index);
+            // Defer scroll to ensure DOM is rendered
+            requestAnimationFrame(() => {
+                this._scrollToIndex(index);
+            });
+        }
+    }
+    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\n  #listContainer\n  class=\"fui-time-list__container\"\n  role=\"listbox\"\n  tabindex=\"0\"\n  aria-label=\"Available times\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (option of options(); track option.label) {\n    <div\n      class=\"fui-time-list__option\"\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\n      [attr.id]=\"'fui-time-option-' + $index\"\n      [attr.aria-selected]=\"_isSelected(option)\"\n      [attr.aria-disabled]=\"option.disabled\"\n      role=\"option\"\n      (click)=\"_selectOption(option)\"\n    >\n      {{ option.label }}\n    </div>\n  }\n</div>\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)}.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 });
+}
+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\n  #listContainer\n  class=\"fui-time-list__container\"\n  role=\"listbox\"\n  tabindex=\"0\"\n  aria-label=\"Available times\"\n  (keydown)=\"onKeydown($event)\"\n>\n  @for (option of options(); track option.label) {\n    <div\n      class=\"fui-time-list__option\"\n      [class.fui-time-list__option--selected]=\"_isSelected(option)\"\n      [class.fui-time-list__option--disabled]=\"option.disabled\"\n      [class.fui-time-list__option--focused]=\"_focusedIndex() === $index\"\n      [attr.id]=\"'fui-time-option-' + $index\"\n      [attr.aria-selected]=\"_isSelected(option)\"\n      [attr.aria-disabled]=\"option.disabled\"\n      role=\"option\"\n      (click)=\"_selectOption(option)\"\n    >\n      {{ option.label }}\n    </div>\n  }\n</div>\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)}.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"] }]
+        }], 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 }]
+            }] } });
+
+class FuiTimePickerComponent {
+    static nextId = 0;
+    controlType = 'fui-time-picker';
+    // --- Inputs ---
+    formatInput = input('24h', { ...(ngDevMode ? { debugName: "formatInput" } : /* istanbul ignore next */ {}), alias: 'format' });
+    showSeconds = input(false, { ...(ngDevMode ? { debugName: "showSeconds" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    minuteStep = input(15, ...(ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []));
+    min = input('', ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    max = input('', ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    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 });
+    errorStateMatcher = input(null, ...(ngDevMode ? [{ debugName: "errorStateMatcher" }] : /* istanbul ignore next */ []));
+    // --- Outputs ---
+    timeChange = output();
+    // --- Internal state ---
+    /** @internal */ _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _focused = signal(false, ...(ngDevMode ? [{ debugName: "_focused" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _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 */ []));
+    // --- FuiFormFieldControl ---
+    stateChanges = new Subject();
+    _uid = `fui-time-picker-${FuiTimePickerComponent.nextId++}`;
+    _ariaDescribedby = null;
+    // Form references
+    _parentForm = inject(NgForm, { optional: true });
+    _parentFormGroup = inject(FormGroupDirective, { optional: true });
+    _defaultErrorStateMatcher = inject(DefaultErrorStateMatcher);
+    _ngControlRef = injectNgControl();
+    get ngControl() {
+        return this._ngControlRef.ngControl;
+    }
+    // Interface signals
+    placeholder = computed(() => this.placeholderInput(), ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = this._required;
+    value = computed(() => {
+        const tv = this._value();
+        return tv ? timeValueToString(tv, this.showSeconds()) : null;
+    }, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    focused = this._focused;
+    disabled = computed(() => this._disabled() || this.disabledInput() || this._ngControlDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    errorState = this._errorState;
+    id = this._uid;
+    empty = computed(() => {
+        return this._value() === null;
+    }, ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    // Display value formatted for current format
+    _displayValue = computed(() => {
+        return formatTime(this._value(), this.formatInput(), this.showSeconds());
+    }, ...(ngDevMode ? [{ debugName: "_displayValue" }] : /* istanbul ignore next */ []));
+    // Display value for form-field readOnly mode
+    displayValue = this._displayValue;
+    // Computed time options for dropdown
+    _timeOptions = computed(() => {
+        const minVal = this.min() ? parseISOTimeString(this.min()) : undefined;
+        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
+    inputElement;
+    timeListPanel;
+    // Overlay
+    _overlayRef = null;
+    _overlaySubscriptions = new Subscription();
+    _overlayService = inject(FuiOverlayService);
+    _elementRef = inject(ElementRef);
+    _document = inject(DOCUMENT);
+    _ngZone = inject(NgZone);
+    _outsideClickSub;
+    // CVA callbacks
+    _onChange = () => {
+        /* noop */
+    };
+    _onTouched = () => {
+        /* noop */
+    };
+    constructor() {
+        void Promise.resolve().then(() => {
+            if (this._ngControlRef.ngControl) {
+                this._ngControlRef.ngControl.valueAccessor = this;
+            }
+        });
+        // Effect to emit state changes
+        effect(() => {
+            this.placeholderInput();
+            this.readonly();
+            this.disabledInput();
+            this.formatInput();
+            this.showSeconds();
+            this.minuteStep();
+            this.min();
+            this.max();
+            this.errorStateMatcher();
+            this._focused();
+            this._disabled();
+            this._value();
+            this._ngControlDisabled();
+            this._required();
+            this._errorState();
+            this.stateChanges.next();
+        });
+    }
+    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);
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+        this._outsideClickSub?.unsubscribe();
+        this._disposeOverlay();
+    }
+    // --- CVA ---
+    writeValue(value) {
+        if (value) {
+            const parsed = parseISOTimeString(value);
+            this._value.set(parsed);
+        }
+        else {
+            this._value.set(null);
+        }
+        this.stateChanges.next();
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+        this.stateChanges.next();
+    }
+    // --- FuiFormFieldControl ---
+    onContainerClick(_event) {
+        if (!this.disabled()) {
+            this.inputElement?.nativeElement.focus();
+            if (!this._panelOpen()) {
+                this.open();
+            }
+        }
+    }
+    setDescribedByIds(ids) {
+        this._ariaDescribedby = ids.length ? ids.join(' ') : null;
+    }
+    setReadOnly(readOnly) {
+        this._readOnly.set(readOnly);
+    }
+    // --- Panel open/close ---
+    open() {
+        if (this.disabled() || this.readonly() || this._panelOpen())
+            return;
+        requestAnimationFrame(() => {
+            this._panelOpen.set(true);
+            this._focused.set(true);
+            setTimeout(() => {
+                this._createOverlay();
+                this._listenForOutsideClicks();
+            });
+        });
+    }
+    close() {
+        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);
+    }
+    _togglePanel() {
+        if (this.disabled() || this.readonly())
+            return;
+        if (this._panelOpen()) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    // --- Event handlers ---
+    _onManualInput(_event) {
+        // We handle parsing on blur, not on every keystroke
+    }
+    _onKeydown(event) {
+        if (event.key === 'Escape' && this._panelOpen()) {
+            event.preventDefault();
+            this.close();
+        }
+        else if (event.key === 'ArrowDown' && !this._panelOpen()) {
+            event.preventDefault();
+            this.open();
+        }
+        else if (event.key === 'Enter' && !this._panelOpen()) {
+            event.preventDefault();
+            this.open();
+        }
+    }
+    _onFocus() {
+        this._focused.set(true);
+    }
+    _onBlur() {
+        const input = this.inputElement?.nativeElement;
+        if (!input)
+            return;
+        const text = input.value;
+        if (!text) {
+            this._setValue(null);
+            return;
+        }
+        const parsed = parseTimeString(text, this.formatInput());
+        if (parsed) {
+            this._setValue(parsed);
+        }
+        else {
+            // Invalid input — revert to previous formatted value
+            input.value = this._displayValue();
+        }
+        if (!this._panelOpen()) {
+            this._onTouched();
+        }
+    }
+    /** Called when user selects an option from the time list dropdown. */
+    _onOptionSelected(value) {
+        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);
+        const stringVal = value ? timeValueToString(value, this.showSeconds()) : null;
+        this._onChange(stringVal);
+        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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                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\">\n  <input\n    #inputElement\n    class=\"fui-time-picker__input\"\n    type=\"text\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? '' : null\"\n    [attr.readonly]=\"readonly() ? '' : null\"\n    [value]=\"_displayValue()\"\n    [attr.aria-expanded]=\"_panelOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-describedby]=\"_ariaDescribedby\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorState()\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    (input)=\"_onManualInput($event)\"\n    (keydown)=\"_onKeydown($event)\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n  />\n  @if (!_readOnly()) {\n    <button\n      type=\"button\"\n      class=\"fui-time-picker__toggle\"\n      (click)=\"_togglePanel()\"\n      [disabled]=\"disabled() || readonly()\"\n      tabindex=\"-1\"\n      aria-label=\"Toggle time picker\"\n    >\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\n    </button>\n  }\n</div>\n\n@if (_panelOpen()) {\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" aria-label=\"Time selection\">\n    <fui-time-list\n      [options]=\"_timeOptions()\"\n      [selectedValue]=\"_value()\"\n      [format]=\"formatInput()\"\n      (optionSelected)=\"_onOptionSelected($event)\"\n    />\n  </div>\n}\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)}.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}.fui-time-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@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 });
+}
+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: {
+                        class: 'fui-time-picker',
+                        '[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()',
+                    }, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: FuiTimePickerComponent,
+                            multi: true,
+                        },
+                        {
+                            provide: FUI_FORM_FIELD_CONTROL,
+                            useExisting: FuiTimePickerComponent,
+                        },
+                    ], template: "<div class=\"fui-time-picker__wrapper\">\n  <input\n    #inputElement\n    class=\"fui-time-picker__input\"\n    type=\"text\"\n    [attr.placeholder]=\"placeholder()\"\n    [attr.disabled]=\"disabled() ? '' : null\"\n    [attr.readonly]=\"readonly() ? '' : null\"\n    [value]=\"_displayValue()\"\n    [attr.aria-expanded]=\"_panelOpen()\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    [attr.aria-describedby]=\"_ariaDescribedby\"\n    [attr.aria-required]=\"required()\"\n    [attr.aria-invalid]=\"errorState()\"\n    role=\"combobox\"\n    autocomplete=\"off\"\n    (input)=\"_onManualInput($event)\"\n    (keydown)=\"_onKeydown($event)\"\n    (focus)=\"_onFocus()\"\n    (blur)=\"_onBlur()\"\n  />\n  @if (!_readOnly()) {\n    <button\n      type=\"button\"\n      class=\"fui-time-picker__toggle\"\n      (click)=\"_togglePanel()\"\n      [disabled]=\"disabled() || readonly()\"\n      tabindex=\"-1\"\n      aria-label=\"Toggle time picker\"\n    >\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\n    </button>\n  }\n</div>\n\n@if (_panelOpen()) {\n  <div #timeListPanel class=\"fui-time-picker__panel\" role=\"dialog\" aria-label=\"Time selection\">\n    <fui-time-list\n      [options]=\"_timeOptions()\"\n      [selectedValue]=\"_value()\"\n      [format]=\"formatInput()\"\n      (optionSelected)=\"_onOptionSelected($event)\"\n    />\n  </div>\n}\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)}.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}.fui-time-picker-overlay-panel{z-index:var(--fui-z-popover, 1060)}@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: [{
+                type: ViewChild,
+                args: ['inputElement', { static: false }]
+            }], timeListPanel: [{
+                type: ViewChild,
+                args: ['timeListPanel', { static: false }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiTimeListComponent, FuiTimePickerComponent, compareTime, formatTime, generateTimeOptions, isTimeInRange, parseISOTimeString, parseTimeString, timeToMinutes, timeValueToString };
+//# sourceMappingURL=raintonic-formaui-components-time-picker.mjs.map