@ng-matero/extensions 14.5.0 → 14.6.0

package/core/datetime/datetime-adapter.d.ts

@@ -9,7 +9,7 @@ export declare abstract class DatetimeAdapter<D> extends DateAdapter<D> {
     abstract getHourNames(): string[];
     abstract getMinuteNames(): string[];
     abstract addCalendarHours(date: D, months: number): D;
-    abstract addCalendarMinutes(date: D, months: number): D;
+    abstract addCalendarMinutes(date: D, minutes: number): D;
     abstract createDatetime(year: number, month: number, date: number, hour: number, minute: number): D;
     getValidDateOrNull(obj: any): D | null;
     compareDatetime(first: D, second: D, respectMinutePart?: boolean): number | boolean;

package/datetimepicker/_datetimepicker-theme.scss

@@ -8,13 +8,14 @@
 $selected-today-box-shadow-width: 1px;
 $calendar-body-font-size: 13px !default;
 $calendar-weekday-table-font-size: 11px !default;
-$calendar-header-font-size: 28px !default;
 $clock-font-size: 14px !default;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
   $is-dark-theme: map.get($config, is-dark);
   $primary: map.get($config, primary);
+  $accent: map.get($config, accent);
+  $warn: map.get($config, warn);
   $background: map.get($config, background);
   $foreground: map.get($config, foreground);
   $disabled-color: theming.get-color-from-palette($foreground, disabled-text);
@@ -122,14 +123,47 @@ $clock-font-size: 14px !default;
   }
 
   .mtx-datetimepicker-toggle-active {
-    color: theming.get-color-from-palette(map.get($config, primary), text);
+    color: theming.get-color-from-palette($primary);
 
     &.mat-accent {
-      color: theming.get-color-from-palette(map.get($config, accent), text);
+      color: theming.get-color-from-palette($accent);
     }
 
     &.mat-warn {
-      color: theming.get-color-from-palette(map.get($config, warn), text);
+      color: theming.get-color-from-palette($warn);
+    }
+  }
+
+  .mtx-time-input {
+    color: theming.get-color-from-palette($foreground, text);
+    background-color: theming.get-color-from-palette($background, disabled-button);
+
+    &.mtx-time-input-active {
+      color: theming.get-color-from-palette($primary);
+      background-color: theming.get-color-from-palette($primary, .2);
+
+      &:focus {
+        border-color: theming.get-color-from-palette($primary);
+        background-color: theming.get-color-from-palette($background, background);
+
+        &::placeholder {
+          color: theming.get-color-from-palette($primary, .6);
+        }
+      }
+    }
+
+    &.mtx-time-input-warning {
+      border-color: theming.get-color-from-palette($warn);
+    }
+  }
+
+  .mtx-time-am.mat-button,
+  .mtx-time-pm.mat-button {
+    color: theming.get-color-from-palette($foreground, text);
+    border-color: theming.get-color-from-palette($foreground, hint-text);
+
+    &.mtx-time-ampm-active {
+      background-color: theming.get-color-from-palette($accent, .2);
     }
   }
 }
@@ -162,14 +196,6 @@ $clock-font-size: 14px !default;
     }
   }
 
-  .mtx-calendar-header-date-time {
-    font-size: $calendar-header-font-size;
-  }
-
-  .mtx-calendar-header-ampm-container {
-    font-size: .65em;
-  }
-
   .mtx-clock {
     font-size: $clock-font-size;
   }

package/datetimepicker/calendar.d.ts

@@ -1,13 +1,11 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
-import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
-import { MtxDatetimepickerType } from './datetimepicker-types';
+import { MtxAMPM, MtxCalendarView, MtxDatetimepickerType } from './datetimepicker-types';
+import { MtxDatetimepickerIntl } from './datetimepicker-intl';
 import * as i0 from "@angular/core";
-/** Possible views for datetimepicker calendar. */
-export declare type MtxCalendarView = 'clock' | 'month' | 'year' | 'multi-year';
 /**
  * A calendar that is used as part of the datetimepicker.
  * @docs-private
@@ -39,12 +37,12 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     /** Emits when the view has been changed. */
     viewChanged: EventEmitter<MtxCalendarView>;
     _userSelection: EventEmitter<void>;
