@ng-matero/extensions 20.1.1 → 20.2.0

package/datetimepicker/_m2-datetimepicker.scss

@@ -1,149 +1,99 @@
 @use 'sass:color';
 @use 'sass:map';
 @use 'sass:meta';
-@use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
+@use '../core/tokens/m3-utils';
 @use '../core/style/elevation';
 
-$_selected-fade-amount: .6;
-$_today-fade-amount: .2;
-
-@function private-get-calendar-color-palette-color-tokens($theme, $palette-name) {
-  $palette-color: mat.get-theme-color($theme, $palette-name);
-  $default-contrast: mat.get-theme-color($theme, $palette-name, default-contrast);
-  $active-background-color: mat.get-theme-color($theme, $palette-name, 0.3);
-  $active-disabled-color: null;
-
-  @if (meta.type-of($palette-color) == color) {
-    $active-disabled-color: color.adjust($palette-color, $alpha: -$_selected-fade-amount);
-  }
-  @else {
-    $active-disabled-color: mat.get-theme-color($theme, foreground, disabled-button);
-  }
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
 
   @return (
-    datetimepicker-calendar-header-background-color: $palette-color,
-
-    datetimepicker-calendar-date-selected-state-text-color: $default-contrast,
-    datetimepicker-calendar-date-selected-state-background-color: $palette-color,
-    datetimepicker-calendar-date-selected-disabled-state-background-color: $active-disabled-color,
-    datetimepicker-calendar-date-today-selected-state-outline-color: $default-contrast,
-    datetimepicker-calendar-date-focus-state-background-color: $active-background-color,
-    datetimepicker-calendar-date-hover-state-background-color: $active-background-color,
-
-    datetimepicker-clock-hand-background-color: $palette-color,
-    datetimepicker-clock-cell-selected-state-background-color: $palette-color,
-
-    datetimepicker-time-input-active-state-text-color: $palette-color,
-    datetimepicker-time-input-active-state-background-color: mat.get-theme-color($theme, $palette-name, 0.2),
-    datetimepicker-time-input-focus-state-outline-color: $palette-color,
-    datetimepicker-time-input-focus-state-placeholder-text-color: mat.get-theme-color($theme, $palette-name, 0.6),
-
-    datetimepicker-time-ampm-selected-state-background-color: mat.get-theme-color($theme, $palette-name, 0.2),
-  );
-}
-
-@function private-get-toggle-color-palette-color-tokens($theme, $palette-name) {
-  @return (
-    datetimepicker-toggle-active-state-icon-color: mat.get-theme-color($theme, $palette-name, text),
-  );
-}
-
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    datetimepicker-container-elevation-shadow: elevation.get-box-shadow(4),
-    datetimepicker-container-touch-elevation-shadow: elevation.get-box-shadow(24),
-    datetimepicker-container-shape: 4px,
-    datetimepicker-container-touch-shape: 4px,
-    datetimepicker-selector-container-shape: 4px,
+    base: (
+      datetimepicker-container-elevation-shadow: elevation.get-box-shadow(4),
+      datetimepicker-container-touch-elevation-shadow: elevation.get-box-shadow(24),
+      datetimepicker-container-shape: 4px,
+      datetimepicker-container-touch-shape: 4px,
+      datetimepicker-selector-container-shape: 4px,
+    ),
+    color: private-get-color-palette-color-tokens($theme, primary),
+    typography: (
+      datetimepicker-calendar-text-font: map.get($system, body-large-font),
+      datetimepicker-calendar-text-size: 13px,
+      datetimepicker-calendar-body-label-text-size: map.get($system, label-small-size),
+      datetimepicker-calendar-body-label-text-weight: map.get($system, label-small-weight),
+      datetimepicker-calendar-period-button-text-size: map.get($system, label-small-size),
+      datetimepicker-calendar-period-button-text-weight: map.get($system, label-small-weight),
+      datetimepicker-calendar-table-header-text-size: 11px,
+      datetimepicker-calendar-table-header-text-weight: map.get($system, body-large-weight),
+      datetimepicker-clock-text-size: 14px,
+    ),
+    density: ()
   );
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
-  $inactive-icon-color: mat.get-theme-color($theme, foreground, icon);
-  $text-color: mat.get-theme-color($theme, foreground, text);
-  $secondary-text-color: mat.get-theme-color($theme, foreground, secondary-text);
-  $disabled-text-color: mat.get-theme-color($theme, foreground, disabled-text);
-  $divider-color: mat.get-theme-color($theme, foreground, divider);
-  $hint-text-color: mat.get-theme-color($theme, foreground, hint-text);
-  $preview-outline-color: $divider-color;
-  $today-disabled-outline-color: null;
-
-  $primary-color: mat.get-theme-color($theme, primary);
-  $calendar-tokens: private-get-calendar-color-palette-color-tokens($theme, primary);
-  $toggle-tokens: private-get-toggle-color-palette-color-tokens($theme, primary);
-
-  @return mat.private-merge-all($calendar-tokens, $toggle-tokens, (
-    datetimepicker-toggle-icon-color: $inactive-icon-color,
-    datetimepicker-calendar-body-label-text-color: $secondary-text-color,
-    datetimepicker-calendar-body-week-number-text-color: $secondary-text-color,
-    // datetimepicker-calendar-period-button-icon-color: $inactive-icon-color,
-    // datetimepicker-calendar-navigation-button-icon-color: $inactive-icon-color,
-    datetimepicker-calendar-header-text-color: white,
-    datetimepicker-calendar-header-divider-color: transparent,
-    datetimepicker-calendar-table-header-text-color: $secondary-text-color,
-
-    // Note: though it's not text, the border is a hint about the fact
-    // that this is today's date, so we use the hint color.
-    datetimepicker-calendar-date-today-outline-color: $hint-text-color,
-    // datetimepicker-calendar-date-today-disabled-state-outline-color: $today-disabled-outline-color,
-    datetimepicker-calendar-date-text-color: $text-color,
-    datetimepicker-calendar-date-outline-color: transparent,
-    datetimepicker-calendar-date-disabled-state-text-color: $disabled-text-color,
-    // datetimepicker-calendar-date-preview-state-outline-color: $preview-outline-color,
-
-    datetimepicker-container-background-color: mat.get-theme-color($theme, background, card),
-    datetimepicker-container-text-color: $text-color,
-
-    datetimepicker-clock-dial-background-color: $divider-color,
-    datetimepicker-clock-cell-text-color: $text-color,
-    datetimepicker-clock-cell-hover-state-background-color: mat.get-theme-color($theme, background, hover),
-    datetimepicker-clock-cell-disabled-state-text-color: $disabled-text-color,
+@function private-get-color-palette-color-tokens($theme, $color-variant) {
+  $system: m2-utils.get-system($theme);
+  $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
+  $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
-    datetimepicker-time-input-text-color: $text-color,
-    datetimepicker-time-input-background-color: $divider-color,
-    datetimepicker-time-input-focus-state-background-color: mat.get-theme-color($theme, background, background),
-    datetimepicker-time-input-warn-state-outline-color: mat.get-theme-color($theme, warn),
-    datetimepicker-time-ampm-text-color: mat.get-theme-color($theme, foreground, text, .75),
-    datetimepicker-time-ampm-outline-color: $hint-text-color,
-    datetimepicker-time-ampm-selected-state-text-color: $text-color,
-  ));
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
   @return (
-    datetimepicker-calendar-text-font: mat.get-theme-typography($theme, body-1, font-family),
-    datetimepicker-calendar-text-size: 13px,
-
-    datetimepicker-calendar-body-label-text-size: mat.get-theme-typography($theme, button, font-size),
-    datetimepicker-calendar-body-label-text-weight: mat.get-theme-typography($theme, button, font-weight),
-
-    datetimepicker-calendar-period-button-text-size: mat.get-theme-typography($theme, button, font-size),
-    datetimepicker-calendar-period-button-text-weight: mat.get-theme-typography($theme, button, font-weight),
-
-    datetimepicker-calendar-table-header-text-size: 11px,
-    datetimepicker-calendar-table-header-text-weight: mat.get-theme-typography($theme, body-1, font-weight),
-
-    datetimepicker-clock-text-size: 14px,
-  );
-}
+    datetimepicker-calendar-date-selected-state-text-color: map.get($system, on-primary),
+    datetimepicker-calendar-date-selected-state-background-color: map.get($system, primary),
+    datetimepicker-calendar-date-selected-disabled-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, primary), 38%),
+    datetimepicker-calendar-date-today-selected-state-outline-color: map.get($system, on-primary),
+    datetimepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, primary), map.get($system, focus-state-layer-opacity)),
+    datetimepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, primary), map.get($system, focus-state-layer-opacity)),
+
+    datetimepicker-toggle-active-state-icon-color: map.get($system, primary),
+    datetimepicker-toggle-icon-color: map.get($system, on-surface-variant),
+    datetimepicker-calendar-body-label-text-color: map.get($system, on-surface-variant),
+    // datepicker-calendar-period-button-text-color: map.get($system, on-surface),
+    // datepicker-calendar-period-button-icon-color: map.get($system, on-surface-variant),
+    // datepicker-calendar-navigation-button-icon-color: map.get($system, on-surface-variant),
+    datetimepicker-calendar-header-divider-color: transparent,
+    datetimepicker-calendar-header-text-color: white,
 
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}
+    datetimepicker-calendar-body-week-number-text-color: map.get($system, on-surface-variant),
+    datetimepicker-calendar-header-background-color: map.get($system, primary),
+    datetimepicker-calendar-table-header-text-color: map.get($system, on-surface-variant),
 
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
+    datetimepicker-calendar-date-today-outline-color: map.get($system, on-surface-variant),
+    // datetimepicker-calendar-date-today-disabled-state-outline-color: $disabled,
+    datetimepicker-calendar-date-text-color: map.get($system, on-surface),
+    datetimepicker-calendar-date-outline-color: transparent,
+    datetimepicker-calendar-date-disabled-state-text-color: $disabled,
+    // datetimepicker-calendar-date-preview-state-outline-color: map.get($system, on-surface-variant),
+
+    datetimepicker-container-background-color: map.get($system, surface),
+    datetimepicker-container-text-color: map.get($system, on-surface),
+
+    datetimepicker-clock-dial-background-color: map.get($system, outline),
+    datetimepicker-clock-cell-text-color: map.get($system, on-surface),
+    datetimepicker-clock-cell-hover-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    datetimepicker-clock-cell-disabled-state-text-color: $disabled,
+    datetimepicker-clock-cell-selected-state-background-color: map.get($system, primary),
+    datetimepicker-clock-hand-background-color: map.get($system, primary),
+
+    datetimepicker-time-input-active-state-text-color: map.get($system, primary),
+    datetimepicker-time-input-active-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, primary), 20%),
+    datetimepicker-time-input-focus-state-outline-color: map.get($system, primary),
+    datetimepicker-time-input-focus-state-placeholder-text-color: m3-utils.color-with-opacity(
+      map.get($system, primary), 60%),
+    datetimepicker-time-input-text-color: map.get($system, on-surface),
+    datetimepicker-time-input-background-color: map.get($system, outline),
+    datetimepicker-time-input-focus-state-background-color: map.get($system, primary-container),
+    datetimepicker-time-input-warn-state-outline-color: map.get($system, error),
+    datetimepicker-time-ampm-text-color: m3-utils.color-with-opacity(map.get($system, on-surface), 75%),
+    datetimepicker-time-ampm-outline-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    datetimepicker-time-ampm-selected-state-text-color: map.get($system, on-surface),
+    datetimepicker-time-ampm-selected-state-background-color: m3-utils.color-with-opacity(
+      map.get($system, primary), 20%),
   );
 }

