ngx-mat-tui-calendar 12.0.11 → 12.1.2

package/bundles/ngx-mat-tui-calendar.umd.js

@@ -405,8 +405,9 @@
         LocalDate.convertNumbersToDate = function (_a) {
             var year = _a.year, month = _a.month, day = _a.day, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, milliseconds = _a.milliseconds;
             // month = 1 to 12
-            // start with today's *local* date. this si really important
+            // start with today's *local* date. this is really important
             var date = new Date();
+            date.setDate(1); // very important
             date.setFullYear(year);
             date.setMonth((month == null) ? 0 : month - 1);
             date.setDate((day == null) ? 1 : day);
@@ -636,23 +637,22 @@
             // we slice off the first color since it is gray
             this.colors = distinctColors__default["default"]({ lightMin: 70, count: 15 }).slice(1);
             this.colorIndex = 0;
-            this.calendarId = uuid.v4();
-            this.appliedOptions = this.getDefaultOptions();
+            this.calendarIdDefault = "main";
         }
         NgxMatTuiCalendarComponent.prototype.ngOnInit = function () {
             // console.warn(`calendar.component.ts: ngOnit`)
-            this.createTUICalendar();
+            this.setOptions(this.options);
+            this.createTUICalendar(this.appliedOptions.ioptions);
             this.bindCallbacks();
+            this.calendar.toggleScheduleView(true);
+            this.calendar.render(true);
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.ngOnChanges = function (changes) {
-            // console.warn(changes);
-            if (this.calendar) {
-                if (changes.options) {
-                    // console.warn(`change.option:`, changes.options);
-                    var options = changes.options.currentValue;
-                    this.setOptions(options);
-                }
-            }
+            // console.warn(`ngOnChanges: `, changes);
+            // console.warn(`change.option:`, changes.options);
+            var options = changes.options.currentValue;
+            this.setOptions(options);
         };
         NgxMatTuiCalendarComponent.prototype.ngOnDestroy = function () {
             this.calendar.destroy();
@@ -715,14 +715,16 @@
         };
         NgxMatTuiCalendarComponent.prototype.onMonthView = function () {
             this.calendar.changeView('month');
+            this.calendar.render(true); // <-- so that selection is cleared
         };
         NgxMatTuiCalendarComponent.prototype.onWeekView = function () {
-            console.log("onWeekView");
+            // console.log(`onWeekView`)
             this.calendar.changeView('week');
             this.calendar.render(true); // <-- so that selection is cleared
         };
         NgxMatTuiCalendarComponent.prototype.onDayView = function () {
             this.calendar.changeView('day');
+            this.calendar.render(true); // <-- so that selection is cleared
         };
         NgxMatTuiCalendarComponent.prototype.getDate = function () {
             var date = this.calendar.getDate();
@@ -732,8 +734,8 @@
             });
             return str;
         };
-        NgxMatTuiCalendarComponent.prototype.createTUICalendar = function () {
-            var ioptions = this.preprocessIOptions(null);
+        NgxMatTuiCalendarComponent.prototype.createTUICalendar = function (iopts) {
+            var ioptions = this.preprocessIOptions(iopts);
             // console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
             this.calendar = new Calendar__default["default"]('#calendar', ioptions);
             // console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
@@ -858,7 +860,7 @@
             var end = LocalDate.convertToJsDate(args.end);
             var schedule = {
                 id: id,
-                calendarId: (args.calendarId == null) ? this.calendarId : args.calendarId,
+                calendarId: (args.calendarId == null) ? this.calendarIdDefault : args.calendarId,
                 title: args.title,
                 start: start,
                 end: end,
@@ -878,23 +880,23 @@
         };
         NgxMatTuiCalendarComponent.prototype.updateSchedule = function (schedule) {
             // console.log(`event-calendar.component.ts: updateSchedule:`, schedule);
-            var calendarId = (schedule.calendarId == null) ? this.calendarId : schedule.calendarId;
+            var calendarId = (schedule.calendarId == null) ? this.calendarIdDefault : schedule.calendarId;
             this.calendar.updateSchedule(schedule.id, calendarId, schedule, false);
             return this.calendar.getSchedule(schedule.id, calendarId);
         };
         NgxMatTuiCalendarComponent.prototype.getSchedule = function (args) {
             // console.log(`event-calendar.component.ts: getSchedule:`, schedule);
-            var calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+            var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
             return this.calendar.getSchedule(args.id, calendarId);
         };
         NgxMatTuiCalendarComponent.prototype.deleteScheduleAndNotifyParent = function (args) {
             this.deleteSchedule(args);
-            var calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+            var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
             this.userDeletedSchedule.emit({ id: args.id, calendarId: calendarId });
         };
         NgxMatTuiCalendarComponent.prototype.deleteSchedule = function (args) {
             // console.log(`event-calendar.component.ts: deleteSchedule:`, schedule);
-            var calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+            var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
             this.calendar.deleteSchedule(args.id, calendarId, false);
         };
         NgxMatTuiCalendarComponent.prototype.deleteAllSchedules = function () {
@@ -935,19 +937,42 @@
                 }
             });
         };
