ngx-mat-tui-calendar 12.0.12 → 12.1.3

package/fesm2015/ngx-mat-tui-calendar.js

@@ -1,5 +1,6 @@
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BrowserModule } from '@angular/platform-browser';
+import * as i9 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
 import * as i7 from '@angular/forms';
 import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -37,7 +38,6 @@ import distinctColors from 'distinct-colors';
 import { v4 } from 'uuid';
 import { faCalendarCheck, faCaretLeft, faCaretRight, faBackward, faForward, faTable, faColumns, faListAlt } from '@fortawesome/free-solid-svg-icons';
 import Calendar from 'tui-calendar';
-import * as i9 from '@angular/common';
 
 // import { TZDate } from 'tui-calendar';
 class LocalDate {
@@ -310,23 +310,22 @@ class NgxMatTuiCalendarComponent {
         // we slice off the first color since it is gray
         this.colors = distinctColors({ lightMin: 70, count: 15 }).slice(1);
         this.colorIndex = 0;
-        this.calendarId = v4();
-        this.appliedOptions = this.getDefaultOptions();
+        this.calendarIdDefault = "main";
     }
     ngOnInit() {
         // 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);
     }
     ngOnChanges(changes) {
-        // console.warn(changes);
-        if (this.calendar) {
-            if (changes.options) {
-                // console.warn(`change.option:`, changes.options);
-                let options = changes.options.currentValue;
-                this.setOptions(options);
-            }
-        }
+        // console.warn(`ngOnChanges: `, changes);
+        // console.warn(`change.option:`, changes.options);
+        let options = changes.options.currentValue;
+        this.setOptions(options);
     }
     ngOnDestroy() {
         this.calendar.destroy();
@@ -389,14 +388,16 @@ class NgxMatTuiCalendarComponent {
     }
     onMonthView() {
         this.calendar.changeView('month');
+        this.calendar.render(true); // <-- so that selection is cleared
     }
     onWeekView() {
-        console.log(`onWeekView`);
+        // console.log(`onWeekView`)
         this.calendar.changeView('week');
         this.calendar.render(true); // <-- so that selection is cleared
     }
     onDayView() {
         this.calendar.changeView('day');
+        this.calendar.render(true); // <-- so that selection is cleared
     }
     getDate() {
         let date = this.calendar.getDate();
@@ -406,8 +407,8 @@ class NgxMatTuiCalendarComponent {
         });
         return str;
     }
-    createTUICalendar() {
-        let ioptions = this.preprocessIOptions(null);
+    createTUICalendar(iopts) {
+        let ioptions = this.preprocessIOptions(iopts);
         // console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
         this.calendar = new Calendar('#calendar', ioptions);
         // console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
@@ -521,7 +522,7 @@ class NgxMatTuiCalendarComponent {
         let end = LocalDate.convertToJsDate(args.end);
         let schedule = {
             id,
-            calendarId: (args.calendarId == null) ? this.calendarId : args.calendarId,
+            calendarId: (args.calendarId == null) ? this.calendarIdDefault : args.calendarId,
             title: args.title,
             start: start,
             end: end,
@@ -541,23 +542,23 @@ class NgxMatTuiCalendarComponent {
     }
     updateSchedule(schedule) {
         // console.log(`event-calendar.component.ts: updateSchedule:`, schedule);
-        let calendarId = (schedule.calendarId == null) ? this.calendarId : schedule.calendarId;
+        let calendarId = (schedule.calendarId == null) ? this.calendarIdDefault : schedule.calendarId;
         this.calendar.updateSchedule(schedule.id, calendarId, schedule, false);
         return this.calendar.getSchedule(schedule.id, calendarId);
     }
     getSchedule(args) {
         // console.log(`event-calendar.component.ts: getSchedule:`, schedule);
-        let calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+        let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
         return this.calendar.getSchedule(args.id, calendarId);
     }
     deleteScheduleAndNotifyParent(args) {
         this.deleteSchedule(args);
-        let calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+        let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
         this.userDeletedSchedule.emit({ id: args.id, calendarId });
     }
     deleteSchedule(args) {
         // console.log(`event-calendar.component.ts: deleteSchedule:`, schedule);
-        let calendarId = (args.calendarId == null) ? this.calendarId : args.calendarId;
+        let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
         this.calendar.deleteSchedule(args.id, calendarId, false);
     }
     deleteAllSchedules() {
@@ -597,19 +598,42 @@ class NgxMatTuiCalendarComponent {
             }
         });
     }
-    setOptions(options) {
-        if (options == null) {
-            options = this.getDefaultOptions();
-        }
-        options.ioptions = this.setIOptions(options.ioptions);
-        this.appliedOptions = Object.assign({}, options);
+    setDefaultOptions() {
+        this.setOptions();
+    }
+    setOptions(o) {
+        const get = (object, path, defaultValue) => {
+            let value = path
+                .split('.')
+                .reduce((o, p) => o == null ? undefined : o[p], object);
+            return (value !== undefined) ? value : defaultValue;
+        };
+        let 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);
     }
     setIOptions(ioptionsIn) {
         let 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;
     }
     preprocessIOptions(ioptions) {
@@ -627,13 +651,6 @@ class NgxMatTuiCalendarComponent {
         }
         return ioptions;
     }
-    getDefaultOptions() {
-        return {
-            darkMode: false,
-            themeClass: null,
-            ioptions: this.getDefaultIOptions(),
-        };
-    }
     getDefaultIOptions() {
         return {
             defaultView: 'month',
@@ -792,7 +809,7 @@ class NgxMatTuiCalendarComponent {
     }
 }
 NgxMatTuiCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-NgxMatTuiCalendarComponent.ɵcmp = i0.ɵɵ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, 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$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6.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$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$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$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
+NgxMatTuiCalendarComponent.ɵcmp = i0.ɵɵ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, 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$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6.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$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$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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -816,7 +833,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
 // collect all of the above modules into an array
 const importedModules = [
     BrowserAnimationsModule,
-    BrowserModule,
+    CommonModule,
     FlexLayoutModule,
     FlexModule,
     FormsModule,
@@ -851,7 +868,7 @@ NgxMatTuiCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 NgxMatTuiCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, declarations: [NgxMatTuiCalendarComponent,
         NgxMatTuiCalendarWrapperComponent,
         NgxMatTuiCalendarEditorDialogComponent], imports: [BrowserAnimationsModule,
-        BrowserModule,
+        CommonModule,
         FlexLayoutModule,
         FlexModule,
         FormsModule,
@@ -874,7 +891,7 @@ NgxMatTuiCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         MatToolbarModule,
         FontAwesomeModule,
         MatTimepickerModule], exports: [BrowserAnimationsModule,
-        BrowserModule,
+        CommonModule,
         FlexLayoutModule,
         FlexModule,
         FormsModule,
@@ -902,7 +919,7 @@ NgxMatTuiCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
 NgxMatTuiCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, imports: [[
             ...importedModules,
         ], BrowserAnimationsModule,
-        BrowserModule,
+        CommonModule,
         FlexLayoutModule,
         FlexModule,
         FormsModule,