@ng-matero/extensions 16.3.2 → 17.1.0

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,77 +1,104 @@
 @use 'sass:map';
-@use '../core/theming/theming';
-@use '../core/typography/typography';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
 
-@mixin _calendar-color($config, $palette) {
-  $palette-color: theming.get-color-from-palette(map.get($config, $palette));
-  $calendar-tokens: tokens-mtx-datetimepicker.private-get-calendar-color-palette-color-tokens($config, $palette);
+@mixin _calendar-color($theme, $palette-name) {
+  $palette-color: mat.get-theme-color($theme, $palette-name);
+  $calendar-tokens: tokens-mtx-datetimepicker.private-get-calendar-color-palette-color-tokens($theme, $palette-name);
 
   @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $calendar-tokens);
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
-      tokens-mtx-datetimepicker.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
   }
-
-  .mtx-datetimepicker-content {
-    &.mat-accent {
-      @include _calendar-color($config, accent);
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
+        tokens-mtx-datetimepicker.get-unthemable-tokens());
     }
+  }
+}
 
-    &.mat-warn {
-      @include _calendar-color($config, warn);
-    }
+@mixin color($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, color));
   }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
+        tokens-mtx-datetimepicker.get-color-tokens($theme));
+    }
+
+    .mtx-datetimepicker-content {
+      &.mat-accent {
+        @include _calendar-color($theme, accent);
+      }
 
-  .mtx-datetimepicker-toggle-active {
-    &.mat-accent {
-      $accent-tokens: tokens-mtx-datetimepicker.private-get-toggle-color-palette-color-tokens($config, accent);
-      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $accent-tokens);
+      &.mat-warn {
+        @include _calendar-color($theme, warn);
+      }
     }
 
-    &.mat-warn {
-      $warn-tokens: tokens-mtx-datetimepicker.private-get-toggle-color-palette-color-tokens($config, warn);
-      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $warn-tokens);
+    .mtx-datetimepicker-toggle-active {
+      &.mat-accent {
+        $accent-tokens: tokens-mtx-datetimepicker.private-get-toggle-color-palette-color-tokens($theme, accent);
+        @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $accent-tokens);
+      }
+
+      &.mat-warn {
+        $warn-tokens: tokens-mtx-datetimepicker.private-get-toggle-color-palette-color-tokens($theme, warn);
+        @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix, $warn-tokens);
+      }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2014-config(theming.get-typography-config($config-or-theme));
-
-  @include sass-utils.current-selector-or-root() {
-    @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
-      tokens-mtx-datetimepicker.get-typography-tokens($config));
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
+        tokens-mtx-datetimepicker.get-typography-tokens($theme));
+    }
   }
 }
 
-@mixin density($config-or-theme) {}
-
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-
-  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
-    $color: theming.get-color-config($theme);
-    $density: theming.get-density-config($theme);
-    $typography: theming.get-typography-config($theme);
+@mixin density($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, density));
+  }
+  @else {}
+}
 
-    @if $color !=null {
-      @include color($color);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-datetimepicker') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-
-    @if $density !=null {
-      @include density($density);
+    @else {
+      @include base($theme);
+      @if mat.theme-has($theme, color) {
+        @include color($theme);
+      }
+      @if mat.theme-has($theme, density) {
+        @include density($theme);
+      }
+      @if mat.theme-has($theme, typography) {
+        @include typography($theme);
+      }
     }
+  }
+}
 
-    @if $typography !=null {
-      @include typography($typography);
-    }
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
+      map.get($tokens, tokens-mtx-datetimepicker.$prefix));
   }
 }

package/datetimepicker/calendar-body.d.ts

@@ -39,5 +39,5 @@ export declare class MtxCalendarBody {
     _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": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxCalendarBody, "[mtx-calendar-body]", ["mtxCalendarBody"], { "label": { "alias": "label"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "allowDisabledSelection": { "alias": "allowDisabledSelection"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
 }

package/datetimepicker/calendar.d.ts

@@ -1,10 +1,9 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
-import { MtxAMPM, MtxCalendarView, MtxDatetimepickerType } from './datetimepicker-types';
 import { MtxDatetimepickerIntl } from './datetimepicker-intl';
