@ng-matero/extensions 12.5.2 → 13.0.0

package/core/typography/_typography.scss

@@ -0,0 +1,273 @@
+@use 'sass:map';
+@use 'typography-utils';
+@use '../theming/theming';
+
+/// Defines a typography level from the Material Design spec.
+/// @param {String} $font-size The font-size for this level.
+/// @param {String | Number} $line-height The line-height for this level.
+/// @param {String | Number} $font-weight The font-weight for this level.
+/// @param {String} $font-family The font-family for this level.
+/// @param {String} $letter-spacing The letter-spacing for this level.
+/// @returns {Map} A map representing the definition of this typpographic level.
+@function define-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400,
+  $font-family: null,
+  $letter-spacing: normal) {
+
+  @return (
+    font-size: $font-size,
+    line-height: $line-height,
+    font-weight: $font-weight,
+    font-family: $font-family,
+    letter-spacing: $letter-spacing
+  );
+}
+
+/// Defines a collection of typography levels to configure typography for an application.
+/// Any level not specified defaults to the values defined in the Material Design specification:
+/// https://material.io/guidelines/style/typography.html.
+///
+/// Note that the Material Design specification does not describe explicit letter-spacing values.
+/// The values here come from reverse engineering the Material Design examples.
+/// @param {String} $font-family Default font-family for levels that don't specify font-family.
+/// @param {Map} $display-4 Configuration for the "display-4" typographic level.
+/// @param {Map} $display-3 Configuration for the "display-3" typographic level.
+/// @param {Map} $display-2 Configuration for the "display-2" typographic level.
+/// @param {Map} $display-1 Configuration for the "display-1" typographic level.
+/// @param {Map} $headline Configuration for the "headline" typographic level.
+/// @param {Map} $title Configuration for the "title" typographic level.
+/// @param {Map} $subheading-2 Configuration for the "subheading-2" typographic level.
+/// @param {Map} $subheading-1 Configuration for the "subheading-1" typographic level.
+/// @param {Map} $body-2 Configuration for the "body-2" typographic level.
+/// @param {Map} $body-1 Configuration for the "body-1" typographic level.
+/// @param {Map} $caption Configuration for the "caption" typographic level.
+/// @param {Map} $button Configuration for the "button" typographic level.
+/// @param {Map} $input Configuration for the "input" typographic level.
+/// @returns {Map} A typography config for the application.
+@function define-typography-config(
+  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+  $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -.05em),
+  $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -.02em),
+  $display-2:     define-typography-level(45px, 48px, 400, $letter-spacing: -.005em),
+  $display-1:     define-typography-level(34px, 40px, 400),
+  $headline:      define-typography-level(24px, 32px, 400),
+  $title:         define-typography-level(20px, 32px, 500),
+  $subheading-2:  define-typography-level(16px, 28px, 400),
+  $subheading-1:  define-typography-level(15px, 24px, 400),
+  $body-2:        define-typography-level(14px, 24px, 500),
+  $body-1:        define-typography-level(14px, 20px, 400),
+  $caption:       define-typography-level(12px, 20px, 400),
+  $button:        define-typography-level(14px, 14px, 500),
+
+  $input:         define-typography-level(inherit, 1.125, 400)
+) {
+
+  // Declare an initial map with all of the levels.
+  $config: (
+    display-4:      $display-4,
+    display-3:      $display-3,
+    display-2:      $display-2,
+    display-1:      $display-1,
+    headline:       $headline,
+    title:          $title,
+    subheading-2:   $subheading-2,
+    subheading-1:   $subheading-1,
+    body-2:         $body-2,
+    body-1:         $body-1,
+    caption:        $caption,
+    button:         $button,
+    input:          $input,
+  );
+
+  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+  @each $key, $level in $config {
+    @if map.get($level, font-family) == null {
+      $new-level: map.merge($level, (font-family: $font-family));
+      $config: map.merge($config, ($key: $new-level));
+    }
+  }
+
+  // Add the base font family to the config.
+  @return map.merge($config, (font-family: $font-family));
+}
+
+// Whether a config is for the Material Design 2018 typography system.
+@function private-typography-is-2018-config($config) {
+  @return map.get($config, headline-1) != null;
+}
+
+// Whether a config is for the Material Design 2014 typography system.
+@function private-typography-is-2014-config($config) {
+  @return map.get($config, headline) != null;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2014 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+//
+// Components using this function should be migrated to normalize to the 2018 style config instead.
+// New components should not use this function.
+@function private-typography-to-2014-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2014-config($config) {
+    $args: (
+      display-4: map.get($config, headline-1),
+      display-3: map.get($config, headline-2),
+      display-2: map.get($config, headline-3),
+      display-1: map.get($config, headline-4),
+      headline: map.get($config, headline-5),
+      title: map.get($config, headline-6),
+      subheading-2: map.get($config, subtitle-1),
+      subheading-1: map.get($config, subtitle-2),
+      body-2: map.get($config, body-1),
+      body-1: map.get($config, body-2),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+    );
+    $non-null-args: ();
+    @each $key, $value in $args {
+      @if $value != null {
+        $non-null-args: map.merge($non-null-args, ($key: $value));
+      }
+    }
+    @return define-typography-config($non-null-args...);
+  }
+  @return $config;
+}
+
+// Given a config for either the 2014 or 2018 Material Design typography system,
+// produces a normalized typography config for the 2018 Material Design typography system.
+// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
+// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
+@function private-typography-to-2018-config($config) {
+  @if $config == null {
+    @return null;
+  }
+  @if not private-typography-is-2018-config($config) {
+    @return (
+      headline-1: map.get($config, display-4),
+      headline-2: map.get($config, display-3),
+      headline-3: map.get($config, display-2),
+      headline-4: map.get($config, display-1),
+      headline-5: map.get($config, headline),
+      headline-6: map.get($config, title),
+      subtitle-1: map.get($config, subheading-2),
+
+      subtitle-2: map.get($config, body-2),
+      body-1: map.get($config, subheading-1),
+
+      body-2: map.get($config, body-1),
+      button: map.get($config, button),
+      caption: map.get($config, caption),
+      overline: if(map.get($config, overline), map.get($config, overline), define-typography-level(12px, 32px, 500))
+    );
+  }
+  @return $config;
+}
+
+/// Emits baseline typographic styles based on a given config.
+/// @param {Map} $config-or-theme A typography config for an entire theme.
+/// @param {String} $selector Ancestor selector under which native elements, such as h1, will
+///     be styled.
+@mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {
+  $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
+
+  .mat-h1, .mat-headline, #{$selector} h1 {
+    @include typography-utils.typography-level($config, headline);
+
+    margin: 0 0 16px;
+  }
+
+  .mat-h2, .mat-title, #{$selector} h2 {
+    @include typography-utils.typography-level($config, title);
+
+    margin: 0 0 16px;
+  }
+
+  .mat-h3, .mat-subheading-2, #{$selector} h3 {
+    @include typography-utils.typography-level($config, subheading-2);
+
+    margin: 0 0 16px;
+  }
+
+  .mat-h4, .mat-subheading-1, #{$selector} h4 {
+    @include typography-utils.typography-level($config, subheading-1);
+
+    margin: 0 0 16px;
+  }
+
+  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
+  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
+  // and h6 at 0.67em.
+  .mat-h5, #{$selector} h5 {
+    @include typography-utils.font-shorthand(
+
+      calc(#{typography-utils.font-size($config, body-1)} * .83),
+      typography-utils.font-weight($config, body-1),
+      typography-utils.line-height($config, body-1),
+      typography-utils.font-family($config, body-1)
+    );
+
+    margin: 0 0 12px;
+  }
+
+  .mat-h6, #{$selector} h6 {
+    @include typography-utils.font-shorthand(
+
+      calc(#{typography-utils.font-size($config, body-1)} * .67),
+      typography-utils.font-weight($config, body-1),
+      typography-utils.line-height($config, body-1),
+      typography-utils.font-family($config, body-1)
+    );
+
+    margin: 0 0 12px;
+  }
+
+  .mat-body-strong,
+  .mat-body-2 {
+    @include typography-utils.typography-level($config, body-2);
+  }
+
+  .mat-body, .mat-body-1, #{$selector} {
+    @include typography-utils.typography-level($config, body-1);
+
+    p {
+      margin: 0 0 12px;
+    }
+  }
+
+  .mat-small,
+  .mat-caption {
+    @include typography-utils.typography-level($config, caption);
+  }
+
+  .mat-display-4, #{$selector} .mat-display-4 {
+    @include typography-utils.typography-level($config, display-4);
+
+    margin: 0 0 56px;
+  }
+
+  .mat-display-3, #{$selector} .mat-display-3 {
+    @include typography-utils.typography-level($config, display-3);
+
+    margin: 0 0 64px;
+  }
+
+  .mat-display-2, #{$selector} .mat-display-2 {
+    @include typography-utils.typography-level($config, display-2);
+
+    margin: 0 0 64px;
+  }
+
+  .mat-display-1, #{$selector} .mat-display-1 {
+    @include typography-utils.typography-level($config, display-1);
+
+    margin: 0 0 64px;
+  }
+}

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
-@use '~@angular/material/core/theming/theming';
-@use '~@angular/material/core/theming/palette';
-@use '~@angular/material/core/style/private';
-@use '~@angular/material/core/typography/typography';
-@use '~@angular/material/core/typography/typography-utils';
+@use '../core/theming/theming';
+@use '../core/theming/palette';
+@use '../core/style/private';
+@use '../core/typography/typography';
+@use '../core/typography/typography-utils';
 
 $selected-today-box-shadow-width: 1px;
 $calendar-body-font-size: 13px !default;