-        NgxMatTuiCalendarComponent.prototype.setOptions = function (options) {
-            if (options == null) {
-                options = this.getDefaultOptions();
-            }
-            options.ioptions = this.setIOptions(options.ioptions);
-            this.appliedOptions = Object.assign({}, options);
+        NgxMatTuiCalendarComponent.prototype.setDefaultOptions = function () {
+            this.setOptions();
+        };
+        NgxMatTuiCalendarComponent.prototype.setOptions = function (o) {
+            var get = function (object, path, defaultValue) {
+                var value = path
+                    .split('.')
+                    .reduce(function (o, p) { return o == null ? undefined : o[p]; }, object);
+                return (value !== undefined) ? value : defaultValue;
+            };
+            var options = {
+                darkMode: get(o, "darkMode", false),
+                themeClass: get(o, "themeClass", null),
+                ioptions: (o && o.ioptions) ? this.setIOptions(o.ioptions) : this.getDefaultIOptions(),
+                buttons: {
+                    previous: get(o, "buttons.previous", true),
+                    next: get(o, "buttons.next", true),
+                    today: get(o, "buttons.today", true),
+                    longPrevious: get(o, "buttons.longPrevious", true),
+                    longNext: get(o, "buttons.longNext", true),
+                    month: get(o, "buttons.month", true),
+                    week: get(o, "buttons.week", true),
+                    day: get(o, "buttons.day", true),
+                }
+            };
+            this.appliedOptions = options;
+            // console.warn(`setOptions: `, this.appliedOptions);
         };
         NgxMatTuiCalendarComponent.prototype.setIOptions = function (ioptionsIn) {
             var ioptions = this.preprocessIOptions(ioptionsIn);
-            this.calendar.setOptions(ioptions);
-            this.calendar.setTheme(ioptions.theme);
-            this.calendar.render(true);
-            this.calendar.toggleScheduleView(true);
+            if (this.calendar) {
+                this.calendar.setOptions(ioptions);
+                this.calendar.setTheme(ioptions.theme);
+                this.calendar.render(true);
+                this.calendar.toggleScheduleView(true);
+            }
             return ioptions;
         };
         NgxMatTuiCalendarComponent.prototype.preprocessIOptions = function (ioptions) {
@@ -965,13 +990,6 @@
             }
             return ioptions;
         };
