@ng-matero/extensions 13.2.2 → 13.3.1

package/fesm2015/mtxDatetimepicker.mjs

@@ -6,7 +6,7 @@ import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, InjectionToken, ViewChild, forwardRef, Directive, ContentChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, Optional, Inject, InjectionToken, ViewChild, forwardRef, Directive, Attribute, ContentChild, NgModule } from '@angular/core';
 import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { ENTER, PAGE_DOWN, PAGE_UP, END, HOME, DOWN_ARROW, UP_ARROW, RIGHT_ARROW, LEFT_ARROW, ESCAPE, hasModifierKey } from '@angular/cdk/keycodes';
@@ -1617,7 +1617,7 @@ class MtxDatetimepicker {
         /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
         this._backdropHarnessClass = `${this.id}-backdrop`;
         this._inputStateChanges = Subscription.EMPTY;
-        this._type = 'date';
+        this._type = 'datetime';
         this._touchUi = false;
         /** Preferred position of the datetimepicker in the X axis. */
         this.xPosition = 'start';
@@ -1680,7 +1680,7 @@ class MtxDatetimepicker {
         return this._type;
     }
     set type(value) {
-        this._type = value || 'date';
+        this._type = value || 'datetime';
     }
     /**
      * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
@@ -1781,7 +1781,9 @@ class MtxDatetimepicker {
             return;
         }
         if (this._componentRef) {
-            this._destroyOverlay();
+            const instance = this._componentRef.instance;
+            instance._startExitAnimation();
+            instance._animationDone.pipe(take(1)).subscribe(() => this._destroyOverlay());
         }
         const completeClose = () => {
             // The `_opened` could've been reset already if
@@ -2229,6 +2231,8 @@ class MtxDatetimepickerInput {
                 return this._dateFormats.display.timeInput;
             case 'month':
                 return this._dateFormats.display.monthInput;
+            case 'year':
+                return this._dateFormats.display.yearInput;
         }
     }
     getParseFormat() {
@@ -2246,6 +2250,9 @@ class MtxDatetimepickerInput {
             case 'month':
                 parseFormat = this._dateFormats.parse.monthInput;
                 break;
+            case 'year':
+                parseFormat = this._dateFormats.parse.yearInput;
+                break;
         }
         if (!parseFormat) {
             parseFormat = this._dateFormats.parse.dateInput;
@@ -2332,10 +2339,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
                 }]
         }] });
 class MtxDatetimepickerToggle {
-    constructor(_intl, _changeDetectorRef) {
+    constructor(_intl, _changeDetectorRef, defaultTabIndex) {
         this._intl = _intl;
         this._changeDetectorRef = _changeDetectorRef;
         this._stateChanges = Subscription.EMPTY;
+        const parsedTabIndex = Number(defaultTabIndex);
+        this.tabIndex = parsedTabIndex || parsedTabIndex === 0 ? parsedTabIndex : null;
     }
     /** Whether the toggle button is disabled. */
     get disabled() {
@@ -2368,29 +2377,36 @@ class MtxDatetimepickerToggle {
         const inputDisabled = this.datetimepicker && this.datetimepicker.datetimepickerInput
             ? this.datetimepicker.datetimepickerInput._disabledChange
             : of();
+        const datetimepickerToggled = this.datetimepicker
+            ? merge(this.datetimepicker.openedStream, this.datetimepicker.closedStream)
+            : of();
         this._stateChanges.unsubscribe();
-        this._stateChanges = merge([
-            this._intl.changes,
-            datetimepickerDisabled,
-            inputDisabled,
-        ]).subscribe(() => this._changeDetectorRef.markForCheck());
+        this._stateChanges = merge(this._intl.changes, datetimepickerDisabled, inputDisabled, datetimepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
     }
 }
-/** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: i1$1.MatDatepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "disabled ? null : -1", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-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=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-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=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-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-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ MtxDatetimepickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, deps: [{ token: i1$1.MatDatepickerIntl }, { token: i0.ChangeDetectorRef }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxDatetimepickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: MtxDatetimepickerToggle, selector: "mtx-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "click": "_open($event)" }, properties: { "attr.tabindex": "null", "class.mtx-datetimepicker-toggle-active": "datetimepicker && datetimepicker.opened", "class.mat-accent": "datetimepicker && datetimepicker.color === \"accent\"", "class.mat-warn": "datetimepicker && datetimepicker.color === \"warn\"", "attr.data-mtx-calendar": "datetimepicker ? datetimepicker.id : null" }, classAttribute: "mtx-datetimepicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxDatetimepickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-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=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-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=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-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-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxDatetimepickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-datetimepicker-toggle', host: {
                         'class': 'mtx-datetimepicker-toggle',
-                        // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
-                        // consumer may have provided, while still being able to receive focus.
-                        '[attr.tabindex]': 'disabled ? null : -1',
+                        '[attr.tabindex]': 'null',
                         '[class.mtx-datetimepicker-toggle-active]': 'datetimepicker && datetimepicker.opened',
                         '[class.mat-accent]': 'datetimepicker && datetimepicker.color === "accent"',
                         '[class.mat-warn]': 'datetimepicker && datetimepicker.color === "warn"',
-                        '(focus)': '_button.focus()',
-                    }, exportAs: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"_open($event)\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-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=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-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=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-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-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.MatDatepickerIntl }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { datetimepicker: [{
+                        // Used by the test harness to tie this toggle to its datetimepicker.
+                        '[attr.data-mtx-calendar]': 'datetimepicker ? datetimepicker.id : null',
+                        // Bind the `click` on the host, rather than the inner `button`, so that we can call
+                        // `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: 'mtxDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n        [attr.aria-label]=\"_intl.openCalendarLabel\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\">\n\n  <ng-container *ngIf=\"!_customIcon\" [ngSwitch]=\"datetimepicker.type\">\n    <svg *ngSwitchCase=\"'time'\"\n         class=\"mtx-datetimepicker-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=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchCase=\"'datetime'\"\n         class=\"mtx-datetimepicker-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=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n      </path>\n    </svg>\n    <svg *ngSwitchDefault\n         class=\"mtx-datetimepicker-toggle-default-icon\"\n         viewBox=\"0 0 24 24\"\n         width=\"24px\"\n         height=\"24px\"\n         fill=\"currentColor\"\n         focusable=\"false\">\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n      <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n    </svg>\n  </ng-container>\n\n  <ng-content select=\"[mtxDatetimepickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-datetimepicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-datetimepicker-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-datetimepicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-datetimepicker-toggle-default-icon{margin:auto}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.MatDatepickerIntl }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        type: Attribute,
+                        args: ['tabindex']
+                    }] }];
+    }, propDecorators: { datetimepicker: [{
                 type: Input,
                 args: ['for']
             }], tabIndex: [{