@ng-matero/extensions 18.4.0 → 19.0.0

package/datetimepicker/calendar-body.scss

@@ -1,8 +1,15 @@
 @use 'sass:math';
+@use '@angular/cdk';
+
+@use '../core/style/button-common';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
 
 $calendar-body-label-padding-start: 5% !default;
+// We don't want the label to jump around when we switch between month and year views, so we use
+// the same amount of padding regardless of the number of columns. We align the header label with
+// the one third mark of the first cell, this was chosen somewhat arbitrarily to make it look
+// roughly like the mock. Half way is too far since the cell text is center aligned.
 $calendar-body-label-side-padding: math.div(33%, 7) !default;
 $calendar-body-cell-min-size: 32px !default;
 $calendar-body-cell-size: math.div(100%, 7) !default;
@@ -48,7 +55,8 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   height: 0;
   line-height: 0;
   text-align: left;
-  padding: $calendar-body-cell-padding $calendar-body-label-side-padding;
+  padding-left: $calendar-body-label-side-padding;
+  padding-right: $calendar-body-label-side-padding;
 
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(font-size, calendar-body-label-text-size);
@@ -61,15 +69,31 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
   }
 }
 
-.mtx-calendar-body-cell {
+.mtx-calendar-body-cell-container {
   position: relative;
-  width: $calendar-body-cell-size;
   height: 0;
   line-height: 0;
-  padding: $calendar-body-cell-padding 0;
+}
+
+.mtx-calendar-body-cell {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: none;
   text-align: center;
   outline: none;
-  cursor: pointer;
+  font-family: inherit;
+  margin: 0;
+
+  // Needs to be repeated here in order to override the user agent styles.
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(font-family, calendar-text-font);
+    @include token-utils.create-token-slot(font-size, calendar-text-size);
+  }
+
+  @include button-common.reset();
 }
 
 .mtx-calendar-body-disabled {
@@ -85,31 +109,56 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
       @include token-utils.create-token-slot(border-color, calendar-date-disabled-state-text-color);
     }
   }
+
+  // Fade out the disabled cells so that they can be distinguished from the enabled ones. Note that
+  // ideally we'd use `color: GreyText` here which is what the browser uses for disabled buttons,
+  // but we can't because Firefox doesn't recognize it.
+  @include cdk.high-contrast {
+    opacity: 0.5;
+  }
 }
 
 .mtx-calendar-body-cell-content {
-  position: absolute;
   top: $calendar-body-cell-content-margin;
   left: $calendar-body-cell-content-margin;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   width: $calendar-body-cell-content-size;
   height: $calendar-body-cell-content-size;
-  border: $calendar-body-cell-content-border-width solid transparent;
+
+  // Prevents text being off-center on Android.
+  line-height: 1;
+  border: $calendar-body-cell-content-border-width;
+  border-style: solid;
+
+  // Choosing a value clearly larger than the height ensures we get the correct capsule shape.
   border-radius: $calendar-body-cell-radius;
 
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(color, calendar-date-text-color);
     @include token-utils.create-token-slot(border-color, calendar-date-outline-color);
   }
+
+  // Increase specificity because focus indicator styles are part of the `mat-core` mixin and can
+  // potentially overwrite the absolute position of the container.
+  &.mat-focus-indicator {
+    position: absolute;
+  }
+
+  @include cdk.high-contrast {
+    border: none;
+  }
 }
 
-// TODO: cdk-keyboard-focused, cdk-program-focused
 .mtx-calendar-body-active {
   @include token-utils.use-tokens($_tokens...) {
-    @include _highlighted-cell(calendar-date-focus-state-background-color);
+    .cdk-keyboard-focused &,
+    .cdk-program-focused & {
+      @include _highlighted-cell(calendar-date-focus-state-background-color);
+    }
   }
 }
 

package/datetimepicker/calendar.d.ts

@@ -1,18 +1,20 @@
 import { ComponentType, Portal, TemplatePortal } from '@angular/cdk/portal';
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
-import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
+import { AfterContentInit, AfterViewChecked, EventEmitter, OnDestroy } from '@angular/core';
 import { MtxClockView } from './clock';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
-import { MtxDatetimepickerIntl } from './datetimepicker-intl';
 import { MtxAMPM, MtxCalendarView, MtxDatetimepickerType } from './datetimepicker-types';
+import { MtxMonthView } from './month-view';
+import { MtxMultiYearView } from './multi-year-view';
+import { MtxTimeView } from './time-view';
+import { MtxYearView } from './year-view';
 import * as i0 from "@angular/core";
 /**
  * A calendar that is used as part of the datetimepicker.
  * @docs-private
  */
