@ng-matero/extensions 12.7.1 → 12.9.1

package/_all-theme.scss

@@ -2,6 +2,7 @@
 @use './alert/alert-theme';
 @use './colorpicker/colorpicker-theme';
 @use './datetimepicker/datetimepicker-theme';
+@use './drawer/drawer-theme';
 @use './grid/grid-theme';
 @use './loader/loader-theme';
 @use './popover/popover-theme';
@@ -18,6 +19,7 @@
   @include alert-theme.theme($theme);
   @include colorpicker-theme.theme($theme);
   @include datetimepicker-theme.theme($theme);
+  @include drawer-theme.theme($theme);
   @include grid-theme.theme($theme);
   @include loader-theme.theme($theme);
   @include popover-theme.theme($theme);

package/_index.scss

@@ -5,6 +5,7 @@
 @forward './alert/alert-theme' as alert-* show alert-theme;
 @forward './colorpicker/colorpicker-theme' as colorpicker-* show colorpicker-theme;
 @forward './datetimepicker/datetimepicker-theme' as datetimepicker-* show datetimepicker-theme;
+@forward './drawer/drawer-theme' as drawer-* show drawer-theme;
 @forward './grid/grid-theme' as grid-* show grid-theme;
 @forward './loader/loader-theme' as loader-* show loader-theme;
 @forward './popover/popover-theme' as popover-* show popover-theme;

package/_theming.scss

@@ -5,6 +5,7 @@
 @forward './alert/alert-theme.import';
 @forward './colorpicker/colorpicker-theme.import';
 @forward './datetimepicker/datetimepicker-theme.import';
+@forward './drawer/drawer-theme.import';
 @forward './grid/grid-theme.import';
 @forward './loader/loader-theme.import';
 @forward './popover/popover-theme.import';