@@ -120,6 +120,18 @@ $clock-font-size: 14px !default;
       color: $disabled-color;
     }
   }
+
+  .mtx-datetimepicker-toggle-active {
+    color: theming.get-color-from-palette(map.get($config, primary), text);
+
+    &.mat-accent {
+      color: theming.get-color-from-palette(map.get($config, accent), text);
+    }
+
+    &.mat-warn {
+      color: theming.get-color-from-palette(map.get($config, warn), text);
+    }
+  }
 }
 
 @mixin typography($config-or-theme) {

package/datetimepicker/calendar-body.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
 /**
  * An internal class that represents the data corresponding to a single calendar cell.
  * @docs-private
@@ -37,4 +38,6 @@ export declare class MtxCalendarBody {
     get _firstRowOffset(): number;
     _cellClicked(cell: MtxCalendarCell): void;
     _isActiveCell(rowIndex: number, colIndex: number): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxCalendarBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "selectedValue": "selectedValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "allowDisabledSelection": "allowDisabledSelection"; "activeCell": "activeCell"; }, { "selectedValueChange": "selectedValueChange"; }, never, never>;
 }

package/datetimepicker/calendar-body.scss

@@ -1,10 +1,11 @@
-@use '~@angular/material/core/style/private';
+@use 'sass:math';
+@use '../core/style/private';
 
 $calendar-body-label-padding-start: 5% !default;
-$calendar-body-label-side-padding: private.private-div(33%, 7) !default;
+$calendar-body-label-side-padding: math.div(33%, 7) !default;
 $calendar-body-cell-min-size: 32px !default;
-$calendar-body-cell-size: private.private-div(100%, 7) !default;
-$calendar-body-cell-padding: private.private-div($calendar-body-cell-size, 2) !default;
+$calendar-body-cell-size: math.div(100%, 7) !default;
+$calendar-body-cell-padding: math.div($calendar-body-cell-size, 2) !default;
 $calendar-body-cell-content-margin: 5% !default;
 $calendar-body-cell-content-border-width: 1px !default;
 $calendar-body-cell-radius: 999px !default;

package/datetimepicker/calendar.d.ts

@@ -1,11 +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 } from '@ng-matero/extensions/core';
-import { MtxDatetimeFormats } from '@ng-matero/extensions/core';
+import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
-import { MtxDatetimepickerType } from './datetimepicker';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
+import { MtxDatetimepickerType } from './datetimepicker-types';
+import * as i0 from "@angular/core";
 export declare type MtxCalendarView = 'clock' | 'month' | 'year' | 'multi-year';
 /**
  * A calendar that is used as part of the datetimepicker.
@@ -17,7 +17,6 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _ngZone;
     private _adapter;
     private _dateFormats;
-    _userSelection: EventEmitter<void>;
     get multiYearSelector(): boolean;
     set multiYearSelector(value: boolean);
     private _multiYearSelector;
@@ -30,19 +29,13 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     timeInterval: number;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
-    ariaLabel: string;
-    ariaNextMonthLabel: string;
-    ariaPrevMonthLabel: string;
-    ariaNextYearLabel: string;
-    ariaPrevYearLabel: string;
-    ariaNextMultiYearLabel: string;
-    ariaPrevMultiYearLabel: string;
     /** Prevent user to select same date time */
     preventSameDateTimeSelection: boolean;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
     /** Emits when the view has been changed. */
     viewChanged: EventEmitter<MtxCalendarView>;
+    _userSelection: EventEmitter<void>;
     _AMPM: string;
     _clockView: MtxClockView;
     _calendarState: string;
@@ -142,4 +135,6 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _2digit;
     static ngAcceptInputType_multiYearSelector: BooleanInput;
     static ngAcceptInputType_twelvehour: 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>;
 }