-    _AMPM: string;
+    _AMPM: MtxAMPM;
     _clockView: MtxClockView;
     _calendarState: string;
     private _intlChanges;
     private _clampedActiveDate;
-    constructor(_elementRef: ElementRef, _intl: MatDatepickerIntl, _ngZone: NgZone, _adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats, changeDetectorRef: ChangeDetectorRef);
+    constructor(_elementRef: ElementRef, _intl: MtxDatetimepickerIntl, _ngZone: NgZone, _adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats, _changeDetectorRef: ChangeDetectorRef);
     /** The display type of datetimepicker. */
     get type(): MtxDatetimepickerType;
     set type(value: MtxDatetimepickerType);
@@ -53,6 +51,14 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     get startAt(): D | null;
     set startAt(value: D | null);
     private _startAt;
+    /**
+     * Whether the calendar is in time mode. In time mode the calendar clock gets time input elements rather then just clock
+     *
+     * When touchUi is enabled this will be disabled
+     */
+    get timeInput(): boolean;
+    set timeInput(value: boolean);
+    private _timeInput;
     /** The currently selected date. */
     get selected(): D | null;
     set selected(value: D | null);
@@ -74,15 +80,18 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     /** Whether the calendar is in month view. */
     get currentView(): MtxCalendarView;
     set currentView(view: MtxCalendarView);
-    _currentView: MtxCalendarView;
-    /** The label for the current calendar view. */
-    get _yearLabel(): string;
-    get _monthYearLabel(): string;
-    get _dateLabel(): string;
-    get _hoursLabel(): string;
-    get _minutesLabel(): string;
-    get _ariaLabelNext(): string;
-    get _ariaLabelPrev(): string;
+    private _currentView;
+    get _yearPeriodText(): string;
+    get _yearButtonText(): string;
+    get _yearButtonLabel(): string;
+    get _dateButtonText(): string;
+    get _dateButtonLabel(): string;
+    get _hoursButtonText(): string;
+    get _hourButtonLabel(): string;
+    get _minutesButtonText(): string;
+    get _minuteButtonLabel(): string;
+    get _prevButtonLabel(): string;
+    get _nextButtonLabel(): string;
     /** Date filter for the month and year views. */
     _dateFilterForViews: (date: D) => boolean;
     _userSelected(): void;
@@ -95,10 +104,11 @@ 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;
     _updateDate(date: D): D;
     _selectAMPM(date: D): void;
-    _ampmClicked(source: string): void;
+    _ampmClicked(source: MtxAMPM): void;
     _yearClicked(): void;
     _dateClicked(): void;
     _hoursClicked(): void;
@@ -139,6 +149,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _2digit;
     static ngAcceptInputType_multiYearSelector: BooleanInput;
     static ngAcceptInputType_twelvehour: BooleanInput;
+    static ngAcceptInputType_timeInput: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendar<any>, [null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": "multiYearSelector"; "twelvehour": "twelvehour"; "startView": "startView"; "timeInterval": "timeInterval"; "dateFilter": "dateFilter"; "preventSameDateTimeSelection": "preventSameDateTimeSelection"; "type": "type"; "startAt": "startAt"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendar<any>, "mtx-calendar", ["mtxCalendar"], { "multiYearSelector": "multiYearSelector"; "twelvehour": "twelvehour"; "startView": "startView"; "timeInterval": "timeInterval"; "dateFilter": "dateFilter"; "preventSameDateTimeSelection": "preventSameDateTimeSelection"; "type": "type"; "startAt": "startAt"; "timeInput": "timeInput"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; }, { "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; "_userSelection": "_userSelection"; }, never, never, false>;
 }

package/datetimepicker/calendar.scss

@@ -12,56 +12,84 @@ $calendar-prev-next-icon-margin: 15.5px;
 $calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
 $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
