@gravionlabs/helix-ui 22.2.4 → 22.2.6

package/types/gravionlabs-helix-ui.d.ts

@@ -1798,9 +1798,30 @@ export declare class HxDataTable implements OnInit {
     "expandedRowKeys": "expandedRowKeysChange";
   }, ["cellTemplates", "headerTemplate", "bodyTemplate", "footerTemplate", "captionTemplate", "expansionTemplate", "emptyTemplate"], never, true, never>;
 }
+type CalendarView = 'day' | 'month' | 'year';
+interface DisabledRules {
+  min?: Date | null;
+  max?: Date | null;
+  disabledDates?: readonly Date[];
+}
+/** `2026-9-5`, the `data-date` of a day button. */
+declare function dateKey(date: Date): string;
+/** Whether a day lies outside `min`..`max` (by day) or is one of `disabledDates`. */
+declare function isDateDisabled(date: Date, rules: DisabledRules): boolean;
+/** Whether a day lies strictly between the two dates of a complete range. */
+declare function isInRange(date: Date, selected: readonly Date[], mode: string): boolean;
+/** The focused day after the previous (`-1`) or next (`1`) button of the header: a month, a year or 12 years. */
+declare function stepFocus(view: CalendarView, current: Date, direction: 1 | -1): Date;
+/** The focused day after choosing a month (`0` to `11`) in the month view. */
+declare function focusMonth(current: Date, month: number): Date;
+/** The focused day after choosing a year in the year view. */
+declare function focusYear(current: Date, year: number): Date;
+/** The 12 years of the page that holds `year`. */
+declare function decadeOf(year: number): number[];
+/** The day a key of the day grid moves the focus to, or `null` for a key that does nothing. */
+declare function dayKeyTarget(key: string, date: Date, firstDayOfWeek: number, shift?: boolean): Date | null;
 type HxDatePickerSelectionMode = 'single' | 'range' | 'multiple';
 type HxDatePickerValue = Date | Date[] | null;
-type CalendarView = 'day' | 'month' | 'year';
 /**
  * A date field that opens a calendar, or with `[inline]="true"` the calendar alone, to choose a day, a range or
  * several days. Typing a date in the field parses it; month and year views are one click on the title. Day, month and weekday names come from `Intl.DateTimeFormat` for the `locale`.
@@ -1829,8 +1850,10 @@ export declare class HxDatePicker implements ControlValueAccessor, FormValueCont
   readonly showIcon: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   /** Today and Clear buttons under the calendar of the popup. */
   readonly showButtonBar: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** `Intl.DateTimeFormat` options of the text in the field (numeric by default, so a typed date parses back). */
-  readonly dateFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions>;
+  /**
+   * `Intl.DateTimeFormat` options of the text in the field. By default numeric, so a typed date parses back.
+   */
+  readonly dateFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions | undefined>;
   readonly todayLabel: import("@angular/core").InputSignal<string>;
   readonly clearLabel: import("@angular/core").InputSignal<string>;
   readonly chooseLabel: import("@angular/core").InputSignal<string>;
@@ -1859,21 +1882,14 @@ export declare class HxDatePicker implements ControlValueAccessor, FormValueCont
   protected readonly popupId: string;
   protected readonly positions: ConnectedPosition[];
   private readonly field;
+  private readonly calendar;
   protected readonly view: import("@angular/core").WritableSignal<CalendarView>;
   protected readonly isDisabled: import("@angular/core").Signal<boolean>;
   /** The day with the focus in the grid, and the month the grid shows. */
   protected readonly focusedDate: import("@angular/core").WritableSignal<Date>;
-  protected readonly viewYear: import("@angular/core").Signal<number>;
+  protected readonly today: Date;
   protected readonly selectedDates: import("@angular/core").Signal<Date[]>;
   protected readonly text: import("@angular/core").Signal<string>;
