@ng-matero/extensions 18.1.0 → 18.1.1

package/core/tokens/m3/definitions/_md-sys-typescale.scss

@@ -0,0 +1,308 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+
+@use './md-ref-typeface';
+
+$_default: (
+  'md-ref-typeface': md-ref-typeface.values(),
+);
+
+@function values($deps: $_default, $exclude-hardcoded-values: false) {
+  @return (
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'body-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.5rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem),
+    'body-large-size': if($exclude-hardcoded-values, null, 1rem),
+    'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem),
+    'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.body-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'body-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.25rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem),
+    'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem),
+    'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem),
+    'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.body-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'body-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'body-small-line-height': if($exclude-hardcoded-values, null, 1rem),
+    'body-small-size': if($exclude-hardcoded-values, null, 0.75rem),
+    'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem),
+    'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.display-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'display-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            4rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'display-large-line-height': if($exclude-hardcoded-values, null, 4rem),
+    'display-large-size': if($exclude-hardcoded-values, null, 3.562rem),
+    'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem),
+    'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.display-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'display-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            3.25rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem),
+    'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem),
+    'display-medium-tracking': if($exclude-hardcoded-values, null, 0),
+    'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.display-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'display-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2.75rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem),
+    'display-small-size': if($exclude-hardcoded-values, null, 2.25rem),
+    'display-small-tracking': if($exclude-hardcoded-values, null, 0),
+    'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.headline-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'headline-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 2rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2.5rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem),
+    'headline-large-size': if($exclude-hardcoded-values, null, 2rem),
+    'headline-large-tracking': if($exclude-hardcoded-values, null, 0),
+    'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'headline-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2.25rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem),
+    'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem),
+    'headline-medium-tracking': if($exclude-hardcoded-values, null, 0),
+    'headline-medium-weight':
+      map.get($deps, 'md-ref-typeface', 'weight-regular'),
+      // Warning: risk of reduced fidelity from using this composite typography token.
+      // Tokens md.sys.typescale.headline-small.tracking cannot be represented in the "font"
+      // property shorthand. Consider using the discrete properties instead.
+    'headline-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            2rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem),
+    'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem),
+    'headline-small-tracking': if($exclude-hardcoded-values, null, 0),
+    'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.label-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'label-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.25rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem),
+    'label-large-size': if($exclude-hardcoded-values, null, 0.875rem),
+    'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+    'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    'label-large-weight-prominent':
+      map.get($deps, 'md-ref-typeface', 'weight-bold'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.label-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'label-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem),
+    'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem),
+    'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem),
+    'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    'label-medium-weight-prominent':
+      map.get($deps, 'md-ref-typeface', 'weight-bold'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.label-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'label-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'label-small-line-height': if($exclude-hardcoded-values, null, 1rem),
+    'label-small-size': if($exclude-hardcoded-values, null, 0.688rem),
+    'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem),
+    'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.title-large.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'title-large':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-regular')
+          if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.75rem
+          ) map.get($deps, 'md-ref-typeface', 'brand')
+      ),
+    'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'),
+    'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem),
+    'title-large-size': if($exclude-hardcoded-values, null, 1.375rem),
+    'title-large-tracking': if($exclude-hardcoded-values, null, 0),
+    'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.title-medium.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'title-medium':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 1rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.5rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem),
+    'title-medium-size': if($exclude-hardcoded-values, null, 1rem),
+    'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem),
+    'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'),
+    // Warning: risk of reduced fidelity from using this composite typography token.
+    // Tokens md.sys.typescale.title-small.tracking cannot be represented in the "font"
+    // property shorthand. Consider using the discrete properties instead.
+    'title-small':
+      if(
+        $exclude-hardcoded-values,
+        null,
+          map.get($deps, 'md-ref-typeface', 'weight-medium')
+          if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if(
+            $exclude-hardcoded-values,
+            null,
+            1.25rem
+          ) map.get($deps, 'md-ref-typeface', 'plain')
+      ),
+    'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'),
+    'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem),
+    'title-small-size': if($exclude-hardcoded-values, null, 0.875rem),
+    'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem),
+    'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium')
+  );
+}

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, datetimepicker);
@@ -70,8 +70,8 @@ $prefix: (mtx, datetimepicker);
     time-ampm-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
     time-ampm-selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
 
-    container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
-    container-touch-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    container-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
+    container-touch-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     container-shape: map.get($systems, md-sys-shape, corner-large),
     container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
     selector-container-shape: map.get($systems, md-sys-shape, corner-small),

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '@material/elevation' as mdc-elevation;
+@use '../../../style/elevation';
 @use '../../token-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -13,7 +13,7 @@ $prefix: (mtx, drawer);
 @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-elevation-shadow: token-utils.hardcode(elevation.get-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),
   );

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

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '@material/elevation' as mdc-elevation;
 @use '../../token-utils';
+@use '../../../style/elevation';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mtx, select);
@@ -14,7 +14,7 @@ $prefix: (mtx, select);
 @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-elevation-shadow: token-utils.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded),
 
     container-text-color: map.get($systems, md-sys-color, on-surface),
     placeholder-text-color: mat.private-safe-color-change(

package/core/typography/_all-typography.scss

@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@use './typography';
+@use '../m2/typography' as m2-typography;
 @use '../../alert/alert-theme';
 @use '../../button/button-theme';
 @use '../../colorpicker/colorpicker-theme';
@@ -17,7 +17,7 @@
 @mixin all-component-typographies($theme: null) {
   // If no actual color configuration has been specified, create a default one.
   @if not mat.theme-has($theme, typography) {
-    $theme: typography.define-typography-config();
+    $theme: m2-typography.define-typography-config();
   }
 
   @include alert-theme.typography($theme);

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

package/esm2022/alert/alert.mjs

@@ -20,10 +20,10 @@ export class MtxAlert {
         this._changeDetectorRef.markForCheck();
         this.closed.emit(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.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  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n      </svg>\n    </button>\n  </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;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{border-color:var(--mtx-alert-info-outline-color);background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color);background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color);background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color);background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\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.1.2", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", 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  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n      </svg>\n    </button>\n  </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;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{border-color:var(--mtx-alert-info-outline-color);background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color);background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color);background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color);background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\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: "18.1.0", ngImport: i0, type: MtxAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.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: "18.1.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.1.2", 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.1.2", 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: "18.1.0", ngImport: i0, type: MatButtonLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.0", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MtxButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.0", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.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: "18.1.0", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", 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.1.2", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.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: "18.1.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.1.2", 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.1.2", 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: "18.1.0", ngImport: i0, type: MtxCheckboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.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: "18.1.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.1.2", 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.1.2", 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: "18.1.0", ngImport: i0, type: MtxColorpickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.0", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: MtxColorpickerModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.2", 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: "18.1.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.1.2", 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: "18.1.0", ngImport: i0, type: MtxColorpickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.0", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.0", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.2", type: MtxColorpickerToggleIcon, isStandalone: true, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", 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: "18.1.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: "18.1.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.1.2", 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.1.2", 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: "18.1.0", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-toggle', host: {
                         'class': 'mtx-colorpicker-toggle',