package/bundles/extensions.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ng-matero/extensions/alert'), require('@ng-matero/extensions/button'), require('@ng-matero/extensions/checkbox-group'), require('@ng-matero/extensions/colorpicker'), require('@ng-matero/extensions/column-resize'), require('@ng-matero/extensions/grid'), require('@ng-matero/extensions/datetimepicker'), require('@ng-matero/extensions/dialog'), require('@ng-matero/extensions/loader'), require('@ng-matero/extensions/popover'), require('@ng-matero/extensions/progress'), require('@ng-matero/extensions/select'), require('@ng-matero/extensions/slider'), require('@ng-matero/extensions/split'), require('@ng-matero/extensions/tooltip'), require('@ng-matero/extensions/form-group'), require('@ng-matero/extensions/text3d'), require('@angular/core')) :
-    typeof define === 'function' && define.amd ? define('@ng-matero/extensions', ['exports', '@ng-matero/extensions/alert', '@ng-matero/extensions/button', '@ng-matero/extensions/checkbox-group', '@ng-matero/extensions/colorpicker', '@ng-matero/extensions/column-resize', '@ng-matero/extensions/grid', '@ng-matero/extensions/datetimepicker', '@ng-matero/extensions/dialog', '@ng-matero/extensions/loader', '@ng-matero/extensions/popover', '@ng-matero/extensions/progress', '@ng-matero/extensions/select', '@ng-matero/extensions/slider', '@ng-matero/extensions/split', '@ng-matero/extensions/tooltip', '@ng-matero/extensions/form-group', '@ng-matero/extensions/text3d', '@angular/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = {}), global["ng-matero"].extensions.alert, global["ng-matero"].extensions.button, global["ng-matero"].extensions["checkbox-group"], global["ng-matero"].extensions.colorpicker, global["ng-matero"].extensions["column-resize"], global["ng-matero"].extensions.grid, global["ng-matero"].extensions.datetimepicker, global["ng-matero"].extensions.dialog, global["ng-matero"].extensions.loader, global["ng-matero"].extensions.popover, global["ng-matero"].extensions.progress, global["ng-matero"].extensions.select, global["ng-matero"].extensions.slider, global["ng-matero"].extensions.split, global["ng-matero"].extensions.tooltip, global["ng-matero"].extensions["form-group"], global["ng-matero"].extensions.text3d, global.ng.core));
-})(this, (function (exports, alert, button, checkboxGroup, colorpicker, columnResize, grid, datetimepicker, dialog, loader, popover, progress, select, slider, split, tooltip, formGroup, text3d, core) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ng-matero/extensions/alert'), require('@ng-matero/extensions/button'), require('@ng-matero/extensions/checkbox-group'), require('@ng-matero/extensions/colorpicker'), require('@ng-matero/extensions/column-resize'), require('@ng-matero/extensions/datetimepicker'), require('@ng-matero/extensions/dialog'), require('@ng-matero/extensions/drawer'), require('@ng-matero/extensions/grid'), require('@ng-matero/extensions/loader'), require('@ng-matero/extensions/popover'), require('@ng-matero/extensions/progress'), require('@ng-matero/extensions/select'), require('@ng-matero/extensions/slider'), require('@ng-matero/extensions/split'), require('@ng-matero/extensions/tooltip'), require('@ng-matero/extensions/form-group'), require('@ng-matero/extensions/text3d'), require('@angular/core')) :
+    typeof define === 'function' && define.amd ? define('@ng-matero/extensions', ['exports', '@ng-matero/extensions/alert', '@ng-matero/extensions/button', '@ng-matero/extensions/checkbox-group', '@ng-matero/extensions/colorpicker', '@ng-matero/extensions/column-resize', '@ng-matero/extensions/datetimepicker', '@ng-matero/extensions/dialog', '@ng-matero/extensions/drawer', '@ng-matero/extensions/grid', '@ng-matero/extensions/loader', '@ng-matero/extensions/popover', '@ng-matero/extensions/progress', '@ng-matero/extensions/select', '@ng-matero/extensions/slider', '@ng-matero/extensions/split', '@ng-matero/extensions/tooltip', '@ng-matero/extensions/form-group', '@ng-matero/extensions/text3d', '@angular/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-matero"] = global["ng-matero"] || {}, global["ng-matero"].extensions = {}), global["ng-matero"].extensions.alert, global["ng-matero"].extensions.button, global["ng-matero"].extensions["checkbox-group"], global["ng-matero"].extensions.colorpicker, global["ng-matero"].extensions["column-resize"], global["ng-matero"].extensions.datetimepicker, global["ng-matero"].extensions.dialog, global["ng-matero"].extensions.drawer, global["ng-matero"].extensions.grid, global["ng-matero"].extensions.loader, global["ng-matero"].extensions.popover, global["ng-matero"].extensions.progress, global["ng-matero"].extensions.select, global["ng-matero"].extensions.slider, global["ng-matero"].extensions.split, global["ng-matero"].extensions.tooltip, global["ng-matero"].extensions["form-group"], global["ng-matero"].extensions.text3d, global.ng.core));
+})(this, (function (exports, alert, button, checkboxGroup, colorpicker, columnResize, datetimepicker, dialog, drawer, grid, loader, popover, progress, select, slider, split, tooltip, formGroup, text3d, core) { 'use strict';
 
     var MaterialExtensionsExperimentalModule = /** @class */ (function () {
         function MaterialExtensionsExperimentalModule() {
@@ -30,9 +30,10 @@
                         button.MtxButtonModule,
                         checkboxGroup.MtxCheckboxGroupModule,
                         colorpicker.MtxColorpickerModule,
-                        grid.MtxGridModule,
                         datetimepicker.MtxDatetimepickerModule,
                         dialog.MtxDialogModule,
+                        drawer.MtxDrawerModule,
+                        grid.MtxGridModule,
                         loader.MtxLoaderModule,
                         popover.MtxPopoverModule,
                         progress.MtxProgressModule,
@@ -85,12 +86,6 @@
             get: function () { return columnResize[k]; }
         });
     });
-    Object.keys(grid).forEach(function (k) {
-        if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
-            enumerable: true,
-            get: function () { return grid[k]; }
-        });
-    });
     Object.keys(datetimepicker).forEach(function (k) {
         if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
             enumerable: true,
@@ -103,6 +98,18 @@
             get: function () { return dialog[k]; }
         });
     });