+import { MtxAMPM, MtxCalendarView, MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 /**
  * A calendar that is used as part of the datetimepicker.
@@ -17,13 +16,9 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _adapter;
     private _dateFormats;
     /** Whether to show multi-year view. */
-    get multiYearSelector(): boolean;
-    set multiYearSelector(value: boolean);
-    private _multiYearSelector;
+    multiYearSelector: boolean;
     /** Whether the clock uses 12 hour format. */
-    get twelvehour(): boolean;
-    set twelvehour(value: boolean);
-    private _twelvehour;
+    twelvehour: boolean;
     /** Whether the calendar should be started in month or year view. */
     startView: MtxCalendarView;
     /** Step over minutes. */
@@ -55,9 +50,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
      * 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;
+    timeInput: boolean;
     /** The currently selected date. */
     get selected(): D | null;
     set selected(value: D | null);
@@ -146,9 +139,9 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     private _nextMonthInSameCol;
     private calendarState;
     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": { "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; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "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, false, 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; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "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_timeInput: unknown;
 }

package/datetimepicker/calendar.scss

@@ -27,10 +27,21 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
       width: $landscape-calendar-header-width;
       min-width: $landscape-calendar-header-width;
       padding: 16px 8px;
-      border-radius: 4px 0 0 4px;
 
-      [dir='rtl'] & {
-        border-radius: 0 4px 4px 0;
+      @include token-utils.use-tokens($_tokens...) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+
+        @include token-utils.create-token-slot(border-top-left-radius, container-shape);
+        @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+
+        [dir='rtl'] & {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+
+          @include token-utils.create-token-slot(border-top-right-radius, container-shape);
+          @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
+        }
       }
     }
 
@@ -83,9 +94,10 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 .mtx-calendar-header {
   box-sizing: border-box;
   padding: 8px;
-  border-radius: 4px 4px 0 0;
 
   @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(border-top-left-radius, container-shape);
+    @include token-utils.create-token-slot(border-top-right-radius, container-shape);
     @include token-utils.create-token-slot(background-color, calendar-header-background-color);
     @include token-utils.create-token-slot(color, calendar-header-text-color);
   }

package/datetimepicker/clock.d.ts

@@ -1,4 +1,3 @@
-import { BooleanInput } from '@angular/cdk/coercion';
 import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy } from '@angular/core';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
@@ -89,7 +88,7 @@ export declare class MtxClock<D> implements AfterContentInit, OnDestroy, OnChang
      * @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": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxClock<any>, "mtx-clock", ["mtxClock"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; }, never, never, true, never>;
+    static ngAcceptInputType_twelvehour: unknown;
 }

package/datetimepicker/datetimepicker-content.scss

@@ -1,4 +1,4 @@
-@use '../core/style/elevation';
+@use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
 
@@ -43,12 +43,12 @@ $touch-max-height: 850px;
 
 .mtx-datetimepicker-content {
   display: block;
-  border-radius: 4px;
 
-  @include elevation.elevation(4);
+  @include mat.elevation(4);
 
   @include token-utils.use-tokens(tokens-mtx-datetimepicker.$prefix,
     tokens-mtx-datetimepicker.get-token-slots()) {
+    @include token-utils.create-token-slot(border-radius, container-shape);
     @include token-utils.create-token-slot(background-color, calendar-container-background-color);
     @include token-utils.create-token-slot(color, calendar-container-text-color);
   }

package/datetimepicker/datetimepicker-input.d.ts

@@ -1,6 +1,5 @@
 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, MtxDatetimeFormats } from '@ng-matero/extensions/core';
@@ -101,7 +100,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 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": { "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, false, 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

@@ -1,21 +1,21 @@
 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 "./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";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/cdk/overlay";
+import * as i3 from "@angular/cdk/a11y";
+import * as i4 from "@angular/cdk/portal";
+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 i10 from "./datetimepicker";
+import * as i11 from "./datetimepicker-toggle";
+import * as i12 from "./datetimepicker-input";
+import * as i13 from "./month-view";
+import * as i14 from "./year-view";
+import * as i15 from "./multi-year-view";
 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.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 ɵ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 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]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MtxDatetimepickerModule>;
 }

package/datetimepicker/datetimepicker-toggle.d.ts

@@ -1,5 +1,4 @@
 import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { MatButton } from '@angular/material/button';
 import { MtxDatetimepicker } from './datetimepicker';
 import { MtxDatetimepickerIntl } from './datetimepicker-intl';