package/datetimepicker/clock.d.ts

@@ -1,6 +1,8 @@
+import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
+import * as i0 from "@angular/core";
 export declare const CLOCK_RADIUS = 50;
 export declare const CLOCK_INNER_RADIUS = 27.5;
 export declare const CLOCK_OUTER_RADIUS = 41.25;
@@ -13,14 +15,16 @@ export declare type MtxClockView = 'hour' | 'minute';
 export declare class MtxClock<D> implements AfterContentInit {
     private _element;
     private _adapter;
-    _userSelection: EventEmitter<void>;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
     interval: number;
     twelvehour: boolean;
     /** Emits when the currently selected date changes. */
     selectedChange: EventEmitter<D>;
+    /** Emits when any date is activated. */
     activeDateChange: EventEmitter<D>;
+    /** Emits when any date is selected. */
+    readonly _userSelection: EventEmitter<void>;
     /** Hours and Minutes representing the clock view. */
     _hours: any[];
     _minutes: any[];
@@ -32,32 +36,29 @@ export declare class MtxClock<D> implements AfterContentInit {
     private mouseMoveListener;
     private mouseUpListener;
     constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>);
-    private _activeDate;
     /**
      * The date to display in this clock view.
      */
     get activeDate(): D;
     set activeDate(value: D);
-    private _selected;
+    private _activeDate;
     /** The currently selected date. */
     get selected(): D | null;
     set selected(value: D | null);
-    private _minDate;
+    private _selected;
     /** The minimum selectable date. */
     get minDate(): D | null;
     set minDate(value: D | null);
-    private _maxDate;
+    private _minDate;
     /** The maximum selectable date. */
     get maxDate(): D | null;
     set maxDate(value: D | null);
+    private _maxDate;
     /** Whether the clock should be started in hour or minute view. */
     set startView(value: MtxClockView);
     get _hand(): any;
     ngAfterContentInit(): void;
-    /**
-     * TODO: use `fromEvent` of rxjs.
-     * Handles mousedown events on the clock body.
-     */
+    /** Handles mousedown events on the clock body. */
     _handleMousedown(event: any): void;
     _handleMousemove(event: any): void;
     _handleMouseup(): void;
@@ -68,4 +69,7 @@ export declare class MtxClock<D> implements AfterContentInit {
      * @param event
      */
     private setTime;
+    static ngAcceptInputType_twelvehour: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxClock<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxClock<any>, "mtx-clock", ["mtxClock"], { "dateFilter": "dateFilter"; "interval": "interval"; "twelvehour": "twelvehour"; "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "startView": "startView"; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; }, never, never>;
 }

package/datetimepicker/datetimepicker-animations.d.ts

@@ -1,8 +1,10 @@
 import { AnimationTriggerMetadata } from '@angular/animations';
 /**
- * This animation fades in the background color and text content of the
- * select's options. It is time delayed to occur 100ms after the overlay
- * panel has transformed in.
+ * Animations used by the Material datepicker.
+ * @docs-private
  */
-export declare const fadeInContent: AnimationTriggerMetadata;
-export declare const slideCalendar: AnimationTriggerMetadata;
+export declare const mtxDatetimepickerAnimations: {
+    readonly transformPanel: AnimationTriggerMetadata;
+    readonly fadeInCalendar: AnimationTriggerMetadata;
+    readonly slideCalendar: AnimationTriggerMetadata;
+};

package/datetimepicker/datetimepicker-input.d.ts

@@ -1,11 +1,12 @@
 import { AfterContentInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { BooleanInput } from '@angular/cdk/coercion';
+import { ThemePalette } from '@angular/material/core';
 import { MatFormField } from '@angular/material/form-field';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
-import { MtxDatetimeFormats } from '@ng-matero/extensions/core';
+import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxDatetimepicker } from './datetimepicker';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
+import * as i0 from "@angular/core";
 export declare const MAT_DATETIMEPICKER_VALUE_ACCESSOR: any;
 export declare const MAT_DATETIMEPICKER_VALIDATORS: any;
 /**
@@ -98,5 +99,9 @@ export declare class MtxDatetimepickerInput<D> implements AfterContentInit, Cont
     private _validator;
     /** Formats a value and sets it on the input element. */
     private _formatValue;
+    /** Returns the palette used by the input's form field, if any. */
+    getThemePalette(): ThemePalette;
     static ngAcceptInputType_disabled: BooleanInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerInput<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerInput<any>, "input[mtxDatetimepicker]", ["mtxDatetimepickerInput"], { "mtxDatetimepicker": "mtxDatetimepicker"; "mtxDatetimepickerFilter": "mtxDatetimepickerFilter"; "value": "value"; "min": "min"; "max": "max"; "disabled": "disabled"; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
 }

package/datetimepicker/datetimepicker-module.d.ts

@@ -0,0 +1,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";
+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 ɵinj: i0.ɵɵInjectorDeclaration<MtxDatetimepickerModule>;
+}

package/datetimepicker/datetimepicker-toggle.d.ts

@@ -1,22 +1,40 @@
 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 * as i0 from "@angular/core";
+/** Can be used to override the icon of a `mtxDatetimepickerToggle`. */
+export declare class MtxDatetimepickerToggleIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerToggleIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerToggleIcon, "[mtxDatetimepickerToggleIcon]", never, {}, {}, never>;
+}
 export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     _intl: MatDatepickerIntl;
     private _changeDetectorRef;
