@ng-matero/extensions 12.7.1 → 12.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/_all-theme.scss +2 -0
  2. package/_index.scss +1 -0
  3. package/_theming.scss +1 -0
  4. package/bundles/extensions.umd.js +18 -11
  5. package/bundles/extensions.umd.js.map +1 -1
  6. package/bundles/mtxDatetimepicker.umd.js +3 -3
  7. package/bundles/mtxDatetimepicker.umd.js.map +1 -1
  8. package/bundles/mtxDrawer.umd.js +936 -0
  9. package/bundles/mtxDrawer.umd.js.map +1 -0
  10. package/bundles/mtxGrid.umd.js +45 -25
  11. package/bundles/mtxGrid.umd.js.map +1 -1
  12. package/datetimepicker/_datetimepicker-theme.scss +2 -2
  13. package/datetimepicker/calendar.scss +49 -9
  14. package/datetimepicker/datetimepicker-content.scss +1 -1
  15. package/datetimepicker/mtxDatetimepicker.metadata.json +1 -1
  16. package/drawer/_drawer-theme.import.scss +2 -0
  17. package/drawer/_drawer-theme.scss +40 -0
  18. package/drawer/drawer-animation.d.ts +5 -0
  19. package/drawer/drawer-config.d.ts +53 -0
  20. package/drawer/drawer-container.d.ts +80 -0
  21. package/drawer/drawer-container.scss +32 -0
  22. package/drawer/drawer-module.d.ts +2 -0
  23. package/drawer/drawer-ref.d.ts +44 -0
  24. package/drawer/drawer.d.ts +58 -0
  25. package/drawer/mtxDrawer.d.ts +4 -0
  26. package/drawer/mtxDrawer.metadata.json +1 -0
  27. package/drawer/package.json +11 -0
  28. package/drawer/public-api.d.ts +6 -0
  29. package/esm2015/datetimepicker/calendar.js +3 -3
  30. package/esm2015/datetimepicker/datetimepicker.js +1 -1
  31. package/esm2015/drawer/drawer-animation.js +18 -0
  32. package/esm2015/drawer/drawer-config.js +39 -0
  33. package/esm2015/drawer/drawer-container.js +261 -0
  34. package/esm2015/drawer/drawer-module.js +18 -0
  35. package/esm2015/drawer/drawer-ref.js +90 -0
  36. package/esm2015/drawer/drawer.js +166 -0
  37. package/esm2015/drawer/mtxDrawer.js +5 -0
  38. package/esm2015/drawer/public-api.js +7 -0
  39. package/esm2015/extensions.module.js +5 -3
  40. package/esm2015/grid/cell.component.js +4 -4
  41. package/esm2015/grid/column-menu.component.js +29 -8
  42. package/esm2015/grid/grid.component.js +12 -17
  43. package/esm2015/grid/grid.interface.js +1 -1
  44. package/esm2015/public-api.js +3 -2
  45. package/extensions.metadata.json +1 -1
  46. package/fesm2015/extensions.js +6 -3
  47. package/fesm2015/extensions.js.map +1 -1
  48. package/fesm2015/mtxDatetimepicker.js +3 -3
  49. package/fesm2015/mtxDatetimepicker.js.map +1 -1
  50. package/fesm2015/mtxDrawer.js +586 -0
  51. package/fesm2015/mtxDrawer.js.map +1 -0
  52. package/fesm2015/mtxGrid.js +42 -26
  53. package/fesm2015/mtxGrid.js.map +1 -1
  54. package/grid/cell.component.d.ts +1 -1
  55. package/grid/cell.component.scss +0 -9
  56. package/grid/column-menu.component.d.ts +10 -5
  57. package/grid/column-menu.component.scss +28 -2
  58. package/grid/grid.component.d.ts +5 -5
  59. package/grid/grid.component.scss +27 -9
  60. package/grid/grid.interface.d.ts +12 -12
  61. package/grid/mtxGrid.metadata.json +1 -1
  62. package/package.json +1 -1
  63. package/public-api.d.ts +2 -1
@@ -918,7 +918,7 @@ class MtxCalendar {
918
918
  MtxCalendar.decorators = [
919
919
  { type: Component, args: [{
920
920
  selector: 'mtx-calendar',
921
- 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",
921
+ 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",
922
922
  host: {
923
923
  'class': 'mtx-calendar',
924
924
  'tabindex': '0',
@@ -928,7 +928,7 @@ MtxCalendar.decorators = [
928
928
  animations: [mtxDatetimepickerAnimations.slideCalendar],
929
929
  encapsulation: ViewEncapsulation.None,
930
930
  changeDetection: ChangeDetectionStrategy.OnPush,
931
- 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"]
931
+ 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"]
932
932
  },] }
933
933
  ];
934
934
  /**
@@ -1310,7 +1310,7 @@ MtxDatetimepickerContent.decorators = [
1310
1310
  encapsulation: ViewEncapsulation.None,
1311
1311
  changeDetection: ChangeDetectionStrategy.OnPush,
1312
1312
  inputs: ['color'],
1313
- 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"]
1313
+ 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"]
1314
1314
  },] }
1315
1315
  ];
1316
1316
  /**