ngx-mat-tui-calendar 0.0.14 → 12.0.1

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

@@ -1,5 +1,43 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { Injectable, Component, Inject, ViewEncapsulation, EventEmitter, Output, Input, NgModule } from '@angular/core';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
+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 i7 from '@angular/forms';
+import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i5 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i6 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i8 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i9 from '@angular/common';
+import * as i10 from 'mat-timepicker';
+import { MatTimepickerModule } from 'mat-timepicker';
+import * as i2$1 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i4$1 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import * as i5$1 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
+import { HttpClientModule } from '@angular/common/http';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
+import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 class NgxMatTuiCalendarService {
     constructor() { }
@@ -13,52 +51,859 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
                 }]
         }], ctorParameters: function () { return []; } });
 
+// import { TZDate } from 'tui-calendar';
+class LocalDate {
+    // month = 1 to 12
+    constructor(args) {
+        let numbers;
+        if (typeof args == 'string') {
+            numbers = LocalDate.parse_YYYYMMDD(args);
+        }
+        else if (args instanceof LocalDate) {
+            numbers = args.get();
+        }
+        else if (args instanceof Date) {
+            numbers = LocalDate.convertDateToNumbers(args);
+        }
+        else if (typeof args.toDate === 'function') {
+            numbers = LocalDate.convertDateToNumbers(args.toDate());
+        }
+        else if (args['_date'] instanceof Date) {
+            numbers = LocalDate.convertDateToNumbers(args['_date']);
+        }
+        else if (args instanceof Object) {
+            numbers = args;
+        }
+        this.date = LocalDate.convertNumbersToDate(numbers);
+    }
+    static convertToJsDate(args) {
+        return (new LocalDate(args)).toDate();
+    }
+    // return new LocalDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+    static parse_YYYYMMDD(str) {
+        // yyyy-mm-dd
+        const regexp = /^(\d\d\d\d)-(\d\d)-(\d\d)/g;
+        let matches = Array.from(str.matchAll(regexp), m => ({
+            year: Number(m[1]),
+            month: Number(m[2]),
+            day: Number(m[3])
+        }));
+        if (matches.length != 1) {
+            console.error(`dateIn: unknown date format: ${str}`);
+            return null;
+        }
+        return matches[0];
+    }
+    static convertNumbersToDate({ year, month, day, hours, minutes, seconds, milliseconds }) {
+        // month = 1 to 12
+        // start with today's *local* date. this si really important
+        let date = new Date();
+        date.setFullYear(year);
+        date.setMonth((month == null) ? 0 : month - 1);
+        date.setDate((day == null) ? 1 : day);
+        date.setHours((hours == null) ? 0 : hours);
+        date.setMinutes((minutes == null) ? 0 : minutes);
+        date.setSeconds((seconds == null) ? 0 : seconds);
+        date.setMilliseconds((milliseconds == null) ? 1 : milliseconds);
+        return date;
+    }
+    static convertDateToNumbers(date) {
+        // month = 1 to 12
+        return {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+            milliseconds: date.getMilliseconds(),
+        };
+    }
+    get() {
+        return LocalDate.convertDateToNumbers(this.date);
+    }
+    toMsgFormat() {
+        return this.toYYYYMMDD();
+    }
+    toYYYYMMDD() {
+        // yyyy-mm-dd
+        let yyyy = this.date.getFullYear();
+        let mm = (this.date.getMonth() + 1).toString().padStart(2, '0');
+        let dd = (this.date.getDate()).toString().padStart(2, '0');
+        let str = `${yyyy}-${mm}-${dd}`;
+        // console.warn(`date=${str}=${this.toDisplayFormat()}`);
+        return str;
+    }
+    toDisplayDateFormat() {
+        return this.date.toLocaleDateString("en-US", {
+            weekday: 'short',
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    toDisplayFormat() {
+        return this.date.toString();
+    }
+    toDate() {
+        return this.date;
+    }
+    clearTime() {
+        this.date.setHours(0, 0, 0, 1);
+    }
+}
+
+class NgxMatTuiCalendarEditorDialogComponent {
+    constructor(data, dialogRef) {
+        // console.log('NgxMatTuiCalendarEditorDialogComponent.constructor: schedule:', schedule);
+        this.data = data;
+        this.dialogRef = dialogRef;
+        this.titleStr = '';
+        this.locationStr = '';
+        this.closed = false;
+        this.isAllDay = false;
+        this.themeClass = '';
+        console.log('NgxMatTuiCalendarEditorDialogComponent.constructor: data:', data);
+        this.color = data.darkMode ? 'accent' : 'primary';
+        const schedule = data.schedule;
+        if (schedule == null) {
+            this.id = null;
+        }
+        else {
+            if (schedule.id) {
+                this.id = schedule.id.toString();
+            }
+        }
+        this.titleStr = (schedule.title) ? schedule.title.toString() : '';
+        this.locationStr = (schedule.location) ? schedule.location.toString() : '';
+        this.isAllDay = (schedule.isAllDay == true);
+        this.startDate = LocalDate.convertToJsDate(schedule.start);
+        this.endDate = LocalDate.convertToJsDate(schedule.end);
+        this.startTime = new Date(this.startDate);
+        this.endTime = new Date(this.endDate);
+        this.startDate.setHours(0, 0, 0, 1);
+        this.endDate.setHours(0, 0, 0, 1);
+        this.eventForm = new FormGroup({
+            title: new FormControl(this.titleStr),
+            location: new FormControl(this.locationStr),
+            scheduleType: new FormControl((schedule.isAllDay == true) ? "all-day" : "time-slot"),
+            start: new FormControl(this.startDate),
+            end: new FormControl(this.endDate),
+            date: new FormControl(this.startDate),
+            time1: new FormControl(this.startTime),
+            time2: new FormControl(this.endTime, [Validators.required]),
+        }, this.getDateValidator());
+    }
+    getDateValidator() {
+        const validator = (group) => {
+            const scheduleType = group.get("scheduleType").value;
+            if (group.get("scheduleType").value == "time-slot") {
+                let time1 = group.get("time1").value;
+                let time2 = group.get("time2").value;
+                if (time1 >= time2) {
+                    return {
+                        dates: "End time must be later than the start time"
+                    };
+                }
+            }
+            return {};
+        };
+        return validator;
+    }
+    ngOnInit() {
+        // console.dir(`Dialog config: ${this.dialogConfig}`);
+        // let start: Date = (LocalDate.convertToJsDate(this.schedule.start)).toDate();
+        // let end: Date = (LocalDate.convertToJsDate(this.schedule.end)).toDate();
+        // this.eventForm.get("date").setValue(start);
+        // this.eventForm.get("start").setValue(start);
+        // this.eventForm.get("end").setValue(end);
+    }
+    onSave(form) {
+        // console.log(`onSave form.invalid=${form.invalid}; this.closed=${this.closed} this.titleStr=${this.titleStr}`);
+        if (form.invalid || this.closed)
+            return;
+        let schedule = this.data.schedule;
+        schedule.title = this.eventForm.get("title").value;
+        schedule.location = this.eventForm.get("location").value;
+        schedule.isAllDay = this.isAllDay;
+        schedule.category = this.isAllDay ? 'allday' : 'time'; // CATEGORY MUST BE DEFINED: 'milestone', 'task', allday', 'time'
+        if (this.isAllDay) {
+            schedule.start = LocalDate.convertToJsDate(this.eventForm.get("start").value);
+            schedule.start.setHours(0, 0, 0, 1);
+            schedule.end = LocalDate.convertToJsDate(this.eventForm.get("end").value);
+            schedule.end.setHours(0, 0, 0, 1);
+        }
+        else {
+            this.startTime = LocalDate.convertToJsDate(this.eventForm.get("time1").value);
+            schedule.start = LocalDate.convertToJsDate(this.eventForm.get("date").value);
+            schedule.start.setHours(this.startTime.getHours(), this.startTime.getMinutes(), this.startTime.getSeconds(), this.startTime.getMilliseconds());
+            this.endTime = LocalDate.convertToJsDate(this.eventForm.get("time2").value);
+            schedule.end = LocalDate.convertToJsDate(this.eventForm.get("date").value);
+            schedule.end.setHours(this.endTime.getHours(), this.endTime.getMinutes(), this.endTime.getSeconds(), this.endTime.getMilliseconds());
+        }
+        // console.log(`pop-up-event-editor.component.ts: user clicked SAVE event=${schedule}`);
+        // this.eventOutput.emit(schedule);
+        form.resetForm();
+        this.closeMe(schedule);
+    }
+    onCancel() {
+        // this.cancelled.emit();
+        // console.log('openPopupScheduleEditor: user clicked CANCEL');
+        this.closeMe(null);
+    }
+    onDelete() {
+        // this.cancelled.emit();
+        // console.log('openPopupScheduleEditor: user clicked DELETE');
+        this.closeMe(this.data.schedule, true);
+    }
+    closeMe(schedule, performDelete) {
+        // console.log('closeMe: The dialog is closing', schedule);
+        this.closed = true;
+        this.dialogRef.close({ schedule, performDelete: (performDelete == true) });
+    }
+    log(str) {
+        console.warn(str);
+    }
+    onUseAllDay() {
+        this.isAllDay = true;
+    }
+    onUseTimeSlot() {
+        this.isAllDay = false;
+    }
+}
+NgxMatTuiCalendarEditorDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarEditorDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+NgxMatTuiCalendarEditorDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarEditorDialogComponent, selector: "ngx-mat-tui-calendar-editor-dialog", ngImport: i0, template: "<div [className]=\"data.themeClass + ' ' + 'event-editor'\">\n    <form id=\"my-form\" [formGroup]=\"eventForm\" class=\"event-editor-form\" (submit)=\"onSave(postForm);\" #postForm=\"ngForm\">\n      <div class=\"grid-wrapper\">\n        <div class=\"grid-title\">\n          <mat-form-field [color]=\"color\" class=\"editor-title\">\n            <input matInput type=\"text\" name=\"title\" formControlName=\"title\" placeholder=\"Title\">\n            <!-- <mat-error style=\"height: fit-content;\" *ngIf=\"title.invalid\">Please enter a title (of 1 characters or more)\n              for\n              your event.</mat-error> -->\n          </mat-form-field>\n        </div>\n        <div class=\"grid-location\">\n          <mat-form-field [color]=\"color\" class=\"editor-location\">\n            <input matInput type=\"location\" name=\"location\" formControlName=\"location\" placeholder=\"Location\">\n          </mat-form-field>\n        </div>\n        <div class=\"grid-radios\" style=\"display: flex;\">\n          <mat-radio-group [color]=\"color\" aria-label=\"Select an option\"  style=\"margin-bottom: 1em;\" name=\"scheduleType\"\n            formControlName=\"scheduleType\" required>\n            <mat-radio-button value=\"all-day\" (change)=\"onUseAllDay()\" id=\"button-all-day\" [color]=\"color\" class=\"radio-button\">All Day\n            </mat-radio-button>\n            <mat-radio-button value=\"time-slot\" (change)=\"onUseTimeSlot()\" id=\"button-time-slot\" [color]=\"color\" class=\"radio-button\">Time Slot\n            </mat-radio-button>\n          </mat-radio-group>\n        </div>\n        <div class=\"grid-date\">\n          <mat-form-field *ngIf=\"isAllDay\" [color]=\"color\" class=\"date-range-form-field\" appearance=\"fill\">\n            <mat-label [color]=\"color\">Pick a Date Range</mat-label>\n            <mat-date-range-input [color]=\"color\" [panelClass]=\"data.themeClass\" [rangePicker]=\"rangePicker\" #dateRangeInput>\n              <input matStartDate placeholder=\"Start date\" formControlName=\"start\" name=\"start\">\n              <input matEndDate placeholder=\"End date\" formControlName=\"end\" name=\"end\">\n            </mat-date-range-input>\n           <mat-datepicker-toggle [color]=\"color\" [panelClass]=\"data.themeClass\" matSuffix [for]=\"rangePicker\"></mat-datepicker-toggle>\n            <mat-date-range-picker [color]=\"color\" class=\"picker\" #rangePicker></mat-date-range-picker>\n          </mat-form-field>\n          <mat-form-field [color]=\"color\" *ngIf=\"!isAllDay\" class=\"date-form-field\" appearance=\"fill\">\n            <mat-label>Choose a date</mat-label>\n            <input matInput [matDatepicker]=\"dpicker\" formControlName=\"date\" name=\"date\">\n            <mat-datepicker-toggle [color]=\"color\" matSuffix [for]=\"dpicker\"></mat-datepicker-toggle>\n            <mat-datepicker [color]=\"color\" #dpicker></mat-datepicker>\n          </mat-form-field>\n        </div>\n        <div *ngIf=\"!isAllDay\" class=\"grid-time time-slot\">\n          <mat-form-field [color]=\"color\" class=\"form-field-time\" appearance=\"fill\">\n            <mat-label>Start</mat-label>\n            <input matTimepicker [color]=\"color\" [strict]=\"false\" id=\"timepicker-start\" mode=\"12h\" formControlName=\"time1\" name=\"time1\"\n              placeholder=\"Please select time...\">\n          </mat-form-field>\n          <mat-form-field [color]=\"color\" class=\"form-field-time\" appearance=\"fill\">\n            <mat-label>End</mat-label>\n            <input matTimepicker [color]=\"color\" [strict]=\"false\" id=\"timepicker-end\" mode=\"12h\" formControlName=\"time2\" name=\"time2\"\n              placeholder=\"Please select time...\">\n          </mat-form-field>\n        </div>\n        <div *ngIf=\"!isAllDay\" class=\"grid-error\">\n          <label *ngIf=\"eventForm.invalid\">{{ eventForm.errors?.dates }}</label>\n        </div>\n      </div>\n      <mat-divider></mat-divider>\n      <div class=\"editor-footer\">\n        <button mat-raised-button [color]=\"color\" id=\"editor-submit-button\" type=\"submit\" style=\"margin-right: 4px;\">SAVE</button>\n        <button mat-raised-button id=\"editor-delete-button\" type=\"button\" (click)=\"onDelete()\" *ngIf=\"(data.schedule.id!=null)\">DELETE</button>\n        <button mat-raised-button id=\"editor-cancel-button\" type=\"button\" (click)=\"onCancel()\">CANCEL</button>\n      </div>\n    </form>\n  </div>", styles: [".event-editor{padding:.25rem;margin-top:.25rem;max-width:425px}.grid-wrapper{display:grid;grid-template-columns:110px 290px;grid-template-rows:50px 50px 70px 70px 20px;grid-gap:2px;gap:2px}.grid-title{grid-column:1/3;grid-row:1}.grid-location{grid-column:1/3;grid-row:2}.grid-radios{grid-column:1;grid-row:3}.grid-date{grid-column:2;grid-row:3}.grid-time{grid-column:2;grid-row:4}.grid-error{grid-column:1/3;grid-row:5}.editor-title{width:100%;margin-bottom:auto}.editor-location{width:100%;margin-bottom:auto}.editor-footer{justify-self:right;align-self:center;margin-top:.5rem;height:40px}#editor-cancel-button{float:right}.date-range-form-field{width:290px}.date-form-field{width:290px}.time-slot{display:flex;flex-direction:row}.form-field-time{width:140px;padding:0;margin-right:10px}.form-field-time-wrapper{width:140px;padding:0 8px;margin-right:10px}.radio-button{width:120px;margin-top:10px;margin-bottom:10px;display:flex;flex-direction:row}.grid-error{color:red;font-size:.8rem}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["separator", "comparisonStart", "comparisonEnd", "rangePicker", "required", "dateFilter", "min", "max", "disabled"], exportAs: ["matDateRangeInput"] }, { type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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"] }], directives: [{ type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i7.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i4.MatStartDate, selector: "input[matStartDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i4.MatEndDate, selector: "input[matEndDate]", inputs: ["errorStateMatcher"], outputs: ["dateChange", "dateInput"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i10.MatTimepickerDirective, selector: "input[matTimepicker]", inputs: ["okButtonTemplate", "cancelButtonTemplate", "okLabel", "cancelLabel", "anteMeridiemAbbreviation", "postMeridiemAbbreviation", "mode", "color", "disableDialogOpenOnClick", "strict", "value", "id", "errorStateMatcher", "disabled", "readonly", "required", "placeholder", "minDate", "maxDate"], outputs: ["timeChange", "invalidInput"], exportAs: ["matTimepicker"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarEditorDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngx-mat-tui-calendar-editor-dialog',
+                    templateUrl: './ngx-mat-tui-calendar-editor-dialog.component.html',
+                    styleUrls: ['./ngx-mat-tui-calendar-editor-dialog.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+
 class NgxMatTuiCalendarWrapperComponent {
     constructor() { }
     ngOnInit() {
     }
 }
 NgxMatTuiCalendarWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxMatTuiCalendarWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper", ngImport: i0, template: "<p>ngx-mat-tui-calendar-wrapper works!</p>\n<div id=\"calendar\"></div>  <!-- TUI Calendar gets instatited here -->\n", styles: [".tui-full-calendar-week-container{min-height:auto}\n"] });
+NgxMatTuiCalendarWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper", ngImport: i0, template: "<div id=\"calendar\"></div>  <!-- TUI Calendar gets instatited here -->\n", styles: [".tui-full-calendar-week-container{min-height:auto}\n"], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarWrapperComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-mat-tui-calendar-wrapper',
                     templateUrl: './ngx-mat-tui-calendar-wrapper.component.html',
-                    styleUrls: ['./ngx-mat-tui-calendar-wrapper.component.scss']
+                    styleUrls: ['./ngx-mat-tui-calendar-wrapper.component.scss'],
+                    encapsulation: ViewEncapsulation.None, // this is needed so that our css rules override those in tui-calendar package
                 }]
         }], ctorParameters: function () { return []; } });
 
 class NgxMatTuiCalendarComponent {
-    constructor() { }
+    constructor(dialog) {
+        this.dialog = dialog;
+        this.iconToday = faCalendarCheck;
+        // iconPrev = faCaretSquareLeft;
+        // iconNext = faCaretSquareRight;
+        this.iconPrev = faCaretLeft;
+        this.iconNext = faCaretRight;
+        this.iconLongPrev = faBackward;
+        this.iconLongNext = faForward;
+        this.iconByMonth = faTable;
+        this.iconByWeek = faColumns;
+        this.iconByDay = faListAlt;
+        this.userCreatedSchedule = new EventEmitter();
+        this.userUpdatedSchedule = new EventEmitter();
+        this.userDeletedSchedule = new EventEmitter();
+        // 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();
+    }
     ngOnInit() {
+        console.warn(`calendar.component.ts: ngOnit`);
+        this.createTUICalendar();
+        this.bindCallbacks();
+    }
+    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);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.calendar.destroy();
+    }
+    onCalendarLongPrev() {
+        let date = this.calendar.getDate().toDate();
+        let days = 0;
+        let months = 0;
+        let years = 0;
+        switch (this.calendar.getViewName()) {
+            case 'day':
+                days = -7;
+                break;
+            case 'week':
+                days = -28;
+                break;
+            case 'month':
+                years = -1;
+                break;
+        }
+        date.setFullYear(date.getFullYear() + years);
+        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);
+    }
+    onCalendarPrev() {
+        this.calendar.prev();
+    }
+    onCalendarToday() {
+        this.calendar.today();
+    }
+    onCalendarNext() {
+        this.calendar.next();
+    }
+    onCalendarLongNext() {
+        let date = this.calendar.getDate().toDate();
+        let days = 0;
+        let months = 0;
+        let years = 0;
+        switch (this.calendar.getViewName()) {
+            case 'day':
+                days = 7;
+                break;
+            case 'week':
+                days = 28;
+                break;
+            case 'month':
+                years = 1;
+                break;
+        }
+        date.setFullYear(date.getFullYear() + years);
+        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);
+    }
+    onMonthView() {
+        this.calendar.changeView('month');
+    }
+    onWeekView() {
+        this.calendar.changeView('week');
+    }
+    onDayView() {
+        this.calendar.changeView('day');
+    }
+    getDate() {
+        let date = this.calendar.getDate();
+        let str = date.toDate().toLocaleDateString("en-US", {
+            year: 'numeric',
+            month: 'short',
+        });
+        return str;
+    }
+    createTUICalendar() {
+        let ioptions = this.preprocessIOptions(null);
+        console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
+        this.calendar = new Calendar('#calendar', ioptions);
+        console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
+    }
+    bindCallbacks() {
+        this.bindAfterRenderSchedule();
+        this.bindClickTimezonesCollapseBtn();
+        this.bindClickDayname();
+        this.bindClickMore();
+        this.bindClickSchedule();
+        this.bindBeforeCreateSchedule();
+        this.bindBeforeUpdateSchedule();
+        this.bindBeforeDeleteSchedule();
+    }
+    bindAfterRenderSchedule() {
+        let that = this;
+        this.calendar.on('afterRenderSchedule', function (event) {
+            // console.warn(`afterRenderSchedule`, event);
+        });
+    }
+    bindClickTimezonesCollapseBtn() {
+        let that = this;
+        this.calendar.on('clickTimezonesCollapseBtn', function (timezonesCollapsed) {
+            // console.warn(`clickTimezonesCollapseBtn`, timezonesCollapsed);
+        });
+    }
+    bindClickDayname() {
+        let that = this;
+        this.calendar.on('clickDayname', function (event) {
+            // console.warn(`clickDayname`, event);
+        });
+    }
+    bindClickMore() {
+        let that = this;
+        this.calendar.on('clickMore', function (event) {
+            // console.warn(`clickMore`, event);
+        });
+    }
+    bindClickSchedule() {
+        // only works if useDetailPopup: false,
+        let that = this;
+        this.calendar.on('clickSchedule', function (event) {
+            // console.warn(`clickSchedule`, event);
+            let schedule = Object.assign({}, event.schedule);
+            schedule.start = (new LocalDate(schedule.start)).toDate();
+            schedule.end = (new LocalDate(schedule.end)).toDate();
+            that.openPopupScheduleEditor(schedule);
+        });
+    }
+    bindBeforeCreateSchedule() {
+        let that = this;
+        this.calendar.on('beforeCreateSchedule', function (event) {
+            // console.log(`beforeCreateSchedule`, event);
+            let start = (new LocalDate(event.start)).toDate();
+            start.setHours(9);
+            let end = (new LocalDate(event.end)).toDate();
+            end.setHours(10);
+            that.openPopupScheduleEditor({
+                title: '',
+                start: start,
+                end: end,
+                id: null,
+            });
+        });
+    }
+    bindBeforeUpdateSchedule() {
+        let that = this;
+        this.calendar.on('beforeUpdateSchedule', function (event) {
+            // console.log(`beforeUpdateSchedule`, event);
+            that.updateScheduleAndNotifyParent(event);
+        });
+    }
+    bindBeforeDeleteSchedule() {
+        let that = this;
+        this.calendar.on('beforeDeleteSchedule', function (event) {
+            // console.log(`beforeDeleteSchedule`, event.schedule);
+            // console.log(`beforeDeleteSchedule`, event.schedule);
+            that.deleteScheduleAndNotifyParent({ id: event.schedule.id, calendarId: event.schedule.calendarId });
+        });
+    }
+    nextColor() {
+        let color = this.colors[this.colorIndex++].hex();
+        if (this.colorIndex >= this.colors.length)
+            this.colorIndex = 0;
+        return color;
+    }
+    createScheduleAndNotifyParent(args) {
+        let schedule = this.createSchedule(args);
+        this.userCreatedSchedule.emit(schedule);
+        return schedule;
+    }
+    createSchedules(schedules) {
+        let newSchedules = [];
+        for (let schedule of schedules) {
+            newSchedules.push(this.createSchedule(schedule));
+        }
+        return newSchedules;
+    }
+    createSchedule(args) {
+        // if (form.invalid) return;
+        // create a color
+        let color = this.nextColor();
+        // console.log(color);
+        // create an id
+        let id = (args.id == null) ? '' : args.id.toString();
+        if (id.length === 0) {
+            id = v4();
+        }
+        let start = LocalDate.convertToJsDate(args.start);
+        let end = LocalDate.convertToJsDate(args.end);
+        let schedule = {
+            id,
+            calendarId: (args.calendarId == null) ? this.calendarId : args.calendarId,
+            title: args.title,
+            start: start,
+            end: end,
+            category: args.category,
+            isAllDay: args.isAllDay,
+            dueDateClass: '',
+            bgColor: color,
+        };
+        // console.log(`event-calendar.component.ts: createEvent:`, schedule);
+        this.calendar.createSchedules([schedule]);
+        return this.calendar.getSchedule(schedule.id, schedule.calendarId);
+    }
+    updateScheduleAndNotifyParent(args) {
+        let schedule = this.updateSchedule(args);
+        this.userUpdatedSchedule.emit(schedule);
+        return schedule;
+    }
+    updateSchedule(schedule) {
+        // console.log(`event-calendar.component.ts: updateSchedule:`, schedule);
+        let calendarId = (schedule.calendarId == null) ? this.calendarId : 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;
+        return this.calendar.getSchedule(args.id, calendarId);
+    }
+    deleteScheduleAndNotifyParent(args) {
+        this.deleteSchedule(args);
+        let calendarId = (args.calendarId == null) ? this.calendarId : 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;
+        this.calendar.deleteSchedule(args.id, calendarId, false);
+    }
+    deleteAllSchedules() {
+        this.calendar.clear();
+    }
+    openPopupScheduleEditor(schedule) {
+        // console.log('openPopupScheduleEditor: calevent:', schedule);
+        const dialogConfig = new MatDialogConfig();
+        if (this.appliedOptions.themeClass) {
+            dialogConfig.panelClass = this.appliedOptions.themeClass;
+        }
+        console.warn(`options: `, this.appliedOptions);
+        dialogConfig.data = { schedule, darkMode: this.appliedOptions.darkMode, themeClass: this.appliedOptions.themeClass };
+        dialogConfig.autoFocus = true;
+        const dialogRef = this.dialog.open(NgxMatTuiCalendarEditorDialogComponent, dialogConfig);
+        // const dialogRef = this.dialog.open(NgxMatTuiCalendarScheduleEditorDialogComponent, {
+        //   data: schedule,
+        // });
+        dialogRef.afterClosed().subscribe((result) => {
+            // console.log('openPopupScheduleEditor: The dialog was closed', result);
+            this.calendar.render(true); // <-- so that selection is cleared
+            if (result && result.schedule) {
+                let schedule = result.schedule;
+                if (result.performDelete == true) {
+                    // delete
+                    // console.log(`openPopupScheduleEditor:afterCLosed: deleteSchedule`);
+                    this.deleteScheduleAndNotifyParent({ id: schedule.id, calendarId: schedule.calendarId });
+                }
+                else if (schedule.id == null) {
+                    // console.log(`openPopupScheduleEditor:afterCLosed: addSchedule`);
+                    this.createScheduleAndNotifyParent(schedule);
+                }
+                else {
+                    // console.log(`openPopupScheduleEditor:afterCLosed: updateSchedule`);
+                    this.updateScheduleAndNotifyParent(schedule);
+                }
+            }
+        });
+    }
+    setOptions(options) {
+        if (options == null) {
+            options = this.getDefaultOptions();
+        }
+        options.ioptions = this.setIOptions(options.ioptions);
+        this.appliedOptions = Object.assign({}, options);
+    }
+    setIOptions(ioptionsIn) {
+        let ioptions = this.preprocessIOptions(ioptionsIn);
+        this.calendar.setOptions(ioptions);
+        this.calendar.setTheme(ioptions.theme);
+        this.calendar.render(true);
+        return ioptions;
+    }
+    preprocessIOptions(ioptions) {
+        let defs = this.getDefaultIOptions();
+        if (ioptions == null) {
+            ioptions = defs;
+        }
+        else {
+            ioptions = Object.assign(Object.assign({}, defs), ioptions);
+        }
+        ioptions.useCreationPopup = false;
+        ioptions.useDetailPopup = false;
+        if (!ioptions.theme) {
+            ioptions.theme = this.getDefaultTheme();
+        }
+        return ioptions;
+    }
+    getDefaultOptions() {
+        return {
+            darkMode: false,
+            themeClass: null,
+            ioptions: this.getDefaultIOptions(),
+        };
+    }
+    getDefaultIOptions() {
+        return {
+            defaultView: 'month',
+            taskView: true,
+            useCreationPopup: false,
+            useDetailPopup: false,
+            theme: this.getDefaultTheme(),
+            template: {
+                monthDayname: function (dayname) {
+                    return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
+                }
+            },
+            week: {
+                // startDayOfWeek: undefined,
+                // daynames: undefined,
+                narrowWeekend: false,
+                // workweek: true,
+                showTimezoneCollapseButton: true,
+                timezonesCollapsed: true,
+                hourStart: 7,
+                hourEnd: 20,
+            },
+        };
+    }
+    getColor(name) {
+        const el = document.getElementById(`theme-${name}`);
+        if (el) {
+            const style = window.getComputedStyle(el, null);
+            console.warn(`theme-${name} color:`, style.color);
+            return style.color;
+        }
+        return '';
+    }
+    getDefaultTheme() {
+        function adjustHexOpacity(color, opacity) {
+            const r = parseInt(color.slice(1, 3), 16);
+            const g = parseInt(color.slice(3, 5), 16);
+            const b = parseInt(color.slice(5, 7), 16);
+            return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';
+        }
+        // default keys and styles
+        // TODO: apply Material Design Theme 
+        let background = this.getColor("background");
+        let border = this.getColor("divider");
+        let borderLight = this.getColor("divider-light");
+        let shadow = this.getColor("divider");
+        let highlight = this.getColor("highlight");
+        let primary = this.getColor("primary");
+        let warn = this.getColor("warn");
+        let text = this.getColor("foreground");
+        let primaryShaded = this.getColor("primary-shaded");
+        // tui-full-calendar-weekday-schedule-title
+        //calendar-week-dayname-name
+        return {
+            'common.border': `1px solid ${border}`,
+            'common.backgroundColor': background,
+            'common.holiday.color': warn,
+            'common.saturday.color': text,
+            'common.dayname.color': text,
+            'common.today.color': '#0f0',
+            // creation guide style
+            'common.creationGuide.backgroundColor': primaryShaded,
+            'common.creationGuide.border': `1px solid ${highlight}`,
+            // month header 'dayname'
+            'month.dayname.height': '31px',
+            'month.dayname.borderLeft': `1px solid ${border}`,
+            'month.dayname.paddingLeft': '10px',
+            'month.dayname.paddingRight': '10px',
+            'month.dayname.backgroundColor': 'inherit',
+            'month.dayname.fontSize': '12px',
+            'month.dayname.fontWeight': 'normal',
+            'month.dayname.textAlign': 'left',
+            // month day grid cell 'day'
+            'month.holidayExceptThisMonth.color': 'rgba(255, 64, 64, 0.4)',
+            'month.dayExceptThisMonth.color': 'rgba(51, 51, 51, 0.4)',
+            'month.weekend.backgroundColor': 'inherit',
+            'month.day.fontSize': '14px',
+            'month.schedule.color': highlight,
+            // month schedule style
+            'month.schedule.borderRadius': '2px',
+            'month.schedule.height': '24px',
+            'month.schedule.marginTop': '2px',
+            'month.schedule.marginLeft': '8px',
+            'month.schedule.marginRight': '8px',
+            // month more view
+            'month.moreView.border': `1px solid ${border}`,
+            'month.moreView.boxShadow': `0 2px 6px 0 ${shadow}`,
+            'month.moreView.backgroundColor': background,
+            'month.moreView.paddingBottom': '17px',
+            'month.moreViewTitle.height': '44px',
+            'month.moreViewTitle.marginBottom': '12px',
+            'month.moreViewTitle.backgroundColor': 'inherit',
+            'month.moreViewTitle.borderBottom': 'none',
+            'month.moreViewTitle.padding': '12px 17px 0 17px',
+            'month.moreViewList.padding': '0 17px',
+            // week header 'dayname'
+            'week.dayname.height': '42px',
+            'week.dayname.borderTop': `1px solid ${border}`,
+            'week.dayname.borderBottom': `1px solid ${border}`,
+            'week.dayname.borderLeft': 'inherit',
+            'week.dayname.paddingLeft': '0',
+            'week.dayname.backgroundColor': 'inherit',
+            'week.dayname.textAlign': 'left',
+            'week.today.color': text,
+            'week.pastDay.color': borderLight,
+            // week vertical panel 'vpanel'
+            'week.vpanelSplitter.border': `1px solid ${border}`,
+            'week.vpanelSplitter.height': '3px',
+            // week daygrid 'daygrid'
+            'week.daygrid.borderRight': `1px solid ${border}`,
+            'week.daygrid.backgroundColor': background,
+            'week.daygridLeft.width': '72px',
+            'week.daygridLeft.backgroundColor': background,
+            'week.daygridLeft.paddingRight': '8px',
+            'week.daygridLeft.borderRight': `1px solid ${border}`,
+            'week.today.backgroundColor': primaryShaded,
+            'week.weekend.backgroundColor': 'inherit',
+            // week timegrid 'timegrid'
+            'week.timegridLeft.width': '72px',
+            'week.timegridLeft.backgroundColor': 'inherit',
+            'week.timegridLeft.borderRight': `1px solid ${border}`,
+            'week.timegridLeft.fontSize': '11px',
+            'week.timegridLeftTimezoneLabel.height': '40px',
+            'week.timegridLeftAdditionalTimezone.backgroundColor': background,
+            'week.timegridOneHour.height': '52px',
+            'week.timegridHalfHour.height': '26px',
+            'week.timegridHalfHour.borderBottom': 'none',
+            'week.timegridHorizontalLine.borderBottom': `1px solid ${border}`,
+            'week.timegrid.paddingRight': '8px',
+            'week.timegrid.borderRight': `1px solid ${border}`,
+            'week.timegridSchedule.borderRadius': '2px',
+            'week.timegridSchedule.paddingLeft': '2px',
+            // #515ce6 is a slate blue
+            'week.currentTime.color': highlight,
+            'week.currentTime.fontSize': '11px',
+            'week.currentTime.fontWeight': 'normal',
+            'week.pastTime.color': borderLight,
+            'week.pastTime.fontWeight': 'normal',
+            'week.futureTime.color': border,
+            'week.futureTime.fontWeight': 'normal',
+            'week.currentTimeLinePast.border': `1px dashed ${highlight}`,
+            'week.currentTimeLineBullet.backgroundColor': highlight,
+            'week.currentTimeLineToday.border': `1px solid ${highlight}`,
+            'week.currentTimeLineFuture.border': 'none',
+            // week creation guide style
+            'week.creationGuide.color': highlight,
+            'week.creationGuide.fontSize': '11px',
+            'week.creationGuide.fontWeight': 'bold',
+            // week daygrid schedule style
+            'week.dayGridSchedule.borderRadius': '2px',
+            'week.dayGridSchedule.height': '24px',
+            'week.dayGridSchedule.marginTop': '2px',
+            'week.dayGridSchedule.marginLeft': '8px',
+            'week.dayGridSchedule.marginRight': '8px'
+        };
     }
 }
-NgxMatTuiCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NgxMatTuiCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", ngImport: i0, template: "<p>\r\n    ngx-mat-tui-calendar v0.0.14 works!  added tui-calendar\r\n</p>\r\n<ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>", styles: [""], components: [{ type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }] });
+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    <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n    <div style=\"color: blue;\"> <div id=\"theme-primary-shaded\"></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: #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>", 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ngx-mat-tui-calendar',
                     templateUrl: './ngx-mat-tui-calendar.component.html',
-                    styleUrls: ['./ngx-mat-tui-calendar.component.scss']
+                    styleUrls: [
+                        './ngx-mat-tui-calendar.component.scss'
+                    ],
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { userCreatedSchedule: [{
+                type: Output
+            }], userUpdatedSchedule: [{
+                type: Output
+            }], userDeletedSchedule: [{
+                type: Output
+            }], options: [{
+                type: Input
+            }] } });
 
+// Angular modules
 class NgxMatTuiCalendarModule {
 }
 NgxMatTuiCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 NgxMatTuiCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, declarations: [NgxMatTuiCalendarComponent,
-        NgxMatTuiCalendarWrapperComponent], exports: [NgxMatTuiCalendarComponent] });
-NgxMatTuiCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, imports: [[]] });
+        NgxMatTuiCalendarWrapperComponent,
+        NgxMatTuiCalendarEditorDialogComponent], imports: [BrowserAnimationsModule,
+        BrowserModule,
+        FlexLayoutModule,
+        FlexModule,
+        FormsModule,
+        HttpClientModule,
+        OverlayModule,
+        ReactiveFormsModule,
+        MatButtonModule,
+        MatButtonToggleModule,
+        MatCardModule,
+        MatDatepickerModule,
+        MatDialogModule,
+        MatDividerModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatNativeDateModule,
+        MatRadioModule,
+        MatRippleModule,
+        MatSlideToggleModule,
+        MatToolbarModule,
+        FontAwesomeModule,
+        MatTimepickerModule], exports: [NgxMatTuiCalendarComponent] });
+NgxMatTuiCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, imports: [[
+            BrowserAnimationsModule,
+            BrowserModule,
+            FlexLayoutModule,
+            FlexModule,
+            FormsModule,
+            HttpClientModule,
+            OverlayModule,
+            ReactiveFormsModule,
+            MatButtonModule,
+            MatButtonToggleModule,
+            MatCardModule,
+            MatDatepickerModule,
+            MatDialogModule,
+            MatDividerModule,
+            MatFormFieldModule,
+            MatIconModule,
+            MatInputModule,
+            MatNativeDateModule,
+            MatRadioModule,
+            MatRippleModule,
+            MatSlideToggleModule,
+            MatToolbarModule,
+            FontAwesomeModule,
+            MatTimepickerModule,
+        ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
                         NgxMatTuiCalendarComponent,
                         NgxMatTuiCalendarWrapperComponent,
+                        NgxMatTuiCalendarEditorDialogComponent,
+                    ],
+                    imports: [
+                        BrowserAnimationsModule,
+                        BrowserModule,
+                        FlexLayoutModule,
+                        FlexModule,
+                        FormsModule,
+                        HttpClientModule,
+                        OverlayModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatButtonToggleModule,
+                        MatCardModule,
+                        MatDatepickerModule,
+                        MatDialogModule,
+                        MatDividerModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatNativeDateModule,
+                        MatRadioModule,
+                        MatRippleModule,
+                        MatSlideToggleModule,
+                        MatToolbarModule,
+                        FontAwesomeModule,
+                        MatTimepickerModule,
                     ],
-                    imports: [],
                     exports: [
                         NgxMatTuiCalendarComponent,
                     ],
@@ -76,5 +921,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { NgxMatTuiCalendarComponent, NgxMatTuiCalendarModule, NgxMatTuiCalendarService };
+export { LocalDate, NgxMatTuiCalendarComponent, NgxMatTuiCalendarModule, NgxMatTuiCalendarService };
 //# sourceMappingURL=ngx-mat-tui-calendar.js.map