ngx-com 0.0.21 → 0.1.0

package/fesm2022/ngx-com-components-timepicker.mjs

@@ -0,0 +1,1048 @@
+import { cva } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { inject, LOCALE_ID, viewChild, model, input, output, linkedSignal, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { ErrorStateMatcher, FormFieldControl } from 'ngx-com/components/form-field';
+import { mergeClasses } from 'ngx-com/utils';
+
+/**
+ * Types and interfaces for the TimePicker component.
+ */
+/** Creates a ComTimeValue */
+function createTimeValue(hours = 0, minutes = 0, seconds = 0) {
+    return { hours, minutes, seconds };
+}
+/**
+ * Compares two ComTimeValue objects.
+ * @returns negative if a < b, 0 if equal, positive if a > b
+ */
+function compareTime(a, b) {
+    const diff = a.hours * 3600 + a.minutes * 60 + a.seconds - (b.hours * 3600 + b.minutes * 60 + b.seconds);
+    return diff;
+}
+/** Generates a unique ID for time picker instances */
+let timePickerIdCounter = 0;
+function generateTimePickerId() {
+    return `com-time-picker-${timePickerIdCounter++}`;
+}
+
+/**
+ * CVA variants for the time picker container.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-ring`, `--color-warn`, `--color-success`, `--radius-input`
+ */
+const timepickerContainerVariants = cva([
+    'inline-flex',
+    'items-center',
+    'gap-1',
+    'rounded-input',
+    'transition-colors',
+    'duration-normal',
+], {
+    variants: {
+        variant: {
+            standalone: [
+                'border',
+                'border-input-border',
+                'bg-input-background',
+                'text-input-foreground',
+                'focus-within:outline-1',
+                'focus-within:outline-offset-2',
+                'focus-within:outline-ring',
+            ],
+            embedded: [
+                'border-transparent',
+                'bg-transparent',
+                'text-foreground',
+            ],
+            naked: [
+                'border-transparent',
+                'bg-transparent',
+                'shadow-none',
+                'focus-within:outline-none',
+                'rounded-none',
+            ],
+        },
+        size: {
+            sm: ['h-8', 'px-2', 'text-xs', 'gap-0.5'],
+            default: ['h-10', 'px-3', 'text-sm', 'gap-1'],
+            lg: ['h-12', 'px-4', 'text-base', 'gap-1.5'],
+        },
+        state: {
+            default: [],
+            error: [
+                'border-warn',
+                'focus-within:outline-warn',
+            ],
+            success: [
+                'border-success',
+                'focus-within:outline-success',
+            ],
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'embedded',
+            state: 'error',
+            class: [],
+        },
+        {
+            variant: 'embedded',
+            state: 'success',
+            class: [],
+        },
+        // Naked variant should not show ring (form-field provides focus styling)
+        {
+            variant: 'naked',
+            state: 'error',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
+        {
+            variant: 'naked',
+            state: 'success',
+            class: ['border-transparent', 'focus-within:outline-none'],
+        },
+    ],
+    defaultVariants: {
+        variant: 'standalone',
+        size: 'default',
+        state: 'default',
+    },
+});
+/**
+ * CVA variants for the disabled state of time picker.
+ *
+ * @tokens `--color-disabled`, `--color-disabled-foreground`
+ */
+const timepickerDisabledVariants = cva([
+    'cursor-not-allowed',
+    'bg-disabled',
+    'text-disabled-foreground',
+    'pointer-events-none',
+]);
+/**
+ * CVA variants for each time segment input.
+ *
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--radius-interactive-sm`
+ */
+const timepickerSegmentVariants = cva([
+    'bg-transparent',
+    'outline-none',
+    'text-center',
+    'font-mono',
+    'tabular-nums',
+    'select-all',
+    'focus-visible:bg-primary-subtle',
+    'focus-visible:text-primary-subtle-foreground',
+    'focus-visible:rounded-interactive-sm',
+], {
+    variants: {
+        size: {
+            sm: ['w-5', 'text-xs'],
+            default: ['w-7', 'text-sm'],
+            lg: ['w-9', 'text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the colon separator.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const timepickerSeparatorVariants = cva([
+    'text-muted-foreground',
+    'select-none',
+    'font-mono',
+], {
+    variants: {
+        size: {
+            sm: ['text-xs'],
+            default: ['text-sm'],
+            lg: ['text-base'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the AM/PM toggle button.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`, `--color-ring`,
+ *         `--radius-control-sm`
+ */
+const timepickerPeriodVariants = cva([
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'rounded-control-sm',
+    'font-medium',
+    'transition-colors',
+    'select-none',
+    'outline-none',
+    'bg-muted',
+    'text-muted-foreground',
+    'hover:bg-muted-hover',
+    'focus-visible:outline-1',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
+], {
+    variants: {
+        size: {
+            sm: ['h-5', 'px-1', 'text-xs', 'ml-0.5'],
+            default: ['h-6', 'px-1.5', 'text-xs', 'ml-1'],
+            lg: ['h-7', 'px-2', 'text-sm', 'ml-1.5'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for the time section divider in datepicker panel.
+ *
+ * @tokens `--color-border-subtle`
+ */
+const timepickerSectionVariants = cva([
+    'flex',
+    'items-center',
+    'justify-center',
+    'border-t',
+    'border-border-subtle',
+], {
+    variants: {
+        size: {
+            sm: ['pt-2', 'mt-2'],
+            default: ['pt-3', 'mt-3'],
+            lg: ['pt-4', 'mt-4'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+/**
+ * CVA variants for time labels in date range picker.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+const timepickerLabelVariants = cva([
+    'text-muted-foreground',
+    'font-medium',
+], {
+    variants: {
+        size: {
+            sm: ['text-xs'],
+            default: ['text-xs'],
+            lg: ['text-sm'],
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+
+/**
+ * Time picker component with segmented numeric input fields.
+ * Supports standalone usage with ControlValueAccessor and embedded usage
+ * within datepicker/date-range-picker panels.
+ *
+ * Visual layout: `[HH] : [MM] : [SS] [AM|PM]`
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-ring`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-warn`, `--color-success`, `--color-border`
+ *
+ * @example
+ * ```html
+ * <!-- Standalone with reactive forms -->
+ * <com-time-picker formControlName="startTime" />
+ *
+ * <!-- 12-hour format with seconds -->
+ * <com-time-picker formControlName="alarm" [use12HourFormat]="true" [showSeconds]="true" />
+ *
+ * <!-- 15-minute steps -->
+ * <com-time-picker formControlName="meeting" [minuteStep]="15" />
+ *
+ * <!-- Embedded inside datepicker panel -->
+ * <com-time-picker variant="embedded" [value]="time" (timeChange)="onTime($event)" />
+ * ```
+ */
+class ComTimePicker {
+    localeId = inject(LOCALE_ID);
+    ngControl = inject(NgControl, { optional: true, self: true });
+    defaultErrorStateMatcher = inject(ErrorStateMatcher);
+    parentForm = inject(NgForm, { optional: true });
+    parentFormGroup = inject(FormGroupDirective, { optional: true });
+    timepickerId = generateTimePickerId();
+    hoursInputRef = viewChild('hoursInput', ...(ngDevMode ? [{ debugName: "hoursInputRef" }] : []));
+    minutesInputRef = viewChild('minutesInput', ...(ngDevMode ? [{ debugName: "minutesInputRef" }] : []));
+    secondsInputRef = viewChild('secondsInput', ...(ngDevMode ? [{ debugName: "secondsInputRef" }] : []));
+    periodButtonRef = viewChild('periodButton', ...(ngDevMode ? [{ debugName: "periodButtonRef" }] : []));
+    // ============ INPUTS ============
+    /** Current time value. */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Whether the time picker is disabled. */
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /** Whether the time picker is required. */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /** Whether to show the seconds segment. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    /** 12h vs 24h format. `null` = auto-detect from locale. */
+    use12HourFormat = input(null, ...(ngDevMode ? [{ debugName: "use12HourFormat" }] : []));
+    /** Step interval for minutes. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
+    /** Step interval for seconds. */
+    secondStep = input(1, ...(ngDevMode ? [{ debugName: "secondStep" }] : []));
+    /** Minimum selectable time. */
+    minTime = input(null, ...(ngDevMode ? [{ debugName: "minTime" }] : []));
+    /** Maximum selectable time. */
+    maxTime = input(null, ...(ngDevMode ? [{ debugName: "maxTime" }] : []));
+    /** Visual variant. */
+    variant = input('standalone', ...(ngDevMode ? [{ debugName: "variant" }] : []));
+    /** Size variant. */
+    size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Validation state. */
+    state = input('default', ...(ngDevMode ? [{ debugName: "state" }] : []));
+    /** Accessible label for the group. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /** Additional CSS classes. */
+    userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : {}), alias: 'class' });
+    /** Placeholder text for empty segments. */
+    placeholder = input('--', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /** Custom error state matcher for determining when to show errors. */
+    errorStateMatcher = input(...(ngDevMode ? [undefined, { debugName: "errorStateMatcher" }] : []));
+    // Signal Forms inputs — set automatically by [formField] via setInputOnDirectives
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
+    sfErrors = input([], { ...(ngDevMode ? { debugName: "sfErrors" } : {}), alias: 'errors' });
+    // ============ OUTPUTS ============
+    /** Emitted when time value changes. */
+    timeChange = output();
+    // ============ INTERNAL STATE ============
+    /** Internal value state. */
+    internalValue = linkedSignal(() => this.value() ?? null, ...(ngDevMode ? [{ debugName: "internalValue" }] : []));
+    /** Which segment is currently focused. */
+    activeSegment = signal(null, ...(ngDevMode ? [{ debugName: "activeSegment" }] : []));
+    /** Pending typed digits for auto-advance. */
+    pendingDigits = signal('', ...(ngDevMode ? [{ debugName: "pendingDigits" }] : []));
+    /** Live announcements for screen readers. */
+    liveAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "liveAnnouncement" }] : []));
+    /** IDs for aria-describedby (set by form-field). */
+    _describedByIds = signal('', ...(ngDevMode ? [{ debugName: "_describedByIds" }] : []));
+    /** Form field appearance (set by form-field). */
+    _appearance = signal('outline', ...(ngDevMode ? [{ debugName: "_appearance" }] : []));
+    // ============ FormFieldControl SIGNALS ============
+    /** Whether the time picker is focused. Implements FormFieldControl. */
+    focused = computed(() => this.activeSegment() !== null, ...(ngDevMode ? [{ debugName: "focused" }] : []));
+    /** Whether the label should float. */
+    shouldLabelFloat = computed(() => this.focused() || this.internalValue() !== null, ...(ngDevMode ? [{ debugName: "shouldLabelFloat" }] : []));
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    errorState = computed(() => {
+        if (!this.ngControl) {
+            return this.invalid() && this.touched();
+        }
+        const matcher = this.errorStateMatcher() ?? this.defaultErrorStateMatcher;
+        const form = this.parentFormGroup ?? this.parentForm;
+        return matcher.isErrorState(this.ngControl.control ?? null, form);
+    }, ...(ngDevMode ? [{ debugName: "errorState" }] : []));
+    /** Structured validation errors from Signal Forms. */
+    errors = computed(() => !this.ngControl ? this.sfErrors() : null, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+    /** Unique ID for the control (maps to hours input). Implements FormFieldControl. */
+    id = computed(() => `${this.timepickerId}-hours`, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    effectiveState = computed(() => {
+        const manualState = this.state();
+        if (manualState !== 'default')
+            return manualState;
+        return this.errorState() ? 'error' : 'default';
+    }, ...(ngDevMode ? [{ debugName: "effectiveState" }] : []));
+    /** Combined aria-describedby from form-field. */
+    effectiveAriaDescribedBy = computed(() => this._describedByIds() || null, ...(ngDevMode ? [{ debugName: "effectiveAriaDescribedBy" }] : []));
+    // ============ COMPUTED STATE ============
+    /** Whether to use 12-hour format. */
+    is12Hour = computed(() => {
+        const explicit = this.use12HourFormat();
+        if (explicit !== null)
+            return explicit;
+        try {
+            const options = new Intl.DateTimeFormat(this.localeId, { hour: 'numeric' }).resolvedOptions();
+            return options.hour12 === true;
+        }
+        catch {
+            return false;
+        }
+    }, ...(ngDevMode ? [{ debugName: "is12Hour" }] : []));
+    /** Current period (AM/PM). */
+    period = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return 'AM';
+        return value.hours >= 12 ? 'PM' : 'AM';
+    }, ...(ngDevMode ? [{ debugName: "period" }] : []));
+    /** Display hours (converted from 24h to 12h when needed). */
+    displayHours = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return null;
+        if (!this.is12Hour())
+            return value.hours;
+        const h = value.hours % 12;
+        return h === 0 ? 12 : h;
+    }, ...(ngDevMode ? [{ debugName: "displayHours" }] : []));
+    /** Formatted hours string. */
+    formattedHours = computed(() => {
+        const h = this.displayHours();
+        if (h === null)
+            return '';
+        return h.toString().padStart(2, '0');
+    }, ...(ngDevMode ? [{ debugName: "formattedHours" }] : []));
+    /** Formatted minutes string. */
+    formattedMinutes = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return '';
+        return value.minutes.toString().padStart(2, '0');
+    }, ...(ngDevMode ? [{ debugName: "formattedMinutes" }] : []));
+    /** Formatted seconds string. */
+    formattedSeconds = computed(() => {
+        const value = this.internalValue();
+        if (!value)
+            return '';
+        return value.seconds.toString().padStart(2, '0');
+    }, ...(ngDevMode ? [{ debugName: "formattedSeconds" }] : []));
+    /** Container classes. */
+    containerClasses = computed(() => {
+        const base = timepickerContainerVariants({
+            variant: this.variant(),
+            size: this.size(),
+            state: this.effectiveState(),
+        });
+        const disabled = this.disabled() ? timepickerDisabledVariants() : '';
+        // For naked variant, add padding based on form-field appearance
+        let paddingClasses = '';
+        if (this.variant() === 'naked') {
+            paddingClasses = this._appearance() === 'fill' ? 'pt-5 pb-1.5 px-3' : 'py-2.5 px-3';
+        }
+        return mergeClasses(base, disabled, paddingClasses, this.userClass());
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    /** Segment input classes. */
+    segmentClasses = computed(() => {
+        return timepickerSegmentVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "segmentClasses" }] : []));
+    /** Separator classes. */
+    separatorClasses = computed(() => {
+        return timepickerSeparatorVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "separatorClasses" }] : []));
+    /** Period button classes. */
+    periodClasses = computed(() => {
+        return timepickerPeriodVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "periodClasses" }] : []));
+    // ============ CVA CALLBACKS ============
+    onChange = () => { };
+    onTouched = () => { };
+    onValidatorChange = () => { };
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
+    // ============ CVA IMPLEMENTATION ============
+    writeValue(value) {
+        this.internalValue.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // ============ VALIDATOR IMPLEMENTATION ============
+    validate() {
+        const value = this.internalValue();
+        if (this.required() && !value) {
+            return { required: true };
+        }
+        if (value) {
+            const minTime = this.minTime();
+            if (minTime && compareTime(value, minTime) < 0) {
+                return { minTime: { min: minTime, actual: value } };
+            }
+            const maxTime = this.maxTime();
+            if (maxTime && compareTime(value, maxTime) > 0) {
+                return { maxTime: { max: maxTime, actual: value } };
+            }
+        }
+        return null;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    // ============ EVENT HANDLERS ============
+    onSegmentFocus(segment) {
+        this.activeSegment.set(segment);
+        this.pendingDigits.set('');
+    }
+    onSegmentBlur(segment) {
+        this.activeSegment.set(null);
+        this.pendingDigits.set('');
+        this.snapToStep(segment);
+        this.onTouched();
+        this.touched.set(true);
+    }
+    onSegmentInput(event, segment) {
+        // Prevent default browser input handling — we manage value via keydown
+        const input = event.target;
+        // Restore the formatted value to prevent browser from changing display
+        if (segment === 'hours') {
+            input.value = this.formattedHours();
+        }
+        else if (segment === 'minutes') {
+            input.value = this.formattedMinutes();
+        }
+        else {
+            input.value = this.formattedSeconds();
+        }
+    }
+    onSegmentKeydown(event, segment) {
+        switch (event.key) {
+            case 'ArrowUp':
+                event.preventDefault();
+                this.incrementSegment(segment, 1);
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                this.incrementSegment(segment, -1);
+                break;
+            case 'ArrowRight':
+                event.preventDefault();
+                this.focusNextSegment(segment);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusPrevSegment(segment);
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.setSegmentToMin(segment);
+                break;
+            case 'End':
+                event.preventDefault();
+                this.setSegmentToMax(segment);
+                break;
+            case 'Backspace':
+            case 'Delete':
+                event.preventDefault();
+                this.pendingDigits.set('');
+                break;
+            default:
+                if (/^[0-9]$/.test(event.key)) {
+                    event.preventDefault();
+                    this.handleDigitInput(event.key, segment);
+                }
+                break;
+        }
+    }
+    onPeriodKeydown(event) {
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+                event.preventDefault();
+                this.togglePeriod();
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                this.focusPrevSegment('period');
+                break;
+            case 'a':
+            case 'A':
+                event.preventDefault();
+                this.setPeriod('AM');
+                break;
+            case 'p':
+            case 'P':
+                event.preventDefault();
+                this.setPeriod('PM');
+                break;
+        }
+    }
+    togglePeriod() {
+        const value = this.internalValue();
+        if (!value) {
+            this.updateValue({ hours: 12, minutes: 0, seconds: 0 });
+            return;
+        }
+        const newHours = value.hours >= 12 ? value.hours - 12 : value.hours + 12;
+        this.updateValue({ ...value, hours: newHours });
+    }
+    // ============ FormFieldControl IMPLEMENTATION ============
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    onContainerClick(_event) {
+        if (!this.disabled()) {
+            this.hoursInputRef()?.nativeElement.focus();
+        }
+    }
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids) {
+        this._describedByIds.set(ids);
+    }
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance) {
+        this._appearance.set(appearance);
+    }
+    // ============ PRIVATE METHODS ============
+    setPeriod(period) {
+        const value = this.internalValue();
+        if (!value) {
+            const hours = period === 'AM' ? 0 : 12;
+            this.updateValue({ hours, minutes: 0, seconds: 0 });
+            return;
+        }
+        const currentPeriod = this.period();
+        if (currentPeriod === period)
+            return;
+        const newHours = period === 'AM' ? value.hours - 12 : value.hours + 12;
+        this.updateValue({ ...value, hours: newHours });
+    }
+    incrementSegment(segment, direction) {
+        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
+        const step = segment === 'minutes' ? this.minuteStep() : segment === 'seconds' ? this.secondStep() : 1;
+        const delta = step * direction;
+        let newValue;
+        switch (segment) {
+            case 'hours': {
+                const max = this.is12Hour() ? 12 : 23;
+                const min = this.is12Hour() ? 1 : 0;
+                let h = this.is12Hour() ? (this.displayHours() ?? min) : value.hours;
+                h += delta;
+                // Wrap
+                if (this.is12Hour()) {
+                    if (h > max)
+                        h = min;
+                    if (h < min)
+                        h = max;
+                    // Convert back to 24h
+                    const isPM = this.period() === 'PM';
+                    let h24 = h === 12 ? 0 : h;
+                    if (isPM)
+                        h24 += 12;
+                    newValue = { ...value, hours: h24 };
+                }
+                else {
+                    if (h > 23)
+                        h = 0;
+                    if (h < 0)
+                        h = 23;
+                    newValue = { ...value, hours: h };
+                }
+                break;
+            }
+            case 'minutes': {
+                let m = value.minutes + delta;
+                if (m > 59)
+                    m = 0;
+                if (m < 0)
+                    m = 59;
+                newValue = { ...value, minutes: m };
+                break;
+            }
+            case 'seconds': {
+                let s = value.seconds + delta;
+                if (s > 59)
+                    s = 0;
+                if (s < 0)
+                    s = 59;
+                newValue = { ...value, seconds: s };
+                break;
+            }
+        }
+        this.updateValue(newValue);
+    }
+    handleDigitInput(digit, segment) {
+        const pending = this.pendingDigits() + digit;
+        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
+        let parsed = parseInt(pending, 10);
+        switch (segment) {
+            case 'hours': {
+                const max = this.is12Hour() ? 12 : 23;
+                const min = this.is12Hour() ? 1 : 0;
+                if (parsed > max)
+                    parsed = parseInt(digit, 10);
+                if (parsed < min && pending.length >= 2)
+                    parsed = min;
+                // Convert to 24h if 12h mode
+                let h24 = parsed;
+                if (this.is12Hour()) {
+                    const isPM = this.period() === 'PM';
+                    h24 = parsed === 12 ? 0 : parsed;
+                    if (isPM)
+                        h24 += 12;
+                }
+                this.updateValue({ ...value, hours: h24 });
+                break;
+            }
+            case 'minutes': {
+                if (parsed > 59)
+                    parsed = parseInt(digit, 10);
+                this.updateValue({ ...value, minutes: parsed });
+                break;
+            }
+            case 'seconds': {
+                if (parsed > 59)
+                    parsed = parseInt(digit, 10);
+                this.updateValue({ ...value, seconds: parsed });
+                break;
+            }
+        }
+        // Auto-advance after 2 digits
+        if (pending.length >= 2) {
+            this.pendingDigits.set('');
+            this.focusNextSegment(segment);
+        }
+        else {
+            this.pendingDigits.set(pending);
+        }
+    }
+    snapToStep(segment) {
+        const value = this.internalValue();
+        if (!value)
+            return;
+        if (segment === 'minutes' && this.minuteStep() > 1) {
+            const step = this.minuteStep();
+            const snapped = Math.round(value.minutes / step) * step;
+            const clamped = Math.min(snapped, 59);
+            if (clamped !== value.minutes) {
+                this.updateValue({ ...value, minutes: clamped });
+            }
+        }
+        if (segment === 'seconds' && this.secondStep() > 1) {
+            const step = this.secondStep();
+            const snapped = Math.round(value.seconds / step) * step;
+            const clamped = Math.min(snapped, 59);
+            if (clamped !== value.seconds) {
+                this.updateValue({ ...value, seconds: clamped });
+            }
+        }
+    }
+    setSegmentToMin(segment) {
+        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
+        switch (segment) {
+            case 'hours': {
+                if (this.is12Hour()) {
+                    // Min display is 1; convert to 24h
+                    const isPM = this.period() === 'PM';
+                    const h24 = isPM ? 13 : 1;
+                    this.updateValue({ ...value, hours: h24 });
+                }
+                else {
+                    this.updateValue({ ...value, hours: 0 });
+                }
+                break;
+            }
+            case 'minutes':
+                this.updateValue({ ...value, minutes: 0 });
+                break;
+            case 'seconds':
+                this.updateValue({ ...value, seconds: 0 });
+                break;
+        }
+    }
+    setSegmentToMax(segment) {
+        const value = this.internalValue() ?? { hours: 0, minutes: 0, seconds: 0 };
+        switch (segment) {
+            case 'hours': {
+                if (this.is12Hour()) {
+                    // Max display is 12; 12 in 12h = 0 in 24h (for AM) or 12 (for PM)
+                    const isPM = this.period() === 'PM';
+                    const h24 = isPM ? 12 : 0;
+                    this.updateValue({ ...value, hours: h24 });
+                }
+                else {
+                    this.updateValue({ ...value, hours: 23 });
+                }
+                break;
+            }
+            case 'minutes':
+                this.updateValue({ ...value, minutes: 59 });
+                break;
+            case 'seconds':
+                this.updateValue({ ...value, seconds: 59 });
+                break;
+        }
+    }
+    focusNextSegment(current) {
+        switch (current) {
+            case 'hours':
+                this.minutesInputRef()?.nativeElement.focus();
+                break;
+            case 'minutes':
+                if (this.showSeconds()) {
+                    this.secondsInputRef()?.nativeElement.focus();
+                }
+                else if (this.is12Hour()) {
+                    this.periodButtonRef()?.nativeElement.focus();
+                }
+                break;
+            case 'seconds':
+                if (this.is12Hour()) {
+                    this.periodButtonRef()?.nativeElement.focus();
+                }
+                break;
+        }
+    }
+    focusPrevSegment(current) {
+        switch (current) {
+            case 'minutes':
+                this.hoursInputRef()?.nativeElement.focus();
+                break;
+            case 'seconds':
+                this.minutesInputRef()?.nativeElement.focus();
+                break;
+            case 'period':
+                if (this.showSeconds()) {
+                    this.secondsInputRef()?.nativeElement.focus();
+                }
+                else {
+                    this.minutesInputRef()?.nativeElement.focus();
+                }
+                break;
+        }
+    }
+    updateValue(value) {
+        this.value.set(value);
+        this.onChange(value);
+        this.timeChange.emit(value);
+        this.onValidatorChange();
+        if (value) {
+            const h = this.is12Hour()
+                ? `${(value.hours % 12 || 12)}:${value.minutes.toString().padStart(2, '0')}${this.showSeconds() ? ':' + value.seconds.toString().padStart(2, '0') : ''} ${value.hours >= 12 ? 'PM' : 'AM'}`
+                : `${value.hours.toString().padStart(2, '0')}:${value.minutes.toString().padStart(2, '0')}${this.showSeconds() ? ':' + value.seconds.toString().padStart(2, '0') : ''}`;
+            this.liveAnnouncement.set(`Time set to ${h}`);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComTimePicker, isStandalone: true, selector: "com-time-picker", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showSeconds: { classPropertyName: "showSeconds", publicName: "showSeconds", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", isSignal: true, isRequired: false, transformFunction: null }, minuteStep: { classPropertyName: "minuteStep", publicName: "minuteStep", isSignal: true, isRequired: false, transformFunction: null }, secondStep: { classPropertyName: "secondStep", publicName: "secondStep", isSignal: true, isRequired: false, transformFunction: null }, minTime: { classPropertyName: "minTime", publicName: "minTime", isSignal: true, isRequired: false, transformFunction: null }, maxTime: { classPropertyName: "maxTime", publicName: "maxTime", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, sfErrors: { classPropertyName: "sfErrors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", touched: "touchedChange", timeChange: "timeChange" }, host: { properties: { "class.com-time-picker-disabled": "disabled()", "attr.role": "\"group\"", "attr.aria-label": "ariaLabel() || \"Time picker\"", "attr.aria-disabled": "disabled() || null" }, classAttribute: "com-time-picker-host inline-block" }, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComTimePicker) }], viewQueries: [{ propertyName: "hoursInputRef", first: true, predicate: ["hoursInput"], descendants: true, isSignal: true }, { propertyName: "minutesInputRef", first: true, predicate: ["minutesInput"], descendants: true, isSignal: true }, { propertyName: "secondsInputRef", first: true, predicate: ["secondsInput"], descendants: true, isSignal: true }, { propertyName: "periodButtonRef", first: true, predicate: ["periodButton"], descendants: true, isSignal: true }], exportAs: ["comTimePicker"], ngImport: i0, template: `
+    <div [class]="containerClasses()">
+      <!-- Hours -->
+      <input
+        #hoursInput
+        type="text"
+        inputmode="numeric"
+        role="spinbutton"
+        [class]="segmentClasses()"
+        [attr.id]="id()"
+        [attr.aria-label]="'Hours'"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-valuenow]="displayHours()"
+        [attr.aria-valuemin]="is12Hour() ? 1 : 0"
+        [attr.aria-valuemax]="is12Hour() ? 12 : 23"
+        [value]="formattedHours()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        maxlength="2"
+        (keydown)="onSegmentKeydown($event, 'hours')"
+        (input)="onSegmentInput($event, 'hours')"
+        (focus)="onSegmentFocus('hours')"
+        (blur)="onSegmentBlur('hours')"
+      />
+
+      <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+      <!-- Minutes -->
+      <input
+        #minutesInput
+        type="text"
+        inputmode="numeric"
+        role="spinbutton"
+        [class]="segmentClasses()"
+        [attr.aria-label]="'Minutes'"
+        [attr.aria-valuenow]="internalValue()?.minutes ?? null"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="59"
+        [value]="formattedMinutes()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        maxlength="2"
+        (keydown)="onSegmentKeydown($event, 'minutes')"
+        (input)="onSegmentInput($event, 'minutes')"
+        (focus)="onSegmentFocus('minutes')"
+        (blur)="onSegmentBlur('minutes')"
+      />
+
+      @if (showSeconds()) {
+        <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+        <!-- Seconds -->
+        <input
+          #secondsInput
+          type="text"
+          inputmode="numeric"
+          role="spinbutton"
+          [class]="segmentClasses()"
+          [attr.aria-label]="'Seconds'"
+          [attr.aria-valuenow]="internalValue()?.seconds ?? null"
+          [attr.aria-valuemin]="0"
+          [attr.aria-valuemax]="59"
+          [value]="formattedSeconds()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          maxlength="2"
+          (keydown)="onSegmentKeydown($event, 'seconds')"
+          (input)="onSegmentInput($event, 'seconds')"
+          (focus)="onSegmentFocus('seconds')"
+          (blur)="onSegmentBlur('seconds')"
+        />
+      }
+
+      @if (is12Hour()) {
+        <button
+          #periodButton
+          type="button"
+          [class]="periodClasses()"
+          [attr.aria-label]="'Toggle AM/PM, currently ' + period()"
+          [disabled]="disabled()"
+          (click)="togglePeriod()"
+          (keydown)="onPeriodKeydown($event)"
+        >
+          {{ period() }}
+        </button>
+      }
+    </div>
+
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, isInline: true, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComTimePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'com-time-picker', exportAs: 'comTimePicker', template: `
+    <div [class]="containerClasses()">
+      <!-- Hours -->
+      <input
+        #hoursInput
+        type="text"
+        inputmode="numeric"
+        role="spinbutton"
+        [class]="segmentClasses()"
+        [attr.id]="id()"
+        [attr.aria-label]="'Hours'"
+        [attr.aria-describedby]="effectiveAriaDescribedBy() || null"
+        [attr.aria-valuenow]="displayHours()"
+        [attr.aria-valuemin]="is12Hour() ? 1 : 0"
+        [attr.aria-valuemax]="is12Hour() ? 12 : 23"
+        [value]="formattedHours()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        maxlength="2"
+        (keydown)="onSegmentKeydown($event, 'hours')"
+        (input)="onSegmentInput($event, 'hours')"
+        (focus)="onSegmentFocus('hours')"
+        (blur)="onSegmentBlur('hours')"
+      />
+
+      <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+      <!-- Minutes -->
+      <input
+        #minutesInput
+        type="text"
+        inputmode="numeric"
+        role="spinbutton"
+        [class]="segmentClasses()"
+        [attr.aria-label]="'Minutes'"
+        [attr.aria-valuenow]="internalValue()?.minutes ?? null"
+        [attr.aria-valuemin]="0"
+        [attr.aria-valuemax]="59"
+        [value]="formattedMinutes()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        maxlength="2"
+        (keydown)="onSegmentKeydown($event, 'minutes')"
+        (input)="onSegmentInput($event, 'minutes')"
+        (focus)="onSegmentFocus('minutes')"
+        (blur)="onSegmentBlur('minutes')"
+      />
+
+      @if (showSeconds()) {
+        <span [class]="separatorClasses()" aria-hidden="true">:</span>
+
+        <!-- Seconds -->
+        <input
+          #secondsInput
+          type="text"
+          inputmode="numeric"
+          role="spinbutton"
+          [class]="segmentClasses()"
+          [attr.aria-label]="'Seconds'"
+          [attr.aria-valuenow]="internalValue()?.seconds ?? null"
+          [attr.aria-valuemin]="0"
+          [attr.aria-valuemax]="59"
+          [value]="formattedSeconds()"
+          [placeholder]="placeholder()"
+          [disabled]="disabled()"
+          maxlength="2"
+          (keydown)="onSegmentKeydown($event, 'seconds')"
+          (input)="onSegmentInput($event, 'seconds')"
+          (focus)="onSegmentFocus('seconds')"
+          (blur)="onSegmentBlur('seconds')"
+        />
+      }
+
+      @if (is12Hour()) {
+        <button
+          #periodButton
+          type="button"
+          [class]="periodClasses()"
+          [attr.aria-label]="'Toggle AM/PM, currently ' + period()"
+          [disabled]="disabled()"
+          (click)="togglePeriod()"
+          (keydown)="onPeriodKeydown($event)"
+        >
+          {{ period() }}
+        </button>
+      }
+    </div>
+
+    <div class="sr-only" aria-live="polite" aria-atomic="true">
+      {{ liveAnnouncement() }}
+    </div>
+  `, providers: [{ provide: FormFieldControl, useExisting: forwardRef(() => ComTimePicker) }], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'com-time-picker-host inline-block',
+                        '[class.com-time-picker-disabled]': 'disabled()',
+                        '[attr.role]': '"group"',
+                        '[attr.aria-label]': 'ariaLabel() || "Time picker"',
+                        '[attr.aria-disabled]': 'disabled() || null',
+                    }, styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { hoursInputRef: [{ type: i0.ViewChild, args: ['hoursInput', { isSignal: true }] }], minutesInputRef: [{ type: i0.ViewChild, args: ['minutesInput', { isSignal: true }] }], secondsInputRef: [{ type: i0.ViewChild, args: ['secondsInput', { isSignal: true }] }], periodButtonRef: [{ type: i0.ViewChild, args: ['periodButton', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], secondStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "secondStep", required: false }] }], minTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "minTime", required: false }] }], maxTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxTime", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], sfErrors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
+
+/**
+ * TimePicker component public API.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ComTimePicker, compareTime, createTimeValue, generateTimePickerId, timepickerContainerVariants, timepickerDisabledVariants, timepickerLabelVariants, timepickerPeriodVariants, timepickerSectionVariants, timepickerSegmentVariants, timepickerSeparatorVariants };
+//# sourceMappingURL=ngx-com-components-timepicker.mjs.map