-  protected readonly monthName: import("@angular/core").Signal<string>;
-  protected readonly monthNames: import("@angular/core").Signal<string[]>;
-  protected readonly weekdays: import("@angular/core").Signal<{
-    short: string;
-    long: string;
-  }[]>;
-  protected readonly weeks: import("@angular/core").Signal<(Date | null)[][]>;
-  protected readonly decade: import("@angular/core").Signal<number[]>;
   constructor();
   writeValue(value: HxDatePickerValue): void;
   registerOnChange(fn: (value: HxDatePickerValue) => void): void;
@@ -1881,19 +1897,9 @@ export declare class HxDatePicker implements ControlValueAccessor, FormValueCont
   setDisabledState(disabled: boolean): void;
   /** Focuses the text field, or the day of an inline calendar (signal forms call this to focus the control). */
   focus(): void;
-  protected dateKey(date: Date): string;
-  protected dayLabel(date: Date): string;
-  protected isToday(date: Date): boolean;
-  protected isSelected(date: Date): boolean;
-  protected isInRange(date: Date): boolean;
   protected isDateDisabled(date: Date): boolean;
-  /** One day of the grid takes the tab stop: the focused day, or the first day when the focus is elsewhere. */
-  protected isFocusTarget(date: Date): boolean;
-  protected step(direction: 1 | -1): void;
-  protected chooseMonth(month: number): void;
-  protected chooseYear(year: number): void;
+  protected isSelected(date: Date): boolean;
   protected pick(date: Date): void;
-  protected onDayKeydown(event: KeyboardEvent, date: Date): void;
   protected show(): void;
   protected toggle(): void;
   protected close(refocus?: boolean): void;
@@ -2015,6 +2021,819 @@ export declare class HxDatePicker implements ControlValueAccessor, FormValueCont
     "touch": "touch";
   }, never, never, true, never>;
 }
