@dhutaryan/ngx-mat-timepicker 20.0.0 → 21.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dhutaryan/ngx-mat-timepicker",
   "description": "Angular timepicker to add time which is based on material design and Angular material.",
   "homepage": "https://dhutaryan.github.io/ngx-mat-timepicker/",
-  "version": "20.0.0",
+  "version": "21.0.0",
   "license": "MIT",
   "author": {
     "name": "Dzmitry Hutaryan"
@@ -27,9 +27,9 @@
     "timepicker input"
   ],
   "peerDependencies": {
-    "@angular/common": ">=19.0.0",
-    "@angular/core": ">=19.0.0",
-    "@angular/material": ">=19.0.0"
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/material": ">=21.0.0"
   },
   "dependencies": {
     "tslib": ">=2.0.0"
@@ -37,7 +37,7 @@
   "exports": {
     ".": {
       "sass": "./_index.scss",
-      "types": "./index.d.ts",
+      "types": "./types/dhutaryan-ngx-mat-timepicker.d.ts",
       "default": "./fesm2022/dhutaryan-ngx-mat-timepicker.mjs"
     },
     "./package.json": {
@@ -46,5 +46,5 @@
   },
   "sideEffects": false,
   "module": "fesm2022/dhutaryan-ngx-mat-timepicker.mjs",
-  "typings": "index.d.ts"
+  "typings": "types/dhutaryan-ngx-mat-timepicker.d.ts"
 }

package/{index.d.ts → types/dhutaryan-ngx-mat-timepicker.d.ts}

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, InjectionToken, Provider, OnDestroy, AfterContentInit, AfterViewChecked, OnInit, NgZone, ElementRef, ChangeDetectorRef, AfterViewInit, OnChanges, ViewContainerRef, SimpleChanges, TemplateRef } from '@angular/core';
+import { InjectionToken, Provider, OnDestroy, AfterContentInit, AfterViewChecked, EventEmitter, ElementRef, ChangeDetectorRef, AfterViewInit, OnChanges, ViewContainerRef, Injector, SimpleChanges, OnInit, TemplateRef } from '@angular/core';
 import * as i1$1 from '@angular/cdk/overlay';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import * as i2 from '@angular/cdk/portal';
@@ -8,7 +8,6 @@ import * as i3 from '@angular/cdk/a11y';
 import { ThemePalette } from '@angular/material/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Subject, Observable } from 'rxjs';
