@ng-matero/extensions 17.3.4 → 18.0.0

package/core/tokens/m3/mtx/_drawer.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '@material/elevation' as mdc-elevation;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, drawer);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-shape: map.get($systems, md-sys-shape, corner-large),
+    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+    container-background-color: map.get($systems, md-sys-color, surface),
+    container-text-color: map.get($systems, md-sys-color, on-surface-variant),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_grid.scss

@@ -0,0 +1,34 @@
+@use 'sass:map';
+@use '@material/elevation' as mdc-elevation;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, grid);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-shape:  map.get($systems, md-sys-shape, corner-medium),
+    table-cell-min-width: token-utils.hardcode(80px, $exclude-hardcoded),
+
+    outline-color: map.get($systems, md-sys-color, outline-variant),
+    column-menu-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    column-menu-divider-color: map.get($systems, md-sys-color, outline-variant),
+    column-menu-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+    table-footer-background-color: map.get($systems, md-sys-color, surface-container),
+    table-row-striped-background-color: map.get($systems, md-sys-color, surface-container),
+    table-row-hover-background-color: map.get($systems, md-sys-color, secondary-container),
+    table-row-selected-background-color: map.get($systems, md-sys-color, secondary-container),
+    table-row-selected-hover-background-color: map.get($systems, md-sys-color, primary-container),
+    table-cell-selected-outline-color: map.get($systems, md-sys-color, primary),
+    resizable-handle-active-background-color: map.get($systems, md-sys-color, primary),
+    resizable-handle-hover-background-color: map.get($systems, md-sys-color, primary),
+    resizable-handle-disabled-background-color: map.get($systems, md-sys-color, outline-variant),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_loader.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, loader);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    backdrop-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, surface),
+      $alpha: 0.75
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_popover.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, popover);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+
+    outline-color: map.get($systems, md-sys-color, surface-container),
+    background-color: map.get($systems, md-sys-color, surface-container),
+    text-color: map.get($systems, md-sys-color, on-surface),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_progress.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, progress);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+
+    track-color: map.get($systems, md-sys-color, surface-container),
+    indicator-color: map.get($systems, md-sys-color, outline-variant),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    info-indicator-color: map.get(mat.$blue-palette, 50),
+    info-text-color:token-utils.hardcode(white, $exclude-hardcoded),
+    success-indicator-color: map.get(mat.$green-palette, 50),
+    success-text-color:token-utils.hardcode(white, $exclude-hardcoded),
+    warning-indicator-color: map.get(mat.$orange-palette, 50),
+    warning-text-color:token-utils.hardcode(white, $exclude-hardcoded),
+    danger-indicator-color: map.get(mat.$red-palette, 50),
+    danger-text-color:token-utils.hardcode(white, $exclude-hardcoded),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_select.scss

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '@material/elevation' as mdc-elevation;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, select);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+
+    container-text-color: map.get($systems, md-sys-color, on-surface),
+    placeholder-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    disabled-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+
+    multiple-value-background-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    multiple-value-outline-color: map.get($systems, md-sys-color, outline),
+    multiple-value-icon-hover-background-color: map.get($systems, md-sys-color, outline-variant),
+
+    clear-icon-color: map.get($systems, md-sys-color, on-surface),
+    clear-icon-hover-color: map.get($systems, md-sys-color, error),
+
+    enabled-arrow-color: map.get($systems, md-sys-color, on-surface),
+    disabled-arrow-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    invalid-arrow-color: map.get($systems, md-sys-color, error),
+
+    panel-background-color: map.get($systems, md-sys-color, surface-container),
+    panel-divider-color: map.get($systems, md-sys-color, outline),
+    optgroup-label-text-color: map.get($systems, md-sys-color, on-surface),
+    option-label-text-color: map.get($systems, md-sys-color, on-surface),
+    option-selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
+    option-selected-state-text-color: map.get($systems, md-sys-color, on-surface),
+    option-hover-state-background-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+    ),
+    option-disabled-state-text-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+  ), (
+    // Color variants:
+    primary: (
+      option-selected-state-background-color: map.get($systems, md-sys-color, primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      option-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    error: (
+      option-selected-state-background-color: map.get($systems, md-sys-color, error-container),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mtx/_split.scss

@@ -0,0 +1,30 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mtx, split);
+
+/// Generates custom tokens for the mat-badge.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    gutter-background-color: map.get($systems, md-sys-color, outline-variant),
+    gutter-hover-state-background-color: map.get($systems, md-sys-color, primary),
+  ), (
+    primary: (),
+    secondary: (
+      gutter-hover-state-background-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      gutter-hover-state-background-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      gutter-hover-state-background-color: map.get($systems, md-sys-color, error),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/datetimepicker/_datetimepicker-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
@@ -18,7 +17,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
         tokens-mtx-datetimepicker.get-unthemable-tokens());
     }
@@ -30,7 +29,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
         tokens-mtx-datetimepicker.get-color-tokens($theme));
     }