-export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
-    private _elementRef;
+export declare class MtxCalendar<D> implements AfterViewChecked, AfterContentInit, OnDestroy {
     private _intl;
+    private _changeDetectorRef;
     private _ngZone;
     private _adapter;
     private _dateFormats;
@@ -37,6 +39,14 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     /** Emits when the view has been changed. */
     viewChanged: EventEmitter<MtxCalendarView>;
     _userSelection: EventEmitter<void>;
+    /** Reference to the current month view component. */
+    monthView: MtxMonthView<D>;
+    /** Reference to the current year view component. */
+    yearView: MtxYearView<D>;
+    /** Reference to the current multi-year view component. */
+    multiYearView: MtxMultiYearView<D>;
+    /** Reference to the current time view component. */
+    timeView: MtxTimeView<D>;
     _AMPM: MtxAMPM;
     _clockView: MtxClockView;
     _calendarState: string;
@@ -44,8 +54,14 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     _calendarHeaderPortal: Portal<any>;
     private _intlChanges;
     private _clampedActiveDate;
-    private _injector;
-    constructor(_elementRef: ElementRef, _intl: MtxDatetimepickerIntl, _ngZone: NgZone, _adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats, _changeDetectorRef: ChangeDetectorRef);
+    /**
+     * 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.
+     */
+    private _moveFocusOnNextTick;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     /** The display type of datetimepicker. */
     get type(): MtxDatetimepickerType;
     set type(value: MtxDatetimepickerType);
@@ -81,7 +97,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     set _activeDate(value: D);
     /** Whether the calendar is in month view. */
     get currentView(): MtxCalendarView;
-    set currentView(view: MtxCalendarView);
+    set currentView(value: MtxCalendarView);
     private _currentView;
     get _yearPeriodText(): string;
     get _yearButtonText(): string;
@@ -98,6 +114,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     _dateFilterForViews: (date: D) => boolean;
     _userSelected(): void;
     ngAfterContentInit(): void;
+    ngAfterViewChecked(): void;
     ngOnDestroy(): void;
     /** Handles date selection in the month view. */
     _dateSelected(date: D): void;
@@ -106,7 +123,6 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     /** Handles year selection in the multi year view. */
     _yearSelected(year: D): void;
     _timeSelected(date: D): void;
-    _dialTimeSelected(date: D): void;
     _onActiveDateChange(date: D): void;
     _selectAMPM(date: D): void;
     _ampmClicked(source: MtxAMPM): void;
@@ -122,36 +138,20 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     _previousEnabled(): boolean;
     /** Whether the next period button is enabled. */
     _nextEnabled(): boolean;
-    /** Handles keydown events on the calendar body. */
-    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
-    _focusActiveCell(): void;
     _calendarStateDone(): void;
     /** Whether the two dates represent the same view in the current view mode (month or year). */
     private _isSameView;
-    /** Handles keydown events on the calendar body when calendar is in month view. */
-    private _handleCalendarBodyKeydownInMonthView;
-    /** Handles keydown events on the calendar body when calendar is in year view. */
-    private _handleCalendarBodyKeydownInYearView;
-    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
-    private _handleCalendarBodyKeydownInMultiYearView;
-    /** Handles keydown events on the calendar body when calendar is in month view. */
-    private _handleCalendarBodyKeydownInClockView;
-    /**
-     * Determine the date for the month that comes before the given month in the same column in the
-     * calendar table.
-     */
-    private _prevMonthInSameCol;
-    /**
-     * Determine the date for the month that comes after the given month in the same column in the
-     * calendar table.
-     */
-    private _nextMonthInSameCol;
     private calendarState;
     private _2digit;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendar<any>, [null, null, null, { optional: true; }, { optional: true; }, null]>;
+    /** Returns the component instance that corresponds to the current calendar view. */
+    private _getCurrentViewComponent;
+    /** Focuses the active date. */
+    focusActiveCell(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendar<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "headerComponent": { "alias": "headerComponent"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "timeInputAutoFocus": { "alias": "timeInputAutoFocus"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, true, never>;
     static ngAcceptInputType_multiYearSelector: unknown;
     static ngAcceptInputType_twelvehour: unknown;
+    static ngAcceptInputType_preventSameDateTimeSelection: unknown;
     static ngAcceptInputType_timeInput: unknown;
     static ngAcceptInputType_timeInputAutoFocus: unknown;
 }

package/datetimepicker/clock.d.ts

@@ -1,5 +1,4 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
+import { AfterContentInit, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import { MtxAMPM } from './datetimepicker-types';
 import * as i0 from "@angular/core";
@@ -9,6 +8,14 @@ export declare const CLOCK_OUTER_RADIUS = 41.25;
 export declare const CLOCK_TICK_RADIUS = 7.0833;
 /** Possible views for datetimepicker clock. */
 export type MtxClockView = 'hour' | 'minute';
+export interface ClockCell {
+    value: number;
+    displayValue: string;
+    enabled: boolean;
+    top: number;
+    left: number;
+    fontSize?: string;
+}
 /**
  * A clock that is used as part of the datetimepicker.
  * @docs-private
@@ -35,12 +42,11 @@ export declare class MtxClock<D> implements AfterContentInit, OnDestroy, OnChang
     readonly _userSelection: EventEmitter<void>;
     /** Whether the clock is in hour view. */
     _hourView: boolean;
-    _hours: any[];
-    _minutes: any[];
+    _hours: ClockCell[];
+    _minutes: ClockCell[];
     _selectedHour: number;
     _selectedMinute: number;
     private _timeChanged;
-    constructor(_elementRef: ElementRef, _adapter: DatetimeAdapter<D>, _changeDetectorRef: ChangeDetectorRef, _document: any);
     /**
      * The date to display in this clock view.
      */

package/datetimepicker/datetimepicker-actions.d.ts

@@ -1,21 +1,24 @@
-import { AfterViewInit, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
 import { MtxDatetimepicker } from './datetimepicker';
 import * as i0 from "@angular/core";
 export declare class MtxDatetimepickerApply<D> {
     _datetimepicker: MtxDatetimepicker<D>;
-    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerApply<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerApply<any>, "[mtxDatetimepickerApply]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxDatetimepickerCancel<D> {
     _datetimepicker: MtxDatetimepicker<D>;
-    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerCancel<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerCancel<any>, "[mtxDatetimepickerCancel]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxDatetimepickerClear<D> {
     _datetimepicker: MtxDatetimepicker<D>;
-    constructor(_datetimepicker: MtxDatetimepicker<D>);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerClear<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerClear<any>, "[mtxDatetimepickerClear]", never, {}, {}, never, never, true, never>;
 }
@@ -24,7 +27,8 @@ export declare class MtxDatetimepickerActions<D> implements AfterViewInit, OnDes
     private _viewContainerRef;
     _template: TemplateRef<unknown>;
     private _portal;
-    constructor(_datetimepicker: MtxDatetimepicker<D>, _viewContainerRef: ViewContainerRef);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerActions<any>, never>;

package/datetimepicker/datetimepicker-content.scss

@@ -70,6 +70,21 @@ $touch-max-height: 850px;
   .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
     height: $non-touch-calendar-with-time-input-portrait-height;
   }
+
+  // Note that this selector doesn't technically have to be nested, but we want the slightly
+  // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
+  .mtx-datetimepicker-close-button {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 8px;
+
+    // Hide the button while the overlay is animating, because it's rendered
+    // outside of it and it seems to cause scrollbars in some cases (see #21493).
+    .ng-animating & {
+      display: none;
+    }
+  }
 }
 
 .mtx-datetimepicker-content-container {

package/datetimepicker/datetimepicker-input.d.ts

@@ -1,8 +1,6 @@
 import { AfterContentInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
-import { MatFormField } from '@angular/material/form-field';
-import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxDatetimepicker } from './datetimepicker';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import * as i0 from "@angular/core";
@@ -23,7 +21,7 @@ export declare class MtxDatetimepickerInputEvent<D> {
 /** Directive used to connect an input to a MtxDatetimepicker. */
 export declare class MtxDatetimepickerInput<D> implements AfterContentInit, ControlValueAccessor, OnDestroy, Validator {
     private _elementRef;
-    _dateAdapter: DatetimeAdapter<D>;
+    private _dateAdapter;
     private _dateFormats;
     private _formField;
     _datetimepicker: MtxDatetimepicker<D>;
@@ -40,7 +38,8 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     private _localeSubscription;
     /** Whether the last value set on the input was valid. */
     private _lastValueValid;
-    constructor(_elementRef: ElementRef, _dateAdapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats, _formField: MatFormField);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     /** The datetimepicker that this input is associated with. */
     set mtxDatetimepicker(value: MtxDatetimepicker<D>);
     set mtxDatetimepickerFilter(filter: (date: D | null, type: MtxDatetimepickerFilterType) => boolean);
@@ -100,7 +99,7 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     private _formatValue;
     /** Returns the palette used by the input's form field, if any. */
     getThemePalette(): ThemePalette;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerInput<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerInput<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerInput<any>, "input[mtxDatetimepicker]", ["mtxDatetimepickerInput"], { "mtxDatetimepicker": { "alias": "mtxDatetimepicker"; "required": false; }; "mtxDatetimepickerFilter": { "alias": "mtxDatetimepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

package/datetimepicker/datetimepicker-module.d.ts

@@ -7,7 +7,7 @@ import * as i5 from "@angular/material/button";
 import * as i6 from "./calendar";
 import * as i7 from "./calendar-body";
 import * as i8 from "./clock";
-import * as i9 from "./time";
+import * as i9 from "./time-view";
 import * as i10 from "./datetimepicker";
 import * as i11 from "./datetimepicker-toggle";
 import * as i12 from "./datetimepicker-input";
@@ -17,6 +17,6 @@ import * as i15 from "./multi-year-view";
 import * as i16 from "./datetimepicker-actions";
 export declare class MtxDatetimepickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDatetimepickerModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatButtonModule, typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTime, typeof i9.MtxTimeInput, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView, typeof i16.MtxDatetimepickerApply, typeof i16.MtxDatetimepickerCancel, typeof i16.MtxDatetimepickerClear, typeof i16.MtxDatetimepickerActions], [typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTime, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView, typeof i16.MtxDatetimepickerApply, typeof i16.MtxDatetimepickerCancel, typeof i16.MtxDatetimepickerClear, typeof i16.MtxDatetimepickerActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDatetimepickerModule, never, [typeof i1.CommonModule, typeof i2.OverlayModule, typeof i3.A11yModule, typeof i4.PortalModule, typeof i5.MatButtonModule, typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTimeView, typeof i9.MtxTimeInput, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView, typeof i16.MtxDatetimepickerApply, typeof i16.MtxDatetimepickerCancel, typeof i16.MtxDatetimepickerClear, typeof i16.MtxDatetimepickerActions], [typeof i6.MtxCalendar, typeof i7.MtxCalendarBody, typeof i8.MtxClock, typeof i9.MtxTimeView, typeof i10.MtxDatetimepicker, typeof i11.MtxDatetimepickerToggle, typeof i11.MtxDatetimepickerToggleIcon, typeof i12.MtxDatetimepickerInput, typeof i10.MtxDatetimepickerContent, typeof i13.MtxMonthView, typeof i14.MtxYearView, typeof i15.MtxMultiYearView, typeof i16.MtxDatetimepickerApply, typeof i16.MtxDatetimepickerCancel, typeof i16.MtxDatetimepickerClear, typeof i16.MtxDatetimepickerActions]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxDatetimepickerModule>;
 }

package/datetimepicker/datetimepicker-toggle.d.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { AfterContentInit, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 import { MtxDatetimepicker } from './datetimepicker';
 import { MtxDatetimepickerIntl } from './datetimepicker-intl';
@@ -28,13 +28,14 @@ export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnC
     _customIcon: MtxDatetimepickerToggleIcon;
     /** Underlying button element. */
     _button: MatButton;
-    constructor(_intl: MtxDatetimepickerIntl, _changeDetectorRef: ChangeDetectorRef, defaultTabIndex: string);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
     _open(event: Event): void;
     private _watchStateChanges;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerToggle<any>, [null, null, { attribute: "tabindex"; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerToggle<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerToggle<any>, "mtx-datetimepicker-toggle", ["mtxDatetimepickerToggle"], { "datetimepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, {}, ["_customIcon"], ["[mtxDatetimepickerToggleIcon]"], true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_disableRipple: unknown;

package/datetimepicker/datetimepicker.d.ts

@@ -1,10 +1,8 @@
-import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentType, TemplatePortal } from '@angular/cdk/portal';
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, EventEmitter, InjectionToken, OnDestroy, OnInit } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxCalendar } from './calendar';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import { MtxDatetimepickerInput } from './datetimepicker-input';
@@ -31,7 +29,7 @@ export declare const MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
  * future. (e.g. confirmation buttons).
  * @docs-private
  */
-export declare class MtxDatetimepickerContent<D> implements OnInit, AfterContentInit, OnDestroy {
+export declare class MtxDatetimepickerContent<D> implements OnInit, AfterViewInit, OnDestroy {
     private _changeDetectorRef;
     _calendar: MtxCalendar<D>;
     color: ThemePalette;
@@ -50,10 +48,15 @@ export declare class MtxDatetimepickerContent<D> implements OnInit, AfterContent
     type: MtxDatetimepickerType;
     /** The view of the calendar. */
     view: MtxCalendarView;
-    constructor(_changeDetectorRef: ChangeDetectorRef);
+    /** Text for the close button. */
+    _closeButtonText: string;
+    /** Whether the close button currently has focus. */
+    _closeButtonFocused: boolean;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     _viewChanged(view: MtxCalendarView): void;
     ngOnInit(): void;
-    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     _startExitAnimation(): void;
     _handleUserSelection(): void;
@@ -131,7 +134,8 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     _actionsPortal: TemplatePortal | null;
     /** Previous selected value. */
     oldValue: D | null;
-    constructor(_overlay: Overlay, _viewContainerRef: ViewContainerRef, _scrollStrategy: any, _dateAdapter: DatetimeAdapter<D>, _dir: Directionality);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     /** The date to open the calendar to initially. */
     get startAt(): D | null;
     set startAt(date: D | null);
@@ -218,7 +222,7 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
      * @param portal Portal to be removed.
      */
     removeActions(portal: TemplatePortal): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepicker<any>, [null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepicker<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepicker<any>, "mtx-datetimepicker", ["mtxDatetimepicker"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "type": { "alias": "type"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "timeInputAutoFocus": { "alias": "timeInputAutoFocus"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; }, { "selectedChanged": "selectedChanged"; "openedStream": "opened"; "closedStream": "closed"; "viewChanged": "viewChanged"; }, never, never, true, never>;
     static ngAcceptInputType_multiYearSelector: unknown;
     static ngAcceptInputType_twelvehour: unknown;

package/datetimepicker/month-view.d.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
-import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
-import { MtxCalendarCell } from './calendar-body';
+import { DatetimeAdapter } from '@ng-matero/extensions/core';
+import { MtxCalendarBody, MtxCalendarCell } from './calendar-body';
 import { MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 /**
@@ -9,6 +9,7 @@ import * as i0 from "@angular/core";
  */
 export declare class MtxMonthView<D> implements AfterContentInit {
     _adapter: DatetimeAdapter<D>;
+    private _dir;
     private _dateFormats;
     type: MtxDatetimepickerType;
     /** A function used to filter which dates are selectable. */
@@ -17,6 +18,10 @@ export declare class MtxMonthView<D> implements AfterContentInit {
     selectedChange: EventEmitter<D>;
     /** Emits when any date is selected. */
     readonly _userSelection: EventEmitter<void>;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    /** The body of calendar table */
+    _mtxCalendarBody: MtxCalendarBody;
     /** Grid of calendar cells representing the dates of the month. */
     _weeks: MtxCalendarCell[][];
     /** The number of blank cells in the first row before the 1st of the month. */
@@ -32,9 +37,11 @@ export declare class MtxMonthView<D> implements AfterContentInit {
     _weekdays: {
         long: string;
         narrow: string;
+        id: number;
     }[];
     _calendarState: string;
-    constructor(_adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     private _activeDate;
     /**
      * The date to display in this month view (everything other than the month and year is ignored).
@@ -42,8 +49,8 @@ export declare class MtxMonthView<D> implements AfterContentInit {
     get activeDate(): D;
     set activeDate(value: D);
     /** The currently selected date. */
-    get selected(): D;
-    set selected(value: D);
+    get selected(): D | null;
+    set selected(value: D | null);
     private _selected;
     ngAfterContentInit(): void;
     /** Handles when a new date is selected. */
@@ -51,6 +58,8 @@ export declare class MtxMonthView<D> implements AfterContentInit {
     _calendarStateDone(): void;
     /** Initializes this month view. */
     private _init;
+    /** Initializes the weekdays. */
+    private _initWeekdays;
     /** Creates MdCalendarCells for the dates in this month. */
     private _createWeekCells;
     /**
@@ -59,6 +68,12 @@ export declare class MtxMonthView<D> implements AfterContentInit {
      */
     private _getDateInCurrentMonth;
     private calendarState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxMonthView<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMonthView<any>, "mtx-month-view", ["mtxMonthView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; }, never, never, true, never>;
+    /** Handles keydown events on the calendar body when calendar is in month view. */
+    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell(movePreview?: boolean): void;
+    /** Determines whether the user has the RTL layout direction. */
+    private _isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxMonthView<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMonthView<any>, "mtx-month-view", ["mtxMonthView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
 }