package/datetimepicker/_m3-datetimepicker.scss

@@ -13,22 +13,24 @@
   }
 
   $tokens: (
-    base: (datetimepicker-container-elevation-shadow: elevation.get-box-shadow(0),
+    base: (
+      datetimepicker-container-elevation-shadow: elevation.get-box-shadow(0),
       datetimepicker-container-touch-elevation-shadow: elevation.get-box-shadow(0),
       datetimepicker-container-shape: map.get($system, corner-large),
       datetimepicker-container-touch-shape: map.get($system, corner-extra-large),
       datetimepicker-selector-container-shape: map.get($system, corner-small),
     ),
-    color: (datetimepicker-calendar-header-background-color: transparent,
+    color: (
+      datetimepicker-calendar-header-background-color: transparent,
       datetimepicker-calendar-date-selected-state-text-color: map.get($system, on-primary),
       datetimepicker-calendar-date-selected-state-background-color: map.get($system, primary),
-      datetimepicker-calendar-date-selected-disabled-state-background-color:
-        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datetimepicker-calendar-date-selected-disabled-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), 38%),
       datetimepicker-calendar-date-today-selected-state-outline-color: map.get($system, primary),
-      datetimepicker-calendar-date-focus-state-background-color:
-        m3-utils.color-with-opacity(map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
-      datetimepicker-calendar-date-hover-state-background-color:
-        m3-utils.color-with-opacity(map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+      datetimepicker-calendar-date-focus-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+      datetimepicker-calendar-date-hover-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
       datetimepicker-toggle-active-state-icon-color: map.get($system, on-surface-variant),
       datetimepicker-toggle-icon-color: map.get($system, on-surface-variant),
       datetimepicker-calendar-body-label-text-color: map.get($system, on-surface),
@@ -39,16 +41,16 @@
       datetimepicker-calendar-date-today-outline-color: map.get($system, primary),
       datetimepicker-calendar-date-text-color: map.get($system, on-surface),
       datetimepicker-calendar-date-outline-color: transparent,
-      datetimepicker-calendar-date-disabled-state-text-color:
-        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datetimepicker-calendar-date-disabled-state-text-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), 38%),
       datetimepicker-container-background-color: map.get($system, surface-container-high),
       datetimepicker-container-text-color: map.get($system, on-surface),
       datetimepicker-clock-dial-background-color: map.get($system, surface-container-highest),
       datetimepicker-clock-cell-text-color: map.get($system, on-surface),
-      datetimepicker-clock-cell-hover-state-background-color:
-        m3-utils.color-with-opacity(map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
-      datetimepicker-clock-cell-disabled-state-text-color:
-        m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+      datetimepicker-clock-cell-hover-state-background-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+      datetimepicker-clock-cell-disabled-state-text-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), 38%),
       datetimepicker-clock-cell-selected-state-background-color: map.get($system, primary),
       datetimepicker-clock-hand-background-color: map.get($system, primary),
       datetimepicker-time-input-active-state-text-color: map.get($system, on-primary-container),
@@ -64,7 +66,8 @@
       datetimepicker-time-ampm-selected-state-text-color: map.get($system, on-tertiary-container),
       datetimepicker-time-ampm-selected-state-background-color: map.get($system, tertiary-container),
     ),
