ngx-mat-tui-calendar 12.0.12 → 12.1.3

package/README.md

@@ -81,7 +81,7 @@ A more extensive demonstration of usage can be found at repo https://github.com/
 
 # Documentation
 
-## MatTuiCalendar
+## ngx-mat-tui-calendar
 
 
 Selector: `ngx-mat-tui-calendar`
@@ -108,6 +108,26 @@ Selector: `ngx-mat-tui-calendar`
 | @Output()
   userDeletedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user deletes a "schedule" (ie calendar task). |
 
+  ### Options
+  
+```typescript  
+export interface CalendarOptions {
+  ioptions: IOptions, // IOptions is defined in the tui-calendar package
+  darkMode: boolean,  // not yet implemented. default is false
+  themeClass?: string,
+  buttons: {       // this sets visibility of buttons.  default is true
+    previous?: boolean,
+    next?: boolean,
+    today?: boolean,
+    longPrevious?: boolean,
+    longNext?: boolean,
+    month?: boolean,
+    week?: boolean,
+    day?: boolean,
+  };
+}
+```
+  
   
 # Development 
 

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/platform-browser/animations'), require('@angular/platform-browser'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/common/http'), require('@angular/core'), require('@angular/cdk/overlay'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/card'), require('@angular/material/datepicker'), require('@angular/material/dialog'), require('@angular/material/divider'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/core'), require('@angular/material/slide-toggle'), require('@angular/material/radio'), require('@angular/material/toolbar'), require('@fortawesome/angular-fontawesome'), require('mat-timepicker'), require('distinct-colors'), require('uuid'), require('@fortawesome/free-solid-svg-icons'), require('tui-calendar'), require('@angular/common')) :
-    typeof define === 'function' && define.amd ? define('ngx-mat-tui-calendar', ['exports', '@angular/platform-browser/animations', '@angular/platform-browser', '@angular/flex-layout', '@angular/forms', '@angular/common/http', '@angular/core', '@angular/cdk/overlay', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/card', '@angular/material/datepicker', '@angular/material/dialog', '@angular/material/divider', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/core', '@angular/material/slide-toggle', '@angular/material/radio', '@angular/material/toolbar', '@fortawesome/angular-fontawesome', 'mat-timepicker', 'distinct-colors', 'uuid', '@fortawesome/free-solid-svg-icons', 'tui-calendar', '@angular/common'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-mat-tui-calendar"] = {}, global.ng.platformBrowser.animations, global.ng.platformBrowser, global.ng.flexLayout, global.ng.forms, global.ng.common.http, global.ng.core, global.ng.cdk.overlay, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.card, global.ng.material.datepicker, global.ng.material.dialog, global.ng.material.divider, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.core, global.ng.material.slideToggle, global.ng.material.radio, global.ng.material.toolbar, global.i4$1, global.i10, global.distinctColors, global.uuid, global.freeSolidSvgIcons, global.Calendar, global.ng.common));
-})(this, (function (exports, animations, platformBrowser, flexLayout, i7, http, i0, overlay, i6, i5$1, card, i4, i1, i5, i2, icon, i8, core, slideToggle, i3, i2$1, i4$1, i10, distinctColors, uuid, freeSolidSvgIcons, Calendar, i9) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/platform-browser/animations'), require('@angular/common'), require('@angular/flex-layout'), require('@angular/forms'), require('@angular/common/http'), require('@angular/core'), require('@angular/cdk/overlay'), require('@angular/material/button'), require('@angular/material/button-toggle'), require('@angular/material/card'), require('@angular/material/datepicker'), require('@angular/material/dialog'), require('@angular/material/divider'), require('@angular/material/form-field'), require('@angular/material/icon'), require('@angular/material/input'), require('@angular/material/core'), require('@angular/material/slide-toggle'), require('@angular/material/radio'), require('@angular/material/toolbar'), require('@fortawesome/angular-fontawesome'), require('mat-timepicker'), require('distinct-colors'), require('uuid'), require('@fortawesome/free-solid-svg-icons'), require('tui-calendar')) :
+    typeof define === 'function' && define.amd ? define('ngx-mat-tui-calendar', ['exports', '@angular/platform-browser/animations', '@angular/common', '@angular/flex-layout', '@angular/forms', '@angular/common/http', '@angular/core', '@angular/cdk/overlay', '@angular/material/button', '@angular/material/button-toggle', '@angular/material/card', '@angular/material/datepicker', '@angular/material/dialog', '@angular/material/divider', '@angular/material/form-field', '@angular/material/icon', '@angular/material/input', '@angular/material/core', '@angular/material/slide-toggle', '@angular/material/radio', '@angular/material/toolbar', '@fortawesome/angular-fontawesome', 'mat-timepicker', 'distinct-colors', 'uuid', '@fortawesome/free-solid-svg-icons', 'tui-calendar'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ngx-mat-tui-calendar"] = {}, global.ng.platformBrowser.animations, global.ng.common, global.ng.flexLayout, global.ng.forms, global.ng.common.http, global.ng.core, global.ng.cdk.overlay, global.ng.material.button, global.ng.material.buttonToggle, global.ng.material.card, global.ng.material.datepicker, global.ng.material.dialog, global.ng.material.divider, global.ng.material.formField, global.ng.material.icon, global.ng.material.input, global.ng.material.core, global.ng.material.slideToggle, global.ng.material.radio, global.ng.material.toolbar, global.i4$1, global.i10, global.distinctColors, global.uuid, global.freeSolidSvgIcons, global.Calendar));
+})(this, (function (exports, animations, i9, flexLayout, i7, http, i0, overlay, i6, i5$1, card, i4, i1, i5, i2, icon, i8, core, slideToggle, i3, i2$1, i4$1, i10, distinctColors, uuid, freeSolidSvgIcons, Calendar) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,6 +24,7 @@
         return Object.freeze(n);
     }
 
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
@@ -39,7 +40,6 @@
     var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
     var distinctColors__default = /*#__PURE__*/_interopDefaultLegacy(distinctColors);
     var Calendar__default = /*#__PURE__*/_interopDefaultLegacy(Calendar);
-    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -637,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();
@@ -716,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();
@@ -733,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);
@@ -859,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,
@@ -879,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 () {
@@ -936,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) {
@@ -966,13 +990,6 @@
             }
             return ioptions;
         };
-        NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
-            return {
-                darkMode: false,
-                themeClass: null,
-                ioptions: this.getDefaultIOptions(),
-            };
-        };
         NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
             return {
                 defaultView: 'month',
@@ -1132,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: [{
@@ -1155,7 +1172,7 @@
     // collect all of the above modules into an array
     var importedModules = [
         animations.BrowserAnimationsModule,
-        platformBrowser.BrowserModule,
+        i9.CommonModule,
         flexLayout.FlexLayoutModule,
         flexLayout.FlexModule,
         i7.FormsModule,
@@ -1193,7 +1210,7 @@
     NgxMatTuiCalendarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarModule, declarations: [NgxMatTuiCalendarComponent,
             NgxMatTuiCalendarWrapperComponent,
             NgxMatTuiCalendarEditorDialogComponent], imports: [animations.BrowserAnimationsModule,
-            platformBrowser.BrowserModule,
+            i9.CommonModule,
             flexLayout.FlexLayoutModule,
             flexLayout.FlexModule,
             i7.FormsModule,
@@ -1216,7 +1233,7 @@
             i2$1.MatToolbarModule,
             i4$1.FontAwesomeModule,
             i10.MatTimepickerModule], exports: [animations.BrowserAnimationsModule,
-            platformBrowser.BrowserModule,
+            i9.CommonModule,
             flexLayout.FlexLayoutModule,
             flexLayout.FlexModule,
             i7.FormsModule,
@@ -1242,7 +1259,7 @@
             NgxMatTuiCalendarWrapperComponent,
             NgxMatTuiCalendarEditorDialogComponent] });
     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,
+            i9.CommonModule,
             flexLayout.FlexLayoutModule,
             flexLayout.FlexModule,
             i7.FormsModule,