@@ -7,7 +6,7 @@ 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, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerToggleIcon, "[mtxDatetimepickerToggleIcon]", never, {}, {}, never, never, true, never>;
 }
 export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     _intl: MtxDatetimepickerIntl;
@@ -35,8 +34,8 @@ export declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnC
     ngAfterContentInit(): void;
     _open(event: Event): void;
     private _watchStateChanges;
-    static ngAcceptInputType_disabled: BooleanInput;
-    static ngAcceptInputType_disableRipple: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerToggle<any>, [null, null, { attribute: "tabindex"; }]>;
-    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]"], false, 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,7 +1,6 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { Directionality } from '@angular/cdk/bidi';
-import { BooleanInput } from '@angular/cdk/coercion';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { CanColor, ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
@@ -55,7 +54,7 @@ export declare class MtxDatetimepickerContent<D> extends _MtxDatetimepickerConte
     _startExitAnimation(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerContent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerContent<any>, "mtx-datetimepicker-content", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDatetimepickerContent<any>, "mtx-datetimepicker-content", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
 }
 export declare class MtxDatetimepicker<D> implements OnDestroy {
     private _overlay;
@@ -66,13 +65,9 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     private _dir;
     private _document;
     /** Whether to show multi-year view. */
-    get multiYearSelector(): boolean;
-    set multiYearSelector(value: boolean);
-    private _multiYearSelector;
+    multiYearSelector: boolean;
     /** Whether the clock uses 12 hour format. */
-    get twelvehour(): boolean;
-    set twelvehour(value: boolean);
-    private _twelvehour;
+    twelvehour: boolean;
     /** The view that the calendar should start in. */
     startView: MtxCalendarView;
     /** The display mode of datetimepicker. */
@@ -136,16 +131,12 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
      * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
      * than a popup and elements have more padding to allow for bigger touch targets.
      */
-    get touchUi(): boolean;
-    set touchUi(value: boolean);
-    private _touchUi;
+    touchUi: boolean;
     /**
      * 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;
+    timeInput: boolean;
     /** Whether the datetimepicker pop-up should be disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -159,9 +150,7 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
      * Note that automatic focus restoration is an accessibility feature and it is recommended that
      * you provide your own equivalent, if you decide to turn it off.
      */
-    get restoreFocus(): boolean;
-    set restoreFocus(value: boolean);
-    private _restoreFocus;
+    restoreFocus: boolean;
     /** The currently selected date. */
     get _selected(): D | null;
     set _selected(value: D | null);
@@ -202,15 +191,15 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     private _setConnectedPositions;
     /** Gets an observable that will emit when the overlay is supposed to be closed. */
     private _getCloseStream;
-    static ngAcceptInputType_multiYearSelector: BooleanInput;
-    static ngAcceptInputType_twelvehour: BooleanInput;
-    static ngAcceptInputType_preventSameDateTimeSelection: BooleanInput;
-    static ngAcceptInputType_disabled: BooleanInput;
-    static ngAcceptInputType_opened: BooleanInput;
-    static ngAcceptInputType_touchUi: BooleanInput;
-    static ngAcceptInputType_timeInput: BooleanInput;
-    static ngAcceptInputType_restoreFocus: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }]>;
-    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; }; "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; }; "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, false, 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; }; "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; }; "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;
+    static ngAcceptInputType_preventSameDateTimeSelection: unknown;
+    static ngAcceptInputType_opened: unknown;
+    static ngAcceptInputType_touchUi: unknown;
+    static ngAcceptInputType_timeInput: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_restoreFocus: unknown;
 }
 export {};

package/datetimepicker/month-view.d.ts

@@ -1,5 +1,5 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
-import { MtxDatetimeFormats, DatetimeAdapter } from '@ng-matero/extensions/core';
+import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
 import { MtxCalendarCell } from './calendar-body';
 import { MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
@@ -60,5 +60,5 @@ 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, false, 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"; }, never, never, true, never>;
 }