-    typography: (datetimepicker-calendar-text-font: map.get($system, body-medium-font),
+    typography: (
+      datetimepicker-calendar-text-font: map.get($system, body-medium-font),
       datetimepicker-calendar-text-size: map.get($system, body-medium-size),
       datetimepicker-calendar-body-label-text-size: map.get($system, title-small-size),
       datetimepicker-calendar-body-label-text-weight: map.get($system, title-small-weight),

package/datetimepicker/index.d.ts

@@ -229,8 +229,7 @@ declare class MtxMonthView<D> implements AfterContentInit {
         narrow: string;
         id: number;
     }[];
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     private _activeDate;
     /**
      * The date to display in this month view (everything other than the month and year is ignored).
@@ -298,8 +297,7 @@ declare class MtxMultiYearView<D> implements AfterContentInit {
      * Null if the selected Date is in a different range.
      */
     _selectedYear: number | null;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     /** The date to display in this multi year view */
     get activeDate(): D;
     set activeDate(value: D);
@@ -415,8 +413,7 @@ declare class MtxTimeInput implements OnDestroy {
     private keyDownListener;
     private keyPressListener;
     private inputEventListener;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     get hasFocus(): any;
     get inputElement(): HTMLInputElement;
     get valid(): boolean;
@@ -512,8 +509,7 @@ declare class MtxTimeView<D> implements OnChanges, OnDestroy {
     get hour(): string;
     get minute(): string;
     prefixWithZero(value: number): string;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     /** Handles keydown events on the calendar body when calendar is in clock view. */
@@ -569,8 +565,7 @@ declare class MtxYearView<D> implements AfterContentInit {
      * Null if the selected Date is in a different year.
      */
     _selectedMonth: number | null;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     /** The date to display in this year view (everything other than the year is ignored). */
     get activeDate(): D;
     set activeDate(value: D);
@@ -656,8 +651,7 @@ declare class MtxCalendar<D> implements AfterViewChecked, AfterContentInit, OnDe
      * for Angular to re-evaluate the view children.
      */
     private _moveFocusOnNextTick;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     /** The display type of datetimepicker. */
     get type(): MtxDatetimepickerType;
     set type(value: MtxDatetimepickerType);
@@ -785,8 +779,7 @@ declare class MtxDatetimepickerInput<D> implements AfterContentInit, ControlValu
     private _localeSubscription;
     /** Whether the last value set on the input was valid. */
     private _lastValueValid;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     /** The datetimepicker that this input is associated with. */
     set mtxDatetimepicker(value: MtxDatetimepicker<D>);
     set mtxDatetimepickerFilter(filter: (date: D | null, type: MtxDatetimepickerFilterType) => boolean);
@@ -929,8 +922,7 @@ declare class MtxDatetimepickerContent<D> implements AfterViewInit, OnDestroy {
     /** Whether the close button currently has focus. */
     _closeButtonFocused: boolean;
     _viewChanged(view: MtxCalendarView): void;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     _startExitAnimation(): void;
@@ -1013,8 +1005,7 @@ declare class MtxDatetimepicker<D> implements OnDestroy {
     _actionsPortal: TemplatePortal | null;
     /** Previous selected value. */
     oldValue: D | null;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     /** The date to open the calendar to initially. */
     get startAt(): D | null;
     set startAt(date: D | null);
@@ -1141,8 +1132,7 @@ declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges,
     _customIcon: MtxDatetimepickerToggleIcon;
     /** Underlying button element. */
     _button: MatButton;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
+    constructor();
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     ngAfterContentInit(): void;
@@ -1156,22 +1146,16 @@ declare class MtxDatetimepickerToggle<D> implements AfterContentInit, OnChanges,
 
 declare class MtxDatetimepickerApply<D> {
     _datetimepicker: MtxDatetimepicker<D>;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerApply<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerApply<any>, "[mtxDatetimepickerApply]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxDatetimepickerCancel<D> {
     _datetimepicker: MtxDatetimepicker<D>;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerCancel<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerCancel<any>, "[mtxDatetimepickerCancel]", never, {}, {}, never, never, true, never>;
 }
 declare class MtxDatetimepickerClear<D> {
     _datetimepicker: MtxDatetimepicker<D>;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerClear<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxDatetimepickerClear<any>, "[mtxDatetimepickerClear]", never, {}, {}, never, never, true, never>;
 }
@@ -1180,8 +1164,6 @@ declare class MtxDatetimepickerActions<D> implements AfterViewInit, OnDestroy {
     private _viewContainerRef;
     _template: TemplateRef<unknown>;
     private _portal;
-    /** Inserted by Angular inject() migration for backwards compatibility */
-    constructor(...args: unknown[]);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepickerActions<any>, never>;

package/drawer/_drawer-theme.scss

@@ -5,47 +5,39 @@
 @use './m3-drawer';
 
 @mixin base($theme) {
+  $tokens: map.get(m2-drawer.get-tokens($theme), base);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), base));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-drawer.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-drawer.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: map.get(m2-drawer.get-tokens($theme), color);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), color));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-drawer.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-drawer.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: map.get(m2-drawer.get-tokens($theme), typography);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), typography));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-drawer.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-drawer.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: map.get(m2-drawer.get-tokens($theme), density);
   @if mat.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-drawer.get-tokens($theme), density));
