fix(material/timepicker): add interface for timepicker input (#32050)

Adds an interface for the timepicker input so that users can provide their own if they want. This allows helps avoid a circular dependency.

Fixes #31336.

Author: crisbeto

goldens/material/timepicker/index.api.md

@@ -59,7 +59,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
     readonly panelId: string;
     // (undocumented)
     protected _panelTemplate: Signal<TemplateRef<unknown>>;
-    registerInput(input: MatTimepickerInput<D>): void;
+    registerInput(input: MatTimepickerConnectedInput<D>): void;
     readonly selected: OutputEmitterRef<MatTimepickerSelected<D>>;
     protected _selectValue(option: MatOption<D>): void;
     // (undocumented)
@@ -77,15 +77,27 @@ export interface MatTimepickerConfig {
 }
 
 // @public
-export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, OnDestroy {
+export interface MatTimepickerConnectedInput<D> {
+    disabled: Signal<boolean>;
+    focus(): void;
+    getLabelId(): string | null;
+    getOverlayOrigin(): ElementRef<HTMLElement>;
+    max: Signal<D | null>;
+    min: Signal<D | null>;
+    timepickerValueAssigned(value: D | null): void;
+    value: Signal<D | null>;
+}
+
+// @public
+export class MatTimepickerInput<D> implements MatTimepickerConnectedInput<D>, ControlValueAccessor, Validator, OnDestroy {
     constructor();
     protected readonly _ariaActiveDescendant: Signal<string | null>;
     protected readonly _ariaControls: Signal<string | null>;
     protected readonly _ariaExpanded: Signal<string>;
     readonly disabled: Signal<boolean>;
     readonly disabledInput: InputSignalWithTransform<boolean, unknown>;
     focus(): void;
-    _getLabelId(): string | null;
+    getLabelId(): string | null;
     getOverlayOrigin(): ElementRef<HTMLElement>;
     protected _handleBlur(): void;
     protected _handleInput(event: Event): void;
@@ -100,7 +112,7 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
     registerOnValidatorChange(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
     readonly timepicker: InputSignal<MatTimepicker<D>>;
-    _timepickerValueAssigned(value: D | null): void;
+    timepickerValueAssigned(value: D | null): void;
     validate(control: AbstractControl): ValidationErrors | null;
     readonly value: ModelSignal<D | null>;
     writeValue(value: any): void;

src/material/timepicker/timepicker-input.ts

@@ -36,7 +36,7 @@ import {
   Validators,
 } from '@angular/forms';
 import {MAT_FORM_FIELD} from '../form-field';
-import {MatTimepicker} from './timepicker';
+import {MatTimepicker, MatTimepickerConnectedInput} from './timepicker';
 import {MAT_INPUT_VALUE_ACCESSOR} from '../input';
 import {Subscription} from 'rxjs';
 import {DOWN_ARROW, ESCAPE, hasModifierKey, UP_ARROW} from '@angular/cdk/keycodes';
@@ -80,7 +80,9 @@ import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
     },
   ],
 })
-export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, OnDestroy {
+export class MatTimepickerInput<D>
+  implements MatTimepickerConnectedInput<D>, ControlValueAccessor, Validator, OnDestroy
+{
   private _elementRef = inject<ElementRef<HTMLInputElement>>(ElementRef);
   private _dateAdapter = inject<DateAdapter<D>>(DateAdapter, {optional: true})!;
   private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!;
@@ -258,7 +260,7 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
   }
 
   /** Gets the ID of the input's label. */
-  _getLabelId(): string | null {
+  getLabelId(): string | null {
     return this._formField?.getLabelId() || null;
   }
 
@@ -318,7 +320,7 @@ export class MatTimepickerInput<D> implements ControlValueAccessor, Validator, O
   }
 
   /** Called by the timepicker to sync up the user-selected value. */
-  _timepickerValueAssigned(value: D | null) {
+  timepickerValueAssigned(value: D | null) {
     if (!this._dateAdapter.sameTime(value, this.value())) {
       this._assignUserSelection(value, true);
       this._formatValue(value);

src/material/timepicker/timepicker.ts

@@ -53,7 +53,6 @@ import {TemplatePortal} from '@angular/cdk/portal';
 import {_getEventTarget} from '@angular/cdk/platform';
 import {ENTER, ESCAPE, hasModifierKey, TAB} from '@angular/cdk/keycodes';
 import {_IdGenerator, ActiveDescendantKeyManager} from '@angular/cdk/a11y';
-import type {MatTimepickerInput} from './timepicker-input';
 import {
   generateOptions,
   MAT_TIMEPICKER_CONFIG,
@@ -81,6 +80,33 @@ export const MAT_TIMEPICKER_SCROLL_STRATEGY = new InjectionToken<() => ScrollStr
   },
 );
 
+/** Represents an input that is connected to a `mat-timepicker`. */
+export interface MatTimepickerConnectedInput<D> {
+  /** Current value of the input. */
+  value: Signal<D | null>;
+
+  /** Minimum allowed time. */
+  min: Signal<D | null>;
+
+  /** Maximum allowed time. */
+  max: Signal<D | null>;
+
+  /** Whether the input is disabled. */
+  disabled: Signal<boolean>;
+
+  /** Focuses the input. */
+  focus(): void;
+
+  /** Gets the element to which to connect the timepicker overlay. */
+  getOverlayOrigin(): ElementRef<HTMLElement>;
+
+  /** Gets the ID of the input's label. */
+  getLabelId(): string | null;
+
+  /** Callback invoked when the timepicker assigns a value. */
+  timepickerValueAssigned(value: D | null): void;
+}
+
 /**
  * Renders out a listbox that can be used to select a time of day.
  * Intended to be used together with `MatTimepickerInput`.
@@ -113,7 +139,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
   private _isOpen = signal(false);
   private _activeDescendant = signal<string | null>(null);
 
-  private _input = signal<MatTimepickerInput<D> | null>(null);
+  private _input = signal<MatTimepickerConnectedInput<D> | null>(null);
   private _overlayRef: OverlayRef | null = null;
   private _portal: TemplatePortal<unknown> | null = null;
   private _optionsCacheKey: string | null = null;
@@ -269,7 +295,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
   }
 
   /** Registers an input with the timepicker. */
-  registerInput(input: MatTimepickerInput<D>): void {
+  registerInput(input: MatTimepickerConnectedInput<D>): void {
     const currentInput = this._input();
 
     if (currentInput && input !== currentInput && (typeof ngDevMode === 'undefined' || ngDevMode)) {
@@ -297,7 +323,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
       }
     });
     // Notify the input first so it can sync up the form control before emitting to `selected`.
-    this._input()?._timepickerValueAssigned(option.value);
+    this._input()?.timepickerValueAssigned(option.value);
     this.selected.emit({value: option.value, source: this});
     this._input()?.focus();
   }
@@ -307,7 +333,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
     if (this.ariaLabel()) {
       return null;
     }
-    return this.ariaLabelledby() || this._input()?._getLabelId() || null;
+    return this.ariaLabelledby() || this._input()?.getLabelId() || null;
   }
 
   /** Handles animation events coming from the panel. */