@ng-matero/extensions 16.1.3 → 16.2.0

package/datetimepicker/calendar.scss

@@ -1,3 +1,6 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+
 $calendar-padding: 8px !default;
 
 // We use the same padding as the month / year label, but subtract 16px since there is padding
@@ -14,6 +17,8 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 
 $landscape-calendar-header-width: 144px;
 
+$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+
 @mixin landscape-calendar-header {
   .mtx-calendar {
     display: flex;
@@ -29,8 +34,8 @@ $landscape-calendar-header-width: 144px;
       }
     }
 
-    .mtx-calendar-header-year + .mtx-calendar-header-date-time,
-    .mtx-calendar-header-date + .mtx-calendar-header-time {
+    .mtx-calendar-header-year+.mtx-calendar-header-date-time,
+    .mtx-calendar-header-date+.mtx-calendar-header-time {
       margin-top: 4px;
     }
 
@@ -58,7 +63,7 @@ $landscape-calendar-header-width: 144px;
     .mtx-calendar-header-ampm {
       padding: 4px;
 
-      + .mtx-calendar-header-ampm {
+      +.mtx-calendar-header-ampm {
         margin: 0 8px;
       }
     }
@@ -68,6 +73,11 @@ $landscape-calendar-header-width: 144px;
 .mtx-calendar {
   display: block;
   outline: none;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(font-family, calendar-text-font);
+    @include token-utils.create-token-slot(font-size, calendar-text-size);
+  }
 }
 
 .mtx-calendar-header {
@@ -75,6 +85,11 @@ $landscape-calendar-header-width: 144px;
   padding: 8px;
   border-radius: 4px 4px 0 0;
 
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, calendar-header-background-color);
+    @include token-utils.create-token-slot(color, calendar-header-text-color);
+  }
+
   .mtx-calendar-header-year,
   .mtx-calendar-header-date,
   .mtx-calendar-header-hours,
@@ -185,12 +200,21 @@ $landscape-calendar-header-width: 144px;
   border: 0;
   background: transparent;
   box-sizing: border-box;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(font-size, calendar-period-button-text-size);
+    @include token-utils.create-token-slot(font-weight, calendar-period-button-text-weight);
+  }
 }
 
 .mtx-calendar-previous-button,
 .mtx-calendar-next-button {
   &.disabled {
     pointer-events: none;
+
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(color, calendar-date-disabled-state-text-color);
+    }
   }
 
   svg {
@@ -212,4 +236,10 @@ $landscape-calendar-header-width: 144px;
 .mtx-calendar-table-header th {
   text-align: center;
   padding: $calendar-padding 0;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, calendar-table-header-text-color);
+    @include token-utils.create-token-slot(font-size, calendar-table-header-text-size);
+    @include token-utils.create-token-slot(font-weight, calendar-table-header-text-weight);
+  }
 }

package/datetimepicker/clock.scss

@@ -1,7 +1,12 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+
 $clock-min-size: 224px !default;
 $clock-margin: 12px !default;
 $clock-cell-size: 14.1666% !default;
 
+$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+
 .mtx-clock {
   position: relative;
   display: block;
@@ -10,6 +15,10 @@ $clock-cell-size: 14.1666% !default;
   box-sizing: border-box;
   user-select: none;
   touch-action: none;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(font-size, clock-text-size);
+  }
 }
 
 .mtx-clock-wrapper {
@@ -18,6 +27,10 @@ $clock-cell-size: 14.1666% !default;
   height: 0;
   padding-top: 100%;
   border-radius: 50%;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, clock-dial-background-color);
+  }
 }
 
 .mtx-clock-center {
@@ -28,6 +41,10 @@ $clock-cell-size: 14.1666% !default;
   height: 2%;
   margin: -1%;
   border-radius: 50%;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, clock-hand-background-color);
+  }
 }
 
 .mtx-clock-hand {
@@ -37,15 +54,22 @@ $clock-cell-size: 14.1666% !default;
   margin: 0 auto;
   transform-origin: bottom;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: -4px;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, clock-hand-background-color);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+
+      @include token-utils.create-token-slot(background-color, clock-hand-background-color);
+    }
   }
+
 }
 
 .mtx-clock-hours,