-  }
-  @else {
-    @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-drawer.get-density-tokens($theme));
-    }
+    $tokens: map.get(m3-drawer.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -68,8 +60,7 @@
     @include color($theme);
     @include density($theme);
     @include typography($theme);
-  }
-  @else {
+  } @else {
     @include base($theme);
     @if mat.theme-has($theme, color) {
       @include color($theme);

package/drawer/_m2-drawer.scss

@@ -1,42 +1,20 @@
 @use 'sass:map';
-@use '@angular/material' as mat;
 @use '../core/tokens/m2-utils';
 @use '../core/style/elevation';
 
-// Tokens that can't be configured through Angular Material's current theming API,
-// but may be in a future version of the theming API.
-@function get-unthemable-tokens() {
-  @return (
-    drawer-container-shape: 0,
-    drawer-container-elevation-shadow: elevation.get-box-shadow(16),
-  );
-}
+@function get-tokens($theme) {
+  $system: m2-utils.get-system($theme);
 
-// Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme) {
   @return (
-    drawer-container-background-color: mat.get-theme-color($theme, background, dialog),
-    drawer-container-text-color: mat.get-theme-color($theme, foreground, text),
-  );
-}
-
-// Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($theme) {
-  @return ();
-}
-
-// Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($theme) {
-  @return ();
-}
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return mat.private-deep-merge-all(
-    get-unthemable-tokens(),
-    get-color-tokens(m2-utils.$placeholder-color-config),
-    get-typography-tokens(m2-utils.$placeholder-typography-config),
-    get-density-tokens(m2-utils.$placeholder-density-config)
+    base: (
+      drawer-container-shape: 0,
+      drawer-container-elevation-shadow: elevation.get-box-shadow(16),
+    ),
+    color: (
+      drawer-container-background-color: map.get($system, surface),
+      drawer-container-text-color: map.get($system, on-surface),
+    ),
+    typography: (),
+    density: ()
   );
 }