package/datetimepicker/multi-year-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 { MtxDatetimeFormats, DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 export declare const yearsPerPage = 24;
@@ -75,7 +75,7 @@ export declare class MtxMultiYearView<D> implements AfterContentInit {
      */
     private _getValidDateOrNull;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxMultiYearView<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMultiYearView<any>, "mtx-multi-year-view", ["mtxMultiYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMultiYearView<any>, "mtx-multi-year-view", ["mtxMultiYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; }, never, never, true, never>;
 }
 export declare function isSameMultiYearView<D>(dateAdapter: DatetimeAdapter<D>, date1: D, date2: D, minDate: D | null, maxDate: D | null): boolean;
 /**

package/datetimepicker/time.d.ts

@@ -1,7 +1,7 @@
-import { BooleanInput, NumberInput } from '@angular/cdk/coercion';
+import { NumberInput } from '@angular/cdk/coercion';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { SubscriptionLike } from 'rxjs';
+import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import { MtxDatetimepickerIntl } from './datetimepicker-intl';
@@ -52,7 +52,7 @@ export declare class MtxTimeInput implements OnDestroy {
      */
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxTimeInput, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxTimeInput, "input.mtx-time-input", ["mtxTimeInput"], { "timeInterval": { "alias": "timeInterval"; "required": false; }; "timeMin": { "alias": "timeMin"; "required": false; }; "timeMax": { "alias": "timeMax"; "required": false; }; "timeValue": { "alias": "timeValue"; "required": false; }; }, { "timeValueChanged": "timeValueChanged"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MtxTimeInput, "input.mtx-time-input", ["mtxTimeInput"], { "timeInterval": { "alias": "timeInterval"; "required": false; }; "timeMin": { "alias": "timeMin"; "required": false; }; "timeMax": { "alias": "timeMax"; "required": false; }; "timeValue": { "alias": "timeValue"; "required": false; }; }, { "timeValueChanged": "timeValueChanged"; }, never, never, true, never>;
 }
 export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     private _adapter;
@@ -78,9 +78,7 @@ export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     protected minuteInputDirective: MtxTimeInput | undefined;
     datetimepickerIntlChangesSubscription: SubscriptionLike;
     /** Whether the clock uses 12 hour format. */
-    get twelvehour(): boolean;
-    set twelvehour(value: boolean);
-    private _twelvehour;
+    twelvehour: boolean;
     /** Whether the time is now in AM or PM. */
     AMPM: MtxAMPM;
     /**
@@ -124,7 +122,7 @@ export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     handleOk(): void;
     handleCancel(): void;
     ngOnDestroy(): void;
-    static ngAcceptInputType_twelvehour: BooleanInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxTime<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTime<any>, "mtx-time", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTime<any>, "mtx-time", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, true, never>;
+    static ngAcceptInputType_twelvehour: unknown;
 }

package/datetimepicker/time.scss

@@ -83,14 +83,14 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
 
   .mtx-time-am,
   .mtx-time-pm {
-    --mdc-typography-button-font-weight: 400;
+    --mdc-text-button-label-text-weight: 400;
 
     @include token-utils.use-tokens($_tokens...) {
       @include token-utils.create-token-slot(--mdc-text-button-label-text-color, time-ampm-text-color);
       @include token-utils.create-token-slot(border-color, time-ampm-border-color);
 
       &.mtx-time-ampm-active {
-        --mdc-typography-button-font-weight: 500;
+        --mdc-text-button-label-text-weight: 500;
 
         @include token-utils.create-token-slot(--mdc-text-button-label-text-color, time-ampm-selected-state-text-color);
         @include token-utils.create-token-slot(background-color, time-ampm-selected-state-background-color);

package/datetimepicker/year-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 { MtxDatetimeFormats, DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 /**
@@ -54,5 +54,5 @@ export declare class MtxYearView<D> implements AfterContentInit {
     /** Whether the given month is enabled. */
     private _isMonthEnabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxYearView<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxYearView<any>, "mtx-year-view", ["mtxYearView"], { "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, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxYearView<any>, "mtx-year-view", ["mtxYearView"], { "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>;
 }

package/dialog/dialog-container.d.ts

@@ -8,5 +8,5 @@ export declare class MtxDialogContainer {
     _onClick(fn: () => void): void;
     _onClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDialogContainer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDialogContainer, "mtx-dialog-container", ["mtxDialogContainer"], {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDialogContainer, "mtx-dialog-container", ["mtxDialogContainer"], {}, {}, never, never, true, never>;
 }