ngx-com 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-com",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "repository": {
     "type": "git",
     "url": "https://github.com/avs2001/ngx-com"

package/types/ngx-com-components-calendar.d.ts

@@ -138,6 +138,16 @@ declare abstract class DateAdapter<D> {
      * Checks whether the given date is within the specified range
      */
     isDateInRange(date: D, start: D | null, end: D | null): boolean;
+    /** Gets the hour component of the given date (0-23) */
+    abstract getHours(date: D): number;
+    /** Gets the minute component of the given date (0-59) */
+    abstract getMinutes(date: D): number;
+    /** Gets the second component of the given date (0-59) */
+    abstract getSeconds(date: D): number;
+    /** Returns a new date with the given hour, minute, second set */
+    abstract setTime(date: D, hours: number, minutes: number, seconds: number): D;
+    /** Creates a date with the given year, month (0-indexed), day, hours, minutes, seconds */
+    abstract createDateTime(year: number, month: number, day: number, hours: number, minutes: number, seconds: number): D;
     /**
      * Gets a unique identifier for the date (useful for trackBy)
      */
@@ -177,6 +187,11 @@ declare class NativeDateAdapter extends DateAdapter<Date> {
     isValid(date: Date): boolean;
     isSameDay(first: Date, second: Date): boolean;
     compareDate(first: Date, second: Date): number;
+    getHours(date: Date): number;
+    getMinutes(date: Date): number;
+    getSeconds(date: Date): number;
+    setTime(date: Date, hours: number, minutes: number, seconds: number): Date;
+    createDateTime(year: number, month: number, day: number, hours: number, minutes: number, seconds: number): Date;
     clampDate(date: Date, min: Date | null, max: Date | null): Date;
     /**
      * Strips the time component from a date, returning midnight
@@ -1189,7 +1204,7 @@ declare function provideWeekSelectionStrategy(): Provider;
  * Types and interfaces for DatePicker and DateRangePicker components.
  */
 /** Date format preset names */
-type DateFormatPreset = 'short' | 'medium' | 'long' | 'full';
+type DateFormatPreset = 'short' | 'medium' | 'long' | 'full' | 'time' | 'timeWithSeconds' | 'dateTimeShort' | 'dateTimeMedium' | 'dateTimeLong';
 /** Panel width configuration */
 type DatepickerPanelWidth = 'auto' | 'trigger' | `${number}px` | `${number}rem`;
 /** Size variants for datepicker components */
@@ -1309,6 +1324,37 @@ declare const datepickerRangeSeparatorVariants: (props?: {
 }) => string;
 type DatepickerRangeSeparatorVariants = VariantProps<typeof datepickerRangeSeparatorVariants>;
 
+/**
+ * Types and interfaces for the TimePicker component.
+ */
+/** Value type for the standalone time picker */
+interface ComTimeValue {
+    /** Hours (0-23, always stored in 24h format internally) */
+    hours: number;
+    /** Minutes (0-59) */
+    minutes: number;
+    /** Seconds (0-59) */
+    seconds: number;
+}
+/** Creates a ComTimeValue */
+declare function createTimeValue(hours?: number, minutes?: number, seconds?: number): ComTimeValue;
+/**
+ * Compares two ComTimeValue objects.
+ * @returns negative if a < b, 0 if equal, positive if a > b
+ */
+declare function compareTime(a: ComTimeValue, b: ComTimeValue): number;
+declare function generateTimePickerId(): string;
+/** Size variants for time picker */
+type TimePickerSize = 'sm' | 'default' | 'lg';
+/** Visual variant */
+type TimePickerVariant = 'standalone' | 'embedded';
+/** Validation state */
+type TimePickerState = 'default' | 'error' | 'success';
+/** Period for 12-hour format */
+type TimePeriod = 'AM' | 'PM';
+/** Segment type */
+type TimeSegment = 'hours' | 'minutes' | 'seconds';
+
 /**
  * Single date picker component with calendar popup.
  * Implements ControlValueAccessor for Reactive Forms and Template-driven Forms.
@@ -1398,6 +1444,14 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     readonly ariaLabel: InputSignal<string | null>;
     /** ID of element describing the input. */
     readonly ariaDescribedBy: InputSignal<string | null>;
+    /** Whether to show the time picker below the calendar. */
+    readonly showTimePicker: InputSignal<boolean>;
+    /** 12h vs 24h format for the time picker. `null` = auto-detect. */
+    readonly use12HourFormat: InputSignal<boolean | null>;
+    /** Whether the time picker shows seconds. */
+    readonly showSeconds: InputSignal<boolean>;
+    /** Step interval for minutes in the time picker. */
+    readonly minuteStep: InputSignal<number>;
     /** Emitted when a date is selected. */
     readonly dateChange: OutputEmitterRef<D | null>;
     /** Emitted when the panel opens. */
@@ -1438,6 +1492,14 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     readonly todayButtonClasses: Signal<string>;
     /** Computed clear button classes (footer). */
     readonly clearButtonClasses: Signal<string>;
+    /** Time section divider classes. */
+    readonly timeSectionClasses: Signal<string>;
+    /** Time value derived from the current date value. */
+    readonly timeValue: Signal<ComTimeValue | null>;
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    readonly effectiveDateFormat: Signal<DateFormatPreset>;
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    readonly effectiveKeepOpen: Signal<boolean>;
     private onChange;
     private onTouched;
     private onValidatorChange;
@@ -1466,6 +1528,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     protected onInputBlur(): void;
     protected onPanelKeydown(event: KeyboardEvent): void;
     protected onDateSelected(date: D): void;
+    protected onTimeChange(time: ComTimeValue | null): void;
     protected onActiveDateChange(date: D): void;
     private createOverlay;
     private destroyOverlay;
@@ -1474,7 +1537,7 @@ declare class ComDatepicker<D> implements ControlValueAccessor, Validator, OnDes
     private isDateValid;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDatepicker<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDatepicker<any>, "com-datepicker", ["comDatepicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
 }
 
 /**
@@ -1571,6 +1634,14 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     readonly startAriaLabel: InputSignal<string | null>;
     /** Accessible label for the end input. */
     readonly endAriaLabel: InputSignal<string | null>;
+    /** Whether to show time pickers below the calendar. */
+    readonly showTimePicker: InputSignal<boolean>;
+    /** 12h vs 24h format for the time pickers. `null` = auto-detect. */
+    readonly use12HourFormat: InputSignal<boolean | null>;
+    /** Whether the time pickers show seconds. */
+    readonly showSeconds: InputSignal<boolean>;
+    /** Step interval for minutes in the time pickers. */
+    readonly minuteStep: InputSignal<number>;
     /** Emitted when a complete range is selected. */
     readonly rangeChange: OutputEmitterRef<DateRangeValue<D> | null>;
     /** Emitted when the panel opens. */
@@ -1621,6 +1692,18 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     readonly todayButtonClasses: Signal<string>;
     /** Computed clear button classes (footer). */
     readonly clearButtonClasses: Signal<string>;
+    /** Time section divider classes. */
+    readonly timeSectionClasses: Signal<string>;
+    /** Time label classes. */
+    readonly timeLabelClasses: Signal<string>;
+    /** Start time value derived from the start date. */
+    readonly startTimeValue: Signal<ComTimeValue | null>;
+    /** End time value derived from the end date. */
+    readonly endTimeValue: Signal<ComTimeValue | null>;
+    /** Effective display format — switches to dateTime when time picker is shown. */
+    readonly effectiveDateFormat: Signal<DateFormatPreset>;
+    /** Whether the panel should stay open (keepOpen or time picker shown). */
+    readonly effectiveKeepOpen: Signal<boolean>;
     private onChange;
     private onTouched;
     private onValidatorChange;
@@ -1654,6 +1737,8 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     protected onPanelKeydown(event: KeyboardEvent): void;
     protected onCalendarSelectionChange(selection: unknown): void;
     protected onActiveDateChange(date: D): void;
+    protected onStartTimeChange(time: ComTimeValue | null): void;
+    protected onEndTimeChange(time: ComTimeValue | null): void;
     private createOverlay;
     private destroyOverlay;
     private updateValue;
@@ -1663,8 +1748,199 @@ declare class ComDateRangePicker<D> implements ControlValueAccessor, Validator,
     private formatDate;
     private announce;
     static ɵfac: i0.ɵɵFactoryDeclaration<ComDateRangePicker<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComDateRangePicker<any>, "com-date-range-picker", ["comDateRangePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "dateFilter": { "alias": "dateFilter"; "required": false; "isSignal": true; }; "startAt": { "alias": "startAt"; "required": false; "isSignal": true; }; "startView": { "alias": "startView"; "required": false; "isSignal": true; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; "isSignal": true; }; "startPlaceholder": { "alias": "startPlaceholder"; "required": false; "isSignal": true; }; "endPlaceholder": { "alias": "endPlaceholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; "isSignal": true; }; "showFooterClearButton": { "alias": "showFooterClearButton"; "required": false; "isSignal": true; }; "keepOpen": { "alias": "keepOpen"; "required": false; "isSignal": true; }; "allowManualInput": { "alias": "allowManualInput"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "startAriaLabel": { "alias": "startAriaLabel"; "required": false; "isSignal": true; }; "endAriaLabel": { "alias": "endAriaLabel"; "required": false; "isSignal": true; }; "showTimePicker": { "alias": "showTimePicker"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * 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`
+ */
+declare const timepickerContainerVariants: (props?: {
+    variant?: TimePickerVariant;
+    size?: TimePickerSize;
+    state?: TimePickerState;
+}) => string;
+type TimepickerContainerVariants = VariantProps<typeof timepickerContainerVariants>;
+/**
+ * CVA variants for the disabled state of time picker.
+ *
+ * @tokens `--color-disabled`, `--color-disabled-foreground`
+ */
+declare const timepickerDisabledVariants: () => string;
+type TimepickerDisabledVariants = VariantProps<typeof timepickerDisabledVariants>;
+/**
+ * CVA variants for each time segment input.
+ *
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--radius-interactive-sm`
+ */
+declare const timepickerSegmentVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerSegmentVariants = VariantProps<typeof timepickerSegmentVariants>;
+/**
+ * CVA variants for the colon separator.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const timepickerSeparatorVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerSeparatorVariants = VariantProps<typeof timepickerSeparatorVariants>;
+/**
+ * CVA variants for the AM/PM toggle button.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`, `--color-ring`,
+ *         `--radius-control-sm`
+ */
+declare const timepickerPeriodVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerPeriodVariants = VariantProps<typeof timepickerPeriodVariants>;
+/**
+ * CVA variants for the time section divider in datepicker panel.
+ *
+ * @tokens `--color-border-subtle`
+ */
+declare const timepickerSectionVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerSectionVariants = VariantProps<typeof timepickerSectionVariants>;
+/**
+ * CVA variants for time labels in date range picker.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const timepickerLabelVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerLabelVariants = VariantProps<typeof timepickerLabelVariants>;
+
+/**
+ * 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)" />
+ * ```
+ */
+declare class ComTimePicker implements ControlValueAccessor, Validator {
+    private readonly localeId;
+    private readonly ngControl;
+    private readonly timepickerId;
+    private readonly hoursInputRef;
+    private readonly minutesInputRef;
+    private readonly secondsInputRef;
+    private readonly periodButtonRef;
+    /** Current time value. */
+    readonly value: InputSignal<ComTimeValue | null>;
+    /** Whether the time picker is disabled. */
+    readonly disabled: InputSignal<boolean>;
+    /** Whether the time picker is required. */
+    readonly required: InputSignal<boolean>;
+    /** Whether to show the seconds segment. */
+    readonly showSeconds: InputSignal<boolean>;
+    /** 12h vs 24h format. `null` = auto-detect from locale. */
+    readonly use12HourFormat: InputSignal<boolean | null>;
+    /** Step interval for minutes. */
+    readonly minuteStep: InputSignal<number>;
+    /** Step interval for seconds. */
+    readonly secondStep: InputSignal<number>;
+    /** Minimum selectable time. */
+    readonly minTime: InputSignal<ComTimeValue | null>;
+    /** Maximum selectable time. */
+    readonly maxTime: InputSignal<ComTimeValue | null>;
+    /** Visual variant. */
+    readonly variant: InputSignal<TimePickerVariant>;
+    /** Size variant. */
+    readonly size: InputSignal<TimePickerSize>;
+    /** Validation state. */
+    readonly state: InputSignal<TimePickerState>;
+    /** Accessible label for the group. */
+    readonly ariaLabel: InputSignal<string | null>;
+    /** Additional CSS classes. */
+    readonly userClass: InputSignal<string>;
+    /** Placeholder text for empty segments. */
+    readonly placeholder: InputSignal<string>;
+    /** Emitted when time value changes. */
+    readonly timeChange: OutputEmitterRef<ComTimeValue | null>;
+    /** Internal value state. */
+    readonly internalValue: WritableSignal<ComTimeValue | null>;
+    /** Which segment is currently focused. */
+    readonly activeSegment: WritableSignal<TimeSegment | 'period' | null>;
+    /** Pending typed digits for auto-advance. */
+    readonly pendingDigits: WritableSignal<string>;
+    /** Live announcements for screen readers. */
+    readonly liveAnnouncement: WritableSignal<string>;
+    /** Whether to use 12-hour format. */
+    readonly is12Hour: Signal<boolean>;
+    /** Current period (AM/PM). */
+    readonly period: Signal<TimePeriod>;
+    /** Display hours (converted from 24h to 12h when needed). */
+    readonly displayHours: Signal<number | null>;
+    /** Formatted hours string. */
+    readonly formattedHours: Signal<string>;
+    /** Formatted minutes string. */
+    readonly formattedMinutes: Signal<string>;
+    /** Formatted seconds string. */
+    readonly formattedSeconds: Signal<string>;
+    /** Container classes. */
+    readonly containerClasses: Signal<string>;
+    /** Segment input classes. */
+    readonly segmentClasses: Signal<string>;
+    /** Separator classes. */
+    readonly separatorClasses: Signal<string>;
+    /** Period button classes. */
+    readonly periodClasses: Signal<string>;
+    private onChange;
+    private onTouched;
+    private onValidatorChange;
+    constructor();
+    writeValue(value: ComTimeValue | null): void;
+    registerOnChange(fn: (value: ComTimeValue | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(_isDisabled: boolean): void;
+    validate(): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected onSegmentFocus(segment: TimeSegment): void;
+    protected onSegmentBlur(segment: TimeSegment): void;
+    protected onSegmentInput(event: Event, segment: TimeSegment): void;
+    protected onSegmentKeydown(event: KeyboardEvent, segment: TimeSegment): void;
+    protected onPeriodKeydown(event: KeyboardEvent): void;
+    protected togglePeriod(): void;
+    private setPeriod;
+    private incrementSegment;
+    private handleDigitInput;
+    private snapToStep;
+    private setSegmentToMin;
+    private setSegmentToMax;
+    private focusNextSegment;
+    private focusPrevSegment;
+    private updateValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTimePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTimePicker, "com-time-picker", ["comTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; }, { "timeChange": "timeChange"; }, never, never, true, never>;
 }
 
-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 type { CalendarCell, CalendarCellConfig, CalendarCellKeyNavEvent, CalendarCellState, CalendarCellVariants, CalendarCellWrapperVariants, CalendarHeaderButtonVariants, CalendarHeaderVariants, CalendarVariants, CalendarView, DateClassFn, DateFilterFn, DateFormatPreset, DateRange, DateRangeValue, DatepickerClearVariants, DatepickerDisabledVariants, DatepickerFooterButtonVariants, DatepickerFooterConfig, DatepickerFooterVariants, DatepickerIconVariants, DatepickerInputVariants, DatepickerPanelVariants, DatepickerPanelWidth, DatepickerRangeSeparatorVariants, DatepickerSize, DatepickerState, DatepickerTriggerVariants, DatepickerVariant, NameStyle, SelectionResult, WeekdayHeader };
+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 };
+export type { CalendarCell, CalendarCellConfig, CalendarCellKeyNavEvent, CalendarCellState, CalendarCellVariants, CalendarCellWrapperVariants, CalendarHeaderButtonVariants, CalendarHeaderVariants, CalendarVariants, CalendarView, ComTimeValue, DateClassFn, DateFilterFn, DateFormatPreset, DateRange, DateRangeValue, DatepickerClearVariants, DatepickerDisabledVariants, DatepickerFooterButtonVariants, DatepickerFooterConfig, DatepickerFooterVariants, DatepickerIconVariants, DatepickerInputVariants, DatepickerPanelVariants, DatepickerPanelWidth, DatepickerRangeSeparatorVariants, DatepickerSize, DatepickerState, DatepickerTriggerVariants, DatepickerVariant, NameStyle, SelectionResult, TimePeriod, TimePickerSize, TimePickerState, TimePickerVariant, TimeSegment, TimepickerContainerVariants, TimepickerDisabledVariants, TimepickerLabelVariants, TimepickerPeriodVariants, TimepickerSectionVariants, TimepickerSegmentVariants, TimepickerSeparatorVariants, WeekdayHeader };