-        NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
-            return {
-                darkMode: false,
-                themeClass: null,
-                ioptions: this.getDefaultIOptions(),
-            };
-        };
         NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
             return {
                 defaultView: 'month',
@@ -1131,7 +1149,7 @@
         return NgxMatTuiCalendarComponent;
     }());
     NgxMatTuiCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NgxMatTuiCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0__namespace, template: "<section class=\"content-container\">\r\n    <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n    <!-- The outer div gives the default color for when user does not provide an Angular theme -->\r\n    <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n    <div style=\"color: blue;\"> <div id=\"theme-highlight\"></div></div>\r\n    <div style=\"color: blue;\"> <div id=\"theme-accent\"></div></div>\r\n    <div style=\"color: red;\"> <div id=\"theme-warn\"></div></div>\r\n    <div style=\"color: rgba(0, 0, 255, 0.2);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n    <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n    <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n    <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n  \r\n    <div class=\"calendar-container\">\r\n      <!-- calendar titlebar -->\r\n      <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n        <!-- <div style=\"align-self: center;display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\"> -->\r\n        <div style=\"display: flex;\r\n      flex-direction: row;\r\n      justify-content: space-between;\r\n    width: 100%;  \">\r\n          <div class=\"left-div\">\r\n            <!-- LEFT -->\r\n            <button mat-button \r\n              class=\"navigation-button\"\r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n              (click)=\"onCalendarLongPrev()\">\r\n              <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n            </button>\r\n            <button mat-button \r\n              class=\"navigation-button\" \r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n              (click)=\"onCalendarPrev()\">\r\n              <fa-icon [icon]=\"iconPrev\"></fa-icon>\r\n            </button>\r\n            <button mat-button \r\n              class=\"navigation-button\"\r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;\" \r\n              (click)=\"onCalendarToday()\">\r\n              <fa-icon [icon]=\"iconToday\"></fa-icon>\r\n            </button>\r\n            <button mat-button \r\n              class=\"navigation-button\" \r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n              (click)=\"onCalendarNext()\">\r\n              <fa-icon [icon]=\"iconNext\"></fa-icon>\r\n            </button>\r\n            <button mat-button \r\n              class=\"navigation-button\"\r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n              (click)=\"onCalendarLongNext()\">\r\n              <fa-icon [icon]=\"iconLongNext\"></fa-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"center-div\">\r\n            <!-- CENTER -->\r\n            <span class=\"event-calendar-title\">{{ getDate() }}</span>\r\n          </div>\r\n          <div class=\"right-div\">\r\n  \r\n            <!-- RIGHT -->\r\n            <mat-button-toggle-group class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n              layout_height=\"wrap_content\">\r\n              <mat-button-toggle mat-button value=\"month\" class=\"view-button\" (click)=\"onMonthView()\">\r\n                <fa-icon [icon]=\"iconByMonth\"></fa-icon>\r\n              </mat-button-toggle>\r\n              <mat-button-toggle mat-button value=\"week\" class=\"view-button\" (click)=\"onWeekView()\">\r\n                <fa-icon [icon]=\"iconByWeek\"></fa-icon>\r\n              </mat-button-toggle>\r\n              <mat-button-toggle mat-button value=\"day\" class=\"view-button\" (click)=\"onDayView()\">\r\n                <fa-icon [icon]=\"iconByDay\"></fa-icon>\r\n              </mat-button-toggle>\r\n            </mat-button-toggle-group>\r\n          </div>\r\n        </div>\r\n      </mat-toolbar>\r\n      <ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>\r\n    </div>\r\n  \r\n  </section>\r\n", styles: [".calendar-container{transform-origin:top left}.menu-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem!important}.mat-button{font-size:1.1rem!important}.mat-button.navigation-button{padding:0;min-width:32px}.left-div{width:33%;float:left;display:flex;white-space:nowrap;vertical-align:middle}.center-div{width:33%;float:right;text-align:center;white-space:nowrap;vertical-align:middle}.event-calendar-title{font-size:2rem;vertical-align:middle}.right-div{width:33%;display:flex;white-space:nowrap;vertical-align:middle;flex-flow:row-reverse}@media screen and (max-width: 599px){.left-div{transform:scale(.75);transform-origin:center left}.center-div{transform:scale(.5)}.right-div{transform:scale(1);transform-origin:center right}.right-div .mat-button-toggle-group.view-button{font-size:1.1rem!important}.right-div ::ng-deep .mat-button-toggle-label-content{padding:0 8px!important}}.mat-button-toggle-group.view-button{height:36px;font-size:1.25rem!important}.view-button{align-items:center}::ng-deep .mat-button-toggle-label-content{padding:0 10px!important}\n"], components: [{ type: i2__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4__namespace$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
+    NgxMatTuiCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0__namespace, template: "<section class=\"content-container\">\r\n    <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n    <!-- The outer div gives the default color for when user does not provide an Angular theme -->\r\n    <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n    <div style=\"color: blue;\"> <div id=\"theme-highlight\"></div></div>\r\n    <div style=\"color: blue;\"> <div id=\"theme-accent\"></div></div>\r\n    <div style=\"color: red;\"> <div id=\"theme-warn\"></div></div>\r\n    <div style=\"color: rgba(0, 0, 255, 0.2);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n    <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n    <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n    <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n  \r\n    <div class=\"calendar-container\">\r\n      <!-- calendar titlebar -->\r\n      <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n        <!-- <div style=\"align-self: center;display: flex;\r\n    align-items: center;\r\n    justify-content: flex-start;\"> -->\r\n        <div style=\"display: flex;\r\n      flex-direction: row;\r\n      justify-content: space-between;\r\n    width: 100%;  \">\r\n          <div class=\"left-div\">\r\n            <!-- LEFT -->\r\n            <button mat-button *ngIf=\"appliedOptions.buttons.longPrevious\"\r\n              class=\"navigation-button\"\r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n              (click)=\"onCalendarLongPrev()\">\r\n              <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n            </button>\r\n            <button mat-button  *ngIf=\"appliedOptions.buttons.previous\"\r\n              class=\"navigation-button\" \r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n              (click)=\"onCalendarPrev()\">\r\n              <fa-icon [icon]=\"iconPrev\"></fa-icon>\r\n            </button>\r\n            <button mat-button  *ngIf=\"appliedOptions.buttons.today\"\r\n              class=\"navigation-button\"\r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;\" \r\n              (click)=\"onCalendarToday()\">\r\n              <fa-icon [icon]=\"iconToday\"></fa-icon>\r\n            </button>\r\n            <button mat-button  *ngIf=\"appliedOptions.buttons.next\"\r\n              class=\"navigation-button\" \r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n              (click)=\"onCalendarNext()\">\r\n              <fa-icon [icon]=\"iconNext\"></fa-icon>\r\n            </button>\r\n            <button mat-button  *ngIf=\"appliedOptions.buttons.longNext\"\r\n              class=\"navigation-button\"\r\n              style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n              (click)=\"onCalendarLongNext()\">\r\n              <fa-icon [icon]=\"iconLongNext\"></fa-icon>\r\n            </button>\r\n          </div>\r\n          <div class=\"center-div\">\r\n            <!-- CENTER -->\r\n            <span class=\"event-calendar-title\">{{ getDate() }}</span>\r\n          </div>\r\n          <div class=\"right-div\">\r\n  \r\n            <!-- RIGHT -->\r\n            <mat-button-toggle-group [hidden]=\"!appliedOptions.buttons.month && !appliedOptions.buttons.week && !appliedOptions.buttons.day\"\r\n            class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n              layout_height=\"wrap_content\">\r\n              <mat-button-toggle *ngIf=\"appliedOptions.buttons.month\" mat-button value=\"month\" class=\"view-button\" (click)=\"onMonthView()\">\r\n                <fa-icon [icon]=\"iconByMonth\"></fa-icon>\r\n              </mat-button-toggle>\r\n              <mat-button-toggle *ngIf=\"appliedOptions.buttons.week\" mat-button value=\"week\" class=\"view-button\" (click)=\"onWeekView()\">\r\n                <fa-icon [icon]=\"iconByWeek\"></fa-icon>\r\n              </mat-button-toggle>\r\n              <mat-button-toggle *ngIf=\"appliedOptions.buttons.day\" mat-button value=\"day\" class=\"view-button\" (click)=\"onDayView()\">\r\n                <fa-icon [icon]=\"iconByDay\"></fa-icon>\r\n              </mat-button-toggle>\r\n            </mat-button-toggle-group>\r\n          </div>\r\n        </div>\r\n      </mat-toolbar>\r\n      <ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>\r\n    </div>\r\n  \r\n  </section>\r\n", styles: [".calendar-container{transform-origin:top left}.menu-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem!important}.mat-button{font-size:1.1rem!important}.mat-button.navigation-button{padding:0;min-width:32px}.left-div{width:33%;float:left;display:flex;white-space:nowrap;vertical-align:middle}.center-div{width:33%;float:right;text-align:center;white-space:nowrap;vertical-align:middle}.event-calendar-title{font-size:2rem;vertical-align:middle}.right-div{width:33%;display:flex;white-space:nowrap;vertical-align:middle;flex-flow:row-reverse}@media screen and (max-width: 599px){.left-div{transform:scale(.75);transform-origin:center left}.center-div{transform:scale(.5)}.right-div{transform:scale(1);transform-origin:center right}.right-div .mat-button-toggle-group.view-button{font-size:1.1rem!important}.right-div ::ng-deep .mat-button-toggle-label-content{padding:0 8px!important}}.mat-button-toggle-group.view-button{height:36px;font-size:1.25rem!important}.view-button{align-items:center}::ng-deep .mat-button-toggle-label-content{padding:0 10px!important}\n"], components: [{ type: i2__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4__namespace$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, decorators: [{
                 type: i0.Component,
                 args: [{