diff --git a/goldens/material/core/index.api.md b/goldens/material/core/index.api.md index 7bb4d1cf2464..79cd166aff86 100644 --- a/goldens/material/core/index.api.md +++ b/goldens/material/core/index.api.md @@ -41,7 +41,7 @@ export function _animationsDisabled(): boolean; export function _countGroupLabelsBeforeOption(optionIndex: number, options: QueryList, optionGroups: QueryList): number; // @public -export abstract class DateAdapter { +export abstract class DateAdapter { abstract addCalendarDays(date: D, days: number): D; abstract addCalendarMonths(date: D, months: number): D; abstract addCalendarYears(date: D, years: number): D; @@ -51,8 +51,8 @@ export abstract class DateAdapter { compareDate(first: D, second: D): number; compareTime(first: D, second: D): number; abstract createDate(year: number, month: number, date: number): D; - deserialize(value: any): D | null; - abstract format(date: D, displayFormat: any): string; + deserialize(value: unknown): D | null; + abstract format(date: D, displayFormat: DisplayFormatType): string; abstract getDate(date: D): number; abstract getDateNames(): string[]; abstract getDayOfWeek(date: D): number; @@ -68,14 +68,14 @@ export abstract class DateAdapter { abstract getYear(date: D): number; abstract getYearName(date: D): string; abstract invalid(): D; - abstract isDateInstance(obj: any): boolean; + abstract isDateInstance(obj: unknown): obj is D; abstract isValid(date: D): boolean; protected locale: L; readonly localeChanges: Observable; // (undocumented) protected readonly _localeChanges: Subject; - abstract parse(value: any, parseFormat: any): D | null; - parseTime(value: any, parseFormat: any): D | null; + abstract parse(value: unknown, parseFormat: ParseFormatType): D | null; + parseTime(value: unknown, parseFormat: ParseFormatType): D | null; sameDate(first: D | null, second: D | null): boolean; sameTime(first: D | null, second: D | null): boolean; setLocale(locale: L): void; @@ -117,13 +117,13 @@ export function _getAnimationsState(): 'enabled' | 'di-disabled' | 'reduced-moti export function _getOptionScrollPosition(optionOffset: number, optionHeight: number, currentScrollPosition: number, panelHeight: number): number; // @public (undocumented) -export const MAT_DATE_FORMATS: InjectionToken; +export const MAT_DATE_FORMATS: InjectionToken>; // @public export const MAT_DATE_LOCALE: InjectionToken<{}>; // @public (undocumented) -export const MAT_NATIVE_DATE_FORMATS: MatDateFormats; +export const MAT_NATIVE_DATE_FORMATS: MatDateFormats; // @public export const MAT_OPTGROUP: InjectionToken; @@ -135,19 +135,19 @@ export const MAT_OPTION_PARENT_COMPONENT: InjectionToken; // @public (undocumented) -export type MatDateFormats = { +export type MatDateFormats = { parse: { - dateInput: any; - timeInput?: any; + dateInput: ParseFormatType; + timeInput: ParseFormatType; }; display: { - dateInput: any; - monthLabel?: any; - monthYearLabel: any; - dateA11yLabel: any; - monthYearA11yLabel: any; - timeInput?: any; - timeOptionLabel?: any; + dateInput: DisplayFormatType; + monthLabel?: DisplayFormatType; + monthYearLabel: DisplayFormatType; + dateA11yLabel: DisplayFormatType; + monthYearA11yLabel: DisplayFormatType; + timeInput?: DisplayFormatType; + timeOptionLabel?: DisplayFormatType; }; }; @@ -365,7 +365,7 @@ export class MatRippleModule { } // @public -export class NativeDateAdapter extends DateAdapter { +export class NativeDateAdapter extends DateAdapter { constructor(...args: unknown[]); // (undocumented) addCalendarDays(date: Date, days: number): Date; @@ -379,9 +379,9 @@ export class NativeDateAdapter extends DateAdapter { clone(date: Date): Date; // (undocumented) createDate(year: number, month: number, date: number): Date; - deserialize(value: any): Date | null; + deserialize(value: unknown): Date | null; // (undocumented) - format(date: Date, displayFormat: Object): string; + format(date: Date, displayFormat: Intl.DateTimeFormatOptions): string; // (undocumented) getDate(date: Date): number; // (undocumented) @@ -411,13 +411,13 @@ export class NativeDateAdapter extends DateAdapter { // (undocumented) invalid(): Date; // (undocumented) - isDateInstance(obj: any): obj is Date; + isDateInstance(obj: unknown): obj is Date; // (undocumented) isValid(date: Date): boolean; // (undocumented) - parse(value: any, parseFormat?: any): Date | null; + parse(value: unknown, _parseFormat?: null): Date | null; // (undocumented) - parseTime(userValue: any, parseFormat?: any): Date | null; + parseTime(userValue: unknown, _parseFormat?: null): Date | null; // (undocumented) setTime(target: Date, hours: number, minutes: number, seconds: number): Date; // (undocumented) @@ -441,7 +441,7 @@ export class NativeDateModule { } // @public (undocumented) -export function provideNativeDateAdapter(formats?: MatDateFormats): Provider[]; +export function provideNativeDateAdapter(formats?: MatDateFormats): Provider[]; // @public export interface RippleAnimationConfig { diff --git a/goldens/material/datepicker/index.api.md b/goldens/material/datepicker/index.api.md index f7d1db2fb8ff..3943ee995095 100644 --- a/goldens/material/datepicker/index.api.md +++ b/goldens/material/datepicker/index.api.md @@ -98,7 +98,7 @@ export const MAT_DATEPICKER_VALIDATORS: any; export const MAT_DATEPICKER_VALUE_ACCESSOR: any; // @public -export class MatCalendar implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges { +export class MatCalendar implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges { constructor(...args: unknown[]); get activeDate(): D; set activeDate(value: D); @@ -149,9 +149,9 @@ export class MatCalendar implements AfterContentInit, AfterViewChecked, OnDes _yearSelectedInMultiYearView(normalizedYear: D): void; yearView: MatYearView; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-calendar", ["matCalendar"], { "headerComponent": { "alias": "headerComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; "_userDragDrop": "_userDragDrop"; }, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-calendar", ["matCalendar"], { "headerComponent": { "alias": "headerComponent"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; "_userDragDrop": "_userDragDrop"; }, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public @@ -251,10 +251,10 @@ export type MatCalendarCellCssClasses = string | string[] | Set | { }; // @public -export class MatCalendarHeader { +export class MatCalendarHeader { constructor(...args: unknown[]); // (undocumented) - calendar: MatCalendar; + calendar: MatCalendar; currentPeriodClicked(): void; get nextButtonLabel(): string; nextClicked(): void; @@ -268,9 +268,9 @@ export class MatCalendarHeader { previousClicked(): void; previousEnabled(): boolean; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-calendar-header", ["matCalendarHeader"], {}, {}, never, ["*"], true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-calendar-header", ["matCalendarHeader"], {}, {}, never, ["*"], true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public @@ -322,7 +322,7 @@ export class MatDatepickerApply { export class MatDatepickerCancel { constructor(...args: unknown[]); // (undocumented) - _datepicker: MatDatepickerBase, unknown, {}>; + _datepicker: MatDatepickerBase, unknown, {}, any, string, string>; // (undocumented) static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) @@ -330,7 +330,7 @@ export class MatDatepickerCancel { } // @public -export class MatDatepickerContent> implements AfterViewInit, OnDestroy { +export class MatDatepickerContent, L = any, DisplayFormatType = string, ParseFormatType = DisplayFormatType> implements AfterViewInit, OnDestroy { constructor(...args: unknown[]); _actionsPortal: TemplatePortal | null; readonly _animationDone: Subject; @@ -344,7 +344,7 @@ export class MatDatepickerContent> implem color: ThemePalette; comparisonEnd: D | null; comparisonStart: D | null; - datepicker: MatDatepickerBase; + datepicker: MatDatepickerBase; _dialogLabelId: string | null; // (undocumented) protected _elementRef: ElementRef; @@ -365,9 +365,9 @@ export class MatDatepickerContent> implem // (undocumented) _startExitAnimation(): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-datepicker-content", ["matDatepickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-datepicker-content", ["matDatepickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public @@ -431,9 +431,9 @@ export class MatDatepickerInput extends MatDatepickerInputBase i // @public export class MatDatepickerInputEvent { constructor( - target: MatDatepickerInputBase, + target: MatDatepickerInputBase, targetElement: HTMLElement); - target: MatDatepickerInputBase; + target: MatDatepickerInputBase; targetElement: HTMLElement; value: D | null; } @@ -527,7 +527,7 @@ export class MatDatepickerToggleIcon { } // @public (undocumented) -export class MatDateRangeInput implements MatFormFieldControl>, MatDatepickerControl, MatDateRangePickerInput, AfterContentInit, OnChanges, OnDestroy { +export class MatDateRangeInput implements MatFormFieldControl>, MatDatepickerControl, MatDateRangePickerInput, AfterContentInit, OnChanges, OnDestroy { constructor(...args: unknown[]); _ariaDescribedBy: string | null; _ariaOwns: i0.WritableSignal; @@ -592,9 +592,9 @@ export class MatDateRangeInput implements MatFormFieldControl>, _updateFocus(origin: FocusOrigin): void; get value(): DateRange | null; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": { "alias": "rangePicker"; "required": false; }; "required": { "alias": "required"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; }, {}, never, ["input[matStartDate]", "input[matEndDate]"], true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-date-range-input", ["matDateRangeInput"], { "rangePicker": { "alias": "rangePicker"; "required": false; }; "required": { "alias": "required"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; }, {}, never, ["input[matStartDate]", "input[matEndDate]"], true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public @@ -658,7 +658,7 @@ export class MatEndDate extends MatDateRangeInputPartBase { } // @public -export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { +export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { constructor(...args: unknown[]); get activeDate(): D; set activeDate(value: D); @@ -671,7 +671,7 @@ export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { _comparisonRangeStart: i0.WritableSignal; comparisonStart: D | null; // (undocumented) - _dateAdapter: DateAdapter; + _dateAdapter: DateAdapter; dateClass: MatCalendarCellClassFunction; dateFilter: ((date: D) => boolean) | null | undefined; _dateSelected(event: MatCalendarUserEvent): void; @@ -717,19 +717,19 @@ export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { }[]>; _weeks: i0.WritableSignal[][]>; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-month-view", ["matMonthView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; "comparisonStart": { "alias": "comparisonStart"; "required": false; }; "comparisonEnd": { "alias": "comparisonEnd"; "required": false; }; "startDateAccessibleName": { "alias": "startDateAccessibleName"; "required": false; }; "endDateAccessibleName": { "alias": "endDateAccessibleName"; "required": false; }; "activeDrag": { "alias": "activeDrag"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "dragStarted": "dragStarted"; "dragEnded": "dragEnded"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public -export class MatMultiYearView implements AfterContentInit, OnDestroy { +export class MatMultiYearView implements AfterContentInit, OnDestroy { constructor(...args: unknown[]); get activeDate(): D; set activeDate(value: D); readonly activeDateChange: EventEmitter; // (undocumented) - _dateAdapter: DateAdapter; + _dateAdapter: DateAdapter; dateClass: MatCalendarCellClassFunction; dateFilter: ((date: D) => boolean) | null | undefined; _focusActiveCell(): void; @@ -758,9 +758,9 @@ export class MatMultiYearView implements AfterContentInit, OnDestroy { readonly yearSelected: EventEmitter; _yearSelected(event: MatCalendarUserEvent): void; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-multi-year-view", ["matMultiYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-multi-year-view", ["matMultiYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public @@ -810,7 +810,7 @@ export class MatStartDate extends MatDateRangeInputPartBase { } // @public -export class MatYearView implements AfterContentInit, OnDestroy { +export class MatYearView implements AfterContentInit, OnDestroy { constructor(...args: unknown[]); get activeDate(): D; set activeDate(value: D); @@ -818,7 +818,7 @@ export class MatYearView implements AfterContentInit, OnDestroy { // (undocumented) readonly _changeDetectorRef: ChangeDetectorRef; // (undocumented) - _dateAdapter: DateAdapter; + _dateAdapter: DateAdapter; dateClass: MatCalendarCellClassFunction; dateFilter: ((date: D) => boolean) | null | undefined; _focusActiveCell(): void; @@ -846,9 +846,9 @@ export class MatYearView implements AfterContentInit, OnDestroy { _updateActiveDate(event: MatCalendarUserEvent): void; _yearLabel: i0.WritableSignal; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-year-view", ["matYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-year-view", ["matYearView"], { "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public (undocumented) diff --git a/goldens/material/timepicker/index.api.md b/goldens/material/timepicker/index.api.md index d97326892cd0..06f602088d72 100644 --- a/goldens/material/timepicker/index.api.md +++ b/goldens/material/timepicker/index.api.md @@ -17,7 +17,6 @@ import * as i1 from '@angular/cdk/scrolling'; import { InjectionToken } from '@angular/core'; import { InputSignal } from '@angular/core'; import { InputSignalWithTransform } from '@angular/core'; -import { ModelSignal } from '@angular/core'; import { OnDestroy } from '@angular/core'; import { OutputEmitterRef } from '@angular/core'; import { ScrollStrategy } from '@angular/cdk/overlay'; @@ -34,7 +33,7 @@ export const MAT_TIMEPICKER_CONFIG: InjectionToken; export const MAT_TIMEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>; // @public -export class MatTimepicker implements OnDestroy, MatOptionParentComponent { +export class MatTimepicker implements OnDestroy, MatOptionParentComponent { constructor(); readonly activeDescendant: Signal; // (undocumented) @@ -60,14 +59,14 @@ export class MatTimepicker implements OnDestroy, MatOptionParentComponent { // (undocumented) protected _panelTemplate: Signal>; registerInput(input: MatTimepickerConnectedInput): void; - readonly selected: OutputEmitterRef>; + readonly selected: OutputEmitterRef>; protected _selectValue(option: MatOption): void; // (undocumented) protected _timeOptions: readonly MatTimepickerOption[]; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration, "mat-timepicker", ["matTimepicker"], { "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>; + static ɵcmp: i0.ɵɵComponentDeclaration, "mat-timepicker", ["matTimepicker"], { "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public @@ -89,7 +88,7 @@ export interface MatTimepickerConnectedInput { } // @public -export class MatTimepickerInput implements MatTimepickerConnectedInput, ControlValueAccessor, Validator, OnDestroy { +export class MatTimepickerInput implements MatTimepickerConnectedInput, ControlValueAccessor, Validator, OnDestroy { constructor(); protected readonly _ariaActiveDescendant: Signal; protected readonly _ariaControls: Signal; @@ -111,15 +110,15 @@ export class MatTimepickerInput implements MatTimepickerConnectedInput, Co registerOnTouched(fn: () => void): void; registerOnValidatorChange(fn: () => void): void; setDisabledState(isDisabled: boolean): void; - readonly timepicker: InputSignal>; + readonly timepicker: i0.InputSignal>; timepickerValueAssigned(value: D | null): void; validate(control: AbstractControl): ValidationErrors | null; - readonly value: ModelSignal; + readonly value: i0.ModelSignal; writeValue(value: any): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration, "input[matTimepicker]", ["matTimepickerInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "timepicker": { "alias": "matTimepicker"; "required": true; "isSignal": true; }; "min": { "alias": "matTimepickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "matTimepickerMax"; "required": false; "isSignal": true; }; "openOnClick": { "alias": "matTimepickerOpenOnClick"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>; + static ɵdir: i0.ɵɵDirectiveDeclaration, "input[matTimepicker]", ["matTimepickerInput"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "timepicker": { "alias": "matTimepicker"; "required": true; "isSignal": true; }; "min": { "alias": "matTimepickerMin"; "required": false; "isSignal": true; }; "max": { "alias": "matTimepickerMax"; "required": false; "isSignal": true; }; "openOnClick": { "alias": "matTimepickerOpenOnClick"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>; // (undocumented) - static ɵfac: i0.ɵɵFactoryDeclaration, never>; + static ɵfac: i0.ɵɵFactoryDeclaration, never>; } // @public (undocumented) @@ -139,9 +138,9 @@ export interface MatTimepickerOption { } // @public -export interface MatTimepickerSelected { +export interface MatTimepickerSelected { // (undocumented) - source: MatTimepicker; + source: MatTimepicker; // (undocumented) value: D; } diff --git a/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts b/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts index 3041202adb57..ed692540b536 100644 --- a/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts +++ b/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts @@ -11,6 +11,7 @@ import {DateTime} from 'luxon'; export const MY_FORMATS = { parse: { dateInput: 'DDD', + timeInput: 'HH:mm', }, display: { dateInput: 'DDD', diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts index f27daf95e608..d9668261cd17 100644 --- a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts +++ b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts @@ -11,6 +11,7 @@ import {DateTime} from 'luxon'; export const MY_FORMATS = { parse: { dateInput: 'MM/yyyy', + timeInput: 'HH:mm', }, display: { dateInput: 'MM/yyyy', diff --git a/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts b/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts index aa4973e3e419..98b4e3ef7336 100644 --- a/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts +++ b/src/material-date-fns-adapter/adapter/date-fns-adapter.spec.ts @@ -18,7 +18,7 @@ const JAN = 0, DEC = 11; describe('DateFnsAdapter', () => { - let adapter: DateAdapter; + let adapter: DateAdapter; beforeEach(() => { TestBed.configureTestingModule({imports: [DateFnsModule]}); diff --git a/src/material-date-fns-adapter/adapter/date-fns-adapter.ts b/src/material-date-fns-adapter/adapter/date-fns-adapter.ts index 3201880f33dc..912f9d7354d9 100644 --- a/src/material-date-fns-adapter/adapter/date-fns-adapter.ts +++ b/src/material-date-fns-adapter/adapter/date-fns-adapter.ts @@ -56,13 +56,15 @@ const DAY_OF_WEEK_FORMATS = { /** Adds date-fns support to Angular Material. */ @Injectable() -export class DateFnsAdapter extends DateAdapter { +export class DateFnsAdapter extends DateAdapter { constructor(...args: unknown[]); constructor() { super(); - const matDateLocale = inject(MAT_DATE_LOCALE, {optional: true}); - this.setLocale(matDateLocale as Locale); + const matDateLocale = inject(MAT_DATE_LOCALE, {optional: true}); + if (matDateLocale) { + this.setLocale(matDateLocale); + } } getYear(date: Date): number { diff --git a/src/material-date-fns-adapter/adapter/date-fns-formats.ts b/src/material-date-fns-adapter/adapter/date-fns-formats.ts index fa99a6d4823d..f6489146eb04 100644 --- a/src/material-date-fns-adapter/adapter/date-fns-formats.ts +++ b/src/material-date-fns-adapter/adapter/date-fns-formats.ts @@ -8,7 +8,7 @@ import {MatDateFormats} from '@angular/material/core'; -export const MAT_DATE_FNS_FORMATS: MatDateFormats = { +export const MAT_DATE_FNS_FORMATS: MatDateFormats = { parse: { dateInput: 'P', timeInput: 'p', diff --git a/src/material-date-fns-adapter/adapter/index.ts b/src/material-date-fns-adapter/adapter/index.ts index 700c2235f549..c1510b588d68 100644 --- a/src/material-date-fns-adapter/adapter/index.ts +++ b/src/material-date-fns-adapter/adapter/index.ts @@ -7,7 +7,7 @@ */ import {NgModule, Provider} from '@angular/core'; -import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; +import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core'; import {DateFnsAdapter} from './date-fns-adapter'; import {MAT_DATE_FNS_FORMATS} from './date-fns-formats'; @@ -29,7 +29,7 @@ export class DateFnsModule {} }) export class MatDateFnsModule {} -export function provideDateFnsAdapter(formats: MatDateFormats = MAT_DATE_FNS_FORMATS): Provider[] { +export function provideDateFnsAdapter(formats = MAT_DATE_FNS_FORMATS): Provider[] { return [ { provide: DateAdapter, diff --git a/src/material-luxon-adapter/adapter/index.ts b/src/material-luxon-adapter/adapter/index.ts index bd7fe020d0ac..9bf913025207 100644 --- a/src/material-luxon-adapter/adapter/index.ts +++ b/src/material-luxon-adapter/adapter/index.ts @@ -7,7 +7,7 @@ */ import {NgModule, Provider} from '@angular/core'; -import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; +import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core'; import {LuxonDateAdapter} from './luxon-date-adapter'; import {MAT_LUXON_DATE_FORMATS} from './luxon-date-formats'; @@ -29,9 +29,7 @@ export class LuxonDateModule {} }) export class MatLuxonDateModule {} -export function provideLuxonDateAdapter( - formats: MatDateFormats = MAT_LUXON_DATE_FORMATS, -): Provider[] { +export function provideLuxonDateAdapter(formats = MAT_LUXON_DATE_FORMATS): Provider[] { return [ { provide: DateAdapter, diff --git a/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts b/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts index 962ea66ee11f..f6d13c0a61b0 100644 --- a/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts +++ b/src/material-luxon-adapter/adapter/luxon-date-adapter.spec.ts @@ -19,7 +19,7 @@ const JAN = 1, DEC = 12; describe('LuxonDateAdapter', () => { - let adapter: DateAdapter; + let adapter: DateAdapter; beforeEach(() => { TestBed.configureTestingModule({imports: [LuxonDateModule]}); diff --git a/src/material-luxon-adapter/adapter/luxon-date-adapter.ts b/src/material-luxon-adapter/adapter/luxon-date-adapter.ts index b0a7b26cd805..d6e6d6ffd717 100644 --- a/src/material-luxon-adapter/adapter/luxon-date-adapter.ts +++ b/src/material-luxon-adapter/adapter/luxon-date-adapter.ts @@ -59,7 +59,12 @@ function range(length: number, valueFunction: (index: number) => T): T[] { /** Adapts Luxon Dates for use with Angular Material. */ @Injectable() -export class LuxonDateAdapter extends DateAdapter { +export class LuxonDateAdapter extends DateAdapter< + LuxonDateTime, + string, + string, + string | string[] +> { private _useUTC: boolean; private _firstDayOfWeek: number | undefined; private _defaultOutputCalendar: LuxonCalendarSystem; @@ -69,7 +74,7 @@ export class LuxonDateAdapter extends DateAdapter { constructor() { super(); - const dateLocale = inject(MAT_DATE_LOCALE, {optional: true}); + const dateLocale = inject(MAT_DATE_LOCALE, {optional: true}); const options = inject(MAT_LUXON_DATE_ADAPTER_OPTIONS, { optional: true, }); diff --git a/src/material-luxon-adapter/adapter/luxon-date-formats.ts b/src/material-luxon-adapter/adapter/luxon-date-formats.ts index 5b6b88ffec90..223c6d17e543 100644 --- a/src/material-luxon-adapter/adapter/luxon-date-formats.ts +++ b/src/material-luxon-adapter/adapter/luxon-date-formats.ts @@ -8,7 +8,7 @@ import {MatDateFormats} from '@angular/material/core'; -export const MAT_LUXON_DATE_FORMATS: MatDateFormats = { +export const MAT_LUXON_DATE_FORMATS: MatDateFormats = { parse: { dateInput: 'D', timeInput: 't', diff --git a/src/material-moment-adapter/adapter/index.ts b/src/material-moment-adapter/adapter/index.ts index 089e1239c519..651a3dbe1b6f 100644 --- a/src/material-moment-adapter/adapter/index.ts +++ b/src/material-moment-adapter/adapter/index.ts @@ -7,7 +7,7 @@ */ import {NgModule, Provider} from '@angular/core'; -import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core'; +import {DateAdapter, MAT_DATE_FORMATS} from '@angular/material/core'; import { MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateAdapterOptions, @@ -34,7 +34,7 @@ export class MomentDateModule {} export class MatMomentDateModule {} export function provideMomentDateAdapter( - formats: MatDateFormats = MAT_MOMENT_DATE_FORMATS, + formats = MAT_MOMENT_DATE_FORMATS, options?: MatMomentDateAdapterOptions, ): Provider[] { const providers: Provider[] = [ diff --git a/src/material-moment-adapter/adapter/moment-date-adapter.ts b/src/material-moment-adapter/adapter/moment-date-adapter.ts index 29a8c557d9ed..247f31ea9fea 100644 --- a/src/material-moment-adapter/adapter/moment-date-adapter.ts +++ b/src/material-moment-adapter/adapter/moment-date-adapter.ts @@ -55,7 +55,12 @@ function range(length: number, valueFunction: (index: number) => T): T[] { /** Adapts Moment.js Dates for use with Angular Material. */ @Injectable() -export class MomentDateAdapter extends DateAdapter { +export class MomentDateAdapter extends DateAdapter< + Moment, + string, + string, + MomentFormatSpecification +> { private _options = inject(MAT_MOMENT_DATE_ADAPTER_OPTIONS, { optional: true, }); @@ -176,14 +181,14 @@ export class MomentDateAdapter extends DateAdapter { return this._createMoment().locale(this.locale); } - parse(value: unknown, parseFormat: string | string[]): Moment | null { + parse(value: unknown, parseFormat: MomentFormatSpecification): Moment | null { if (value && typeof value == 'string') { return this._createMoment(value, parseFormat, this.locale); } return value ? this._createMoment(value).locale(this.locale) : null; } - format(date: Moment, displayFormat: string): string { + format(date: Moment, displayFormat: string | undefined): string { date = this.clone(date); if (!this.isValid(date) && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('MomentDateAdapter: Cannot format invalid date.'); @@ -274,7 +279,7 @@ export class MomentDateAdapter extends DateAdapter { return date.seconds(); } - override parseTime(value: unknown, parseFormat: string | string[]): Moment | null { + override parseTime(value: unknown, parseFormat: MomentFormatSpecification): Moment | null { return this.parse(value, parseFormat); } diff --git a/src/material-moment-adapter/adapter/moment-date-formats.ts b/src/material-moment-adapter/adapter/moment-date-formats.ts index c81ae1b64875..425089730d63 100644 --- a/src/material-moment-adapter/adapter/moment-date-formats.ts +++ b/src/material-moment-adapter/adapter/moment-date-formats.ts @@ -7,8 +7,12 @@ */ import {MatDateFormats} from '@angular/material/core'; +import {MomentFormatSpecification} from 'moment'; -export const MAT_MOMENT_DATE_FORMATS: MatDateFormats = { +export const MAT_MOMENT_DATE_FORMATS: MatDateFormats< + string | undefined, + MomentFormatSpecification +> = { parse: { dateInput: 'l', timeInput: 'LT', diff --git a/src/material/core/datetime/date-adapter.ts b/src/material/core/datetime/date-adapter.ts index de4837c62083..a804c973d550 100644 --- a/src/material/core/datetime/date-adapter.ts +++ b/src/material/core/datetime/date-adapter.ts @@ -18,7 +18,12 @@ export const MAT_DATE_LOCALE = new InjectionToken<{}>('MAT_DATE_LOCALE', { const NOT_IMPLEMENTED = 'Method not implemented'; /** Adapts type `D` to be usable as a date by cdk-based components that work with dates. */ -export abstract class DateAdapter { +export abstract class DateAdapter< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +> { /** The locale to use for all dates. */ protected locale: L; protected readonly _localeChanges = new Subject(); @@ -124,7 +129,7 @@ export abstract class DateAdapter { * (type is implementation-dependent). * @returns The parsed date. */ - abstract parse(value: any, parseFormat: any): D | null; + abstract parse(value: unknown, parseFormat: ParseFormatType): D | null; /** * Formats a date as a string according to the given format. @@ -132,7 +137,7 @@ export abstract class DateAdapter { * @param displayFormat The format to use to display the date as a string. * @returns The formatted date string. */ - abstract format(date: D, displayFormat: any): string; + abstract format(date: D, displayFormat: DisplayFormatType): string; /** * Adds the given number of years to the date. Years are counted as if flipping 12 pages on the @@ -177,7 +182,7 @@ export abstract class DateAdapter { * @param obj The object to check * @returns Whether the object is a date instance. */ - abstract isDateInstance(obj: any): boolean; + abstract isDateInstance(obj: unknown): obj is D; /** * Checks whether the given date is valid. @@ -233,7 +238,7 @@ export abstract class DateAdapter { * @param parseFormat The expected format of the value being parsed * (type is implementation-dependent). */ - parseTime(value: any, parseFormat: any): D | null { + parseTime(value: unknown, parseFormat: ParseFormatType): D | null { throw new Error(NOT_IMPLEMENTED); } @@ -268,9 +273,9 @@ export abstract class DateAdapter { * @returns The deserialized date object, either a valid date, null if the value can be * deserialized into a null date (e.g. the empty string), or an invalid date. */ - deserialize(value: any): D | null { + deserialize(value: unknown): D | null { if (value == null || (this.isDateInstance(value) && this.isValid(value))) { - return value; + return value as D | null; } return this.invalid(); } diff --git a/src/material/core/datetime/date-formats.ts b/src/material/core/datetime/date-formats.ts index 25dbd15fb386..25c9981d1161 100644 --- a/src/material/core/datetime/date-formats.ts +++ b/src/material/core/datetime/date-formats.ts @@ -8,19 +8,19 @@ import {InjectionToken} from '@angular/core'; -export type MatDateFormats = { +export type MatDateFormats = { parse: { - dateInput: any; - timeInput?: any; + dateInput: ParseFormatType; + timeInput: ParseFormatType; }; display: { - dateInput: any; - monthLabel?: any; - monthYearLabel: any; - dateA11yLabel: any; - monthYearA11yLabel: any; - timeInput?: any; - timeOptionLabel?: any; + dateInput: DisplayFormatType; + monthLabel?: DisplayFormatType; + monthYearLabel: DisplayFormatType; + dateA11yLabel: DisplayFormatType; + monthYearA11yLabel: DisplayFormatType; + timeInput?: DisplayFormatType; + timeOptionLabel?: DisplayFormatType; }; }; diff --git a/src/material/core/datetime/index.ts b/src/material/core/datetime/index.ts index 1df5d5b9218d..550dd67d4042 100644 --- a/src/material/core/datetime/index.ts +++ b/src/material/core/datetime/index.ts @@ -8,7 +8,7 @@ import {NgModule, Provider} from '@angular/core'; import {DateAdapter} from './date-adapter'; -import {MAT_DATE_FORMATS, MatDateFormats} from './date-formats'; +import {MAT_DATE_FORMATS} from './date-formats'; import {NativeDateAdapter} from './native-date-adapter'; import {MAT_NATIVE_DATE_FORMATS} from './native-date-formats'; @@ -27,9 +27,7 @@ export class NativeDateModule {} }) export class MatNativeDateModule {} -export function provideNativeDateAdapter( - formats: MatDateFormats = MAT_NATIVE_DATE_FORMATS, -): Provider[] { +export function provideNativeDateAdapter(formats = MAT_NATIVE_DATE_FORMATS): Provider[] { return [ {provide: DateAdapter, useClass: NativeDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: formats}, diff --git a/src/material/core/datetime/native-date-adapter.ts b/src/material/core/datetime/native-date-adapter.ts index 2e956c10507d..11ce1726b260 100644 --- a/src/material/core/datetime/native-date-adapter.ts +++ b/src/material/core/datetime/native-date-adapter.ts @@ -41,22 +41,24 @@ function range(length: number, valueFunction: (index: number) => T): T[] { /** Adapts the native JS Date for use with cdk-based components that work with dates. */ @Injectable() -export class NativeDateAdapter extends DateAdapter { +export class NativeDateAdapter extends DateAdapter { /** The injected locale. */ - private readonly _matDateLocale = inject(MAT_DATE_LOCALE, {optional: true}); + private readonly _matDateLocale = inject(MAT_DATE_LOCALE, {optional: true}); constructor(...args: unknown[]); constructor() { super(); - const matDateLocale = inject(MAT_DATE_LOCALE, {optional: true}); + const matDateLocale = inject(MAT_DATE_LOCALE, {optional: true}); if (matDateLocale !== undefined) { this._matDateLocale = matDateLocale; } - super.setLocale(this._matDateLocale); + if (this._matDateLocale) { + super.setLocale(this._matDateLocale); + } } getYear(date: Date): number { @@ -153,16 +155,16 @@ export class NativeDateAdapter extends DateAdapter { return new Date(); } - parse(value: any, parseFormat?: any): Date | null { + parse(value: unknown, _parseFormat?: null): Date | null { // We have no way using the native JS Date to set the parse format or locale, so we ignore these // parameters. if (typeof value == 'number') { return new Date(value); } - return value ? new Date(Date.parse(value)) : null; + return value ? new Date(Date.parse(String(value))) : null; } - format(date: Date, displayFormat: Object): string { + format(date: Date, displayFormat: Intl.DateTimeFormatOptions): string { if (!this.isValid(date)) { throw Error('NativeDateAdapter: Cannot format invalid date.'); } @@ -214,7 +216,7 @@ export class NativeDateAdapter extends DateAdapter { * (https://www.ietf.org/rfc/rfc3339.txt) into valid Dates and empty string into null. Returns an * invalid date for all other values. */ - override deserialize(value: any): Date | null { + override deserialize(value: unknown): Date | null { if (typeof value === 'string') { if (!value) { return null; @@ -231,11 +233,11 @@ export class NativeDateAdapter extends DateAdapter { return super.deserialize(value); } - isDateInstance(obj: any) { + isDateInstance(obj: unknown): obj is Date { return obj instanceof Date; } - isValid(date: Date) { + isValid(date: Date): boolean { return !isNaN(date.getTime()); } @@ -275,7 +277,7 @@ export class NativeDateAdapter extends DateAdapter { return date.getSeconds(); } - override parseTime(userValue: any, parseFormat?: any): Date | null { + override parseTime(userValue: unknown, _parseFormat?: null): Date | null { if (typeof userValue !== 'string') { return userValue instanceof Date ? new Date(userValue.getTime()) : null; } diff --git a/src/material/core/datetime/native-date-formats.ts b/src/material/core/datetime/native-date-formats.ts index 792c3fded8e5..ab65f77e877b 100644 --- a/src/material/core/datetime/native-date-formats.ts +++ b/src/material/core/datetime/native-date-formats.ts @@ -8,7 +8,7 @@ import {MatDateFormats} from './date-formats'; -export const MAT_NATIVE_DATE_FORMATS: MatDateFormats = { +export const MAT_NATIVE_DATE_FORMATS: MatDateFormats = { parse: { dateInput: null, timeInput: null, diff --git a/src/material/datepicker/calendar.ts b/src/material/datepicker/calendar.ts index 436070604eae..c4427acb4b57 100644 --- a/src/material/datepicker/calendar.ts +++ b/src/material/datepicker/calendar.ts @@ -60,11 +60,22 @@ export type MatCalendarView = 'month' | 'year' | 'multi-year'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButton, MatIconButton, MatTooltip], }) -export class MatCalendarHeader { +export class MatCalendarHeader< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +> { private _intl = inject(MatDatepickerIntl); calendar = inject>(MatCalendar); - private _dateAdapter = inject>(DateAdapter, {optional: true})!; - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; + private _dateAdapter = inject>( + DateAdapter, + {optional: true}, + )!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + )!; private _periodButtonText: string; private _periodButtonDescription: string; private _periodButtonLabel: string; @@ -258,9 +269,22 @@ export class MatCalendarHeader { providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER], imports: [CdkPortalOutlet, CdkMonitorFocus, MatMonthView, MatYearView, MatMultiYearView], }) -export class MatCalendar implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges { - private _dateAdapter = inject>(DateAdapter, {optional: true})!; - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true}); +export class MatCalendar< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > + implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges +{ + private _dateAdapter = inject>( + DateAdapter, + {optional: true}, + )!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + ); private _changeDetectorRef = inject(ChangeDetectorRef); private _elementRef = inject>(ElementRef); diff --git a/src/material/datepicker/date-range-input.ts b/src/material/datepicker/date-range-input.ts index 86992cb617c4..ac5d66bae43e 100644 --- a/src/material/datepicker/date-range-input.ts +++ b/src/material/datepicker/date-range-input.ts @@ -55,7 +55,12 @@ import {DateFilterFn, _MatFormFieldPartial, dateInputsHaveChanged} from './datep providers: [{provide: MatFormFieldControl, useExisting: MatDateRangeInput}], imports: [CdkMonitorFocus], }) -export class MatDateRangeInput +export class MatDateRangeInput< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > implements MatFormFieldControl>, MatDatepickerControl, @@ -66,7 +71,10 @@ export class MatDateRangeInput { private _changeDetectorRef = inject(ChangeDetectorRef); private _elementRef = inject>(ElementRef); - private _dateAdapter = inject>(DateAdapter, {optional: true})!; + private _dateAdapter = inject>( + DateAdapter, + {optional: true}, + )!; private _formField = inject<_MatFormFieldPartial>(MAT_FORM_FIELD, {optional: true}); private _closedSubscription = Subscription.EMPTY; diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts index 657923acc31e..15980c15a5a2 100644 --- a/src/material/datepicker/datepicker-base.ts +++ b/src/material/datepicker/datepicker-base.ts @@ -120,14 +120,21 @@ export type DatepickerDropdownPositionY = 'above' | 'below'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus, MatCalendar, CdkPortalOutlet, MatButton], }) -export class MatDatepickerContent> +export class MatDatepickerContent< + S, + D = ExtractDateTypeFromSelection, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > implements AfterViewInit, OnDestroy { protected _elementRef = inject>(ElementRef); protected _animationsDisabled = _animationsDisabled(); private _changeDetectorRef = inject(ChangeDetectorRef); private _globalModel = inject>(MatDateSelectionModel); - private _dateAdapter = inject>(DateAdapter)!; + private _dateAdapter = + inject>(DateAdapter)!; private _ngZone = inject(NgZone); private _rangeSelectionStrategy = inject>( MAT_DATE_RANGE_SELECTION_STRATEGY, @@ -152,7 +159,7 @@ export class MatDatepickerContent> @Input() color: ThemePalette; /** Reference to the datepicker that created the overlay. */ - datepicker: MatDatepickerBase; + datepicker: MatDatepickerBase; /** Start of the comparison range. */ comparisonStart: D | null; @@ -371,12 +378,18 @@ export abstract class MatDatepickerBase< C extends MatDatepickerControl, S, D = ExtractDateTypeFromSelection, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, > implements MatDatepickerPanel, OnDestroy, OnChanges { private _injector = inject(Injector); private _viewContainerRef = inject(ViewContainerRef); - private _dateAdapter = inject>(DateAdapter, {optional: true})!; + private _dateAdapter = inject>( + DateAdapter, + {optional: true}, + )!; private _dir = inject(Directionality, {optional: true}); private _model = inject>(MatDateSelectionModel); private _animationsDisabled = _animationsDisabled(); @@ -532,7 +545,9 @@ export abstract class MatDatepickerBase< private _overlayRef: OverlayRef | null; /** Reference to the component instance rendered in the overlay. */ - private _componentRef: ComponentRef> | null; + private _componentRef: ComponentRef< + MatDatepickerContent + > | null; /** The element that was focused before the datepicker was opened. */ private _focusedElementBeforeOpen: HTMLElement | null = null; @@ -726,7 +741,9 @@ export abstract class MatDatepickerBase< } /** Forwards relevant values from the datepicker to the datepicker content inside the overlay. */ - protected _forwardContentValues(instance: MatDatepickerContent) { + protected _forwardContentValues( + instance: MatDatepickerContent, + ) { instance.datepicker = this; instance.color = this.color; instance._dialogLabelId = this.datepickerInput.getOverlayLabelId(); @@ -738,10 +755,9 @@ export abstract class MatDatepickerBase< this._destroyOverlay(); const isDialog = this.touchUi; - const portal = new ComponentPortal>( - MatDatepickerContent, - this._viewContainerRef, - ); + const portal = new ComponentPortal< + MatDatepickerContent + >(MatDatepickerContent, this._viewContainerRef); const overlayRef = (this._overlayRef = createOverlayRef( this._injector, new OverlayConfig({ diff --git a/src/material/datepicker/datepicker-input-base.ts b/src/material/datepicker/datepicker-input-base.ts index 01de0feb77b5..e31f781f2613 100644 --- a/src/material/datepicker/datepicker-input-base.ts +++ b/src/material/datepicker/datepicker-input-base.ts @@ -47,7 +47,7 @@ export class MatDatepickerInputEvent { constructor( /** Reference to the datepicker input component that emitted the event. */ - public target: MatDatepickerInputBase, + public target: MatDatepickerInputBase, /** Reference to the native input element associated with the datepicker input. */ public targetElement: HTMLElement, ) { @@ -78,12 +78,23 @@ export interface _MatFormFieldPartial { /** Base class for datepicker inputs. */ @Directive() -export abstract class MatDatepickerInputBase> +export abstract class MatDatepickerInputBase< + S, + D = ExtractDateTypeFromSelection, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > implements ControlValueAccessor, AfterViewInit, OnChanges, OnDestroy, Validator { protected _elementRef = inject>(ElementRef); - _dateAdapter = inject>(DateAdapter, {optional: true})!; - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; + _dateAdapter = inject>(DateAdapter, { + optional: true, + })!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + )!; /** Whether the component has been initialized. */ private _isInitialized: boolean; @@ -126,14 +137,10 @@ export abstract class MatDatepickerInputBase`. */ - @Output() readonly dateChange: EventEmitter> = new EventEmitter< - MatDatepickerInputEvent - >(); + @Output() readonly dateChange = new EventEmitter>(); /** Emits when an `input` event is fired on this ``. */ - @Output() readonly dateInput: EventEmitter> = new EventEmitter< - MatDatepickerInputEvent - >(); + @Output() readonly dateInput = new EventEmitter>(); /** Emits when the internal state has changed */ readonly stateChanges = new Subject(); @@ -419,7 +426,7 @@ export abstract class MatDatepickerInputBase, + adapter: DateAdapter, ): boolean { const keys = Object.keys(changes); diff --git a/src/material/datepicker/month-view.ts b/src/material/datepicker/month-view.ts index 6631c3b3360b..b922826aacbd 100644 --- a/src/material/datepicker/month-view.ts +++ b/src/material/datepicker/month-view.ts @@ -70,10 +70,22 @@ let uniqueIdCounter = 0; changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCalendarBody], }) -export class MatMonthView implements AfterContentInit, OnChanges, OnDestroy { +export class MatMonthView< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > + implements AfterContentInit, OnChanges, OnDestroy +{ readonly _changeDetectorRef = inject(ChangeDetectorRef); - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; - _dateAdapter = inject>(DateAdapter, {optional: true})!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + )!; + _dateAdapter = inject>(DateAdapter, { + optional: true, + })!; private _dir = inject(Directionality, {optional: true}); private _rangeStrategy = inject>( MAT_DATE_RANGE_SELECTION_STRATEGY, diff --git a/src/material/datepicker/multi-year-view.ts b/src/material/datepicker/multi-year-view.ts index 6fd4c88b89a3..fc26877225d5 100644 --- a/src/material/datepicker/multi-year-view.ts +++ b/src/material/datepicker/multi-year-view.ts @@ -61,9 +61,18 @@ export const yearsPerRow = 4; changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCalendarBody], }) -export class MatMultiYearView implements AfterContentInit, OnDestroy { +export class MatMultiYearView< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > + implements AfterContentInit, OnDestroy +{ private _changeDetectorRef = inject(ChangeDetectorRef); - _dateAdapter = inject>(DateAdapter, {optional: true})!; + _dateAdapter = inject>(DateAdapter, { + optional: true, + })!; private _dir = inject(Directionality, {optional: true}); private _rerenderSubscription = Subscription.EMPTY; @@ -405,8 +414,13 @@ export class MatMultiYearView implements AfterContentInit, OnDestroy { } } -export function isSameMultiYearView( - dateAdapter: DateAdapter, +export function isSameMultiYearView< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +>( + dateAdapter: DateAdapter, date1: D, date2: D, minDate: D | null, @@ -426,8 +440,13 @@ export function isSameMultiYearView( * So we compute how many years are between the active year and the *slot* where our * "startingYear" will render when paged into view. */ -export function getActiveOffset( - dateAdapter: DateAdapter, +export function getActiveOffset< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +>( + dateAdapter: DateAdapter, activeDate: D, minDate: D | null, maxDate: D | null, @@ -440,8 +459,13 @@ export function getActiveOffset( * We pick a "starting" year such that either the maximum year would be at the end * or the minimum year would be at the beginning of a page. */ -function getStartingYear( - dateAdapter: DateAdapter, +function getStartingYear< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +>( + dateAdapter: DateAdapter, minDate: D | null, maxDate: D | null, ): number { diff --git a/src/material/datepicker/year-view.ts b/src/material/datepicker/year-view.ts index 89482b0b67b7..56f0487002ce 100644 --- a/src/material/datepicker/year-view.ts +++ b/src/material/datepicker/year-view.ts @@ -57,10 +57,22 @@ import {DateRange} from './date-selection-model'; changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatCalendarBody], }) -export class MatYearView implements AfterContentInit, OnDestroy { +export class MatYearView< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > + implements AfterContentInit, OnDestroy +{ readonly _changeDetectorRef = inject(ChangeDetectorRef); - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; - _dateAdapter = inject>(DateAdapter, {optional: true})!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + )!; + _dateAdapter = inject>(DateAdapter, { + optional: true, + })!; private _dir = inject(Directionality, {optional: true}); private _rerenderSubscription = Subscription.EMPTY; diff --git a/src/material/timepicker/testing/timepicker-input-harness.spec.ts b/src/material/timepicker/testing/timepicker-input-harness.spec.ts index 0e1f3af58cb9..8ce4b4c5ba38 100644 --- a/src/material/timepicker/testing/timepicker-input-harness.spec.ts +++ b/src/material/timepicker/testing/timepicker-input-harness.spec.ts @@ -10,7 +10,7 @@ import {MatTimepickerInputHarness} from './timepicker-input-harness'; describe('MatTimepickerInputHarness', () => { let fixture: ComponentFixture; let loader: HarnessLoader; - let adapter: DateAdapter; + let adapter: DateAdapter; beforeEach(() => { TestBed.configureTestingModule({providers: [provideNativeDateAdapter()]}); @@ -82,7 +82,7 @@ describe('MatTimepickerInputHarness', () => { spyOn(adapter, 'format').and.returnValue('FORMATTED_VALUE'); spyOn(adapter, 'isValid').and.callFake(value => validValues.includes(value)); spyOn(adapter, 'deserialize').and.callFake(value => - validValues.includes(value) ? value : null, + validValues.includes(value) ? value : (null as any), ); spyOn(adapter, 'getValidDateOrNull').and.callFake((value: Date) => adapter.isValid(value) ? value : null, diff --git a/src/material/timepicker/timepicker-input.ts b/src/material/timepicker/timepicker-input.ts index a6fbe28430b9..8a561c319f77 100644 --- a/src/material/timepicker/timepicker-input.ts +++ b/src/material/timepicker/timepicker-input.ts @@ -14,17 +14,15 @@ import { ElementRef, inject, input, - InputSignal, InputSignalWithTransform, model, - ModelSignal, OnDestroy, OutputRefSubscription, Renderer2, Signal, signal, } from '@angular/core'; -import {DateAdapter, MAT_DATE_FORMATS} from '../core'; +import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '../core'; import { AbstractControl, ControlValueAccessor, @@ -80,12 +78,23 @@ import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform'; }, ], }) -export class MatTimepickerInput +export class MatTimepickerInput< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > implements MatTimepickerConnectedInput, ControlValueAccessor, Validator, OnDestroy { private _elementRef = inject>(ElementRef); - private _dateAdapter = inject>(DateAdapter, {optional: true})!; - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; + private _dateAdapter = inject>( + DateAdapter, + {optional: true}, + )!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + )!; private _formField = inject(MAT_FORM_FIELD, {optional: true}); private _onChange: ((value: any) => void) | undefined; @@ -117,10 +126,10 @@ export class MatTimepickerInput }); /** Current value of the input. */ - readonly value: ModelSignal = model(null); + readonly value = model(null); /** Timepicker that the input is associated with. */ - readonly timepicker: InputSignal> = input.required>({ + readonly timepicker = input.required>({ alias: 'matTimepicker', }); @@ -405,7 +414,7 @@ export class MatTimepickerInput private _formatValue(value: D | null): void { value = this._dateAdapter.getValidDateOrNull(value); this._elementRef.nativeElement.value = - value == null ? '' : this._dateAdapter.format(value, this._dateFormats.display.timeInput); + value == null ? '' : this._dateAdapter.format(value, this._dateFormats.display.timeInput!); } /** Checks whether a value is valid. */ diff --git a/src/material/timepicker/timepicker.ts b/src/material/timepicker/timepicker.ts index 042e0524a321..3291583079d3 100644 --- a/src/material/timepicker/timepicker.ts +++ b/src/material/timepicker/timepicker.ts @@ -38,6 +38,7 @@ import { DateAdapter, MAT_DATE_FORMATS, MAT_OPTION_PARENT_COMPONENT, + MatDateFormats, MatOption, MatOptionParentComponent, } from '../core'; @@ -63,9 +64,14 @@ import { import {Subscription} from 'rxjs'; /** Event emitted when a value is selected in the timepicker. */ -export interface MatTimepickerSelected { +export interface MatTimepickerSelected< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +> { value: D; - source: MatTimepicker; + source: MatTimepicker; } /** Injection token used to configure the behavior of the timepicker dropdown while scrolling. */ @@ -126,13 +132,26 @@ export interface MatTimepickerConnectedInput { }, ], }) -export class MatTimepicker implements OnDestroy, MatOptionParentComponent { +export class MatTimepicker< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, + > + implements OnDestroy, MatOptionParentComponent +{ private _dir = inject(Directionality, {optional: true}); private _viewContainerRef = inject(ViewContainerRef); private _injector = inject(Injector); private _defaultConfig = inject(MAT_TIMEPICKER_CONFIG, {optional: true}); - private _dateAdapter = inject>(DateAdapter, {optional: true})!; - private _dateFormats = inject(MAT_DATE_FORMATS, {optional: true})!; + private _dateAdapter = inject>( + DateAdapter, + {optional: true}, + )!; + private _dateFormats = inject>( + MAT_DATE_FORMATS, + {optional: true}, + )!; private _scrollStrategyFactory = inject(MAT_TIMEPICKER_SCROLL_STRATEGY); protected _animationsDisabled = _animationsDisabled(); @@ -177,7 +196,9 @@ export class MatTimepicker implements OnDestroy, MatOptionParentComponent { readonly isOpen: Signal = this._isOpen.asReadonly(); /** Emits when the user selects a time. */ - readonly selected: OutputEmitterRef> = output(); + readonly selected: OutputEmitterRef< + MatTimepickerSelected + > = output(); /** Emits when the timepicker is opened. */ readonly opened: OutputEmitterRef = output(); @@ -409,7 +430,7 @@ export class MatTimepicker implements OnDestroy, MatOptionParentComponent { const min = input?.min() || adapter.setTime(adapter.today(), 0, 0, 0); const max = input?.max() || adapter.setTime(adapter.today(), 23, 59, 0); const cacheKey = - interval + '/' + adapter.format(min, timeFormat) + '/' + adapter.format(max, timeFormat); + interval + '/' + adapter.format(min, timeFormat!) + '/' + adapter.format(max, timeFormat!); // Don't re-generate the options if the inputs haven't changed. if (cacheKey !== this._optionsCacheKey) { diff --git a/src/material/timepicker/util.spec.ts b/src/material/timepicker/util.spec.ts index f3225eace971..ab5d418ed115 100644 --- a/src/material/timepicker/util.spec.ts +++ b/src/material/timepicker/util.spec.ts @@ -69,13 +69,13 @@ describe('timepicker utilities', () => { }); describe('generateOptions', () => { - let adapter: DateAdapter; - let formats: MatDateFormats; + let adapter: DateAdapter; + let formats: MatDateFormats; beforeEach(() => { TestBed.configureTestingModule({providers: [provideNativeDateAdapter()]}); adapter = TestBed.inject(DateAdapter); - formats = TestBed.inject(MAT_DATE_FORMATS); + formats = TestBed.inject>(MAT_DATE_FORMATS); adapter.setLocale('en-US'); }); diff --git a/src/material/timepicker/util.ts b/src/material/timepicker/util.ts index f8dfa4c94e61..30b9faea490c 100644 --- a/src/material/timepicker/util.ts +++ b/src/material/timepicker/util.ts @@ -82,9 +82,14 @@ export function parseInterval(value: number | string | null): number | null { * @param max Time at which to stop generating the options. * @param interval Amount of seconds between each option. */ -export function generateOptions( - adapter: DateAdapter, - formats: MatDateFormats, +export function generateOptions< + D, + L = any, + DisplayFormatType = string, + ParseFormatType = DisplayFormatType, +>( + adapter: DateAdapter, + formats: MatDateFormats, min: D, max: D, interval: number, @@ -97,7 +102,10 @@ export function generateOptions( adapter.compareTime(current, max) < 1 && adapter.isValid(current) ) { - options.push({value: current, label: adapter.format(current, formats.display.timeOptionLabel)}); + options.push({ + value: current, + label: adapter.format(current, formats.display.timeOptionLabel!), + }); current = adapter.addSeconds(current, interval); } @@ -106,8 +114,8 @@ export function generateOptions( /** Checks whether a date adapter is set up correctly for use with the timepicker. */ export function validateAdapter( - adapter: DateAdapter | null, - formats: MatDateFormats | null, + adapter: DateAdapter | null, + formats: MatDateFormats | null, ) { function missingAdapterError(provider: string) { return Error(