+    Object.keys(drawer).forEach(function (k) {
+        if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+            enumerable: true,
+            get: function () { return drawer[k]; }
+        });
+    });
+    Object.keys(grid).forEach(function (k) {
+        if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
+            enumerable: true,
+            get: function () { return grid[k]; }
+        });
+    });
     Object.keys(loader).forEach(function (k) {
         if (k !== 'default' && !exports.hasOwnProperty(k)) Object.defineProperty(exports, k, {
             enumerable: true,

package/bundles/extensions.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"extensions.umd.js","sources":["../../../projects/extensions/extensions-experimental.module.ts","../../../projects/extensions/extensions.module.ts","../../../projects/extensions/public-api.ts","../../../projects/extensions/extensions.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { MtxFormGroupModule } from '@ng-matero/extensions/form-group';\nimport { MtxText3dModule } from '@ng-matero/extensions/text3d';\n\n@NgModule({\n  exports: [MtxFormGroupModule, MtxText3dModule],\n  declarations: [],\n})\nexport class MaterialExtensionsExperimentalModule {}\n","import { NgModule } from '@angular/core';\n\nimport { MtxAlertModule } from '@ng-matero/extensions/alert';\nimport { MtxButtonModule } from '@ng-matero/extensions/button';\nimport { MtxCheckboxGroupModule } from '@ng-matero/extensions/checkbox-group';\nimport { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';\nimport { MtxGridModule } from '@ng-matero/extensions/grid';\nimport { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';\nimport { MtxDialogModule } from '@ng-matero/extensions/dialog';\nimport { MtxLoaderModule } from '@ng-matero/extensions/loader';\nimport { MtxPopoverModule } from '@ng-matero/extensions/popover';\nimport { MtxProgressModule } from '@ng-matero/extensions/progress';\nimport { MtxSelectModule } from '@ng-matero/extensions/select';\nimport { MtxSliderModule } from '@ng-matero/extensions/slider';\nimport { MtxSplitModule } from '@ng-matero/extensions/split';\nimport { MtxTooltipModule } from '@ng-matero/extensions/tooltip';\n\n@NgModule({\n  exports: [\n    MtxAlertModule,\n    MtxButtonModule,\n    MtxCheckboxGroupModule,\n    MtxColorpickerModule,\n    MtxGridModule,\n    MtxDatetimepickerModule,\n    MtxDialogModule,\n    MtxLoaderModule,\n    MtxPopoverModule,\n    MtxProgressModule,\n    MtxSelectModule,\n    MtxSliderModule,\n    MtxSplitModule,\n    MtxTooltipModule,\n  ],\n  declarations: [],\n})\nexport class MaterialExtensionsModule {}\n","/*\n * Public API Surface of components\n */\n\nexport * from '@ng-matero/extensions/alert';\nexport * from '@ng-matero/extensions/button';\nexport * from '@ng-matero/extensions/checkbox-group';\nexport * from '@ng-matero/extensions/colorpicker';\nexport * from '@ng-matero/extensions/column-resize';\nexport * from '@ng-matero/extensions/grid';\nexport * from '@ng-matero/extensions/datetimepicker';\nexport * from '@ng-matero/extensions/dialog';\nexport * from '@ng-matero/extensions/loader';\nexport * from '@ng-matero/extensions/popover';\nexport * from '@ng-matero/extensions/progress';\nexport * from '@ng-matero/extensions/select';\nexport * from '@ng-matero/extensions/slider';\nexport * from '@ng-matero/extensions/split';\nexport * from '@ng-matero/extensions/tooltip';\n\nexport * from '@ng-matero/extensions/form-group';\nexport * from '@ng-matero/extensions/text3d';\n\nexport * from './extensions-experimental.module';\nexport * from './extensions.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["NgModule","MtxFormGroupModule","MtxText3dModule","MtxAlertModule","MtxButtonModule","MtxCheckboxGroupModule","MtxColorpickerModule","MtxGridModule","MtxDatetimepickerModule","MtxDialogModule","MtxLoaderModule","MtxPopoverModule","MtxProgressModule","MtxSelectModule","MtxSliderModule","MtxSplitModule","MtxTooltipModule"],"mappings":";;;;;;;QASA;;;;;;gBAJCA,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,4BAAkB,EAAEC,sBAAe,CAAC;oBAC9C,YAAY,EAAE,EAAE;iBACjB;;;;QC4BD;;;;;;gBAnBCF,aAAQ,SAAC;oBACR,OAAO,EAAE;wBACPG,oBAAc;wBACdC,sBAAe;wBACfC,oCAAsB;wBACtBC,gCAAoB;wBACpBC,kBAAa;wBACbC,sCAAuB;wBACvBC,sBAAe;wBACfC,sBAAe;wBACfC,wBAAgB;wBAChBC,0BAAiB;wBACjBC,sBAAe;wBACfC,sBAAe;wBACfC,oBAAc;wBACdC,wBAAgB;qBACjB;oBACD,YAAY,EAAE,EAAE;iBACjB;;;ICnCD;;;;ICAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"extensions.umd.js","sources":["../../../projects/extensions/extensions-experimental.module.ts","../../../projects/extensions/extensions.module.ts","../../../projects/extensions/public-api.ts","../../../projects/extensions/extensions.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\n\nimport { MtxFormGroupModule } from '@ng-matero/extensions/form-group';\nimport { MtxText3dModule } from '@ng-matero/extensions/text3d';\n\n@NgModule({\n  exports: [MtxFormGroupModule, MtxText3dModule],\n  declarations: [],\n})\nexport class MaterialExtensionsExperimentalModule {}\n","import { NgModule } from '@angular/core';\n\nimport { MtxAlertModule } from '@ng-matero/extensions/alert';\nimport { MtxButtonModule } from '@ng-matero/extensions/button';\nimport { MtxCheckboxGroupModule } from '@ng-matero/extensions/checkbox-group';\nimport { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';\nimport { MtxDatetimepickerModule } from '@ng-matero/extensions/datetimepicker';\nimport { MtxDialogModule } from '@ng-matero/extensions/dialog';\nimport { MtxDrawerModule } from '@ng-matero/extensions/drawer';\nimport { MtxGridModule } from '@ng-matero/extensions/grid';\nimport { MtxLoaderModule } from '@ng-matero/extensions/loader';\nimport { MtxPopoverModule } from '@ng-matero/extensions/popover';\nimport { MtxProgressModule } from '@ng-matero/extensions/progress';\nimport { MtxSelectModule } from '@ng-matero/extensions/select';\nimport { MtxSliderModule } from '@ng-matero/extensions/slider';\nimport { MtxSplitModule } from '@ng-matero/extensions/split';\nimport { MtxTooltipModule } from '@ng-matero/extensions/tooltip';\n\n@NgModule({\n  exports: [\n    MtxAlertModule,\n    MtxButtonModule,\n    MtxCheckboxGroupModule,\n    MtxColorpickerModule,\n    MtxDatetimepickerModule,\n    MtxDialogModule,\n    MtxDrawerModule,\n    MtxGridModule,\n    MtxLoaderModule,\n    MtxPopoverModule,\n    MtxProgressModule,\n    MtxSelectModule,\n    MtxSliderModule,\n    MtxSplitModule,\n    MtxTooltipModule,\n  ],\n  declarations: [],\n})\nexport class MaterialExtensionsModule {}\n","/*\n * Public API Surface of components\n */\n\nexport * from '@ng-matero/extensions/alert';\nexport * from '@ng-matero/extensions/button';\nexport * from '@ng-matero/extensions/checkbox-group';\nexport * from '@ng-matero/extensions/colorpicker';\nexport * from '@ng-matero/extensions/column-resize';\nexport * from '@ng-matero/extensions/datetimepicker';\nexport * from '@ng-matero/extensions/dialog';\nexport * from '@ng-matero/extensions/drawer';\nexport * from '@ng-matero/extensions/grid';\nexport * from '@ng-matero/extensions/loader';\nexport * from '@ng-matero/extensions/popover';\nexport * from '@ng-matero/extensions/progress';\nexport * from '@ng-matero/extensions/select';\nexport * from '@ng-matero/extensions/slider';\nexport * from '@ng-matero/extensions/split';\nexport * from '@ng-matero/extensions/tooltip';\n\nexport * from '@ng-matero/extensions/form-group';\nexport * from '@ng-matero/extensions/text3d';\n\nexport * from './extensions-experimental.module';\nexport * from './extensions.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["NgModule","MtxFormGroupModule","MtxText3dModule","MtxAlertModule","MtxButtonModule","MtxCheckboxGroupModule","MtxColorpickerModule","MtxDatetimepickerModule","MtxDialogModule","MtxDrawerModule","MtxGridModule","MtxLoaderModule","MtxPopoverModule","MtxProgressModule","MtxSelectModule","MtxSliderModule","MtxSplitModule","MtxTooltipModule"],"mappings":";;;;;;;QASA;;;;;;gBAJCA,aAAQ,SAAC;oBACR,OAAO,EAAE,CAACC,4BAAkB,EAAEC,sBAAe,CAAC;oBAC9C,YAAY,EAAE,EAAE;iBACjB;;;;QC8BD;;;;;;gBApBCF,aAAQ,SAAC;oBACR,OAAO,EAAE;wBACPG,oBAAc;wBACdC,sBAAe;wBACfC,oCAAsB;wBACtBC,gCAAoB;wBACpBC,sCAAuB;wBACvBC,sBAAe;wBACfC,sBAAe;wBACfC,kBAAa;wBACbC,sBAAe;wBACfC,wBAAgB;wBAChBC,0BAAiB;wBACjBC,sBAAe;wBACfC,sBAAe;wBACfC,oBAAc;wBACdC,wBAAgB;qBACjB;oBACD,YAAY,EAAE,EAAE;iBACjB;;;ICrCD;;;;ICAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/bundles/mtxDatetimepicker.umd.js

@@ -995,7 +995,7 @@
     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    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\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 width=\"24\" height=\"24\" viewBox=\"0 0 24 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]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\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 width=\"24\" height=\"24\" viewBox=\"0 0 24 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()\" *ngIf=\"type !== 'time'\"\n       [class.active]=\"currentView === 'year' || currentView === 'multi-year'\"\n       class=\"mtx-calendar-header-year\" role=\"button\">\n    <span>{{ _yearLabel }}</span>\n    <svg *ngIf=\"multiYearSelector || type === 'year'\"\n         class=\"mtx-calendar-header-year-dropdown\"\n         width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\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 class=\"mtx-calendar-header-hour-minute-container\">\n        <span (click)=\"_hoursClicked()\"\n              [class.active]=\"_clockView === 'hour'\"\n              class=\"mtx-calendar-header-hours\"\n              role=\"button\">{{ _hoursLabel }}</span>\n        <span class=\"mtx-calendar-header-hour-minute-separator\">:</span>\n        <span (click)=\"_minutesClicked()\"\n              [class.active]=\"_clockView === 'minute'\"\n              class=\"mtx-calendar-header-minutes\"\n              role=\"button\">{{ _minutesLabel }}</span>\n      </span>\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\" role=\"button\">AM</span>\n        <span (click)=\"_ampmClicked('PM')\"\n              [class.active]=\"_AMPM === 'PM'\"\n              class=\"mtx-calendar-header-ampm\" role=\"button\">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 width=\"24\" height=\"24\" viewBox=\"0 0 24 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]=\"_calendarState\"\n           (@slideCalendar.done)=\"_calendarStateDone()\"\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 width=\"24\" height=\"24\" viewBox=\"0 0 24 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',
                         'tabindex': '0',
@@ -1005,7 +1005,7 @@
                     animations: [mtxDatetimepickerAnimations.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;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"]
+                    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{line-height:24px}.mtx-calendar-header-year>*{vertical-align:middle}.mtx-calendar-header-year+.mtx-calendar-header-date-time{margin-top:4px}.mtx-calendar-header-date-time{line-height:36px}[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-flex}.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}[mode=landscape] .mtx-calendar-header-time{display:flex;flex-direction:column}.mtx-calendar-header-hour-minute-container{padding:0 8px}[mode=landscape] .mtx-calendar-header-hour-minute-container{padding:0}.mtx-calendar-header-hour-minute-separator{display:inline-block;width:8px;text-align:center}.mtx-calendar-header-ampm-container{display:inline-flex;flex-direction:column;line-height:18px}[mode=landscape] .mtx-calendar-header-ampm-container{flex-direction:row}[mode=landscape] .mtx-calendar-header-ampm{padding:4px}.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:flex;flex-direction:column}.mtx-calendar[mode=auto] .mtx-calendar-header-hour-minute-container{padding:0}.mtx-calendar[mode=auto] .mtx-calendar-header-ampm-container{flex-direction:row}.mtx-calendar[mode=auto] .mtx-calendar-header-ampm{padding:4px}}\n"]
                 },] }
     ];
     /**
@@ -1735,7 +1735,7 @@
                     encapsulation: core.ViewEncapsulation.None,
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     inputs: ['color'],
-                    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"]
+                    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:424px}.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"]
                 },] }
     ];
     /**