@@ -82,7 +106,23 @@ $clock-cell-size: 14.1666% !default;
   align-items: center;
   cursor: pointer;
 
-  &.mtx-clock-cell-disabled {
-    pointer-events: none;
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, clock-cell-text-color);
+
+    &.mtx-clock-cell-selected {
+      color: white;
+
+      @include token-utils.create-token-slot(background-color, clock-hand-background-color);
+    }
+
+    &:not(.mtx-clock-cell-selected, .mtx-clock-cell-disabled):hover {
+      @include token-utils.create-token-slot(background-color, clock-cell-hover-state-background-color);
+    }
+
+    &.mtx-clock-cell-disabled {
+      pointer-events: none;
+
+      @include token-utils.create-token-slot(color, clock-cell-disabled-state-text-color);
+    }
   }
 }

package/datetimepicker/datetimepicker-content.scss

@@ -1,3 +1,7 @@
+@use '../core/style/elevation';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+
 $calendar-padding: 8px;
 $non-touch-calendar-cell-size: 40px;
 $non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
@@ -40,6 +44,14 @@ $touch-max-height: 850px;
 .mtx-datetimepicker-content {
   display: block;
   border-radius: 4px;
+
+  @include elevation.elevation(4);
+
+  @include token-utils.use-tokens(tokens-mtx-datetimepicker.$prefix,
+    tokens-mtx-datetimepicker.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, calendar-container-background-color);
+    @include token-utils.create-token-slot(color, calendar-container-text-color);
+  }
 }
 
 .mtx-datetimepicker-content-container {

package/datetimepicker/datetimepicker-toggle.scss

@@ -1,23 +1,29 @@
-.mat-form-field-appearance-legacy {
-  .mat-form-field-prefix,
-  .mat-form-field-suffix {
-    .mtx-datetimepicker-toggle-default-icon {
-      width: 1em;
-    }
+@use '@angular/cdk';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+
+$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+
+// We support the case where the form field is disabled, but the datepicker is not.
+// MDC sets `pointer-events: none` on disabled form fields which prevents clicks on the toggle.
+.mtx-datetimepicker-toggle {
+  pointer-events: auto;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, toggle-icon-color);
   }
 }
 
-.mat-form-field:not(.mat-form-field-appearance-legacy) {
-  .mat-form-field-prefix,
-  .mat-form-field-suffix {
-    .mtx-datetimepicker-toggle-default-icon {
-      display: block;
-      width: 1.5em;
-      height: 1.5em;
-    }
+.mtx-datetimepicker-toggle-active {
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(color, toggle-active-state-icon-color);
+  }
+}
 
-    .mat-icon-button .mtx-datetimepicker-toggle-default-icon {
-      margin: auto;
-    }
+@include cdk.high-contrast(active, off) {
+  .mtx-datetimepicker-toggle-default-icon {
+    // On Chromium-based browsers the icon doesn't appear to inherit the text color in high
+    // contrast mode so we have to set it explicitly. This is a no-op on IE and Firefox.
+    color: CanvasText;
   }
 }

package/datetimepicker/time.scss

@@ -1,3 +1,6 @@
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
+
 $time-font-size: 36px;
 $time-border-radius: 8px;
 $time-input-width: 72px;
@@ -5,6 +8,8 @@ $time-input-height: 56px;
 $time-seperator-width: 24px;
 $time-ampm-width: 40px;
 
+$_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
+
 .mtx-time {
   display: block;
   outline: none;
@@ -32,6 +37,29 @@ $time-ampm-width: 40px;
   border: 2px solid transparent;
   appearance: none;
   outline: none;
+
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(background-color, time-input-background-color);
+    @include token-utils.create-token-slot(color, time-input-text-color);
+
+    &.mtx-time-input-active {
+      @include token-utils.create-token-slot(background-color, time-input-active-state-background-color);
+      @include token-utils.create-token-slot(color, time-input-active-state-text-color);
+
+      &:focus {
+        @include token-utils.create-token-slot(border-color, time-input-focus-state-border-color);
+        @include token-utils.create-token-slot(background-color, time-input-focus-state-background-color);
+
+        &::placeholder {
+          @include token-utils.create-token-slot(color, time-input-focus-state-placeholder-text-color);
+        }
+      }
+    }
+
+    &.mtx-time-input-warning {
+      @include token-utils.create-token-slot(border-color, time-input-warn-state-border-color);
+    }
+  }
 }
 
 .mtx-time-seperator {
@@ -57,6 +85,18 @@ $time-ampm-width: 40px;
   .mtx-time-pm {
     --mdc-typography-button-font-weight: 400;
 
+    @include token-utils.use-tokens($_tokens...) {
+      @include token-utils.create-token-slot(--mdc-text-button-label-text-color, time-ampm-text-color);
+      @include token-utils.create-token-slot(border-color, time-ampm-border-color);
+
+      &.mtx-time-ampm-active {
+        --mdc-typography-button-font-weight: 500;
+
+        @include token-utils.create-token-slot(--mdc-text-button-label-text-color, time-ampm-selected-state-text-color);
+        @include token-utils.create-token-slot(background-color, time-ampm-selected-state-background-color);
+      }
+    }
+
     flex: 1;
     width: $time-ampm-width;
     min-width: auto;
@@ -83,7 +123,7 @@ $time-ampm-width: 40px;
   justify-content: flex-end;
   padding-top: 8px;
 
-  .mat-mdc-button-base + .mat-mdc-button-base {
+  .mat-mdc-button-base+.mat-mdc-button-base {
     margin-left: 8px;
 
     [dir='rtl'] & {

package/drawer/_drawer-theme.scss

@@ -1,18 +1,14 @@
-@use 'sass:map';
 @use '../core/theming/theming';
-@use '../core/theming/palette';
-@use '../core/style/private';
+@use '../core/style/sass-utils';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/drawer' as tokens-mtx-drawer;
 
 @mixin color($config-or-theme) {
   $config: theming.get-color-config($config-or-theme);
-  $background: map.get($config, background);
-  $foreground: map.get($config, foreground);
 
-  .mtx-drawer-container {
-    @include private.private-theme-elevation(16, $config);
-
-    background: theming.get-color-from-palette($background, dialog);
-    color: theming.get-color-from-palette($foreground, text);
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
+      tokens-mtx-drawer.get-color-tokens($config));
   }
 }
 

package/drawer/drawer-container.scss

@@ -1,9 +1,20 @@
 @use '@angular/cdk' as cdk;
 
+@use '../core/style/elevation';
+@use '../core/tokens/token-utils';
+@use '../core/tokens/m2/mtx/drawer' as tokens-mtx-drawer;
+
 .mtx-drawer-container {
   display: block;
   outline: 0;
 
+  @include elevation.elevation(16);
+
+  @include token-utils.use-tokens(tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots()) {
+    @include token-utils.create-token-slot(background-color, container-background-color);
+    @include token-utils.create-token-slot(color, container-text-color);
+  }
+
   @include cdk.high-contrast(active, off) {
     outline: 1px solid;
   }

package/esm2022/alert/alert.mjs

@@ -28,15 +28,15 @@ export class MtxAlert {
         this.closed.emit(this);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxAlert, selector: "mtx-alert", inputs: { type: "type", dismissible: "dismissible", elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert": "true", "class.mtx-alert-dismissible": "dismissible", "class": "this._hostClassList" } }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxAlert, selector: "mtx-alert", inputs: { type: "type", dismissible: "dismissible", 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<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;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"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxAlert, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
-                        '[class.mtx-alert]': 'true',
+                        'class': 'mtx-alert',
                         '[class.mtx-alert-dismissible]': 'dismissible',
                         'role': 'alert',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.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"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem;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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _hostClassList: [{
                 type: HostBinding,
                 args: ['class']
@@ -49,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
             }], closed: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9leHRlbnNpb25zL2FsZXJ0L2FsZXJ0LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9hbGVydC9hbGVydC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFFWixXQUFXLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFnQixxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFpQjVFLE1BQU0sT0FBTyxRQUFRO0lBQ25CLElBQ0ksY0FBYztRQUNoQixPQUFPLGFBQWEsSUFBSSxDQUFDLElBQUksbUJBQW1CLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuRSxDQUFDO0lBS0QsaURBQWlEO0lBQ2pELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBQ0QsSUFBSSxXQUFXLENBQUMsS0FBYztRQUM1QixJQUFJLENBQUMsWUFBWSxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFTRCxZQUFvQixrQkFBcUM7UUFBckMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFtQjtRQW5CekQsb0ZBQW9GO1FBQzNFLFNBQUksR0FBaUIsU0FBUyxDQUFDO1FBVWhDLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTdCLG9DQUFvQztRQUMzQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBRXZCLDJDQUEyQztRQUNqQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztJQUVZLENBQUM7SUFFN0QsU0FBUztRQUNQLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO2lJQTlCVSxRQUFRO3FIQUFSLFFBQVEsMFZDM0JyQixrUEFNQTs7MkZEcUJhLFFBQVE7a0JBYnBCLFNBQVM7K0JBQ0UsV0FBVyxZQUNYLFVBQVUsUUFDZDt3QkFDSixtQkFBbUIsRUFBRSxNQUFNO3dCQUMzQiwrQkFBK0IsRUFBRSxhQUFhO3dCQUM5QyxNQUFNLEVBQUUsT0FBTztxQkFDaEIsaUJBR2MsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTTt3R0FJM0MsY0FBYztzQkFEakIsV0FBVzt1QkFBQyxPQUFPO2dCQU1YLElBQUk7c0JBQVosS0FBSztnQkFJRixXQUFXO3NCQURkLEtBQUs7Z0JBVUcsU0FBUztzQkFBakIsS0FBSztnQkFHSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgSG9zdEJpbmRpbmcsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0LCBjb2VyY2VCb29sZWFuUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG5leHBvcnQgdHlwZSBNdHhBbGVydFR5cGUgPSAnZGVmYXVsdCcgfCAnaW5mbycgfCAnc3VjY2VzcycgfCAnd2FybmluZycgfCAnZGFuZ2VyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXR4LWFsZXJ0JyxcbiAgZXhwb3J0QXM6ICdtdHhBbGVydCcsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLm10eC1hbGVydF0nOiAndHJ1ZScsXG4gICAgJ1tjbGFzcy5tdHgtYWxlcnQtZGlzbWlzc2libGVdJzogJ2Rpc21pc3NpYmxlJyxcbiAgICAncm9sZSc6ICdhbGVydCcsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWxlcnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTXR4QWxlcnQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IF9ob3N0Q2xhc3NMaXN0KCkge1xuICAgIHJldHVybiBgbXR4LWFsZXJ0LSR7dGhpcy50eXBlfSBtYXQtZWxldmF0aW9uLXoke3RoaXMuZWxldmF0aW9ufWA7XG4gIH1cblxuICAvKiogVGhlIGFsZXJ0J3MgdHlwZS4gQ2FuIGJlIGBkZWZhdWx0YCwgYGluZm9gLCBgc3VjY2Vzc2AsIGB3YXJuaW5nYCBvciBgZGFuZ2VyYC4gKi9cbiAgQElucHV0KCkgdHlwZTogTXR4QWxlcnRUeXBlID0gJ2RlZmF1bHQnO1xuXG4gIC8qKiBXaGV0aGVyIHRvIGRpc3BsYXkgYW4gaW5saW5lIGNsb3NlIGJ1dHRvbi4gKi9cbiAgQElucHV0KClcbiAgZ2V0IGRpc21pc3NpYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNtaXNzaWJsZTtcbiAgfVxuICBzZXQgZGlzbWlzc2libGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNtaXNzaWJsZSA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgcHJpdmF0ZSBfZGlzbWlzc2libGUgPSBmYWxzZTtcblxuICAvKiogVGhlIGFsZXJ0J3MgZWxldmF0aW9uICgwfjI0KS4gKi9cbiAgQElucHV0KCkgZWxldmF0aW9uID0gMDtcblxuICAvKiogRXZlbnQgZW1pdHRlZCB3aGVuIHRoZSBhbGVydCBjbG9zZWQuICovXG4gIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE10eEFsZXJ0PigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBfb25DbG9zZWQoKTogdm9pZCB7XG4gICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgdGhpcy5jbG9zZWQuZW1pdCh0aGlzKTtcbiAgfVxuXG4gIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV9kaXNtaXNzaWJsZTogQm9vbGVhbklucHV0O1xufVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPG5nLXRlbXBsYXRlIFtuZ0lmXT1cImRpc21pc3NpYmxlXCI+XG4gIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwibXR4LWFsZXJ0LWNsb3NlXCIgYXJpYS1sYWJlbD1cIkNsb3NlXCIgKGNsaWNrKT1cIl9vbkNsb3NlZCgpXCI+XG4gICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCI+JnRpbWVzOzwvc3Bhbj5cbiAgPC9idXR0b24+XG48L25nLXRlbXBsYXRlPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9leHRlbnNpb25zL2FsZXJ0L2FsZXJ0LnRzIiwiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9hbGVydC9hbGVydC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFFWixXQUFXLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFnQixxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFpQjVFLE1BQU0sT0FBTyxRQUFRO0lBQ25CLElBQ0ksY0FBYztRQUNoQixPQUFPLGFBQWEsSUFBSSxDQUFDLElBQUksbUJBQW1CLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuRSxDQUFDO0lBS0QsaURBQWlEO0lBQ2pELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBQ0QsSUFBSSxXQUFXLENBQUMsS0FBYztRQUM1QixJQUFJLENBQUMsWUFBWSxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFTRCxZQUFvQixrQkFBcUM7UUFBckMsdUJBQWtCLEdBQWxCLGtCQUFrQixDQUFtQjtRQW5CekQsb0ZBQW9GO1FBQzNFLFNBQUksR0FBaUIsU0FBUyxDQUFDO1FBVWhDLGlCQUFZLEdBQUcsS0FBSyxDQUFDO1FBRTdCLG9DQUFvQztRQUMzQixjQUFTLEdBQUcsQ0FBQyxDQUFDO1FBRXZCLDJDQUEyQztRQUNqQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztJQUVZLENBQUM7SUFFN0QsU0FBUztRQUNQLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxZQUFZLEVBQUUsQ0FBQztRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN6QixDQUFDO2lJQTlCVSxRQUFRO3FIQUFSLFFBQVEsNFZDM0JyQixrUEFNQTs7MkZEcUJhLFFBQVE7a0JBYnBCLFNBQVM7K0JBQ0UsV0FBVyxZQUNYLFVBQVUsUUFDZDt3QkFDSixPQUFPLEVBQUUsV0FBVzt3QkFDcEIsK0JBQStCLEVBQUUsYUFBYTt3QkFDOUMsTUFBTSxFQUFFLE9BQU87cUJBQ2hCLGlCQUdjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU07d0dBSTNDLGNBQWM7c0JBRGpCLFdBQVc7dUJBQUMsT0FBTztnQkFNWCxJQUFJO3NCQUFaLEtBQUs7Z0JBSUYsV0FBVztzQkFEZCxLQUFLO2dCQVVHLFNBQVM7c0JBQWpCLEtBQUs7Z0JBR0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgVmlld0VuY2Fwc3VsYXRpb24sXG4gIElucHV0LFxuICBPdXRwdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIEhvc3RCaW5kaW5nLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJvb2xlYW5JbnB1dCwgY29lcmNlQm9vbGVhblByb3BlcnR5IH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2NvZXJjaW9uJztcblxuZXhwb3J0IHR5cGUgTXR4QWxlcnRUeXBlID0gJ2RlZmF1bHQnIHwgJ2luZm8nIHwgJ3N1Y2Nlc3MnIHwgJ3dhcm5pbmcnIHwgJ2Rhbmdlcic7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ210eC1hbGVydCcsXG4gIGV4cG9ydEFzOiAnbXR4QWxlcnQnLFxuICBob3N0OiB7XG4gICAgJ2NsYXNzJzogJ210eC1hbGVydCcsXG4gICAgJ1tjbGFzcy5tdHgtYWxlcnQtZGlzbWlzc2libGVdJzogJ2Rpc21pc3NpYmxlJyxcbiAgICAncm9sZSc6ICdhbGVydCcsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYWxlcnQuc2NzcyddLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTXR4QWxlcnQge1xuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IF9ob3N0Q2xhc3NMaXN0KCkge1xuICAgIHJldHVybiBgbXR4LWFsZXJ0LSR7dGhpcy50eXBlfSBtYXQtZWxldmF0aW9uLXoke3RoaXMuZWxldmF0aW9ufWA7XG4gIH1cblxuICAvKiogVGhlIGFsZXJ0J3MgdHlwZS4gQ2FuIGJlIGBkZWZhdWx0YCwgYGluZm9gLCBgc3VjY2Vzc2AsIGB3YXJuaW5nYCBvciBgZGFuZ2VyYC4gKi9cbiAgQElucHV0KCkgdHlwZTogTXR4QWxlcnRUeXBlID0gJ2RlZmF1bHQnO1xuXG4gIC8qKiBXaGV0aGVyIHRvIGRpc3BsYXkgYW4gaW5saW5lIGNsb3NlIGJ1dHRvbi4gKi9cbiAgQElucHV0KClcbiAgZ2V0IGRpc21pc3NpYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNtaXNzaWJsZTtcbiAgfVxuICBzZXQgZGlzbWlzc2libGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNtaXNzaWJsZSA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgcHJpdmF0ZSBfZGlzbWlzc2libGUgPSBmYWxzZTtcblxuICAvKiogVGhlIGFsZXJ0J3MgZWxldmF0aW9uICgwfjI0KS4gKi9cbiAgQElucHV0KCkgZWxldmF0aW9uID0gMDtcblxuICAvKiogRXZlbnQgZW1pdHRlZCB3aGVuIHRoZSBhbGVydCBjbG9zZWQuICovXG4gIEBPdXRwdXQoKSBjbG9zZWQgPSBuZXcgRXZlbnRFbWl0dGVyPE10eEFsZXJ0PigpO1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgX2NoYW5nZURldGVjdG9yUmVmOiBDaGFuZ2VEZXRlY3RvclJlZikge31cblxuICBfb25DbG9zZWQoKTogdm9pZCB7XG4gICAgdGhpcy5fY2hhbmdlRGV0ZWN0b3JSZWYubWFya0ZvckNoZWNrKCk7XG4gICAgdGhpcy5jbG9zZWQuZW1pdCh0aGlzKTtcbiAgfVxuXG4gIHN0YXRpYyBuZ0FjY2VwdElucHV0VHlwZV9kaXNtaXNzaWJsZTogQm9vbGVhbklucHV0O1xufVxuIiwiPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPG5nLXRlbXBsYXRlIFtuZ0lmXT1cImRpc21pc3NpYmxlXCI+XG4gIDxidXR0b24gdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwibXR4LWFsZXJ0LWNsb3NlXCIgYXJpYS1sYWJlbD1cIkNsb3NlXCIgKGNsaWNrKT1cIl9vbkNsb3NlZCgpXCI+XG4gICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCI+JnRpbWVzOzwvc3Bhbj5cbiAgPC9idXR0b24+XG48L25nLXRlbXBsYXRlPlxuIl19

package/esm2022/colorpicker/colorpicker-toggle.mjs

@@ -61,7 +61,7 @@ export class MtxColorpickerToggle {
         this._stateChanges = merge(pickerDisabled, inputDisabled, pickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxColorpickerToggle, deps: [{ token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: "disabled", disableRipple: "disableRipple" }, 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  <svg *ngIf=\"!_customIcon\"\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\n          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  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-colorpicker-toggle-default-icon{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disabled: "disabled", disableRipple: "disableRipple" }, 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  <svg *ngIf=\"!_customIcon\"\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\n          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  <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: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
@@ -75,7 +75,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImpor
                         // `stopPropagation` on it without affecting the user's `click` handlers. We need to stop
                         // it so that the input doesn't get focused automatically by the form field (See #21836).
                         '(click)': '_open($event)',
-                    }, exportAs: 'mtxColorpickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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  <svg *ngIf=\"!_customIcon\"\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\n          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  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-colorpicker-toggle-default-icon{margin:auto}\n"] }]
+                    }, exportAs: 'mtxColorpickerToggle', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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  <svg *ngIf=\"!_customIcon\"\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\n          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  <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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Attribute,
                     args: ['tabindex']

package/esm2022/datetimepicker/calendar-body.mjs

@@ -49,13 +49,13 @@ export class MtxCalendarBody {
         return cellNumber === this.activeCell;
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxCalendarBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], ngImport: i0, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      (click)=\"_cellClicked(item)\">\n    <div class=\"mtx-calendar-body-cell-content\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         [attr.aria-selected]=\"selectedValue === item.value\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.7", type: MtxCalendarBody, selector: "[mtx-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { classAttribute: "mtx-calendar-body" }, exportAs: ["mtxCalendarBody"], ngImport: i0, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      (click)=\"_cellClicked(item)\">\n    <div class=\"mtx-calendar-body-cell-content\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         [attr.aria-selected]=\"selectedValue === item.value\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color)}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size);font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight);color:var(--mtx-datetimepicker-calendar-body-label-text-color)}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color);border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color);color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.7", ngImport: i0, type: MtxCalendarBody, decorators: [{
             type: Component,
             args: [{ selector: '[mtx-calendar-body]', host: {
                         class: 'mtx-calendar-body',
-                    }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      (click)=\"_cellClicked(item)\">\n    <div class=\"mtx-calendar-body-cell-content\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         [attr.aria-selected]=\"selectedValue === item.value\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
+                    }, exportAs: 'mtxCalendarBody', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!--\n  If there's not enough space in the first row, create a separate label row. We mark this row as\n  aria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n<tr *ngIf=\"_firstRowOffset < labelMinRequiredCells\" aria-hidden=\"true\">\n  <td class=\"mtx-calendar-body-label\" [attr.colspan]=\"numCols\">{{ label }}</td>\n</tr>\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n<tr *ngFor=\"let row of rows; let rowIndex = index\" role=\"row\">\n  <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n  -->\n  <td *ngIf=\"rowIndex === 0 && _firstRowOffset\"\n      class=\"mtx-calendar-body-label\" [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\">\n    {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n  </td>\n  <td *ngFor=\"let item of row; let colIndex = index\"\n      role=\"gridcell\"\n      class=\"mtx-calendar-body-cell\"\n      [class.mtx-calendar-body-active]=\"_isActiveCell(rowIndex, colIndex)\"\n      [class.mtx-calendar-body-disabled]=\"!item.enabled\"\n      [tabindex]=\"_isActiveCell(rowIndex, colIndex) ? 0 : -1\"\n      [attr.data-mat-row]=\"rowIndex\"\n      [attr.data-mat-col]=\"colIndex\"\n      [attr.aria-label]=\"item.ariaLabel\"\n      [attr.aria-disabled]=\"!item.enabled || null\"\n      (click)=\"_cellClicked(item)\">\n    <div class=\"mtx-calendar-body-cell-content\"\n         [class.mtx-calendar-body-selected]=\"selectedValue === item.value\"\n         [class.mtx-calendar-body-today]=\"todayValue === item.value\"\n         [attr.aria-selected]=\"selectedValue === item.value\">\n      {{ item.displayValue }}\n    </div>\n  </td>\n</tr>\n", styles: [".mtx-calendar-body{min-width:224px}.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-today-outline-color)}.mtx-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%;font-size:var(--mtx-datetimepicker-calendar-body-label-text-size);font-weight:var(--mtx-datetimepicker-calendar-body-label-text-weight);color:var(--mtx-datetimepicker-calendar-body-label-text-color)}[dir=rtl] .mtx-calendar-body-label{text-align:right}.mtx-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.mtx-calendar-body-disabled{cursor:default;pointer-events:none}.mtx-calendar-body-disabled>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-today:not(.mtx-calendar-body-selected){border-color:var(--mtx-datetimepicker-calendar-date-disabled-state-text-color)}.mtx-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px;color:var(--mtx-datetimepicker-calendar-date-text-color);border-color:var(--mtx-datetimepicker-calendar-date-outline-color)}.mtx-calendar-body-active>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-focus-state-background-color)}@media (hover: hover){.mtx-calendar-body-cell:not(.mtx-calendar-body-disabled):hover>.mtx-calendar-body-cell-content:not(.mtx-calendar-body-selected){background-color:var(--mtx-datetimepicker-calendar-date-hover-state-background-color)}}.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-state-background-color);color:var(--mtx-datetimepicker-calendar-date-selected-state-text-color)}.mtx-calendar-body-disabled>.mtx-calendar-body-selected{background-color:var(--mtx-datetimepicker-calendar-date-selected-disabled-state-background-color)}.mtx-calendar-body-selected.mtx-calendar-body-today{box-shadow:inset 0 0 0 1px var(--mtx-datetimepicker-calendar-date-today-selected-state-outline-color)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], rows: [{