@ng-matero/extensions 16.3.1 → 17.0.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.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 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 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 ngAcceptInputType_disabled: unknown;
 }

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';
@@ -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 ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
 }

package/datetimepicker/datetimepicker.d.ts

@@ -1,10 +1,9 @@
-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';
+import { Subject } from 'rxjs';
 import { MtxCalendar } from './calendar';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import { MtxDatetimepickerInput } from './datetimepicker-input';
@@ -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 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";

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;

package/datetimepicker/time.d.ts

@@ -1,4 +1,4 @@
-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';
@@ -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 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";
 /**

package/drawer/_drawer-theme.scss

@@ -1,36 +1,69 @@
-@use '../core/theming/theming';
+@use '@angular/material' as mat;
 @use '../core/style/sass-utils';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/drawer' as tokens-mtx-drawer;
 
-@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-drawer.$prefix,
-      tokens-mtx-drawer.get-color-tokens($config));
+@mixin base($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, base));
+  }
+  @else {
+    @include sass-utils.current-selector-or-root() {
+      @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
+        tokens-mtx-drawer.get-unthemable-tokens());
+    }
   }
 }
 
-@mixin typography($config-or-theme) {}
+@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-drawer.$prefix,
+        tokens-mtx-drawer.get-color-tokens($theme));
+    }
+  }
+}
 
-@mixin density($config-or-theme) {}
+@mixin typography($theme) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(mat.get-theme-tokens($theme, typography));
+  }
+  @else {}
+}
 
-@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-drawer') {
-    $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);
-    }
-    @if $density != null {
-      @include density($density);
+@mixin theme($theme) {
+  @include mat.private-check-duplicate-theme-styles($theme, 'mtx-drawer') {
+    @if mat.get-theme-version($theme) == 1 {
+      @include _theme-from-tokens(mat.get-theme-tokens($theme));
     }
-    @if $typography != null {
-      @include typography($typography);
+    @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);
+      }
     }
   }
 }
+
+@mixin _theme-from-tokens($tokens) {
+  @if ($tokens != ()) {
+    @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
+      map.get($tokens, tokens-mtx-drawer.$prefix));
+  }
+}

package/drawer/drawer-container.scss

@@ -1,16 +1,17 @@
 @use '@angular/cdk' as cdk;
-
-@use '../core/style/elevation';
+@use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/drawer' as tokens-mtx-drawer;
 
+$_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
+
 .mtx-drawer-container {
   display: block;
   outline: 0;
 
-  @include elevation.elevation(16);
+  @include mat.elevation(16);
 
-  @include token-utils.use-tokens(tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots()) {
+  @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(background-color, container-background-color);
     @include token-utils.create-token-slot(color, container-text-color);
   }
@@ -28,16 +29,36 @@
 
 .mtx-drawer-right {
   transform: translateX(100%);
+
+  @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-bottom-left-radius, container-shape);
+  }
 }
 
 .mtx-drawer-left {
   transform: translateX(-100%);
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(border-top-right-radius, container-shape);
+    @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
+  }
 }
 
 .mtx-drawer-bottom {
   transform: translateY(100%);
+
+  @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);
+  }
 }
 
 .mtx-drawer-top {
   transform: translateY(-100%);
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
+    @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
+  }
 }

package/esm2022/alert/alert-module.mjs

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 import { MtxAlert } from './alert';
 import * as i0 from "@angular/core";
 export class MtxAlertModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.7", ngImport: i0, type: MtxAlertModule, declarations: [MtxAlert], imports: [CommonModule], exports: [MtxAlert] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxAlertModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.7", ngImport: i0, type: MtxAlertModule, declarations: [MtxAlert], imports: [CommonModule], exports: [MtxAlert] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxAlertModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MtxAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],