ngx-com 0.0.18 → 0.0.20

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

@@ -242,6 +242,33 @@ class NativeDateAdapter extends DateAdapter {
             return dateDiff > 0 ? 1 : -1;
         return 0;
     }
+    getHours(date) {
+        return date.getHours();
+    }
+    getMinutes(date) {
+        return date.getMinutes();
+    }
+    getSeconds(date) {
+        return date.getSeconds();
+    }
+    setTime(date, hours, minutes, seconds) {
+        const result = new Date(date);
+        result.setHours(hours, minutes, seconds, 0);
+        return result;
+    }
+    createDateTime(year, month, day, hours, minutes, seconds) {
+        if (month < 0 || month > 11) {
+            throw new Error(`Invalid month index "${month}". Month index must be between 0 and 11.`);
+        }
+        if (day < 1) {
+            throw new Error(`Invalid date "${day}". Date must be greater than 0.`);
+        }
+        const result = new Date(year, month, day, hours, minutes, seconds);
+        if (result.getMonth() !== month) {
+            throw new Error(`Invalid date "${day}" for month index "${month}".`);
+        }
+        return result;
+    }
     clampDate(date, min, max) {
         if (min && this.compareDate(date, min) < 0) {
             return min;
@@ -278,6 +305,11 @@ class NativeDateAdapter extends DateAdapter {
             monthYearShort: { year: 'numeric', month: 'short' },
             dayMonth: { day: 'numeric', month: 'long' },
             dayMonthYear: { day: 'numeric', month: 'long', year: 'numeric' },
+            time: { hour: 'numeric', minute: '2-digit' },
+            timeWithSeconds: { hour: 'numeric', minute: '2-digit', second: '2-digit' },
+            dateTimeShort: { dateStyle: 'short', timeStyle: 'short' },
+            dateTimeMedium: { dateStyle: 'medium', timeStyle: 'short' },
+            dateTimeLong: { dateStyle: 'long', timeStyle: 'medium' },
         };
         return formatMap[format] ?? { dateStyle: 'medium' };
     }
@@ -308,10 +340,9 @@ const calendarCellVariants = cva(
     'select-none',
     'transition-colors',
     'duration-150',
-    'outline-none',
-    'focus-visible:ring-2',
-    'focus-visible:ring-offset-2',
-    'focus-visible:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
 ], {
     variants: {
         view: {
@@ -451,11 +482,10 @@ const calendarHeaderButtonVariants = cva([
     'select-none',
     'transition-colors',
     'duration-150',
-    'outline-none',
     'text-foreground',
-    'focus-visible:ring-2',
-    'focus-visible:ring-offset-2',
-    'focus-visible:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'disabled:cursor-not-allowed',
     'disabled:text-disabled-foreground',
 ], {
@@ -3086,14 +3116,12 @@ const datepickerTriggerVariants = cva([
     'border',
     'bg-input-background',
     'text-input-foreground',
-    'ring-offset-background',
     'transition-colors',
     'duration-150',
     'placeholder:text-input-placeholder',
-    'focus-within:outline-none',
-    'focus-within:ring-2',
-    'focus-within:ring-offset-2',
-    'focus-within:ring-ring',
+    'focus-within:outline-[1px]',
+    'focus-within:outline-offset-2',
+    'focus-within:outline-ring',
     'cursor-pointer',
 ], {
     variants: {
@@ -3127,15 +3155,15 @@ const datepickerTriggerVariants = cva([
             default: [],
             error: [
                 'border-warn',
-                'focus-within:ring-warn',
+                'focus-within:outline-warn',
             ],
             success: [
                 'border-success',
-                'focus-within:ring-success',
+                'focus-within:outline-success',
             ],
         },
         open: {
-            true: ['ring-2', 'ring-ring', 'border-primary'],
+            true: ['outline-[1px]', 'outline-ring', 'border-primary'],
             false: [],
         },
     },
@@ -3208,9 +3236,9 @@ const datepickerIconVariants = cva([
     'text-muted-foreground',
     'transition-colors',
     'hover:text-foreground',
-    'focus:outline-none',
-    'focus:ring-1',
-    'focus:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'rounded-interactive-sm',
 ], {
     variants: {
@@ -3237,9 +3265,9 @@ const datepickerClearVariants = cva([
     'text-muted-foreground',
     'transition-colors',
     'hover:text-foreground',
-    'focus:outline-none',
-    'focus:ring-1',
-    'focus:ring-ring',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
     'shrink-0',
 ], {
     variants: {
@@ -3318,10 +3346,9 @@ const datepickerFooterButtonVariants = cva([
     'rounded-control-sm',
     'font-medium',
     'transition-colors',
-    'focus:outline-none',
-    'focus:ring-2',
-    'focus:ring-ring',
-    'focus:ring-offset-2',
+    'focus-visible:outline-[1px]',
+    'focus-visible:outline-offset-2',
+    'focus-visible:outline-ring',
 ], {
     variants: {
         size: {
@@ -3371,6 +3398,943 @@ const datepickerRangeSeparatorVariants = cva([
     },
 });
 
+/**
+ * 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-150',
+], {
+    variants: {
+        variant: {
+            standalone: [
+                'border',
+                'border-input-border',
+                'bg-input-background',
+                'text-input-foreground',
+                'focus-within:outline-[1px]',
+                'focus-within:outline-offset-2',
+                'focus-within:outline-ring',
+            ],
+            embedded: [
+                'border-transparent',
+                'bg-transparent',
+                'text-foreground',
+            ],
+        },
+        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: [],
+        },
+    ],
+    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:bg-primary-subtle',
+    'focus:text-primary-subtle-foreground',
+    'focus: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',
+    'bg-muted',
+    'text-muted-foreground',
+    'hover:bg-muted-hover',
+    'focus-visible:outline-[1px]',
+    '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',
+    },
+});
+
+/**
+ * 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++}`;
+}
+
+/**
+ * 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 });
+    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 = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    /** Whether the time picker is disabled. */
+    disabled = input(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" }] : []));
+    // ============ 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" }] : []));
+    // ============ 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.state(),
+        });
+        const disabled = this.disabled() ? timepickerDisabledVariants() : '';
+        return joinClasses(base, disabled, 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) {
+        // Disabled state is handled via the disabled input
+    }
+    // ============ 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();
+    }
+    onSegmentInput(event, segment) {
+        // Prevent default browser input handling — we manage value via keydown
+        const input = event.target;
+        const value = this.internalValue();
+        // 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 });
+    }
+    // ============ 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.internalValue.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 } }, outputs: { 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" }, 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.aria-label]="'Hours'"
+        [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.aria-label]="'Hours'"
+        [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>
+  `, 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 }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], 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 }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }] } });
+
 /** Default position for the datepicker panel. */
 const DEFAULT_POSITIONS$1 = [
     // Below trigger, aligned start
@@ -3472,6 +4436,14 @@ class ComDatepicker {
     ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
     /** ID of element describing the input. */
     ariaDescribedBy = input(null, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
+    /** Whether to show the time picker below the calendar. */
+    showTimePicker = input(false, ...(ngDevMode ? [{ debugName: "showTimePicker" }] : []));
+    /** 12h vs 24h format for the time picker. `null` = auto-detect. */
+    use12HourFormat = input(null, ...(ngDevMode ? [{ debugName: "use12HourFormat" }] : []));
+    /** Whether the time picker shows seconds. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    /** Step interval for minutes in the time picker. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
     // ============ OUTPUTS ============
     /** Emitted when a date is selected. */
     dateChange = output();
@@ -3509,7 +4481,7 @@ class ComDatepicker {
         const value = this.internalValue();
         if (!value)
             return '';
-        return this.dateAdapter.format(value, this.dateFormat());
+        return this.dateAdapter.format(value, this.effectiveDateFormat());
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     /** Computed trigger classes. */
     triggerClasses = computed(() => {
@@ -3551,6 +4523,28 @@ class ComDatepicker {
     clearButtonClasses = computed(() => {
         return datepickerFooterButtonVariants({ size: this.size(), variant: 'secondary' });
     }, ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : []));
+    /** Time section divider classes. */
+    timeSectionClasses = computed(() => {
+        return timepickerSectionVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "timeSectionClasses" }] : []));
+    /** Time value derived from the current date value. */
+    timeValue = computed(() => {
+        const date = this.internalValue();
+        if (!date)
+            return null;
+        return createTimeValue(this.dateAdapter.getHours(date), this.dateAdapter.getMinutes(date), this.dateAdapter.getSeconds(date));
+    }, ...(ngDevMode ? [{ debugName: "timeValue" }] : []));
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    effectiveDateFormat = computed(() => {
+        if (this.showTimePicker()) {
+            return this.showSeconds() ? 'dateTimeLong' : 'dateTimeMedium';
+        }
+        return this.dateFormat();
+    }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    effectiveKeepOpen = computed(() => {
+        return this.keepOpen() || this.showTimePicker();
+    }, ...(ngDevMode ? [{ debugName: "effectiveKeepOpen" }] : []));
     // ============ CVA CALLBACKS ============
     onChange = () => { };
     onTouched = () => { };
@@ -3663,7 +4657,7 @@ class ComDatepicker {
     selectToday() {
         const today = this.dateAdapter.today();
         this.updateValue(today);
-        if (!this.keepOpen()) {
+        if (!this.effectiveKeepOpen()) {
             this.close();
         }
     }
@@ -3737,12 +4731,32 @@ class ComDatepicker {
         }
     }
     onDateSelected(date) {
-        this.updateValue(date);
-        if (!this.keepOpen()) {
+        // Preserve time when selecting a new date if time picker is shown
+        if (this.showTimePicker()) {
+            const currentValue = this.internalValue();
+            if (currentValue) {
+                const withTime = this.dateAdapter.setTime(date, this.dateAdapter.getHours(currentValue), this.dateAdapter.getMinutes(currentValue), this.dateAdapter.getSeconds(currentValue));
+                this.updateValue(withTime);
+            }
+            else {
+                this.updateValue(date);
+            }
+        }
+        else {
+            this.updateValue(date);
+        }
+        if (!this.effectiveKeepOpen()) {
             this.close();
         }
         this.announce(`Selected ${this.dateAdapter.format(date, 'long')}`);
     }
+    onTimeChange(time) {
+        if (!time)
+            return;
+        const current = this.internalValue() ?? this.dateAdapter.today();
+        const updated = this.dateAdapter.setTime(current, time.hours, time.minutes, time.seconds);
+        this.updateValue(updated);
+    }
     onActiveDateChange(date) {
         this.calendarActiveDate.set(date);
     }
@@ -3798,7 +4812,7 @@ class ComDatepicker {
             }
             return;
         }
-        const parsed = this.dateAdapter.parse(inputValue, this.dateFormat());
+        const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
         if (parsed && this.dateAdapter.isValid(parsed)) {
             // Validate against min/max/filter
             if (this.isDateValid(parsed)) {
@@ -3833,7 +4847,7 @@ class ComDatepicker {
         this.liveAnnouncement.set(message);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDatepicker, isStandalone: true, selector: "com-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-datepicker-disabled": "disabled()", "class.com-datepicker-open": "isOpen()" }, classAttribute: "com-datepicker-host inline-block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDatepicker, isStandalone: true, selector: "com-datepicker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", 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 }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", 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 } }, outputs: { dateChange: "dateChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-datepicker-disabled": "disabled()", "class.com-datepicker-open": "isOpen()" }, classAttribute: "com-datepicker-host inline-block" }, providers: [
             SingleSelectionStrategy,
             { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
         ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDatepicker"], ngImport: i0, template: `
@@ -3916,7 +4930,22 @@ class ComDatepicker {
           (activeDateChange)="onActiveDateChange($event)"
         />
 
-        @if (showTodayButton() || showFooterClearButton()) {
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <com-time-picker
+              variant="embedded"
+              [size]="size()"
+              [value]="timeValue()"
+              [use12HourFormat]="use12HourFormat()"
+              [showSeconds]="showSeconds()"
+              [minuteStep]="minuteStep()"
+              [disabled]="disabled()"
+              (timeChange)="onTimeChange($event)"
+            />
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -3936,6 +4965,15 @@ class ComDatepicker {
                 Clear
               </button>
             }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
           </div>
         }
       </div>
@@ -3945,7 +4983,7 @@ class ComDatepicker {
     <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"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: ComTimePicker, selector: "com-time-picker", inputs: ["value", "disabled", "required", "showSeconds", "use12HourFormat", "minuteStep", "secondStep", "minTime", "maxTime", "variant", "size", "state", "ariaLabel", "class", "placeholder"], outputs: ["timeChange"], exportAs: ["comTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDatepicker, decorators: [{
             type: Component,
@@ -4029,7 +5067,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           (activeDateChange)="onActiveDateChange($event)"
         />
 
-        @if (showTodayButton() || showFooterClearButton()) {
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <com-time-picker
+              variant="embedded"
+              [size]="size()"
+              [value]="timeValue()"
+              [use12HourFormat]="use12HourFormat()"
+              [showSeconds]="showSeconds()"
+              [minuteStep]="minuteStep()"
+              [disabled]="disabled()"
+              (timeChange)="onTimeChange($event)"
+            />
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -4049,6 +5102,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 Clear
               </button>
             }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
           </div>
         }
       </div>
@@ -4063,6 +5125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         A11yModule,
                         ComCalendar,
                         ComIcon,
+                        ComTimePicker,
                     ], providers: [
                         SingleSelectionStrategy,
                         { provide: CALENDAR_SELECTION_STRATEGY, useExisting: SingleSelectionStrategy },
@@ -4071,7 +5134,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[class.com-datepicker-disabled]': 'disabled()',
                         '[class.com-datepicker-open]': 'isOpen()',
                     }, 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: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", 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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", 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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /** Default position for the datepicker panel. */
 const DEFAULT_POSITIONS = [
@@ -4179,6 +5242,14 @@ class ComDateRangePicker {
     startAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "startAriaLabel" }] : []));
     /** Accessible label for the end input. */
     endAriaLabel = input(null, ...(ngDevMode ? [{ debugName: "endAriaLabel" }] : []));
+    /** Whether to show time pickers below the calendar. */
+    showTimePicker = input(false, ...(ngDevMode ? [{ debugName: "showTimePicker" }] : []));
+    /** 12h vs 24h format for the time pickers. `null` = auto-detect. */
+    use12HourFormat = input(null, ...(ngDevMode ? [{ debugName: "use12HourFormat" }] : []));
+    /** Whether the time pickers show seconds. */
+    showSeconds = input(false, ...(ngDevMode ? [{ debugName: "showSeconds" }] : []));
+    /** Step interval for minutes in the time pickers. */
+    minuteStep = input(1, ...(ngDevMode ? [{ debugName: "minuteStep" }] : []));
     // ============ OUTPUTS ============
     /** Emitted when a complete range is selected. */
     rangeChange = output();
@@ -4230,14 +5301,14 @@ class ComDateRangePicker {
         const value = this.internalValue();
         if (!value?.start)
             return '';
-        return this.dateAdapter.format(value.start, this.dateFormat());
+        return this.dateAdapter.format(value.start, this.effectiveDateFormat());
     }, ...(ngDevMode ? [{ debugName: "startDisplayValue" }] : []));
     /** Formatted end display value. */
     endDisplayValue = computed(() => {
         const value = this.internalValue();
         if (!value?.end)
             return '';
-        return this.dateAdapter.format(value.end, this.dateFormat());
+        return this.dateAdapter.format(value.end, this.effectiveDateFormat());
     }, ...(ngDevMode ? [{ debugName: "endDisplayValue" }] : []));
     /** Computed trigger classes. */
     triggerClasses = computed(() => {
@@ -4283,6 +5354,39 @@ class ComDateRangePicker {
     clearButtonClasses = computed(() => {
         return datepickerFooterButtonVariants({ size: this.size(), variant: 'secondary' });
     }, ...(ngDevMode ? [{ debugName: "clearButtonClasses" }] : []));
+    /** Time section divider classes. */
+    timeSectionClasses = computed(() => {
+        return timepickerSectionVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "timeSectionClasses" }] : []));
+    /** Time label classes. */
+    timeLabelClasses = computed(() => {
+        return timepickerLabelVariants({ size: this.size() });
+    }, ...(ngDevMode ? [{ debugName: "timeLabelClasses" }] : []));
+    /** Start time value derived from the start date. */
+    startTimeValue = computed(() => {
+        const value = this.internalValue();
+        if (!value?.start)
+            return null;
+        return createTimeValue(this.dateAdapter.getHours(value.start), this.dateAdapter.getMinutes(value.start), this.dateAdapter.getSeconds(value.start));
+    }, ...(ngDevMode ? [{ debugName: "startTimeValue" }] : []));
+    /** End time value derived from the end date. */
+    endTimeValue = computed(() => {
+        const value = this.internalValue();
+        if (!value?.end)
+            return null;
+        return createTimeValue(this.dateAdapter.getHours(value.end), this.dateAdapter.getMinutes(value.end), this.dateAdapter.getSeconds(value.end));
+    }, ...(ngDevMode ? [{ debugName: "endTimeValue" }] : []));
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    effectiveDateFormat = computed(() => {
+        if (this.showTimePicker()) {
+            return this.showSeconds() ? 'dateTimeLong' : 'dateTimeMedium';
+        }
+        return this.dateFormat();
+    }, ...(ngDevMode ? [{ debugName: "effectiveDateFormat" }] : []));
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    effectiveKeepOpen = computed(() => {
+        return this.keepOpen() || this.showTimePicker();
+    }, ...(ngDevMode ? [{ debugName: "effectiveKeepOpen" }] : []));
     // ============ CVA CALLBACKS ============
     onChange = () => { };
     onTouched = () => { };
@@ -4420,7 +5524,7 @@ class ComDateRangePicker {
                 ? createDateRangeValue(today, currentValue.start)
                 : createDateRangeValue(currentValue.start, today);
             this.updateValue(newRange);
-            if (!this.keepOpen()) {
+            if (!this.effectiveKeepOpen()) {
                 this.close();
             }
         }
@@ -4516,7 +5620,7 @@ class ComDateRangePicker {
             if (range.start && range.end) {
                 // Complete range selected
                 this.announce(`Range selected: ${this.formatDate(range.start)} to ${this.formatDate(range.end)}`);
-                if (!this.keepOpen()) {
+                if (!this.effectiveKeepOpen()) {
                     this.close();
                 }
             }
@@ -4528,6 +5632,22 @@ class ComDateRangePicker {
     onActiveDateChange(date) {
         this.calendarActiveDate.set(date);
     }
+    onStartTimeChange(time) {
+        if (!time)
+            return;
+        const value = this.internalValue();
+        const startDate = value?.start ?? this.dateAdapter.today();
+        const updated = this.dateAdapter.setTime(startDate, time.hours, time.minutes, time.seconds);
+        this.updateValue(createDateRangeValue(updated, value?.end ?? null));
+    }
+    onEndTimeChange(time) {
+        if (!time)
+            return;
+        const value = this.internalValue();
+        const endDate = value?.end ?? this.dateAdapter.today();
+        const updated = this.dateAdapter.setTime(endDate, time.hours, time.minutes, time.seconds);
+        this.updateValue(createDateRangeValue(value?.start ?? null, updated));
+    }
     // ============ PRIVATE METHODS ============
     createOverlay() {
         if (this.overlayRef) {
@@ -4581,7 +5701,7 @@ class ComDateRangePicker {
             }
             return;
         }
-        const parsed = this.dateAdapter.parse(inputValue, this.dateFormat());
+        const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
         if (parsed && this.dateAdapter.isValid(parsed) && this.isDateValid(parsed)) {
             // Ensure start <= end
             if (currentValue?.end && this.dateAdapter.compareDate(parsed, currentValue.end) > 0) {
@@ -4606,7 +5726,7 @@ class ComDateRangePicker {
             }
             return;
         }
-        const parsed = this.dateAdapter.parse(inputValue, this.dateFormat());
+        const parsed = this.dateAdapter.parse(inputValue, this.effectiveDateFormat());
         if (parsed && this.dateAdapter.isValid(parsed) && this.isDateValid(parsed)) {
             // Ensure start <= end
             if (currentValue?.start && this.dateAdapter.compareDate(parsed, currentValue.start) < 0) {
@@ -4644,7 +5764,7 @@ class ComDateRangePicker {
         this.liveAnnouncement.set(message);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDateRangePicker, isStandalone: true, selector: "com-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", 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 }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-date-range-picker-disabled": "disabled()", "class.com-date-range-picker-open": "isOpen()" }, classAttribute: "com-date-range-picker-host inline-block" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: ComDateRangePicker, isStandalone: true, selector: "com-date-range-picker", inputs: { value: { classPropertyName: "value", publicName: "value", 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 }, dateFilter: { classPropertyName: "dateFilter", publicName: "dateFilter", isSignal: true, isRequired: false, transformFunction: null }, startAt: { classPropertyName: "startAt", publicName: "startAt", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, startPlaceholder: { classPropertyName: "startPlaceholder", publicName: "startPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, endPlaceholder: { classPropertyName: "endPlaceholder", publicName: "endPlaceholder", 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 }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, showClearButton: { classPropertyName: "showClearButton", publicName: "showClearButton", isSignal: true, isRequired: false, transformFunction: null }, showTodayButton: { classPropertyName: "showTodayButton", publicName: "showTodayButton", isSignal: true, isRequired: false, transformFunction: null }, showFooterClearButton: { classPropertyName: "showFooterClearButton", publicName: "showFooterClearButton", isSignal: true, isRequired: false, transformFunction: null }, keepOpen: { classPropertyName: "keepOpen", publicName: "keepOpen", isSignal: true, isRequired: false, transformFunction: null }, allowManualInput: { classPropertyName: "allowManualInput", publicName: "allowManualInput", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", 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 }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, startAriaLabel: { classPropertyName: "startAriaLabel", publicName: "startAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, endAriaLabel: { classPropertyName: "endAriaLabel", publicName: "endAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, showTimePicker: { classPropertyName: "showTimePicker", publicName: "showTimePicker", isSignal: true, isRequired: false, transformFunction: null }, use12HourFormat: { classPropertyName: "use12HourFormat", publicName: "use12HourFormat", 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 } }, outputs: { rangeChange: "rangeChange", opened: "opened", closed: "closed" }, host: { properties: { "class.com-date-range-picker-disabled": "disabled()", "class.com-date-range-picker-open": "isOpen()" }, classAttribute: "com-date-range-picker-host inline-block" }, providers: [
             RangeSelectionStrategy,
             { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
         ], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerElement"], descendants: true, isSignal: true }, { propertyName: "startInputRef", first: true, predicate: ["startInputElement"], descendants: true, isSignal: true }, { propertyName: "endInputRef", first: true, predicate: ["endInputElement"], descendants: true, isSignal: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true, isSignal: true }], exportAs: ["comDateRangePicker"], ngImport: i0, template: `
@@ -4751,7 +5871,45 @@ class ComDateRangePicker {
           (activeDateChange)="onActiveDateChange($event)"
         />
 
-        @if (showTodayButton() || showFooterClearButton()) {
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <div class="flex items-center gap-3">
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">Start time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="startTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="Start time"
+                  (timeChange)="onStartTimeChange($event)"
+                />
+              </div>
+              <span class="text-muted-foreground mt-5">
+                <com-icon name="arrow-right" [size]="iconSize()" />
+              </span>
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">End time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="endTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="End time"
+                  (timeChange)="onEndTimeChange($event)"
+                />
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -4771,6 +5929,15 @@ class ComDateRangePicker {
                 Clear
               </button>
             }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
           </div>
         }
       </div>
@@ -4780,7 +5947,7 @@ class ComDateRangePicker {
     <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"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, 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"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ComCalendar, selector: "com-calendar", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "bordered", "startView", "firstDayOfWeek", "monthColumns", "cellTemplate"], outputs: ["selectedChange", "viewChanged", "activeDateChange"] }, { kind: "component", type: ComIcon, selector: "com-icon", inputs: ["name", "img", "color", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "component", type: ComTimePicker, selector: "com-time-picker", inputs: ["value", "disabled", "required", "showSeconds", "use12HourFormat", "minuteStep", "secondStep", "minTime", "maxTime", "variant", "size", "state", "ariaLabel", "class", "placeholder"], outputs: ["timeChange"], exportAs: ["comTimePicker"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: ComDateRangePicker, decorators: [{
             type: Component,
@@ -4888,7 +6055,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
           (activeDateChange)="onActiveDateChange($event)"
         />
 
-        @if (showTodayButton() || showFooterClearButton()) {
+        @if (showTimePicker()) {
+          <div [class]="timeSectionClasses()">
+            <div class="flex items-center gap-3">
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">Start time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="startTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="Start time"
+                  (timeChange)="onStartTimeChange($event)"
+                />
+              </div>
+              <span class="text-muted-foreground mt-5">
+                <com-icon name="arrow-right" [size]="iconSize()" />
+              </span>
+              <div class="flex flex-col gap-1">
+                <span [class]="timeLabelClasses()">End time</span>
+                <com-time-picker
+                  variant="embedded"
+                  [size]="size()"
+                  [value]="endTimeValue()"
+                  [use12HourFormat]="use12HourFormat()"
+                  [showSeconds]="showSeconds()"
+                  [minuteStep]="minuteStep()"
+                  [disabled]="disabled()"
+                  ariaLabel="End time"
+                  (timeChange)="onEndTimeChange($event)"
+                />
+              </div>
+            </div>
+          </div>
+        }
+
+        @if (showTodayButton() || showFooterClearButton() || showTimePicker()) {
           <div [class]="footerClasses()">
             @if (showTodayButton()) {
               <button
@@ -4908,6 +6113,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                 Clear
               </button>
             }
+            @if (showTimePicker()) {
+              <button
+                type="button"
+                [class]="todayButtonClasses()"
+                (click)="close()"
+              >
+                Done
+              </button>
+            }
           </div>
         }
       </div>
@@ -4922,6 +6136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         A11yModule,
                         ComCalendar,
                         ComIcon,
+                        ComTimePicker,
                     ], providers: [
                         RangeSelectionStrategy,
                         { provide: CALENDAR_SELECTION_STRATEGY, useExisting: RangeSelectionStrategy },
@@ -4930,12 +6145,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
                         '[class.com-date-range-picker-disabled]': 'disabled()',
                         '[class.com-date-range-picker-open]': 'isOpen()',
                     }, 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: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", 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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+        }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerElement', { isSignal: true }] }], startInputRef: [{ type: i0.ViewChild, args: ['startInputElement', { isSignal: true }] }], endInputRef: [{ type: i0.ViewChild, args: ['endInputElement', { isSignal: true }] }], panelTemplateRef: [{ type: i0.ViewChild, args: ['panelTemplate', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], dateFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFilter", required: false }] }], startAt: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAt", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }], firstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstDayOfWeek", required: false }] }], startPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "startPlaceholder", required: false }] }], endPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "endPlaceholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], showClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearButton", required: false }] }], showTodayButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTodayButton", required: false }] }], showFooterClearButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooterClearButton", required: false }] }], keepOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpen", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", 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 }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], startAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "startAriaLabel", required: false }] }], endAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "endAriaLabel", required: false }] }], showTimePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimePicker", required: false }] }], use12HourFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "use12HourFormat", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * Datepicker components public API.
  */
 
+/**
+ * TimePicker component public API.
+ */
+
 /**
  * ngx-com/components/calendar
  * Calendar component public API
@@ -4945,5 +6164,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CALENDAR_SELECTION_STRATEGY, CalendarSelectionStrategy, CalendarViewBase, ComCalendar, ComCalendarCell, ComCalendarHeader, ComCalendarMonthView, ComCalendarMultiYearView, ComCalendarYearView, ComDateRangePicker, ComDatepicker, DATE_ADAPTER, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, calendarCellVariants, calendarCellWrapperVariants, calendarHeaderButtonVariants, calendarHeaderVariants, calendarVariants, createCalendarCell, createDateRange, createDateRangeValue, createGrid, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId, getMultiYearStartingYear, getWeekdayHeaders, isDateDisabled, isMonthDisabled, isYearDisabled, navigateGrid, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideWeekSelectionStrategy };
+export { CALENDAR_SELECTION_STRATEGY, CalendarSelectionStrategy, CalendarViewBase, ComCalendar, ComCalendarCell, ComCalendarHeader, ComCalendarMonthView, ComCalendarMultiYearView, ComCalendarYearView, ComDateRangePicker, ComDatepicker, ComTimePicker, DATE_ADAPTER, DAYS_PER_WEEK, DateAdapter, MONTHS_PER_ROW, MultiSelectionStrategy, NativeDateAdapter, RangeSelectionStrategy, SingleSelectionStrategy, WEEKS_PER_MONTH, WeekSelectionStrategy, YEARS_PER_PAGE, YEARS_PER_ROW, calendarCellVariants, calendarCellWrapperVariants, calendarHeaderButtonVariants, calendarHeaderVariants, calendarVariants, compareTime, createCalendarCell, createDateRange, createDateRangeValue, createGrid, createTimeValue, datepickerClearVariants, datepickerDisabledVariants, datepickerFooterButtonVariants, datepickerFooterVariants, datepickerIconVariants, datepickerInputVariants, datepickerPanelVariants, datepickerRangeSeparatorVariants, datepickerTriggerVariants, generateDatepickerId, generateTimePickerId, getMultiYearStartingYear, getWeekdayHeaders, isDateDisabled, isMonthDisabled, isYearDisabled, navigateGrid, provideMultiSelectionStrategy, provideNativeDateAdapter, provideRangeSelectionStrategy, provideSingleSelectionStrategy, provideWeekSelectionStrategy, timepickerContainerVariants, timepickerDisabledVariants, timepickerLabelVariants, timepickerPeriodVariants, timepickerSectionVariants, timepickerSegmentVariants, timepickerSeparatorVariants };
 //# sourceMappingURL=ngx-com-components-calendar.mjs.map