+    private _stateChanges;
     /** Datetimepicker instance that the button will toggle. */
     datetimepicker: MtxDatetimepicker<D>;
-    private _stateChanges;
-    constructor(_intl: MatDatepickerIntl, _changeDetectorRef: ChangeDetectorRef);
+    /** Tabindex for the toggle. */
+    tabIndex: number;
     /** Whether the toggle button is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    /** Whether ripples on the toggle should be disabled. */
+    disableRipple: boolean;
+    /** Custom icon set by the consumer. */
+    _customIcon: MtxDatetimepickerToggleIcon;
+    /** Underlying button element. */
+    _button: MatButton;
+    constructor(_intl: MatDatepickerIntl, _changeDetectorRef: ChangeDetectorRef);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
     _open(event: Event): void;
     private _watchStateChanges;
     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]"]>;
 }

package/datetimepicker/datetimepicker-toggle.scss

@@ -0,0 +1,23 @@
+.mat-form-field-appearance-legacy {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mtx-datetimepicker-toggle-default-icon {
+      width: 1em;
+    }
+  }
+}
+
+.mat-form-field:not(.mat-form-field-appearance-legacy) {
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    .mtx-datetimepicker-toggle-default-icon {
+      display: block;
+      width: 1.5em;
+      height: 1.5em;
+    }
+
+    .mat-icon-button .mtx-datetimepicker-toggle-default-icon {
+      margin: auto;
+    }
+  }
+}

package/datetimepicker/datetimepicker-types.d.ts

@@ -0,0 +1 @@
+export declare type MtxDatetimepickerType = 'date' | 'time' | 'month' | 'year' | 'datetime';