package/fesm2022/mtxButton.mjs

@@ -9,6 +9,7 @@ class MatButtonLoading {
         this._elementRef = inject(ElementRef);
         this._viewContainerRef = inject(ViewContainerRef);
         this._renderer = inject(Renderer2);
+        this.spinner = null;
         this.loading = false;
         this.disabled = false;
     }
@@ -18,12 +19,22 @@ class MatButtonLoading {
         }
         if (changes.loading.currentValue) {
             this._elementRef.nativeElement.classList.add('mat-button-loading');
-            setTimeout(() => this._elementRef.nativeElement.setAttribute('disabled', ''));
+            if (!this.disabled) {
+                setTimeout(() => {
+                    this._elementRef.nativeElement.classList.add('mat-mdc-button-disabled');
+                    this._elementRef.nativeElement.setAttribute('disabled', 'true');
+                });
+            }
             this.createSpinner();
         }
         else if (!changes.loading.firstChange) {
             this._elementRef.nativeElement.classList.remove('mat-button-loading');
-            setTimeout(() => this._elementRef.nativeElement.removeAttribute('disabled'));
+            if (!this.disabled) {
+                setTimeout(() => {
+                    this._elementRef.nativeElement.classList.remove('mat-mdc-button-disabled');
+                    this._elementRef.nativeElement.removeAttribute('disabled');
+                });
+            }
             this.destroySpinner();
         }
     }