-.mtx-calendar {
-  display: block;
-  outline: none;
-
-  &[mode='landscape'] {
+@mixin landscape-calendar-header {
+  .mtx-calendar {
     display: flex;
-  }
-}
 
-.mtx-calendar-header {
-  padding: $calendar-padding * 2;
-  box-sizing: border-box;
-  border-radius: 4px 4px 0 0;
+    .mtx-calendar-header {
+      width: 150px;
+      min-width: 150px;
+      padding: 16px 8px;
+      border-radius: 4px 0 0 4px;
 
-  [mode='landscape'] & {
-    width: 150px;
-    min-width: 150px;
-    border-radius: 4px 0 0 4px;
+      [dir='rtl'] & {
+        border-radius: 0 4px 4px 0;
+      }
+    }
 
-    [dir='rtl'] & {
-      border-radius: 0 4px 4px 0;
+    .mtx-calendar-header-year + .mtx-calendar-header-date-time,
+    .mtx-calendar-header-date + .mtx-calendar-header-time {
+      margin-top: 4px;
+    }
+
+    .mtx-calendar-header-date-time {
+      font-size: 28px;
+    }
+
+    .mtx-calendar-header-time {
+      display: flex;
+      flex-direction: column;
+
+      .mat-button {
+        width: 40px;
+        text-align: center;
+      }
+    }
+
+    .mtx-calendar-header-ampm-container {
+      flex-direction: row;
+      font-size: 20px;
+    }
+
+    .mtx-calendar-header-ampm {
+      padding: 4px;
+
+      + .mtx-calendar-header-ampm {
+        margin: 0 8px;
+      }
     }
   }
 }
 
-.mtx-calendar-header-year,
-.mtx-calendar-header-date-time {
-  width: 100%;
-  white-space: nowrap;
+.mtx-calendar {
+  display: block;
+  outline: none;
 }
 
-.mtx-calendar-header-year {
-  line-height: 24px;
+.mtx-calendar-header {
+  box-sizing: border-box;
+  padding: 8px;
+  border-radius: 4px 4px 0 0;
 
-  > * {
-    vertical-align: middle;
+  .mat-button {
+    min-width: auto;
+    padding: 0 4px;
+    text-align: inherit;
+    line-height: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    white-space: normal;
+    word-break: break-word;
   }
+}
 
-  + .mtx-calendar-header-date-time {
-    margin-top: 4px;
-  }
+.mtx-calendar-header-year.mat-button {
+  line-height: 24px;
 }
 
 .mtx-calendar-header-date-time {
+  font-size: 24px;
   line-height: 36px;
-
-  [mode='landscape'] & {
-    white-space: normal;
-    word-wrap: break-word;
-  }
 }
 
 .mtx-calendar-header-year,
@@ -70,7 +98,6 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 .mtx-calendar-header-minutes,
 .mtx-calendar-header-ampm {
   &:not(.active) {
-    cursor: pointer;
     opacity: .6;
   }
 
@@ -88,23 +115,9 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     .mtx-calendar-header-hours,
     .mtx-calendar-header-minutes,
     .mtx-calendar-header-ampm {
-      cursor: pointer;
       opacity: 1;
     }
   }
-
-  [mode='landscape'] & {
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-.mtx-calendar-header-hour-minute-container {
-  padding: 0 8px;
-
-  [mode='landscape'] & {
-    padding: 0;
-  }
 }
 
 .mtx-calendar-header-hour-minute-separator {
@@ -117,15 +130,16 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   display: inline-flex;
   flex-direction: column;
   line-height: 18px;
+  font-size: 12px;
+}
 
-  [mode='landscape'] & {
-    flex-direction: row;
-  }
+[mode='landscape'] {
+  @include landscape-calendar-header;
 }
 
-.mtx-calendar-header-ampm {
-  [mode='landscape'] & {
-    padding: 4px;
+@media all and (orientation: landscape) {
+  [mode='auto'] {
+    @include landscape-calendar-header;
   }
 }
 
@@ -183,41 +197,3 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
   text-align: center;
   padding: $calendar-padding 0;
 }
-
-@media all and (orientation: landscape) {
-  .mtx-calendar[mode='auto'] {
-    display: flex;
-
-    .mtx-calendar-header {
-      width: 150px;
-      min-width: 150px;
-      border-radius: 4px 0 0 4px;
-
-      [dir='rtl'] & {
-        border-radius: 0 4px 4px 0;
-      }
-    }
-
-    .mtx-calendar-header-date-time {
-      white-space: normal;
-      word-wrap: break-word;
-    }
-
-    .mtx-calendar-header-time {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .mtx-calendar-header-hour-minute-container {
-      padding: 0;
-    }
-
-    .mtx-calendar-header-ampm-container {
-      flex-direction: row;
-    }
-
-    .mtx-calendar-header-ampm {
-      padding: 4px;
-    }
-  }
-}

package/datetimepicker/clock.d.ts

@@ -1,5 +1,5 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import * as i0 from "@angular/core";
@@ -16,6 +16,7 @@ export declare type MtxClockView = 'hour' | 'minute';
 export declare class MtxClock<D> implements AfterContentInit {
     private _element;
     private _adapter;
+    private _cdr;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
     /** Step over minutes. */
@@ -38,7 +39,7 @@ export declare class MtxClock<D> implements AfterContentInit {
     private _timeChanged;
     private mouseMoveListener;
     private mouseUpListener;
-    constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>);
+    constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>, _cdr: ChangeDetectorRef);
     /**
      * The date to display in this clock view.
      */

package/datetimepicker/clock.scss

@@ -1,5 +1,5 @@
 $clock-min-size: 224px !default;
-$clock-margin: 8px !default;
+$clock-margin: 12px !default;
 $clock-cell-size: 14.1666% !default;
 
 .mtx-clock {

package/datetimepicker/datetimepicker-content.scss

@@ -4,6 +4,8 @@ $non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calenda
 $non-touch-calendar-portrait-height: 424px;
 $non-touch-calendar-landscape-width: 446px;
 $non-touch-calendar-landscape-height: 328px;
+$non-touch-calendar-with-time-input-portrait-height: 490px;
+$non-touch-calendar-with-time-input-landscape-height: 412px;
 
 // Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
 // these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
@@ -24,6 +26,17 @@ $touch-min-height: 300px;
 $touch-max-width: 750px;
 $touch-max-height: 850px;
 
+@mixin landscape-calendar-size {
+  .mtx-calendar {
+    width: $non-touch-calendar-landscape-width;
+    height: $non-touch-calendar-landscape-height;
+
+    &.mtx-calendar-with-time-input {
+      height: $non-touch-calendar-with-time-input-landscape-height;
+    }
+  }
+}
+
 .mtx-datetimepicker-content {
   display: block;
   border-radius: 4px;
@@ -41,16 +54,18 @@ $touch-max-height: 850px;
   width: $non-touch-calendar-portrait-width;
   height: $non-touch-calendar-portrait-height;
 
-  &[mode='landscape'] {
-    width: $non-touch-calendar-landscape-width;
-    height: $non-touch-calendar-landscape-height;
+  &.mtx-calendar-with-time-input {
+    height: $non-touch-calendar-with-time-input-portrait-height;
   }
 }
 
+.mtx-datetimepicker-content[mode='landscape'] {
+  @include landscape-calendar-size;
+}
+
 @media all and (orientation: landscape) {
-  .mtx-datetimepicker-content .mtx-calendar[mode='auto'] {
-    width: $non-touch-calendar-landscape-width;
-    height: $non-touch-calendar-landscape-height;
+  .mtx-datetimepicker-content[mode='auto'] {
+    @include landscape-calendar-size;
   }
 }
 

package/datetimepicker/datetimepicker-intl.d.ts

@@ -0,0 +1,51 @@
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class MtxDatetimepickerIntl {
+    /**
+     * Stream to emit from when labels are changed. Use this to notify components when the labels have
+     * changed after initialization.
+     */
+    readonly changes: Subject<void>;
+    /** A label for the calendar popup (used by screen readers). */
+    calendarLabel: string;
+    /** A label for the button used to open the calendar popup (used by screen readers). */
+    openCalendarLabel: string;
+    /** Label for the button used to close the calendar popup. */
+    closeCalendarLabel: string;
+    /** A label for the previous month button (used by screen readers). */
+    prevMonthLabel: string;
+    /** A label for the next month button (used by screen readers). */
+    nextMonthLabel: string;
+    /** A label for the previous year button (used by screen readers). */
+    prevYearLabel: string;
+    /** A label for the next year button (used by screen readers). */
+    nextYearLabel: string;
+    /** A label for the previous multi-year button (used by screen readers). */
+    prevMultiYearLabel: string;
+    /** A label for the next multi-year button (used by screen readers). */
+    nextMultiYearLabel: string;
+    /** A label for the 'switch to month view' button (used by screen readers). */
+    switchToMonthViewLabel: string;
+    /** A label for the 'switch to year view' button (used by screen readers). */
+    switchToYearViewLabel: string;
+    /** A label for the 'switch to multi-year view' button (used by screen readers). */
+    switchToMultiYearViewLabel: string;
+    /** A label for the first date of a range of dates (used by screen readers). */
+    startDateLabel: string;
+    /** A label for the last date of a range of dates (used by screen readers). */
+    endDateLabel: string;
+    /** Formats a range of years (used for visuals). */
+    formatYearRange(start: string, end: string): string;
+    /** Formats a label for a range of years (used by screen readers). */
+    formatYearRangeLabel(start: string, end: string): string;
+    /** A label for the 'switch to clock hour view' button (used by screen readers). */
+    switchToClockHourViewLabel: string;
+    /** A label for the 'switch to clock minute view' button (used by screen readers). */
+    switchToClockMinuteViewLabel: string;
+    /** Label used for ok button within the manual time input. */
+    okLabel: string;
+    /** Label used for cancel button within the manual time input. */
+    cancelLabel: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MtxDatetimepickerIntl>;
+}

package/datetimepicker/datetimepicker-module.d.ts

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

package/datetimepicker/datetimepicker-toggle.d.ts

@@ -1,8 +1,8 @@
 import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { MatButton } from '@angular/material/button';
-import { MatDatepickerIntl } from '@angular/material/datepicker';
 import { MtxDatetimepicker } from './datetimepicker';
+import { MtxDatetimepickerIntl } from './datetimepicker-intl';
 import * as i0 from "@angular/core";
 /** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
 export declare class MtxDatetimepickerToggleIcon {
@@ -10,13 +10,15 @@ export declare class MtxDatetimepickerToggleIcon {
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerToggleIcon, "[mtxDatetimepickerToggleIcon]", never, {}, {}, never, never, false>;
 }
 export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
-    _intl: MatDatepickerIntl;
+    _intl: MtxDatetimepickerIntl;
     private _changeDetectorRef;
     private _stateChanges;
     /** Datetimepicker instance that the button will toggle. */
     datetimepicker: MtxDatetimepicker<D>;
     /** Tabindex for the toggle. */
     tabIndex: number;
+    /** Screen-reader label for the button. */
+    ariaLabel?: string;
     /** Whether the toggle button is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -27,7 +29,7 @@ export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnC
     _customIcon: MtxDatetimepickerToggleIcon;
     /** Underlying button element. */
     _button: MatButton;
-    constructor(_intl: MatDatepickerIntl, _changeDetectorRef: ChangeDetectorRef);
+    constructor(_intl: MtxDatetimepickerIntl, _changeDetectorRef: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
@@ -36,5 +38,5 @@ export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnC
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_disableRipple: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerToggle<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerToggle<any>, "mtx-datetimepicker-toggle", ["mtxDatetimepickerToggle"], { "datetimepicker": "for"; "tabIndex": "tabIndex"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[mtxDatetimepickerToggleIcon]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerToggle<any>, "mtx-datetimepicker-toggle", ["mtxDatetimepickerToggle"], { "datetimepicker": "for"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[mtxDatetimepickerToggleIcon]"], false>;
 }

package/datetimepicker/datetimepicker-types.d.ts

@@ -1,2 +1,6 @@
 /** Possible types for datetimepicker. */
 export declare type MtxDatetimepickerType = 'date' | 'time' | 'month' | 'year' | 'datetime';
+/** Possible views for datetimepicker calendar. */
+export declare type MtxCalendarView = 'clock' | 'month' | 'year' | 'multi-year';
+/** Possible types for AM / PM */
+export declare type MtxAMPM = 'AM' | 'PM';