@ng-matero/extensions 12.4.0 → 12.5.3

package/bundles/mtxDatetimepicker.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/cdk/a11y'), require('@angular/cdk/overlay'), require('@angular/common'), require('@angular/core'), require('@angular/material/button'), require('@angular/material/icon'), require('@angular/cdk/keycodes'), require('@angular/cdk/coercion'), require('@angular/material/datepicker'), require('rxjs/operators'), require('@ng-matero/extensions/core'), require('@angular/animations'), require('@angular/cdk/bidi'), require('@angular/cdk/portal'), require('rxjs'), require('@angular/cdk/platform'), require('@angular/forms'), require('@angular/material/input'), require('@angular/material/form-field')) :
     typeof define === 'function' && define.amd ? define('@ng-matero/extensions/datetimepicker', ['exports', '@angular/cdk/a11y', '@angular/cdk/overlay', '@angular/common', '@angular/core', '@angular/material/button', '@angular/material/icon', '@angular/cdk/keycodes', '@angular/cdk/coercion', '@angular/material/datepicker', 'rxjs/operators', '@ng-matero/extensions/core', '@angular/animations', '@angular/cdk/bidi', '@angular/cdk/portal', 'rxjs', '@angular/cdk/platform', '@angular/forms', '@angular/material/input', '@angular/material/form-field'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ng-matero'] = global['ng-matero'] || {}, global['ng-matero'].extensions = global['ng-matero'].extensions || {}, global['ng-matero'].extensions.datetimepicker = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.material.button, global.ng.material.icon, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.material.datepicker, global.rxjs.operators, global['ng-matero'].extensions.core, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.portal, global.rxjs, global.ng.cdk.platform, global.ng.forms, global.ng.material.input, global.ng.material.formField));
-}(this, (function (exports, a11y, overlay, common, core, button, icon, keycodes, coercion, datepicker, operators, core$1, animations, bidi, portal, rxjs, platform, forms, input, formField) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = global["ng-matero"].extensions || {}, global["ng-matero"].extensions.datetimepicker = {}), global.ng.cdk.a11y, global.ng.cdk.overlay, global.ng.common, global.ng.core, global.ng.material.button, global.ng.material.icon, global.ng.cdk.keycodes, global.ng.cdk.coercion, global.ng.material.datepicker, global.rxjs.operators, global["ng-matero"].extensions.core, global.ng.animations, global.ng.cdk.bidi, global.ng.cdk.portal, global.rxjs, global.ng.cdk.platform, global.ng.forms, global.ng.material.input, global.ng.material.formField));
+})(this, (function (exports, a11y, overlay, common, core, button, icon, keycodes, coercion, datepicker, operators, core$1, animations, bidi, portal, rxjs, platform, forms, input, formField) { 'use strict';
 
     /**
      * This animation fades in the background color and text content of the
@@ -101,6 +101,7 @@
         };
         return MtxCalendarBody;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxCalendarBody.decorators = [
         { type: core.Component, args: [{
                     selector: '[mtx-calendar-body]',
@@ -110,9 +111,10 @@
                     },
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".mtx-calendar-body{font-size:13px;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"]
+                    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"]
                 },] }
     ];
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxCalendarBody.propDecorators = {
         label: [{ type: core.Input }],
         rows: [{ type: core.Input }],
@@ -283,6 +285,7 @@
         };
         return MtxMultiYearView;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxMultiYearView.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-multi-year-view',
@@ -292,11 +295,18 @@
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxMultiYearView.ctorParameters = function () { return [
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxMultiYearView.propDecorators = {
         _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
@@ -550,7 +560,7 @@
         Object.defineProperty(MtxCalendar.prototype, "_hoursLabel", {
             get: function () {
                 var hour = this._adapter.getHour(this._activeDate);
-                if (!!this.twelvehour) {
+                if (this.twelvehour) {
                     if (hour === 0) {
                         hour = 24;
                     }
@@ -676,7 +686,7 @@
             this._activeDate = date;
         };
         MtxCalendar.prototype._updateDate = function (date) {
-            if (!!this.twelvehour) {
+            if (this.twelvehour) {
                 var HOUR = this._adapter.getHour(date);
                 if (HOUR === 12) {
                     if (this._AMPM === 'AM') {
@@ -971,10 +981,11 @@
         };
         return MtxCalendar;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxCalendar.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-calendar',
-                    template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <mat-icon *ngIf=\"multiYearSelector || type === 'year'\">arrow_drop_down</mat-icon>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView == 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView == 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div (@slideCalendar.done)=\"_calendarStateDone()\" [@slideCalendar]=\"_calendarState\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
+                    template: "<div class=\"mtx-calendar-header\">\n  <div (click)=\"_yearClicked()\"\n       *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\"\n       role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <mat-icon *ngIf=\"multiYearSelector || type === 'year'\">arrow_drop_down</mat-icon>\n  </div>\n  <div class=\"mtx-calendar-header-date-time\">\n    <span (click)=\"_dateClicked()\" *ngIf=\"type !== 'time' && type !== 'year'\"\n          [class.active]=\"currentView === 'month'\"\n          [class.not-clickable]=\"type === 'month'\"\n          class=\"mtx-calendar-header-date\"\n          role=\"button\">{{ _dateLabel }}</span>\n    <span *ngIf=\"type.endsWith('time')\"\n          [class.active]=\"currentView === 'clock'\"\n          class=\"mtx-calendar-header-time\">\n      <span (click)=\"_hoursClicked()\"\n            [class.active]=\"_clockView === 'hour'\"\n            class=\"mtx-calendar-header-hours\"\n            role=\"button\">{{ _hoursLabel }}</span>:<span (click)=\"_minutesClicked()\"\n            [class.active]=\"_clockView === 'minute'\"\n            class=\"mtx-calendar-header-minutes\"\n            role=\"button\">{{ _minutesLabel }}</span>\n      <br />\n      <span *ngIf=\"twelvehour\" class=\"mtx-calendar-header-ampm-container\">\n        <span (click)=\"_ampmClicked('AM')\"\n              [class.active]=\"_AMPM === 'AM'\"\n              class=\"mtx-calendar-header-ampm\">AM</span>/<span\n              (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\">PM</span>\n      </span>\n    </span>\n  </div>\n</div>\n<div class=\"mtx-calendar-content\" [ngSwitch]=\"currentView\">\n  <div *ngIf=\"currentView === 'month' || currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-month-content\">\n    <div class=\"mtx-calendar-controls\">\n      <button mat-icon-button type=\"button\" (click)=\"_previousClicked()\"\n              [attr.aria-disabled]=\"!_previousEnabled()\"\n              [attr.aria-label]=\"_ariaLabelPrev\"\n              [class.disabled]=\"!_previousEnabled()\"\n              class=\"mtx-calendar-previous-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div (@slideCalendar.done)=\"_calendarStateDone()\" [@slideCalendar]=\"_calendarState\"\n           class=\"mtx-calendar-period-button\">\n        <strong>{{ _monthYearLabel }}</strong>\n      </div>\n      <button mat-icon-button type=\"button\" (click)=\"_nextClicked()\"\n              [attr.aria-disabled]=\"!_nextEnabled()\"\n              [attr.aria-label]=\"_ariaLabelNext\"\n              [class.disabled]=\"!_nextEnabled()\"\n              class=\"mtx-calendar-next-button\">\n        <svg height=\"24\" viewBox=\"0 0 24 24\" width=\"24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  <mtx-month-view (_userSelection)=\"_userSelected()\"\n                  (selectedChange)=\"_dateSelected($event)\"\n                  *ngSwitchCase=\"'month'\"\n                  [activeDate]=\"_activeDate\"\n                  [dateFilter]=\"_dateFilterForViews\"\n                  [selected]=\"selected!\"\n                  [type]=\"type\">\n  </mtx-month-view>\n  <mtx-year-view (_userSelection)=\"_userSelected()\"\n                 (selectedChange)=\"_monthSelected($event)\"\n                 *ngSwitchCase=\"'year'\"\n                 [activeDate]=\"_activeDate\"\n                 [dateFilter]=\"_dateFilterForViews\"\n                 [selected]=\"selected!\"\n                 [type]=\"type\">\n  </mtx-year-view>\n  <mtx-multi-year-view (_userSelection)=\"_userSelected()\"\n                       (selectedChange)=\"_yearSelected($event)\"\n                       *ngSwitchCase=\"'multi-year'\"\n                       [activeDate]=\"_activeDate\"\n                       [dateFilter]=\"_dateFilterForViews\"\n                       [maxDate]=\"maxDate\"\n                       [minDate]=\"minDate\"\n                       [selected]=\"selected!\"\n                       [type]=\"type\">\n  </mtx-multi-year-view>\n  <mtx-clock (_userSelection)=\"_userSelected()\"\n             (activeDateChange)=\"_onActiveDateChange($event)\"\n             (selectedChange)=\"_timeSelected($event)\"\n             *ngSwitchDefault\n             [dateFilter]=\"dateFilter\"\n             [interval]=\"timeInterval\"\n             [maxDate]=\"maxDate\"\n             [minDate]=\"minDate\"\n             [selected]=\"_activeDate\"\n             [startView]=\"_clockView\"\n             [twelvehour]=\"twelvehour\">\n  </mtx-clock>\n</div>\n",
                     host: {
                         'class': 'mtx-calendar',
                         '[attr.aria-label]': 'ariaLabel',
@@ -984,10 +995,16 @@
                     animations: [slideCalendar],
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
-                    styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;font-size:14px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;font-weight:400;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px;font-size:16px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-date-time{font-size:30px;line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-ampm-container{font-size:.77em}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:auto;cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(33% / 7 - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;font-size:14px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;font-size:11px;font-weight:400;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"]
+                    styles: [".mtx-calendar{display:block;outline:none}.mtx-calendar[mode=landscape]{display:flex}.mtx-calendar-header{padding:16px;box-sizing:border-box;border-radius:4px 4px 0 0}[mode=landscape] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] [mode=landscape] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar-header-year,.mtx-calendar-header-date-time{width:100%;white-space:nowrap}.mtx-calendar-header-year{height:32px;line-height:32px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-date-time{line-height:34px}[mode=landscape] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar-header-year:not(.active),.mtx-calendar-header-date:not(.active),.mtx-calendar-header-hours:not(.active),.mtx-calendar-header-minutes:not(.active),.mtx-calendar-header-ampm:not(.active){cursor:pointer;opacity:.6}.mtx-calendar-header-year.not-clickable,.mtx-calendar-header-date.not-clickable,.mtx-calendar-header-hours.not-clickable,.mtx-calendar-header-minutes.not-clickable,.mtx-calendar-header-ampm.not-clickable{cursor:initial}.mtx-calendar-header-time{display:inline-block;padding-left:8px}.mtx-calendar-header-time:not(.active){opacity:.6}.mtx-calendar-header-time:not(.active) .mtx-calendar-header-hours,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-minutes,.mtx-calendar-header-time:not(.active) .mtx-calendar-header-ampm{cursor:pointer;opacity:1}[dir=rtl] .mtx-calendar-header-time{padding-right:8px}[mode=landscape] .mtx-calendar-header-time{display:block;padding:0}.mtx-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.mtx-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.mtx-calendar-controls .mat-icon-button:hover .mat-button-focus-overlay{opacity:.04}.mtx-calendar-period-button{display:inline-block;height:40px;line-height:40px;outline:none;border:0;background:transparent;box-sizing:border-box}.mtx-calendar-previous-button.disabled,.mtx-calendar-next-button.disabled{pointer-events:none}.mtx-calendar-previous-button svg,.mtx-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .mtx-calendar-previous-button svg,[dir=rtl] .mtx-calendar-next-button svg{transform:rotate(180deg)}.mtx-calendar-table{border-spacing:0;border-collapse:collapse;width:100%}.mtx-calendar-table-header th{text-align:center;padding:8px 0}@media all and (orientation: landscape){.mtx-calendar[mode=auto]{display:flex}.mtx-calendar[mode=auto] .mtx-calendar-header{width:150px;min-width:150px;border-radius:4px 0 0 4px}[dir=rtl] .mtx-calendar[mode=auto] .mtx-calendar-header{border-radius:0 4px 4px 0}.mtx-calendar[mode=auto] .mtx-calendar-header-date-time{white-space:normal;word-wrap:break-word}.mtx-calendar[mode=auto] .mtx-calendar-header-time{display:block;padding:0}}\n"]
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxCalendar.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: datepicker.MatDatepickerIntl },
@@ -996,6 +1013,7 @@
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] },
         { type: core.ChangeDetectorRef }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxCalendar.propDecorators = {
         _userSelection: [{ type: core.Output }],
         multiYearSelector: [{ type: core.Input }],
@@ -1116,7 +1134,7 @@
         Object.defineProperty(MtxClock.prototype, "_hand", {
             get: function () {
                 var hour = this._adapter.getHour(this.activeDate);
-                if (!!this.twelvehour) {
+                if (this.twelvehour) {
                     if (hour === 0) {
                         hour = 24;
                     }
@@ -1286,24 +1304,32 @@
         };
         return MtxClock;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxClock.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-clock',
-                    template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div [ngStyle]=\"_hand\" class=\"mtx-clock-hand\"></div>\n  <div [class.active]=\"_hourView\" class=\"mtx-clock-hours\">\n    <div *ngFor=\"let item of _hours\"\n         [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n         [class.mtx-clock-cell-selected]=\"_selectedHour == item.value\"\n         [style.fontSize]=\"item.fontSize\"\n         [style.left]=\"item.left+'%'\"\n         [style.top]=\"item.top+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n  <div [class.active]=\"!_hourView\" class=\"mtx-clock-minutes\">\n    <div *ngFor=\"let item of _minutes\"\n         [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n         [class.mtx-clock-cell-selected]=\"_selectedMinute == item.value\"\n         [style.left]=\"item.left+'%'\"\n         [style.top]=\"item.top+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n</div>\n",
+                    template: "<div class=\"mtx-clock-wrapper\">\n  <div class=\"mtx-clock-center\"></div>\n  <div [ngStyle]=\"_hand\" class=\"mtx-clock-hand\"></div>\n  <div [class.active]=\"_hourView\" class=\"mtx-clock-hours\">\n    <div *ngFor=\"let item of _hours\"\n         [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n         [class.mtx-clock-cell-selected]=\"_selectedHour === item.value\"\n         [style.fontSize]=\"item.fontSize\"\n         [style.left]=\"item.left+'%'\"\n         [style.top]=\"item.top+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n  <div [class.active]=\"!_hourView\" class=\"mtx-clock-minutes\">\n    <div *ngFor=\"let item of _minutes\"\n         [class.mtx-clock-cell-disabled]=\"!item.enabled\"\n         [class.mtx-clock-cell-selected]=\"_selectedMinute === item.value\"\n         [style.left]=\"item.left+'%'\"\n         [style.top]=\"item.top+'%'\"\n         class=\"mtx-clock-cell\">{{ item.displayValue }}</div>\n  </div>\n</div>\n",
                     host: {
                         '[class.mtx-clock]': 'true',
                         'role': 'clock',
                         '(mousedown)': '_handleMousedown($event)',
                     },
                     encapsulation: core.ViewEncapsulation.None,
-                    styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;font-size:14px;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"]
+                    styles: [".mtx-clock{position:relative;display:block;min-width:224px;margin:8px;box-sizing:border-box;-webkit-user-select:none;user-select:none}.mtx-clock-wrapper{position:relative;width:100%;height:0;padding-top:100%;border-radius:50%}.mtx-clock-center{position:absolute;top:50%;left:50%;width:2%;height:2%;margin:-1%;border-radius:50%}.mtx-clock-hand{position:absolute;top:0;right:0;bottom:0;left:0;width:1px;margin:0 auto;transform-origin:bottom}.mtx-clock-hand:before{content:\"\";position:absolute;top:-4px;left:-4px;width:8px;height:8px;border-radius:50%}.mtx-clock-hours,.mtx-clock-minutes{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;visibility:hidden;transition:.35s;transform:scale(1.2)}.mtx-clock-hours.active,.mtx-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.mtx-clock-minutes{transform:scale(.8)}.mtx-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.mtx-clock-cell.mtx-clock-cell-disabled{pointer-events:none}\n"]
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxClock.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core$1.DatetimeAdapter }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxClock.propDecorators = {
         _userSelection: [{ type: core.Output }],
         dateFilter: [{ type: core.Input }],
@@ -1339,6 +1365,7 @@
         };
         return MtxDatetimepickerContent;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerContent.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-datetimepicker-content',
@@ -1353,6 +1380,7 @@
                     styles: [".mtx-datetimepicker-content{display:block;border-radius:4px}.mtx-datetimepicker-content-container{display:flex;flex-direction:column;justify-content:space-between}.mtx-datetimepicker-content .mtx-calendar{width:296px;height:404px}.mtx-datetimepicker-content .mtx-calendar[mode=landscape]{width:446px;height:328px}@media all and (orientation: landscape){.mtx-datetimepicker-content .mtx-calendar[mode=auto]{width:446px;height:328px}}.mtx-datetimepicker-content-touch{display:block;max-height:80vh;position:relative;overflow:visible}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container{min-height:300px;max-height:850px;min-width:250px;max-width:750px}.mtx-datetimepicker-content-touch .mtx-calendar{width:100%;height:auto}@media all and (orientation: landscape){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:120vh;height:80vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:64vh;height:90vh}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}}@media all and (orientation: portrait){.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto],.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait]{width:80vw;height:120vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=auto] .mtx-calendar,.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=portrait] .mtx-calendar{width:100%;height:auto}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape]{width:90vw;height:64vw}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container[mode=landscape] .mtx-calendar{width:auto;height:100%}.mtx-datetimepicker-content-touch .mtx-datetimepicker-content-container-with-actions{height:135vw}}\n"]
                 },] }
     ];
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerContent.propDecorators = {
         _calendar: [{ type: core.ViewChild, args: [MtxCalendar, { static: true },] }]
     };
@@ -1716,6 +1744,7 @@
         };
         return MtxDatetimepicker;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepicker.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-datetimepicker',
@@ -1726,7 +1755,13 @@
                     preserveWhitespaces: false
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxDatetimepicker.ctorParameters = function () { return [
         { type: overlay.Overlay },
         { type: core.NgZone },
@@ -1735,6 +1770,7 @@
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: bidi.Directionality, decorators: [{ type: core.Optional }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepicker.propDecorators = {
         multiYearSelector: [{ type: core.Input }],
         twelvehour: [{ type: core.Input }],
@@ -1852,7 +1888,7 @@
             }
             // Update the displayed date when the locale changes.
             this._localeSubscription = _dateAdapter.localeChanges.subscribe(function () {
-                _this.value = _this.value;
+                _this.value = _this._dateAdapter.deserialize(_this.value);
             });
         }
         Object.defineProperty(MtxDatetimepickerInput.prototype, "mtxDatetimepicker", {
@@ -2060,6 +2096,7 @@
         };
         return MtxDatetimepickerInput;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerInput.decorators = [
         { type: core.Directive, args: [{
                     selector: 'input[mtxDatetimepicker]',
@@ -2082,13 +2119,20 @@
                     exportAs: 'mtxDatetimepickerInput',
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxDatetimepickerInput.ctorParameters = function () { return [
         { type: core.ElementRef },
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] },
         { type: formField.MatFormField, decorators: [{ type: core.Optional }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerInput.propDecorators = {
         dateChange: [{ type: core.Output }],
         dateInput: [{ type: core.Output }],
@@ -2151,6 +2195,7 @@
         };
         return MtxDatetimepickerToggle;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerToggle.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-datetimepicker-toggle',
@@ -2164,11 +2209,18 @@
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxDatetimepickerToggle.ctorParameters = function () { return [
         { type: datepicker.MatDatepickerIntl },
         { type: core.ChangeDetectorRef }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxDatetimepickerToggle.propDecorators = {
         datetimepicker: [{ type: core.Input, args: ['for',] }],
         disabled: [{ type: core.Input }]
@@ -2295,6 +2347,7 @@
         };
         return MtxMonthView;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxMonthView.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-month-view',
@@ -2304,11 +2357,18 @@
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxMonthView.ctorParameters = function () { return [
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxMonthView.propDecorators = {
         type: [{ type: core.Input }],
         _userSelection: [{ type: core.Output }],
@@ -2431,6 +2491,7 @@
         };
         return MtxYearView;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxYearView.decorators = [
         { type: core.Component, args: [{
                     selector: 'mtx-year-view',
@@ -2440,11 +2501,18 @@
                     changeDetection: core.ChangeDetectionStrategy.OnPush
                 },] }
     ];
-    /** @nocollapse */
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
     MtxYearView.ctorParameters = function () { return [
         { type: core$1.DatetimeAdapter, decorators: [{ type: core.Optional }] },
         { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [core$1.MTX_DATETIME_FORMATS,] }] }
     ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     MtxYearView.propDecorators = {
         _userSelection: [{ type: core.Output }],
         type: [{ type: core.Input }],
@@ -2459,6 +2527,7 @@
         }
         return MtxDatetimepickerModule;
     }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     MtxDatetimepickerModule.decorators = [
         { type: core.NgModule, args: [{
                     imports: [common.CommonModule, button.MatButtonModule, icon.MatIconModule, overlay.OverlayModule, a11y.A11yModule],
@@ -2512,10 +2581,10 @@
     exports.MtxDatetimepickerToggle = MtxDatetimepickerToggle;
     exports.MtxMonthView = MtxMonthView;
     exports.MtxYearView = MtxYearView;
-    exports.ɵa = slideCalendar;
-    exports.ɵb = MtxMultiYearView;
+    exports["ɵa"] = slideCalendar;
+    exports["ɵb"] = MtxMultiYearView;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=mtxDatetimepicker.umd.js.map