package/fesm2022/mtxButton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mtxButton.mjs","sources":["../../../projects/extensions/button/button-loading.ts","../../../projects/extensions/button/button-module.ts","../../../projects/extensions/button/mtxButton.ts"],"sourcesContent":["import {\n  ComponentRef,\n  Directive,\n  ElementRef,\n  Input,\n  OnChanges,\n  Renderer2,\n  SimpleChanges,\n  ViewContainerRef,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\n\n@Directive({\n  selector: `[mat-button][loading], [matButton][loading],\n             [mat-raised-button][loading],\n             [mat-stroked-button][loading],\n             [mat-flat-button][loading],\n             [mat-icon-button][loading], [matIconButton][loading],\n             [mat-fab][loading], [matFab][loading],\n             [mat-mini-fab][loading], [matMiniFab][loading]`,\n})\nexport class MatButtonLoading implements OnChanges {\n  private _elementRef = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n  private _viewContainerRef = inject(ViewContainerRef);\n  private _renderer = inject(Renderer2);\n\n  private spinner!: ComponentRef<MatProgressSpinner> | null;\n\n  @Input({ transform: booleanAttribute }) loading = false;\n\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  @Input() color: ThemePalette;\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!changes.loading) {\n      return;\n    }\n    if (changes.loading.currentValue) {\n      this._elementRef.nativeElement.classList.add('mat-button-loading');\n      setTimeout(() => this._elementRef.nativeElement.setAttribute('disabled', ''));\n      this.createSpinner();\n    } else if (!changes.loading.firstChange) {\n      this._elementRef.nativeElement.classList.remove('mat-button-loading');\n      setTimeout(() => this._elementRef.nativeElement.removeAttribute('disabled'));\n      this.destroySpinner();\n    }\n  }\n\n  private createSpinner(): void {\n    if (!this.spinner) {\n      this.spinner = this._viewContainerRef.createComponent(MatProgressSpinner);\n      this.spinner.instance.color = this.color;\n      this.spinner.instance.diameter = 24;\n      this.spinner.instance.mode = 'indeterminate';\n      this._renderer.appendChild(\n        this._elementRef.nativeElement,\n        this.spinner.instance._elementRef.nativeElement\n      );\n    }\n  }\n\n  private destroySpinner(): void {\n    if (this.spinner) {\n      this.spinner.destroy();\n      this.spinner = null;\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonLoading } from './button-loading';\n\n@NgModule({\n  imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],\n  exports: [MatButtonLoading],\n})\nexport class MtxButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAwBa,gBAAgB,CAAA;AAT7B,IAAA,WAAA,GAAA;AAUU,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAgC,UAAU,CAAC;AAC/D,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC;AAC5C,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC;QAIG,IAAO,CAAA,OAAA,GAAG,KAAK;QAEf,IAAQ,CAAA,QAAA,GAAG,KAAK;AAsCzD;AAlCC,IAAA,WAAW,CAAC,OAAsB,EAAA;AAChC,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB;;AAEF,QAAA,IAAI,OAAO,CAAC,OAAO,CAAC,YAAY,EAAE;YAChC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,oBAAoB,CAAC;AAClE,YAAA,UAAU,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC7E,IAAI,CAAC,aAAa,EAAE;;AACf,aAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE;YACvC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,MAAM,CAAC,oBAAoB,CAAC;AACrE,YAAA,UAAU,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;YAC5E,IAAI,CAAC,cAAc,EAAE;;;IAIjB,aAAa,GAAA;AACnB,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,iBAAiB,CAAC,eAAe,CAAC,kBAAkB,CAAC;YACzE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;YACxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,GAAG,EAAE;YACnC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,GAAG,eAAe;YAC5C,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,IAAI,CAAC,WAAW,CAAC,aAAa,EAC9B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,aAAa,CAChD;;;IAIG,cAAc,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;AACtB,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;;iIA5CZ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;qHAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,uWAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,SAAA,EAOP,gBAAgB,CAAA,EAAA,QAAA,EAAA,CAAA,UAAA,EAAA,UAAA,EAEhB,gBAAgB,CAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FATzB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAT5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,CAAA;;;;;;AAMgD,2DAAA,CAAA;AAC3D,iBAAA;8BAQyC,OAAO,EAAA,CAAA;sBAA9C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAEE,QAAQ,EAAA,CAAA;sBAA/C,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE;gBAE7B,KAAK,EAAA,CAAA;sBAAb;;;MCxBU,eAAe,CAAA;iIAAf,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;kIAAf,eAAe,EAAA,OAAA,EAAA,CAHhB,YAAY,EAAE,eAAe,EAAE,wBAAwB,EAAE,gBAAgB,CAAA,EAAA,OAAA,EAAA,CACzE,gBAAgB,CAAA,EAAA,CAAA,CAAA;AAEf,uBAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,eAAe,EAHhB,OAAA,EAAA,CAAA,YAAY,EAAE,eAAe,EAAE,wBAAwB,CAAA,EAAA,CAAA,CAAA;;2FAGtD,eAAe,EAAA,UAAA,EAAA,CAAA;kBAJ3B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,OAAO,EAAE,CAAC,YAAY,EAAE,eAAe,EAAE,wBAAwB,EAAE,gBAAgB,CAAC;oBACpF,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC5B,iBAAA;;;ACVD;;AAEG;;;;"}
+{"version":3,"file":"mtxButton.mjs","sources":["../../../projects/extensions/button/button-loading.ts","../../../projects/extensions/button/button-module.ts","../../../projects/extensions/button/mtxButton.ts"],"sourcesContent":["import {\n  ComponentRef,\n  Directive,\n  ElementRef,\n  Input,\n  OnChanges,\n  Renderer2,\n  SimpleChanges,\n  ViewContainerRef,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\nimport { MatProgressSpinner } from '@angular/material/progress-spinner';\n\n@Directive({\n  selector: `[mat-button][loading], [matButton][loading],\n             [mat-raised-button][loading],\n             [mat-stroked-button][loading],\n             [mat-flat-button][loading],\n             [mat-icon-button][loading], [matIconButton][loading],\n             [mat-fab][loading], [matFab][loading],\n             [mat-mini-fab][loading], [matMiniFab][loading]`,\n})\nexport class MatButtonLoading implements OnChanges {\n  private _elementRef = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n  private _viewContainerRef = inject(ViewContainerRef);\n  private _renderer = inject(Renderer2);\n\n  private spinner: ComponentRef<MatProgressSpinner> | null = null;\n\n  @Input({ transform: booleanAttribute }) loading = false;\n\n  @Input({ transform: booleanAttribute }) disabled = false;\n\n  @Input() color: ThemePalette;\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (!changes.loading) {\n      return;\n    }\n\n    if (changes.loading.currentValue) {\n      this._elementRef.nativeElement.classList.add('mat-button-loading');\n\n      if (!this.disabled) {\n        setTimeout(() => {\n          this._elementRef.nativeElement.classList.add('mat-mdc-button-disabled');\n          this._elementRef.nativeElement.setAttribute('disabled', 'true');\n        });\n      }\n\n      this.createSpinner();\n    } else if (!changes.loading.firstChange) {\n      this._elementRef.nativeElement.classList.remove('mat-button-loading');\n\n      if (!this.disabled) {\n        setTimeout(() => {\n          this._elementRef.nativeElement.classList.remove('mat-mdc-button-disabled');\n          this._elementRef.nativeElement.removeAttribute('disabled');\n        });\n      }\n\n      this.destroySpinner();\n    }\n  }\n\n  private createSpinner(): void {\n    if (!this.spinner) {\n      this.spinner = this._viewContainerRef.createComponent(MatProgressSpinner);\n      this.spinner.instance.color = this.color;\n      this.spinner.instance.diameter = 24;\n      this.spinner.instance.mode = 'indeterminate';\n      this._renderer.appendChild(\n        this._elementRef.nativeElement,\n        this.spinner.instance._elementRef.nativeElement\n      );\n    }\n  }\n\n  private destroySpinner(): void {\n    if (this.spinner) {\n      this.spinner.destroy();\n      this.spinner = null;\n    }\n  }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\nimport { MatButtonLoading } from './button-loading';\n\n@NgModule({\n  imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],\n  exports: [MatButtonLoading],\n})\nexport class MtxButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/mtxColumnResize.mjs

@@ -323,7 +323,7 @@ class _CoalescedStyleScheduler {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: _CoalescedStyleScheduler, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [] });
+        }] });
 
 /**
  * @license