diff --git a/goldens/material/timepicker/index.api.md b/goldens/material/timepicker/index.api.md index f52481e228ab..d97326892cd0 100644 --- a/goldens/material/timepicker/index.api.md +++ b/goldens/material/timepicker/index.api.md @@ -59,7 +59,7 @@ export class MatTimepicker implements OnDestroy, MatOptionParentComponent { readonly panelId: string; // (undocumented) protected _panelTemplate: Signal>; - registerInput(input: MatTimepickerInput): void; + registerInput(input: MatTimepickerConnectedInput): void; readonly selected: OutputEmitterRef>; protected _selectValue(option: MatOption): void; // (undocumented) @@ -77,7 +77,19 @@ export interface MatTimepickerConfig { } // @public -export class MatTimepickerInput implements ControlValueAccessor, Validator, OnDestroy { +export interface MatTimepickerConnectedInput { + disabled: Signal; + focus(): void; + getLabelId(): string | null; + getOverlayOrigin(): ElementRef; + max: Signal; + min: Signal; + timepickerValueAssigned(value: D | null): void; + value: Signal; +} + +// @public +export class MatTimepickerInput implements MatTimepickerConnectedInput, ControlValueAccessor, Validator, OnDestroy { constructor(); protected readonly _ariaActiveDescendant: Signal; protected readonly _ariaControls: Signal; @@ -85,7 +97,7 @@ export class MatTimepickerInput implements ControlValueAccessor, Validator, O readonly disabled: Signal; readonly disabledInput: InputSignalWithTransform; focus(): void; - _getLabelId(): string | null; + getLabelId(): string | null; getOverlayOrigin(): ElementRef; protected _handleBlur(): void; protected _handleInput(event: Event): void; @@ -100,7 +112,7 @@ export class MatTimepickerInput implements ControlValueAccessor, Validator, O registerOnValidatorChange(fn: () => void): void; setDisabledState(isDisabled: boolean): void; readonly timepicker: InputSignal>; - _timepickerValueAssigned(value: D | null): void; + timepickerValueAssigned(value: D | null): void; validate(control: AbstractControl): ValidationErrors | null; readonly value: ModelSignal; writeValue(value: any): void; diff --git a/src/material/timepicker/timepicker-input.ts b/src/material/timepicker/timepicker-input.ts index 8e9d0106f55d..a6fbe28430b9 100644 --- a/src/material/timepicker/timepicker-input.ts +++ b/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 implements ControlValueAccessor, Validator, OnDestroy { +export class MatTimepickerInput + implements MatTimepickerConnectedInput, ControlValueAccessor, Validator, OnDestroy +{ private _elementRef = inject>(ElementRef); private _dateAdapter = inject>(DateAdapter, {optional: true})!; private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; @@ -258,7 +260,7 @@ export class MatTimepickerInput 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 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); diff --git a/src/material/timepicker/timepicker.ts b/src/material/timepicker/timepicker.ts index e5feb08a4854..042e0524a321 100644 --- a/src/material/timepicker/timepicker.ts +++ b/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 { + /** Current value of the input. */ + value: Signal; + + /** Minimum allowed time. */ + min: Signal; + + /** Maximum allowed time. */ + max: Signal; + + /** Whether the input is disabled. */ + disabled: Signal; + + /** Focuses the input. */ + focus(): void; + + /** Gets the element to which to connect the timepicker overlay. */ + getOverlayOrigin(): ElementRef; + + /** 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 implements OnDestroy, MatOptionParentComponent { private _isOpen = signal(false); private _activeDescendant = signal(null); - private _input = signal | null>(null); + private _input = signal | null>(null); private _overlayRef: OverlayRef | null = null; private _portal: TemplatePortal | null = null; private _optionsCacheKey: string | null = null; @@ -269,7 +295,7 @@ export class MatTimepicker implements OnDestroy, MatOptionParentComponent { } /** Registers an input with the timepicker. */ - registerInput(input: MatTimepickerInput): void { + registerInput(input: MatTimepickerConnectedInput): void { const currentInput = this._input(); if (currentInput && input !== currentInput && (typeof ngDevMode === 'undefined' || ngDevMode)) { @@ -297,7 +323,7 @@ export class MatTimepicker 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 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. */