@@ -64,7 +63,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-datetimepicker.$prefix,
         tokens-mtx-datetimepicker.get-typography-tokens($theme));
     }

package/datetimepicker/calendar-body.scss

@@ -131,9 +131,9 @@ $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token
     }
 
     &.mtx-calendar-body-today {
-      $shadow: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);
+      $shadow-color: token-utils.get-token-variable(calendar-date-today-selected-state-outline-color);
 
-      box-shadow: inset 0 0 0 1px var(#{$shadow});
+      box-shadow: inset 0 0 0 1px var(#{$shadow-color});
     }
   }
 }

package/datetimepicker/calendar.d.ts

@@ -42,6 +42,7 @@ export declare class MtxCalendar<D> implements AfterContentInit, OnDestroy {
     _calendarHeaderPortal: Portal<any>;
     private _intlChanges;
     private _clampedActiveDate;
+    private _injector;
     constructor(_elementRef: ElementRef, _intl: MtxDatetimepickerIntl, _ngZone: NgZone, _adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats, _changeDetectorRef: ChangeDetectorRef);
     /** The display type of datetimepicker. */
     get type(): MtxDatetimepickerType;

package/datetimepicker/datetimepicker-content.scss

@@ -44,8 +44,6 @@ $touch-max-height: 850px;
 .mtx-datetimepicker-content {
   display: block;
 
-  @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);

package/datetimepicker/datetimepicker.d.ts

@@ -1,7 +1,7 @@
 import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
-import { AfterContentInit, ChangeDetectorRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, EventEmitter, InjectionToken, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { DatetimeAdapter } from '@ng-matero/extensions/core';
@@ -54,12 +54,12 @@ export declare class MtxDatetimepickerContent<D> implements OnInit, AfterContent
 }
 export declare class MtxDatetimepicker<D> implements OnDestroy {
     private _overlay;
-    private _ngZone;
     private _viewContainerRef;
     private _scrollStrategy;
     private _dateAdapter;
     private _dir;
     private _document;
+    private _injector;
     /** Whether to show multi-year view. */
     multiYearSelector: boolean;
     /** Whether the clock uses 12 hour format. */
@@ -113,7 +113,7 @@ export declare class MtxDatetimepicker<D> implements OnDestroy {
     /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
     private _backdropHarnessClass;
     private _inputStateChanges;
-    constructor(_overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _scrollStrategy: any, _dateAdapter: DatetimeAdapter<D>, _dir: Directionality);
+    constructor(_overlay: Overlay, _viewContainerRef: ViewContainerRef, _scrollStrategy: any, _dateAdapter: DatetimeAdapter<D>, _dir: Directionality);
     /** The date to open the calendar to initially. */
     get startAt(): D | null;
     set startAt(date: D | null);
@@ -186,7 +186,7 @@ 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 ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDatetimepicker<any>, [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; }; "calendarHeaderComponent": { "alias": "calendarHeaderComponent"; "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;

package/drawer/_drawer-theme.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
 @use '../core/theming/validation';
 @use '../core/tokens/token-utils';
@@ -11,7 +10,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
         tokens-mtx-drawer.get-unthemable-tokens());
     }
@@ -23,7 +22,7 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    @include sass-utils.current-selector-or-root() {
+    @include mat.private-current-selector-or-root() {
       @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
         tokens-mtx-drawer.get-color-tokens($theme));
     }

package/drawer/drawer-container.scss

@@ -9,11 +9,10 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
   display: block;
   outline: 0;
 
-  @include mat.elevation(16);
-
   @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);
+    @include token-utils.create-token-slot(box-shadow, container-elevation-shadow);
   }
 
   @include cdk.high-contrast(active, off) {

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: "17.3.0", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxAlertModule, imports: [CommonModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxAlertModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MtxAlert],

package/esm2022/alert/alert.mjs

@@ -19,10 +19,10 @@ export class MtxAlert {
         this._changeDetectorRef.markForCheck();
         this.closed.emit(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxAlert, isStandalone: true, selector: "mtx-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert-dismissible": "dismissible", "class": "this._hostClassList" }, classAttribute: "mtx-alert" }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:12px 20px;margin-bottom:16px;border:1px solid var(--mtx-alert-outline-color);border-radius:var(--mtx-alert-container-shape);background-color:var(--mtx-alert-background-color);color:var(--mtx-alert-text-color)}.mtx-alert.mtx-alert-info{background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: MtxAlert, isStandalone: true, selector: "mtx-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert-dismissible": "dismissible", "class": "this._hostClassList" }, classAttribute: "mtx-alert" }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:12px 20px;margin-bottom:16px;border:1px solid var(--mtx-alert-outline-color);border-radius:var(--mtx-alert-container-shape);background-color:var(--mtx-alert-background-color);color:var(--mtx-alert-text-color)}.mtx-alert.mtx-alert-info{background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxAlert, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
                         'class': 'mtx-alert',

package/esm2022/button/button-loading.mjs

@@ -39,10 +39,10 @@ export class MatButtonLoading {
             this.spinner = null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatButtonLoading, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: MatButtonLoading, isStandalone: true, selector: "[mat-button][loading],\n             [mat-raised-button][loading],\n             [mat-stroked-button][loading],\n             [mat-flat-button][loading],\n             [mat-icon-button][loading],\n             [mat-fab][loading],\n             [mat-mini-fab][loading]", inputs: { loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], color: "color" }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatButtonLoading, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.1", type: MatButtonLoading, isStandalone: true, selector: "[mat-button][loading],\n             [mat-raised-button][loading],\n             [mat-stroked-button][loading],\n             [mat-flat-button][loading],\n             [mat-icon-button][loading],\n             [mat-fab][loading],\n             [mat-mini-fab][loading]", inputs: { loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], color: "color" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MatButtonLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MatButtonLoading, decorators: [{
             type: Directive,
             args: [{
                     selector: `[mat-button][loading],

package/esm2022/button/button-module.mjs

@@ -5,11 +5,11 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatButtonLoading } from './button-loading';
 import * as i0 from "@angular/core";
 export class MtxButtonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],

package/esm2022/checkbox-group/checkbox-group-module.mjs

@@ -6,11 +6,11 @@ import { MtxPipesModule } from '@ng-matero/extensions/core';
 import { MtxCheckboxGroup } from './checkbox-group';
 import * as i0 from "@angular/core";
 export class MtxCheckboxGroupModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup], exports: [MtxCheckboxGroup, MtxPipesModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup], exports: [MtxCheckboxGroup, MtxPipesModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],

package/esm2022/checkbox-group/checkbox-group.mjs

@@ -177,8 +177,8 @@ export class MtxCheckboxGroup {
         }
         this._getSelectedItems(index);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxCheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxCheckboxGroup, isStandalone: true, selector: "mtx-checkbox-group", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: ["showSelectAll", "showSelectAll", booleanAttribute], selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxCheckboxGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: MtxCheckboxGroup, isStandalone: true, selector: "mtx-checkbox-group", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: ["showSelectAll", "showSelectAll", booleanAttribute], selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => MtxCheckboxGroup)),
@@ -186,7 +186,7 @@ export class MtxCheckboxGroup {
             },
         ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["mtxCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n  <mat-checkbox class=\"mtx-checkbox-master\"\n    [checked]=\"selectAll\"\n    [(indeterminate)]=\"selectAllIndeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"_updateMasterCheckboxState($event, -1)\">{{selectAllLabel}}</mat-checkbox>\n}\n\n@for (option of items; track option; let i = $index) {\n  <mat-checkbox class=\"mtx-checkbox-normal\"\n    [(ngModel)]=\"option.checked\"\n    [ngModelOptions]=\"{standalone: true}\"\n    [aria-describedby]=\"option.ariaDescribedby\"\n    [aria-label]=\"option.ariaLabel\"\n    [aria-labelledby]=\"option.ariaLabelledby\"\n    [color]=\"option.color\"\n    [disabled]=\"option.disabled || disabled\"\n    [disableRipple]=\"option.disableRipple\"\n    [labelPosition]=\"option.labelPosition\"\n    [required]=\"option.required\"\n    (change)=\"_updateNormalCheckboxState($event, i)\"\n  >{{option[bindLabel] | toObservable | async}}</mat-checkbox>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxCheckboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxCheckboxGroup, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-checkbox-group', exportAs: 'mtxCheckboxGroup', host: {
                         class: 'mtx-checkbox-group',

package/esm2022/colorpicker/colorpicker-input.mjs

@@ -180,14 +180,14 @@ export class MtxColorpickerInput {
     _formatValue(value) {
         this._elementRef.nativeElement.value = value ? value : '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerInput, deps: [{ token: i0.ElementRef }, { token: i1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.0", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerInput, deps: [{ token: i0.ElementRef }, { token: i1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.1", type: MtxColorpickerInput, isStandalone: true, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: ["disabled", "disabled", booleanAttribute], value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
             MTX_COLORPICKER_VALUE_ACCESSOR,
             MTX_COLORPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxColorpickerInput },
         ], exportAs: ["mtxColorpickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxColorpicker]',

package/esm2022/colorpicker/colorpicker-module.mjs

@@ -10,8 +10,8 @@ import { MtxColorpickerInput } from './colorpicker-input';
 import { MtxColorpickerToggle, MtxColorpickerToggleIcon } from './colorpicker-toggle';
 import * as i0 from "@angular/core";
 export class MtxColorpickerModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -26,7 +26,7 @@ export class MtxColorpickerModule {
             MtxColorpickerInput,
             MtxColorpickerToggle,
             MtxColorpickerToggleIcon] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [CommonModule,
             OverlayModule,
             A11yModule,
             PortalModule,
@@ -35,7 +35,7 @@ export class MtxColorpickerModule {
             MtxColorpickerContent,
             MtxColorpickerToggle] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2022/colorpicker/colorpicker-toggle.mjs

@@ -4,10 +4,10 @@ import { Subscription, merge, of as observableOf } from 'rxjs';
 import * as i0 from "@angular/core";
 /** Can be used to override the icon of a `mtxColorpickerToggle`. */
 export class MtxColorpickerToggleIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.0", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.1", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxColorpickerToggleIcon]',
@@ -59,10 +59,10 @@ export class MtxColorpickerToggle {
         this._stateChanges.unsubscribe();
         this._stateChanges = merge(pickerDisabled, inputDisabled, pickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.0", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\">\n      <path d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\" />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color)}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color)}.cdk-high-contrast-active .mtx-colorpicker-toggle-default-icon{color:CanvasText}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: MtxColorpickerToggle, isStandalone: true, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n  mat-icon-button\n  type=\"button\"\n  [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\"\n  [disableRipple]=\"disableRipple\">\n\n  @if (!_customIcon) {\n    <svg\n      class=\"mtx-colorpicker-toggle-default-icon\"\n      viewBox=\"0 0 24 24\"\n      width=\"24px\"\n      height=\"24px\"\n      fill=\"currentColor\"\n      focusable=\"false\">\n      <path d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\" />\n    </svg>\n  }\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mtx-colorpicker-toggle{pointer-events:auto;color:var(--mtx-colorpicker-toggle-icon-color)}.mtx-colorpicker-toggle-active{color:var(--mtx-colorpicker-toggle-active-state-icon-color)}.cdk-high-contrast-active .mtx-colorpicker-toggle-default-icon{color:CanvasText}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-toggle', host: {
                         'class': 'mtx-colorpicker-toggle',