+type TimeUnit = 'hour' | 'minute' | 'second' | 'period';
+interface TimeColumn {
+  unit: TimeUnit;
+  label: string;
+  now: number;
+  min: number;
+  max: number;
+  text: string;
+  valueText: string;
+}
+interface TimeOfDay {
+  hours: number;
+  minutes: number;
+  seconds: number;
+}
+interface TimeColumnOptions {
+  hour12: boolean;
+  showMinutes: boolean;
+  showSeconds: boolean;
+  locale?: string;
+  labels: {
+    hour: string;
+    minute: string;
+    second: string;
+    period: string;
+  };
+}
+interface TimeSteps {
+  hour: number;
+  minute: number;
+  second: number;
+}
+/** The spinbutton columns of a time row: hour, minute, second, AM/PM as the options ask. */
+declare function buildTimeColumns(time: TimeOfDay, options: TimeColumnOptions): TimeColumn[];
+/** The values a time unit can take: from its minimum in steps, up to its maximum. */
+declare function unitValues(column: TimeColumn, steps: TimeSteps): number[];
+/** The next (`1`) or previous (`-1`) value of a column's steps, wrapping around. */
+declare function nextUnitValue(column: TimeColumn, steps: TimeSteps, direction: 1 | -1): number;
+/** The time with one unit set (in the units shown: 1 to 12 with AM/PM). */
+declare function applyUnit(time: TimeOfDay, unit: TimeUnit, value: number, hour12: boolean): TimeOfDay;
+/** The value a key of a spinbutton jumps to (Page Up/Down, Home, End), or `null` for another key. */
+declare function jumpKeyTarget(key: string, column: TimeColumn, steps: TimeSteps): number | null;
+type HxDateTimePickerValue = Date | null;
+/**
+ * A date and time field that opens a calendar with a time row under it (hour, minute, optionally second and AM/PM),
+ * or with `[inline]="true"` the calendar and the time row alone. The value is one `Date`; clearing the field gives
+ * `null`. Typing parses `10/09/2026, 14:30` or `10/09/2026 2:30 PM`.
+ *
+ * ```html
+ * <hx-date-time-picker inputId="start" showIcon showButtonBar [stepMinute]="15" [(ngModel)]="start" />
+ * <hx-date-time-picker inline ariaLabel="Start" [(value)]="start" />
+ * ```
+ *
+ * It works with `ngModel`, reactive forms and signal forms (`[formField]`). Choosing a day keeps the time already set;
+ * setting a time with no date takes today. `minDate` and `maxDate` are compared including the time. The popup is a
+ * non-modal dialog that stays open until Escape, the focus leaves the control or a button of the button bar.
+ *
+ * Each time column is a `spinbutton`: Arrow Up and Down change it by the step, Page Up and Page Down by a larger step,
+ * Home and End go to the first and last value. Keyboard in the day grid: arrows move by a day or a week, Home and End
+ * to the start and end of the week, Page Up and Page Down by a month (with Shift by a year), Enter or Space selects.
+ */
+export declare class HxDateTimePicker implements ControlValueAccessor, FormValueControl<HxDateTimePickerValue> {
+  #private;
+  /** The text field's placeholder. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** A calendar button at the end of the field. */
+  readonly showIcon: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Today and Clear buttons under the time row of the popup. */
+  readonly showButtonBar: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /**
+   * `Intl.DateTimeFormat` options of the text in the field. By default numeric, so a typed date parses back: day,
+   * month and year, plus hour and minute (and second), with the `hourCycle` of `hourFormat`.
+   */
+  readonly dateFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions | undefined>;
+  readonly todayLabel: import("@angular/core").InputSignal<string>;
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  readonly chooseLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible names of the time row and its columns. */
+  readonly timeLabel: import("@angular/core").InputSignal<string>;
+  readonly hourLabel: import("@angular/core").InputSignal<string>;
+  readonly minuteLabel: import("@angular/core").InputSignal<string>;
+  readonly secondLabel: import("@angular/core").InputSignal<string>;
+  readonly periodLabel: import("@angular/core").InputSignal<string>;
+  /** The `id` of the text field, for a `<label for>`. */
+  readonly inputId: import("@angular/core").InputSignal<string | undefined>;
+  /** `'12'` shows hours from 1 to 12 and an AM/PM column. */
+  readonly hourFormat: import("@angular/core").InputSignal<"24" | "12">;
+  /** A minutes column; `false` picks the hour only (minutes and seconds are `0`, `showSeconds` is ignored). */
+  readonly showMinutes: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** A seconds column. */
+  readonly showSeconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Step of the arrow keys and buttons of the hour column. */
+  readonly stepHour: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Step of the minute column. */
+  readonly stepMinute: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Step of the second column. */
+  readonly stepSecond: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** Shows the calendar and the time row in the page. */
+  readonly inline: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** The earliest and latest moment that can be chosen, compared including the time. */
+  readonly minDate: import("@angular/core").InputSignal<Date | null>;
+  readonly maxDate: import("@angular/core").InputSignal<Date | null>;
+  /** Days that cannot be chosen. */
+  readonly disabledDates: import("@angular/core").InputSignal<readonly Date[]>;
+  /** `0` Sunday … `6` Saturday. */
+  readonly firstDayOfWeek: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** A BCP 47 tag for the names (default: the browser's). */
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string | undefined>;
+  readonly value: import("@angular/core").ModelSignal<HxDateTimePickerValue>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  readonly open: import("@angular/core").WritableSignal<boolean>;
+  protected readonly titleId: string;
+  protected readonly popupId: string;
+  protected readonly positions: ConnectedPosition[];
+  private readonly field;
+  private readonly calendar;
+  protected readonly view: import("@angular/core").WritableSignal<CalendarView>;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  /** The day with the focus in the grid, and the month the grid shows. */
+  protected readonly focusedDate: import("@angular/core").WritableSignal<Date>;
+  protected readonly today: Date;
+  protected readonly selectedDate: import("@angular/core").Signal<Date | null>;
+  protected readonly selectedDates: import("@angular/core").Signal<Date[]>;
+  protected readonly hour12: import("@angular/core").Signal<boolean>;
+  /** The time of day shown in the time row: the value's, or midnight while there is none. */
+  protected readonly time: import("@angular/core").Signal<TimeOfDay>;
+  protected readonly text: import("@angular/core").Signal<string>;
+  constructor();
+  writeValue(value: HxDateTimePickerValue): void;
+  registerOnChange(fn: (value: HxDateTimePickerValue) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  /** Focuses the text field, or the day of an inline calendar (signal forms call this to focus the control). */
+  focus(): void;
+  protected isDateDisabled(date: Date): boolean;
+  /** Chooses a day, keeping the time; `false` when the day is not accepted. */
+  protected pick(date: Date): boolean;
+  /** The time row changed a unit: keep the day, or take today. */
+  protected setTime(time: TimeOfDay): void;
+  protected show(): void;
+  protected toggle(): void;
+  protected close(refocus?: boolean): void;
+  protected onAttach(): void;
+  protected onOverlayKeydown(event: KeyboardEvent): void;
+  protected onOutsideClick(event: MouseEvent): void;
+  protected onFieldKeydown(event: KeyboardEvent): void;
+  protected onTyping(event: Event): void;
+  /** Parses the typed text; an unreadable, disabled or out of range date and time puts the value back. */
+  protected commitTyping(): void;
+  protected selectToday(): void;
+  protected clear(): void;
+  protected onHostFocusOut(event: FocusEvent): void;
+  /** The focus left the popup for something outside the control. */
+  protected onPopupFocusOut(event: FocusEvent): void;
+  /** The focus left an inline calendar and time row for something outside the control. */
+  protected onInlineFocusOut(event: FocusEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxDateTimePicker, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxDateTimePicker, "hx-date-time-picker", never, {
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIcon": {
+      "alias": "showIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "showButtonBar": {
+      "alias": "showButtonBar";
+      "required": false;
+      "isSignal": true;
+    };
+    "dateFormat": {
+      "alias": "dateFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "todayLabel": {
+      "alias": "todayLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "chooseLabel": {
+      "alias": "chooseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeLabel": {
+      "alias": "timeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourLabel": {
+      "alias": "hourLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "minuteLabel": {
+      "alias": "minuteLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "secondLabel": {
+      "alias": "secondLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "periodLabel": {
+      "alias": "periodLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourFormat": {
+      "alias": "hourFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "showMinutes": {
+      "alias": "showMinutes";
+      "required": false;
+      "isSignal": true;
+    };
+    "showSeconds": {
+      "alias": "showSeconds";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepHour": {
+      "alias": "stepHour";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepMinute": {
+      "alias": "stepMinute";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepSecond": {
+      "alias": "stepSecond";
+      "required": false;
+      "isSignal": true;
+    };
+    "inline": {
+      "alias": "inline";
+      "required": false;
+      "isSignal": true;
+    };
+    "minDate": {
+      "alias": "minDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxDate": {
+      "alias": "maxDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledDates": {
+      "alias": "disabledDates";
+      "required": false;
+      "isSignal": true;
+    };
+    "firstDayOfWeek": {
+      "alias": "firstDayOfWeek";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+type HxTimePickerValue = Date | null;
+/**
+ * A time field that opens a time row (hour, minute, optionally second and AM/PM), or with `[inline]="true"` the
+ * time row alone. The value is a `Date` that is today at the chosen time; clearing the field gives `null`. Typing
+ * parses `14:30`, `2:30 PM` and, with `[showMinutes]="false"`, `14`.
+ *
+ * ```html
+ * <hx-time-picker inputId="alarm" hourFormat="12" showIcon [(ngModel)]="alarm" />
+ * <hx-time-picker [showMinutes]="false" [(value)]="opens" />
+ * <hx-time-picker inline [stepMinute]="15" ariaLabel="Start" [(value)]="start" />
+ * ```
+ *
+ * It works with `ngModel`, reactive forms and signal forms (`[formField]`). Each column is a `spinbutton`: Arrow Up
+ * and Down change it by the step, Page Up and Page Down by a larger step, Home and End go to the first and last
+ * value. `minTime` and `maxTime` limit the time of day (only the time of the dates counts). The popup is a non-modal
+ * dialog that stays open until Escape, the focus leaves the control or a button of the button bar.
+ */
+export declare class HxTimePicker implements ControlValueAccessor, FormValueControl<HxTimePickerValue> {
+  #private;
+  /** The text field's placeholder. */
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  /** A clock button at the end of the field. */
+  readonly showIcon: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Now and Clear buttons under the time row of the popup. */
+  readonly showButtonBar: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** `Intl.DateTimeFormat` options of the text in the field (default: numeric hour, minute, second with the `hourCycle`). */
+  readonly dateFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions | undefined>;
+  readonly nowLabel: import("@angular/core").InputSignal<string>;
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  readonly chooseLabel: import("@angular/core").InputSignal<string>;
+  /** Accessible names of the time row and its columns. */
+  readonly timeLabel: import("@angular/core").InputSignal<string>;
+  readonly hourLabel: import("@angular/core").InputSignal<string>;
+  readonly minuteLabel: import("@angular/core").InputSignal<string>;
+  readonly secondLabel: import("@angular/core").InputSignal<string>;
+  readonly periodLabel: import("@angular/core").InputSignal<string>;
+  /** The `id` of the text field, for a `<label for>`. */
+  readonly inputId: import("@angular/core").InputSignal<string | undefined>;
+  /** `'12'` shows hours from 1 to 12 and an AM/PM column. */
+  readonly hourFormat: import("@angular/core").InputSignal<"24" | "12">;
+  /** A minutes column; `false` picks the hour only (minutes and seconds are `0`, `showSeconds` is ignored). */
+  readonly showMinutes: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** A seconds column. */
+  readonly showSeconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly stepHour: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly stepMinute: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly stepSecond: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  /** The earliest and latest time of day; only the time of the dates counts. */
+  readonly minTime: import("@angular/core").InputSignal<Date | null>;
+  readonly maxTime: import("@angular/core").InputSignal<Date | null>;
+  /** Shows the time row in the page. */
+  readonly inline: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** A BCP 47 tag for the format and the AM/PM names (default: the browser's). */
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string | undefined>;
+  readonly value: import("@angular/core").ModelSignal<HxTimePickerValue>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  readonly open: import("@angular/core").WritableSignal<boolean>;
+  protected readonly popupId: string;
+  protected readonly positions: ConnectedPosition[];
+  private readonly field;
+  private readonly timeRow;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  protected readonly hour12: import("@angular/core").Signal<boolean>;
+  /** The time of day shown in the time row: the value's, or midnight while there is none. */
+  protected readonly time: import("@angular/core").Signal<TimeOfDay>;
+  protected readonly text: import("@angular/core").Signal<string>;
+  writeValue(value: HxTimePickerValue): void;
+  registerOnChange(fn: (value: HxTimePickerValue) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  /** Focuses the text field, or the first column of an inline time row (signal forms call this to focus the control). */
+  focus(): void;
+  /** The time row changed a unit: today at that time. */
+  protected setTime(time: TimeOfDay): void;
+  protected show(): void;
+  protected toggle(): void;
+  protected close(refocus?: boolean): void;
+  protected onAttach(): void;
+  protected onOverlayKeydown(event: KeyboardEvent): void;
+  protected onOutsideClick(event: MouseEvent): void;
+  protected onFieldKeydown(event: KeyboardEvent): void;
+  protected onTyping(event: Event): void;
+  /** Parses the typed text; an unreadable time or one outside `minTime`..`maxTime` puts the value back. */
+  protected commitTyping(): void;
+  protected selectNow(): void;
+  protected clear(): void;
+  protected onHostFocusOut(event: FocusEvent): void;
+  /** The focus left an inline time row for something outside the control. */
+  protected onInlineFocusOut(event: FocusEvent): void;
+  /** The focus left the popup for something outside the control. */
+  protected onPopupFocusOut(event: FocusEvent): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxTimePicker, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxTimePicker, "hx-time-picker", never, {
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "showIcon": {
+      "alias": "showIcon";
+      "required": false;
+      "isSignal": true;
+    };
+    "showButtonBar": {
+      "alias": "showButtonBar";
+      "required": false;
+      "isSignal": true;
+    };
+    "dateFormat": {
+      "alias": "dateFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "nowLabel": {
+      "alias": "nowLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "chooseLabel": {
+      "alias": "chooseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeLabel": {
+      "alias": "timeLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourLabel": {
+      "alias": "hourLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "minuteLabel": {
+      "alias": "minuteLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "secondLabel": {
+      "alias": "secondLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "periodLabel": {
+      "alias": "periodLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourFormat": {
+      "alias": "hourFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "showMinutes": {
+      "alias": "showMinutes";
+      "required": false;
+      "isSignal": true;
+    };
+    "showSeconds": {
+      "alias": "showSeconds";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepHour": {
+      "alias": "stepHour";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepMinute": {
+      "alias": "stepMinute";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepSecond": {
+      "alias": "stepSecond";
+      "required": false;
+      "isSignal": true;
+    };
+    "minTime": {
+      "alias": "minTime";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxTime": {
+      "alias": "maxTime";
+      "required": false;
+      "isSignal": true;
+    };
+    "inline": {
+      "alias": "inline";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
+interface HxDateTimeRangeValue {
+  from: Date | null;
+  to: Date | null;
+}
+/**
+ * A from and a to date-time range in one field with one button. The field shows the range as one text
+ * (`1/1/2026 00:00 - 1/2/2026 00:15`); the popup holds one calendar (an inline range `hx-date-picker`) and a time picker for each end,
+ * from and to. The value is `{ from, to }` (`null` while a side is empty); `to` is never before `from`: the `to`
+ * time picker starts at `from` (including the time), the `from` time picker ends at `to`, and a choice that crosses the
+ * other side moves it. The field is read-only; the popup stays open until Escape, an outside click or the focus
+ * leaving it.
+ *
+ * ```html
+ * <hx-date-time-range-picker [stepMinute]="15" [(ngModel)]="shift" />
+ * <hx-date-time-range-picker timeOnly [showMinutes]="false" [(value)]="opening" />
+ * ```
+ *
+ * It works with `ngModel`, reactive forms and signal forms (`[formField]`). The time options are those of
+ * `hx-time-picker`. The popup is a dialog named by `ariaLabel` / `ariaLabelledby`; its time pickers are named
+ * `fromLabel` / `toLabel`.
+ */
+export declare class HxDateTimeRangePicker implements ControlValueAccessor, FormValueControl<HxDateTimeRangeValue> {
+  #private;
+  /** The names of the two time pickers in the popup. */
+  readonly fromLabel: import("@angular/core").InputSignal<string>;
+  readonly toLabel: import("@angular/core").InputSignal<string>;
+  /** The text between the two dates in the field. */
+  readonly separator: import("@angular/core").InputSignal<string>;
+  readonly placeholder: import("@angular/core").InputSignal<string>;
+  readonly clearLabel: import("@angular/core").InputSignal<string>;
+  readonly cancelLabel: import("@angular/core").InputSignal<string>;
+  readonly submitLabel: import("@angular/core").InputSignal<string>;
+  readonly chooseLabel: import("@angular/core").InputSignal<string>;
+  /** The `id` of the text field, for a `<label for>`. */
+  readonly inputId: import("@angular/core").InputSignal<string | undefined>;
+  /** The time picker options, for both ends. */
+  readonly showTime: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly timeOnly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly hourFormat: import("@angular/core").InputSignal<"24" | "12">;
+  readonly showMinutes: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly showSeconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly stepHour: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly stepMinute: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly stepSecond: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly dateFormat: import("@angular/core").InputSignal<Intl.DateTimeFormatOptions | undefined>;
+  readonly locale: import("@angular/core").InputSignal<string | undefined>;
+  readonly firstDayOfWeek: import("@angular/core").InputSignalWithTransform<number, unknown>;
+  readonly minDate: import("@angular/core").InputSignal<Date | null>;
+  readonly maxDate: import("@angular/core").InputSignal<Date | null>;
+  readonly disabledDates: import("@angular/core").InputSignal<readonly Date[]>;
+  /** A Clear button next to Cancel and Submit. */
+  readonly showButtonBar: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
+  readonly ariaLabelledby: import("@angular/core").InputSignal<string | undefined>;
+  readonly value: import("@angular/core").ModelSignal<HxDateTimeRangeValue>;
+  readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly invalid: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly touch: import("@angular/core").OutputEmitterRef<void>;
+  readonly open: import("@angular/core").WritableSignal<boolean>;
+  /** The range being edited in the popup; Submit makes it the value, Cancel drops it. */
+  protected readonly draft: import("@angular/core").WritableSignal<HxDateTimeRangeValue>;
+  protected readonly popupId: string;
+  protected readonly positions: ConnectedPosition[];
+  private readonly field;
+  private readonly daysPicker;
+  private readonly timePicker;
+  /** `1/1/2026 00:00 - 1/2/2026 00:15`: the date and the time are separated by a space, not a comma. */
+  protected readonly text: import("@angular/core").Signal<string>;
+  protected readonly isDisabled: import("@angular/core").Signal<boolean>;
+  /** `from` ends at `to`, `to` starts at `from`, each inside `minDate`..`maxDate`. */
+  protected readonly fromMax: import("@angular/core").Signal<Date | null>;
+  protected readonly toMin: import("@angular/core").Signal<Date | null>;
+  /** The values of the two time pickers: a fresh `Date` per draft change (midnight while a side is empty). */
+  protected readonly fromValue: import("@angular/core").Signal<HxTimePickerValue>;
+  protected readonly toValue: import("@angular/core").Signal<HxTimePickerValue>;
+  writeValue(value: HxDateTimeRangeValue | null): void;
+  registerOnChange(fn: (value: HxDateTimeRangeValue) => void): void;
+  registerOnTouched(fn: () => void): void;
+  setDisabledState(disabled: boolean): void;
+  /** Focuses the text field (signal forms call this to focus the control). */
+  focus(): void;
+  protected show(): void;
+  protected toggle(): void;
+  protected close(refocus?: boolean): void;
+  protected onAttach(): void;
+  protected onFieldKeydown(event: KeyboardEvent): void;
+  protected onOverlayKeydown(event: KeyboardEvent): void;
+  protected onOutsideClick(event: MouseEvent): void;
+  protected clear(): void;
+  protected submit(): void;
+  /** The focus left the control (field, button and popup): the popup closes and the control is touched. */
+  protected onHostFocusOut(event: FocusEvent): void;
+  protected onPopupFocusOut(event: FocusEvent): void;
+  /** The days of the calendar: `[from]` while the range is open, `[from, to]` when complete. */
+  protected readonly days: import("@angular/core").Signal<Date[]>;
+  /** A choice in the calendar sets the days and keeps the times already chosen (midnight while there is none). */
+  protected setDays(picked: HxDatePickerValue): void;
+  /** The `from` picker changed: the day of `from` (else of `to`, else today) at the new time, not after `to`. */
+  protected setFromTime(picked: HxTimePickerValue): void;
+  /** The `to` picker changed: the day of `to` (else of `from`, else today) at the new time, not before `from`. */
+  protected setToTime(picked: HxTimePickerValue): void;
+  protected markTouched(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<HxDateTimeRangePicker, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<HxDateTimeRangePicker, "hx-date-time-range-picker", never, {
+    "fromLabel": {
+      "alias": "fromLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "toLabel": {
+      "alias": "toLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "separator": {
+      "alias": "separator";
+      "required": false;
+      "isSignal": true;
+    };
+    "placeholder": {
+      "alias": "placeholder";
+      "required": false;
+      "isSignal": true;
+    };
+    "clearLabel": {
+      "alias": "clearLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "cancelLabel": {
+      "alias": "cancelLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "submitLabel": {
+      "alias": "submitLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "chooseLabel": {
+      "alias": "chooseLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "inputId": {
+      "alias": "inputId";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTime": {
+      "alias": "showTime";
+      "required": false;
+      "isSignal": true;
+    };
+    "timeOnly": {
+      "alias": "timeOnly";
+      "required": false;
+      "isSignal": true;
+    };
+    "hourFormat": {
+      "alias": "hourFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "showMinutes": {
+      "alias": "showMinutes";
+      "required": false;
+      "isSignal": true;
+    };
+    "showSeconds": {
+      "alias": "showSeconds";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepHour": {
+      "alias": "stepHour";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepMinute": {
+      "alias": "stepMinute";
+      "required": false;
+      "isSignal": true;
+    };
+    "stepSecond": {
+      "alias": "stepSecond";
+      "required": false;
+      "isSignal": true;
+    };
+    "dateFormat": {
+      "alias": "dateFormat";
+      "required": false;
+      "isSignal": true;
+    };
+    "locale": {
+      "alias": "locale";
+      "required": false;
+      "isSignal": true;
+    };
+    "firstDayOfWeek": {
+      "alias": "firstDayOfWeek";
+      "required": false;
+      "isSignal": true;
+    };
+    "minDate": {
+      "alias": "minDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "maxDate": {
+      "alias": "maxDate";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabledDates": {
+      "alias": "disabledDates";
+      "required": false;
+      "isSignal": true;
+    };
+    "showButtonBar": {
+      "alias": "showButtonBar";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabelledby": {
+      "alias": "ariaLabelledby";
+      "required": false;
+      "isSignal": true;
+    };
+    "value": {
+      "alias": "value";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "invalid": {
+      "alias": "invalid";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "value": "valueChange";
+    "touch": "touch";
+  }, never, never, true, never>;
+}
 type HxDialogPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 /**
  * The box of a dialog: a title (the `header`, plus content marked `hxDialogHeader`), the content, a footer (content
@@ -5881,4 +6700,4 @@ export declare class HxTree {
     "nodeCollapse": "nodeCollapse";
   }, ["template"], never, true, never>;
 }
-export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxColumn, HxColumnAlign, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxGalleriaItem, HxGalleriaItemContext, HxGalleriaThumbnailsPosition, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };
+export type { HxAccordionValue, HxAutoCompleteEvent, HxAutoCompleteSize, HxAvatarShape, HxAvatarSize, HxBadgeSeverity, HxBadgeSize, HxBreadcrumbItem, HxButtonSeverity, HxButtonSize, HxButtonVariant, HxCarouselItemContext, HxCarouselOrientation, HxCarouselResponsiveOption, HxCellContext, HxChartInstance, HxChartModule, HxChartSelectEvent, HxChartType, HxCheckboxSize, HxColumn, HxColumnAlign, HxConfirmation, HxDatePickerSelectionMode, HxDatePickerValue, HxDateTimePickerValue, HxDateTimeRangeValue, HxDialogConfig, HxDialogPosition, HxDividerAlign, HxDividerLayout, HxDividerType, HxDrawerPosition, HxFileUploadMode, HxFloatLabelVariant, HxGalleriaItem, HxGalleriaItemContext, HxGalleriaThumbnailsPosition, HxIconPosition, HxInputNumberButtonLayout, HxInputNumberMode, HxInputNumberSize, HxInputNumberVariant, HxInputSize, HxInputVariant, HxLazyLoadEvent, HxMenuItem, HxMenuItemCommandEvent, HxMessageSeverity, HxMessageSize, HxMessageVariant, HxMultiSelectDisplay, HxMultiSelectSize, HxMultiSelectVariant, HxPageEvent, HxPrimaryColor, HxProgressMode, HxRadioSize, HxSelectButtonSize, HxSelectItem, HxSelectSize, HxSelectVariant, HxSelectionMode, HxSkeletonAnimation, HxSkeletonShape, HxSliderOrientation, HxSliderValue, HxSortFunction, HxSortMeta, HxSortMode, HxStepContentContext, HxStepValue, HxSurface, HxTableColumnsContext, HxTableRowContext, HxTableSize, HxTagSeverity, HxThemeOptions, HxTimePickerValue, HxTimelineAlign, HxTimelineContext, HxTimelineLayout, HxToastMessage, HxToastMessageInput, HxToastPosition, HxToastSeverity, HxToggleButtonSize, HxTooltipEvent, HxTooltipPosition, HxTreeFilterMode, HxTreeNode, HxTreeNodeContext, HxTreeNodeEvent, HxTreeSelection, HxTreeSelectionMode };