-import { AnimationEvent } from '@angular/animations';
 import { ControlValueAccessor, Validator, ValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
 import { MatFormField } from '@angular/material/form-field';
 import * as i15 from '@angular/cdk/scrolling';
@@ -47,22 +46,16 @@ declare class MatTimepickerIntl {
 type MatTimePeriodType = 'am' | 'pm';
 declare class MatTimePeriod {
     _intl: MatTimepickerIntl;
-    /** Whether the time period is vertically aligned. */
-    get vertical(): boolean;
-    set vertical(value: BooleanInput);
-    private _vertical;
-    get period(): MatTimePeriodType;
-    set period(value: MatTimePeriodType);
-    private _period;
-    get disabledPeriod(): MatTimePeriodType | null;
-    set disabledPeriod(value: MatTimePeriodType | null);
-    private _disabledPeriod;
-    periodChanged: EventEmitter<MatTimePeriodType>;
+    readonly vertical: i0.InputSignalWithTransform<boolean, unknown>;
+    readonly period: i0.InputSignal<MatTimePeriodType>;
+    readonly disabledPeriod: i0.InputSignal<MatTimePeriodType | null>;
+    readonly periodChanged: i0.OutputEmitterRef<MatTimePeriodType>;
+    readonly _currentPeriod: i0.WritableSignal<MatTimePeriodType>;
     constructor(_intl: MatTimepickerIntl);
     setPeriod(event: Event, period: MatTimePeriodType): void;
     _isPeriodDisabled(period: MatTimePeriodType): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTimePeriod, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimePeriod, "mat-time-period", never, { "vertical": { "alias": "vertical"; "required": false; }; "period": { "alias": "period"; "required": false; }; "disabledPeriod": { "alias": "disabledPeriod"; "required": false; }; }, { "periodChanged": "periodChanged"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimePeriod, "mat-time-period", never, { "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "period": { "alias": "period"; "required": false; "isSignal": true; }; "disabledPeriod": { "alias": "disabledPeriod"; "required": false; "isSignal": true; }; }, { "periodChanged": "periodChanged"; }, never, never, true, never>;
 }
 
 /** InjectionToken for timepicker that can be used to override default locale code. */
@@ -325,11 +318,9 @@ declare abstract class MatTimeFaceBase<T> implements AfterContentInit, AfterView
     availableMinutes: number[];
     availableHours: number[];
     /**
-     * Used for scheduling that focus should be moved to the active cell on the next tick.
-     * We need to schedule it, rather than do it immediately, because we have to wait
-     * for Angular to re-evaluate the view children.
+     * Used to focus the active cell after change detection has run.
      */
-    private _moveFocusOnNextTick;
+    private _focusActiveCellAfterViewChecked;
     constructor(_timeAdapter: TimeAdapter<T>);
     ngAfterContentInit(): void;
     ngAfterViewChecked(): void;
@@ -378,6 +369,8 @@ declare abstract class MatTimeFaceBase<T> implements AfterContentInit, AfterView
     private _setMaxMinute;
     /** Sets disabled period. */
     private _setDisabledPeriod;
+    /** Schedules focus to be moved to the active cell on the next tick. */
+    private _scheduleFocusActiveCellAfterViewChecked;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTimeFaceBase<any>, [{ optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatTimeFaceBase<any>, never, never, { "selected": { "alias": "selected"; "required": false; }; "minTime": { "alias": "minTime"; "required": false; }; "maxTime": { "alias": "maxTime"; "required": false; }; "minuteInterval": { "alias": "minuteInterval"; "required": false; }; "isMeridiem": { "alias": "isMeridiem"; "required": false; }; "color": { "alias": "color"; "required": false; }; }, { "_userSelection": "_userSelection"; "selectedChange": "selectedChange"; }, never, never, true, never>;
 }
@@ -386,22 +379,22 @@ declare abstract class MatTimeFaceBase<T> implements AfterContentInit, AfterView
 type TimepickerOrientation = 'horizontal' | 'vertical';
 
 type MatDialView = 'hours' | 'minutes';
-declare class MatClockDials<T> extends MatTimeFaceBase<T> implements OnInit, OnDestroy {
+declare class MatClockDials<T> extends MatTimeFaceBase<T> {
     _intl: MatTimepickerIntl;
-    private _ngZone;
     private _elementRef;
     private _cdr;
     /** Layout orientation. */
-    orientation: TimepickerOrientation;
+    readonly orientation: i0.InputSignal<TimepickerOrientation>;
     /** Whether the timepicker UI is in touch mode. */
-    touchUi: boolean;
-    isHoursView: boolean;
+    readonly touchUi: i0.InputSignal<boolean>;
+    /** Whether the current view for the timepicker. */
+    readonly currentView: i0.InputSignal<MatDialView>;
+    /** Emits when the view is changed. */
+    readonly viewChanged: i0.OutputEmitterRef<MatDialView>;
+    readonly isHoursView: i0.Signal<boolean>;
     /** Specifies the view of clock dial. */
     private readonly _view;
-    private _viewSubscription;
-    constructor(_intl: MatTimepickerIntl, _timeAdapter: TimeAdapter<T>, _ngZone: NgZone, _elementRef: ElementRef, _cdr: ChangeDetectorRef);
-    ngOnInit(): void;
-    ngOnDestroy(): void;
+    constructor(_intl: MatTimepickerIntl, _timeAdapter: TimeAdapter<T>, _elementRef: ElementRef, _cdr: ChangeDetectorRef);
     /** Changes clock dial view. */
     onViewChange(event: Event, view: MatDialView): void;
     focusActiveCell(): void;
@@ -412,8 +405,8 @@ declare class MatClockDials<T> extends MatTimeFaceBase<T> implements OnInit, OnD
         hour: number;
         changeView?: boolean;
     }): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatClockDials<any>, [null, { optional: true; }, null, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatClockDials<any>, "mat-clock-dials", ["matClockDials"], { "orientation": { "alias": "orientation"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatClockDials<any>, [null, { optional: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatClockDials<any>, "mat-clock-dials", ["matClockDials"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "touchUi": { "alias": "touchUi"; "required": false; "isSignal": true; }; "currentView": { "alias": "currentView"; "required": false; "isSignal": true; }; }, { "viewChanged": "viewChanged"; }, never, never, true, never>;
 }
 
 declare const MAT_TIMEPICKER_INPUTS_KEYDOWN_HANDLER: InjectionToken<(event: KeyboardEvent) => void>;
@@ -471,20 +464,19 @@ declare class MatMinuteInput extends MatTimeInputBase {
 }
 declare class MatTimeInputs<T> extends MatTimeFaceBase<T> {
     _intl: MatTimepickerIntl;
-    private _ngZone;
     private _elementRef;
-    constructor(_intl: MatTimepickerIntl, _timeAdapter: TimeAdapter<T>, _ngZone: NgZone, _elementRef: ElementRef);
+    constructor(_intl: MatTimepickerIntl, _timeAdapter: TimeAdapter<T>, _elementRef: ElementRef);
     /**
      * Using for skipping that focus shouldn't be moved to the active cell on the next tick.
      * We need to use it to avoid focusing input for input mode.
      */
     private _skipNextTickFocus;
     focusActiveCell(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MatTimeInputs<any>, [null, { optional: true; }, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTimeInputs<any>, [null, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MatTimeInputs<any>, "mat-time-inputs", never, {}, {}, never, never, true, never>;
 }
 
-declare class MatTimepickerContent<S, T = ExtractTimeTypeFromSelection<S>> implements OnInit, AfterViewInit {
+declare class MatTimepickerContent<S, T = ExtractTimeTypeFromSelection<S>> implements AfterViewInit {
     private _globalModel;
     private _changeDetectorRef;
     /** Reference to the internal clock dials component. */
@@ -495,8 +487,8 @@ declare class MatTimepickerContent<S, T = ExtractTimeTypeFromSelection<S>> imple
     timepicker: MatTimepickerBase<any, S, T>;
     /** Display mode. */
     mode: TimepickerMode;
-    /** Current state of the animation. */
-    _animationState: 'enter-dropdown' | 'enter-dialog' | 'void';
+    /** Whether the animation is disabled. */
+    protected _animationsDisabled: boolean | undefined;
     /** Whether the clock uses 12 hour format. */
     isMeridiem: boolean;
     /** Whether should toggle face button be shown. */
@@ -522,15 +514,18 @@ declare class MatTimepickerContent<S, T = ExtractTimeTypeFromSelection<S>> imple
     color: ThemePalette;
     /** Emits when an animation has finished. */
     readonly _animationDone: Subject<void>;
+    protected _elementRef: ElementRef<HTMLElement>;
+    private _ngZone;
     private _model;
-    private _subscriptions;
-    constructor(intl: MatTimepickerIntl, _globalModel: MatTimeSelectionModel<S, T>, _changeDetectorRef: ChangeDetectorRef);
-    ngOnInit(): void;
+    private _stateChanges;
+    private _eventCleanups;
+    private _animationFallback;
+    constructor(_globalModel: MatTimeSelectionModel<S, T>, _changeDetectorRef: ChangeDetectorRef);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Changes animation state while closing timepicker content. */
     _startExitAnimation(): void;
-    _handleAnimationEvent(event: AnimationEvent): void;
+    private _handleAnimationEvent;
     onToggleMode(mode: TimepickerMode): void;
     _getSelected(): T | null;
     /** Applies the current pending selection to the global model. */
@@ -570,6 +565,10 @@ interface MatTimepickerControl<T> {
 }
 /** A timepicker that can be attached to a {@link MatTimepickerControl}. */
 interface MatTimepickerPanel<C extends MatTimepickerControl<T>, S, T = ExtractTimeTypeFromSelection<S>> {
+    /** The id for the timepicker's. */
+    id: string;
+    /** Whether the timepicker is open. */
+    opened: boolean;
     /** Stream that emits whenever the timepicker is opened. */
     openedStream: EventEmitter<void>;
     /** Stream that emits whenever the timepicker is closed. */
@@ -607,7 +606,7 @@ declare const MAT_TIMEPICKER_DEFAULT_OPTIONS: InjectionToken<MatTimepickerDefaul
 declare abstract class MatTimepickerBase<C extends MatTimepickerControl<T>, S, T = ExtractTimeTypeFromSelection<S>> implements OnChanges {
     private _viewContainerRef;
     private _overlay;
-    private _ngZone;
+    private readonly _injector;
     private _defaultActionsComponent;
     private _model;
     private _defaults?;
@@ -690,7 +689,7 @@ declare abstract class MatTimepickerBase<C extends MatTimepickerControl<T>, S, T
     _getMinTime(): T | null;
     /** The maximum selectable time. */
     _getMaxTime(): T | null;
-    constructor(_viewContainerRef: ViewContainerRef, _overlay: Overlay, _ngZone: NgZone, scrollStrategy: any, _defaultActionsComponent: ComponentType<any>, _model: MatTimeSelectionModel<S, T>, _defaults?: MatTimepickerDefaultOptions | undefined);
+    constructor(_viewContainerRef: ViewContainerRef, _overlay: Overlay, _injector: Injector, scrollStrategy: any, _defaultActionsComponent: ComponentType<any>, _model: MatTimeSelectionModel<S, T>, _defaults?: MatTimepickerDefaultOptions | undefined);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /** Opens the timepicker. */
@@ -839,7 +838,7 @@ declare abstract class MatTimepickerInputBase<S, T = ExtractTimeTypeFromSelectio
     ngOnDestroy(): void;
     /** Registers a time selection model with the input. */
     _registerModel(model: MatTimeSelectionModel<S, T>): void;
-    _onInput(value: string): void;
+    _onInput(event: Event): void;
     /** Handles change event on the input. */
     _onChange(): void;
     /** Handles blur event on the input. */