ngx-mat-tui-calendar 12.0.9 → 12.1.0

package/README.md

@@ -4,7 +4,6 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![Development Status](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active) 
 [![GitHub stars](https://img.shields.io/github/stars/ron2015schmitt/ngx-mat-tui-calendar.svg)](https://github.com/ron2015schmitt/ngx-mat-tui-calendar/stargazers)
-![GitHub downloads all releases](https://img.shields.io/github/downloads/ron2015schmitt/ngx-mat-tui-calendar/total)
 ![GitHub release (latest by date)](https://img.shields.io/github/v/release/ron2015schmitt/ngx-mat-tui-calendar)
 
 [![npm](https://img.shields.io/npm/v/ngx-mat-tui-calendar?label=npm%20package)](https://www.npmjs.com/package/ngx-mat-tui-calendar)
@@ -28,6 +27,9 @@ The top-level `angular.json` and `package.json` files are used for building both
 
 This repo was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.3.  Angular ^12.2 requires node ^v14.15 (npm ^v6.14).
 
+# Online Demo
+
+https://ngx-mat-tui-calendar-demo.netlify.app/
 
 # UI
 ## Month View
@@ -48,7 +50,7 @@ This repo was generated with [Angular CLI](https://github.com/angular/angular-cl
 
 Install via npm:
 ```bash
-npm i --save ngx-mat-tui-calendar
+npm i --save ngx-mat-tui-calendar --legacy-peer-deps
 ```
 which will add `ngx-mat-tui-calendar`, as well as all of its dependencies to your `package.json` file.
 
@@ -71,12 +73,11 @@ Set up an [Angular theme](https://material.angular.io/guide/theming).  For examp
 
 A demonstration of the simple usage described above can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-quickstart
 
-## Demo Repo
+### Demo Repo
 
 A more extensive demonstration of usage can be found at repo https://github.com/ron2015schmitt/ngx-mat-tui-calendar-demo
 
-### Stackblitz
-*Coming soon*
+
 
 # Documentation
 
@@ -115,7 +116,7 @@ Selector: `ngx-mat-tui-calendar`
 ```bash
 git clone https://github.com/ron2015schmitt/ngx-mat-tui-calendar
 cd ngx-mat-tui-calendar
-npm install
+npm install --legacy-peer-deps
 ng build  
 ng serve
 ```

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();
@@ -677,15 +677,19 @@
             date.setMonth(date.getMonth() + months); // date class does the modular arithmetic
             date.setDate(date.getDate() + days); // date class does the modular arithmetic
             this.calendar.setDate(date);
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.onCalendarPrev = function () {
             this.calendar.prev();
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.onCalendarToday = function () {
             this.calendar.today();
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.onCalendarNext = function () {
             this.calendar.next();
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.onCalendarLongNext = function () {
             var date = this.calendar.getDate().toDate();
@@ -707,15 +711,20 @@
             date.setMonth(date.getMonth() + months); // date class does the modular arithmetic
             date.setDate(date.getDate() + days); // date class does the modular arithmetic
             this.calendar.setDate(date);
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.onMonthView = function () {
             this.calendar.changeView('month');
+            this.calendar.render(true); // <-- so that selection is cleared
         };
         NgxMatTuiCalendarComponent.prototype.onWeekView = function () {
+            // 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();
@@ -725,11 +734,12 @@
             });
             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);
+            this.calendar.toggleScheduleView(true);
         };
         NgxMatTuiCalendarComponent.prototype.bindCallbacks = function () {
             this.bindAfterRenderSchedule();
@@ -850,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,
@@ -870,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 () {
@@ -927,18 +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[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);
+            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) {
@@ -956,13 +990,6 @@
             }
             return ioptions;
         };
-        NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
-            return {
-                darkMode: false,
-                themeClass: null,
-                ioptions: this.getDefaultIOptions(),
-            };
-        };
         NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
             return {
                 defaultView: 'month',
@@ -1122,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: [{
@@ -1142,7 +1169,38 @@
                     type: i0.Input
                 }] } });
 
-    // Angular modules
+    // collect all of the above modules into an array
+    var importedModules = [
+        animations.BrowserAnimationsModule,
+        platformBrowser.BrowserModule,
+        flexLayout.FlexLayoutModule,
+        flexLayout.FlexModule,
+        i7.FormsModule,
+        http.HttpClientModule,
+        overlay.OverlayModule,
+        i7.ReactiveFormsModule,
+        i6.MatButtonModule,
+        i5$1.MatButtonToggleModule,
+        card.MatCardModule,
+        i4.MatDatepickerModule,
+        i1.MatDialogModule,
+        i5.MatDividerModule,
+        i2.MatFormFieldModule,
+        icon.MatIconModule,
+        i8.MatInputModule,
+        core.MatNativeDateModule,
+        i3.MatRadioModule,
+        core.MatRippleModule,
+        slideToggle.MatSlideToggleModule,
+        i2$1.MatToolbarModule,
+        i4$1.FontAwesomeModule,
+        i10.MatTimepickerModule,
+    ];
+    var projectModules = [
+        NgxMatTuiCalendarComponent,
+        NgxMatTuiCalendarWrapperComponent,
+        NgxMatTuiCalendarEditorDialogComponent,
+    ];
     var NgxMatTuiCalendarModule = /** @class */ (function () {
         function NgxMatTuiCalendarModule() {
         }
@@ -1174,79 +1232,64 @@
             slideToggle.MatSlideToggleModule,
             i2$1.MatToolbarModule,
             i4$1.FontAwesomeModule,
-            i10.MatTimepickerModule], exports: [NgxMatTuiCalendarComponent,
+            i10.MatTimepickerModule], exports: [animations.BrowserAnimationsModule,
+            platformBrowser.BrowserModule,
+            flexLayout.FlexLayoutModule,
+            flexLayout.FlexModule,
+            i7.FormsModule,
+            http.HttpClientModule,
+            overlay.OverlayModule,
+            i7.ReactiveFormsModule,
+            i6.MatButtonModule,
+            i5$1.MatButtonToggleModule,
+            card.MatCardModule,
+            i4.MatDatepickerModule,
+            i1.MatDialogModule,
+            i5.MatDividerModule,
+            i2.MatFormFieldModule,
+            icon.MatIconModule,
+            i8.MatInputModule,
+            core.MatNativeDateModule,
+            i3.MatRadioModule,
+            core.MatRippleModule,
+            slideToggle.MatSlideToggleModule,
+            i2$1.MatToolbarModule,
+            i4$1.FontAwesomeModule,
+            i10.MatTimepickerModule, NgxMatTuiCalendarComponent,
             NgxMatTuiCalendarWrapperComponent,
             NgxMatTuiCalendarEditorDialogComponent] });
-    NgxMatTuiCalendarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarModule, imports: [[
-                animations.BrowserAnimationsModule,
-                platformBrowser.BrowserModule,
-                flexLayout.FlexLayoutModule,
-                flexLayout.FlexModule,
-                i7.FormsModule,
-                http.HttpClientModule,
-                overlay.OverlayModule,
-                i7.ReactiveFormsModule,
-                i6.MatButtonModule,
-                i5$1.MatButtonToggleModule,
-                card.MatCardModule,
-                i4.MatDatepickerModule,
-                i1.MatDialogModule,
-                i5.MatDividerModule,
-                i2.MatFormFieldModule,
-                icon.MatIconModule,
-                i8.MatInputModule,
-                core.MatNativeDateModule,
-                i3.MatRadioModule,
-                core.MatRippleModule,
-                slideToggle.MatSlideToggleModule,
-                i2$1.MatToolbarModule,
-                i4$1.FontAwesomeModule,
-                i10.MatTimepickerModule,
-            ]] });
+    NgxMatTuiCalendarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarModule, imports: [__spreadArray([], __read(importedModules)), animations.BrowserAnimationsModule,
+            platformBrowser.BrowserModule,
+            flexLayout.FlexLayoutModule,
+            flexLayout.FlexModule,
+            i7.FormsModule,
+            http.HttpClientModule,
+            overlay.OverlayModule,
+            i7.ReactiveFormsModule,
+            i6.MatButtonModule,
+            i5$1.MatButtonToggleModule,
+            card.MatCardModule,
+            i4.MatDatepickerModule,
+            i1.MatDialogModule,
+            i5.MatDividerModule,
+            i2.MatFormFieldModule,
+            icon.MatIconModule,
+            i8.MatInputModule,
+            core.MatNativeDateModule,
+            i3.MatRadioModule,
+            core.MatRippleModule,
+            slideToggle.MatSlideToggleModule,
+            i2$1.MatToolbarModule,
+            i4$1.FontAwesomeModule,
+            i10.MatTimepickerModule] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        declarations: [
-                            NgxMatTuiCalendarComponent,
-                            NgxMatTuiCalendarWrapperComponent,
-                            NgxMatTuiCalendarEditorDialogComponent,
-                        ],
-                        imports: [
-                            animations.BrowserAnimationsModule,
-                            platformBrowser.BrowserModule,
-                            flexLayout.FlexLayoutModule,
-                            flexLayout.FlexModule,
-                            i7.FormsModule,
-                            http.HttpClientModule,
-                            overlay.OverlayModule,
-                            i7.ReactiveFormsModule,
-                            i6.MatButtonModule,
-                            i5$1.MatButtonToggleModule,
-                            card.MatCardModule,
-                            i4.MatDatepickerModule,
-                            i1.MatDialogModule,
-                            i5.MatDividerModule,
-                            i2.MatFormFieldModule,
-                            icon.MatIconModule,
-                            i8.MatInputModule,
-                            core.MatNativeDateModule,
-                            i3.MatRadioModule,
-                            core.MatRippleModule,
-                            slideToggle.MatSlideToggleModule,
-                            i2$1.MatToolbarModule,
-                            i4$1.FontAwesomeModule,
-                            i10.MatTimepickerModule,
-                        ],
-                        exports: [
-                            NgxMatTuiCalendarComponent,
-                            NgxMatTuiCalendarWrapperComponent,
-                            NgxMatTuiCalendarEditorDialogComponent,
-                        ],
-                        entryComponents: [
-                            NgxMatTuiCalendarComponent,
-                            NgxMatTuiCalendarWrapperComponent,
-                            NgxMatTuiCalendarEditorDialogComponent,
-                        ],
+                        declarations: __spreadArray([], __read(projectModules)),
+                        imports: __spreadArray([], __read(importedModules)),
+                        exports: __spreadArray(__spreadArray([], __read(importedModules)), __read(projectModules)),
+                        entryComponents: __spreadArray([], __read(projectModules)),
+                        schemas: [i0.CUSTOM_ELEMENTS_SCHEMA],
                     }]
             }] });