@ng-matero/extensions 14.5.0 → 14.6.1

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,49 @@ $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-ampm {
+    .mtx-time-am,
+    .mtx-time-pm {
+      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 +198,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,90 @@ $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;
+
+      .mtx-calendar-header-hours,
+      .mtx-calendar-header-minutes,
+      .mtx-calendar-header-ampm {
+        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;
+  .mtx-calendar-header-year,
+  .mtx-calendar-header-date,
+  .mtx-calendar-header-hours,
+  .mtx-calendar-header-minutes,
+  .mtx-calendar-header-ampm {
+    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 {
+    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 +104,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 +121,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 +136,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 +203,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, OnDestroy } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import * as i0 from "@angular/core";
@@ -13,9 +13,11 @@ export declare type MtxClockView = 'hour' | 'minute';
  * A clock that is used as part of the datetimepicker.
  * @docs-private
  */
-export declare class MtxClock<D> implements AfterContentInit {
-    private _element;
+export declare class MtxClock<D> implements AfterContentInit, OnDestroy {
+    private _elementRef;
     private _adapter;
+    private _changeDetectorRef;
+    private _document;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
     /** Step over minutes. */
@@ -28,17 +30,14 @@ export declare class MtxClock<D> implements AfterContentInit {
     activeDateChange: EventEmitter<D>;
     /** Emits when any date is selected. */
     readonly _userSelection: EventEmitter<void>;
-    /** Hours and Minutes representing the clock view. */
-    _hours: any[];
-    _minutes: any[];
     /** Whether the clock is in hour view. */
     _hourView: boolean;
+    _hours: any[];
+    _minutes: any[];
     _selectedHour: number;
     _selectedMinute: number;
     private _timeChanged;
-    private mouseMoveListener;
-    private mouseUpListener;
-    constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>);
+    constructor(_elementRef: ElementRef, _adapter: DatetimeAdapter<D>, _changeDetectorRef: ChangeDetectorRef, _document: any);
     /**
      * The date to display in this clock view.
      */
@@ -59,12 +58,26 @@ export declare class MtxClock<D> implements AfterContentInit {
     private _maxDate;
     /** Whether the clock should be started in hour or minute view. */
     set startView(value: MtxClockView);
-    get _hand(): any;
+    get _hand(): {
+        height: string;
+        marginTop: string;
+        transform: string;
+    };
     ngAfterContentInit(): void;
-    /** Handles mousedown events on the clock body. */
-    _handleMousedown(event: any): void;
-    _handleMousemove(event: any): void;
-    _handleMouseup(): void;
+    ngOnDestroy(): void;
+    /** Called when the user has put their pointer down on the clock. */
+    private _pointerDown;
+    /**
+     * Called when the user has moved their pointer after
+     * starting to drag. Bound on the document level.
+     */
+    private _pointerMove;
+    /** Called when the user has lifted their pointer. Bound on the document level. */
+    private _pointerUp;
+    /** Binds our global move and end events. */
+    private _bindGlobalEvents;
+    /** Removes any global event listeners that we may have added. */
+    private _removeGlobalEvents;
     /** Initializes this clock view. */
     private _init;
     /**

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 {
@@ -9,6 +9,7 @@ $clock-cell-size: 14.1666% !default;
   margin: $clock-margin;
   box-sizing: border-box;
   user-select: none;
+  touch-action: none;
 }
 
 .mtx-clock-wrapper {

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>;
 }