ngx-mat-tui-calendar
Version:
Angular Material Design wrapper, supporting theming, for the Toast UI Calendar, suitable for web-based scheduling, events, appointments, and day planner applications.
987 lines • 58.9 kB
JavaScript
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import * as i9 from '@angular/common';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule, FlexModule } from '@angular/flex-layout';
import * as i7 from '@angular/forms';
import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import * as i0 from '@angular/core';
import { Component, Inject, ViewEncapsulation, EventEmitter, Output, Input, NgModule, CUSTOM_ELEMENTS_SCHEMA, Injectable } from '@angular/core';
import { OverlayModule } from '@angular/cdk/overlay';
import * as i6 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i5$1 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import * as i4 from '@angular/material/datepicker';
import { MatDatepickerModule } from '@angular/material/datepicker';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
import * as i5 from '@angular/material/divider';
import { MatDividerModule } from '@angular/material/divider';
import * as i2 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import * as i8 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i3 from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
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 i10 from 'mat-timepicker';
import { MatTimepickerModule } from 'mat-timepicker';
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 { 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 is really important
let date = new Date();
date.setDate(1); // very important
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: "<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'],
encapsulation: ViewEncapsulation.None, // this is needed so that our css rules override those in tui-calendar package
}]
}], ctorParameters: function () { return []; } });
class NgxMatTuiCalendarComponent {
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.calendarIdDefault = "main";
}
ngOnInit() {
// console.warn(`calendar.component.ts: ngOnit`)
this.setOptions(this.options);
this.createTUICalendar(this.appliedOptions.ioptions);
this.bindCallbacks();
this.calendar.toggleScheduleView(true);
this.calendar.render(true);
this.calendar.toggleScheduleView(true);
}
ngOnChanges(changes) {
// console.warn(`ngOnChanges: `, changes);
// 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);
this.calendar.toggleScheduleView(true);
}
onCalendarPrev() {
this.calendar.prev();
this.calendar.toggleScheduleView(true);
}
onCalendarToday() {
this.calendar.today();
this.calendar.toggleScheduleView(true);
}
onCalendarNext() {
this.calendar.next();
this.calendar.toggleScheduleView(true);
}
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);
this.calendar.toggleScheduleView(true);
}
onMonthView() {
this.calendar.changeView('month');
this.calendar.render(true); // <-- so that selection is cleared
}
onWeekView() {
// console.log(`onWeekView`)
this.calendar.changeView('week');
this.calendar.render(true); // <-- so that selection is cleared
}
onDayView() {
this.calendar.changeView('day');
this.calendar.render(true); // <-- so that selection is cleared
}
getDate() {
let date = this.calendar.getDate();
let str = date.toDate().toLocaleDateString("en-US", {
year: 'numeric',
month: 'short',
});
return str;
}
createTUICalendar(iopts) {
let ioptions = this.preprocessIOptions(iopts);
// console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
this.calendar = new Calendar('#calendar', ioptions);
// console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
this.calendar.toggleScheduleView(true);
}
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.calendarIdDefault : 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.calendarIdDefault : schedule.calendarId;
this.calendar.updateSchedule(schedule.id, calendarId, schedule, false);
return this.calendar.getSchedule(schedule.id, calendarId);
}
getSchedule(args) {
// console.log(`event-calendar.component.ts: getSchedule:`, schedule);
let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
return this.calendar.getSchedule(args.id, calendarId);
}
deleteScheduleAndNotifyParent(args) {
this.deleteSchedule(args);
let calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
this.userDeletedSchedule.emit({ id: args.id, calendarId });
}
deleteSchedule(args) {
// console.log(`event-calendar.component.ts: deleteSchedule:`, schedule);
let calendarId = (args.calendarId == null) ? this.calendarIdDefault : 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);
}
}
});
}
setDefaultOptions() {
this.setOptions();
}
setOptions(o) {
const get = (object, path, defaultValue) => {
let value = path
.split('.')
.reduce((o, p) => o == null ? undefined : o[p], object);
return (value !== undefined) ? value : defaultValue;
};
let options = {
darkMode: get(o, "darkMode", false),
themeClass: get(o, "themeClass", null),
ioptions: (o && o.ioptions) ? this.setIOptions(o.ioptions) : this.getDefaultIOptions(),
buttons: {
previous: get(o, "buttons.previous", true),
next: get(o, "buttons.next", true),
today: get(o, "buttons.today", true),
longPrevious: get(o, "buttons.longPrevious", true),
longNext: get(o, "buttons.longNext", true),
month: get(o, "buttons.month", true),
week: get(o, "buttons.week", true),
day: get(o, "buttons.day", true),
}
};
this.appliedOptions = options;
// console.warn(`setOptions: `, this.appliedOptions);
}
setIOptions(ioptionsIn) {
let ioptions = this.preprocessIOptions(ioptionsIn);
if (this.calendar) {
this.calendar.setOptions(ioptions);
this.calendar.setTheme(ioptions.theme);
this.calendar.render(true);
this.calendar.toggleScheduleView(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;
}
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: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
NgxMatTuiCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0, template: "<section class=\"content-container\">\r\n <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n <!-- The outer div gives the default color for when user does not provide an Angular theme -->\r\n <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-highlight\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-accent\"></div></div>\r\n <div style=\"color: red;\"> <div id=\"theme-warn\"></div></div>\r\n <div style=\"color: rgba(0, 0, 255, 0.2);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n \r\n <div class=\"calendar-container\">\r\n <!-- calendar titlebar -->\r\n <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n <!-- <div style=\"align-self: center;display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\"> -->\r\n <div style=\"display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 100%; \">\r\n <div class=\"left-div\">\r\n <!-- LEFT -->\r\n <button mat-button *ngIf=\"appliedOptions.buttons.longPrevious\"\r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongPrev()\">\r\n <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.previous\"\r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarPrev()\">\r\n <fa-icon [icon]=\"iconPrev\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.today\"\r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;\" \r\n (click)=\"onCalendarToday()\">\r\n <fa-icon [icon]=\"iconToday\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.next\"\r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarNext()\">\r\n <fa-icon [icon]=\"iconNext\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.longNext\"\r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongNext()\">\r\n <fa-icon [icon]=\"iconLongNext\"></fa-icon>\r\n </button>\r\n </div>\r\n <div class=\"center-div\">\r\n <!-- CENTER -->\r\n <span class=\"event-calendar-title\">{{ getDate() }}</span>\r\n </div>\r\n <div class=\"right-div\">\r\n \r\n <!-- RIGHT -->\r\n <mat-button-toggle-group [hidden]=\"!appliedOptions.buttons.month && !appliedOptions.buttons.week && !appliedOptions.buttons.day\"\r\n class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n layout_height=\"wrap_content\">\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.month\" mat-button value=\"month\" class=\"view-button\" (click)=\"onMonthView()\">\r\n <fa-icon [icon]=\"iconByMonth\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.week\" mat-button value=\"week\" class=\"view-button\" (click)=\"onWeekView()\">\r\n <fa-icon [icon]=\"iconByWeek\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.day\" mat-button value=\"day\" class=\"view-button\" (click)=\"onDayView()\">\r\n <fa-icon [icon]=\"iconByDay\"></fa-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </mat-toolbar>\r\n <ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>\r\n </div>\r\n \r\n </section>\r\n", styles: [".calendar-container{transform-origin:top left}.menu-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem!important}.mat-button{font-size:1.1rem!important}.mat-button.navigation-button{padding:0;min-width:32px}.left-div{width:33%;float:left;display:flex;white-space:nowrap;vertical-align:middle}.center-div{width:33%;float:right;text-align:center;white-space:nowrap;vertical-align:middle}.event-calendar-title{font-size:2rem;vertical-align:middle}.right-div{width:33%;display:flex;white-space:nowrap;vertical-align:middle;flex-flow:row-reverse}@media screen and (max-width: 599px){.left-div{transform:scale(.75);transform-origin:center left}.center-div{transform:scale(.5)}.right-div{transform:scale(1);transform-origin:center right}.right-div .mat-button-toggle-group.view-button{font-size:1.1rem!important}.right-div ::ng-deep .mat-button-toggle-label-content{padding:0 8px!important}}.mat-button-toggle-group.view-button{height:36px;font-size:1.25rem!important}.view-button{align-items:center}::ng-deep .mat-button-toggle-label-content{padding:0 10px!important}\n"], components: [{ type: i2$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-mat-tui-calendar',
templateUrl: './ngx-mat-tui-calendar.component.html',
styleUrls: [
'./ngx-mat-tui-calendar.component.scss'
],
}]
}], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { userCreatedSchedule: [{
type: Output
}], userUpdatedSchedule: [{
type: Output
}], userDeletedSchedule: [{
type: Output
}], options: [{
type: Input
}] } });
// Angular modules
// collect all of the above modules into an array
const importedModules = [
BrowserAnimationsModule,
CommonModule,
FlexLayoutModule,
FlexModule,
FormsModule,
HttpClientModule,
OverlayModule,
ReactiveFormsModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatNativeDateModule,
MatRadioModule,
MatRippleModule,
MatSlideToggleModule,
MatToolbarModule,
FontAwesomeModule,
MatTimepickerModule,
];
const projectModules = [
NgxMatTuiCalendarComponent,
NgxMatTuiCalendarWrapperComponent,
NgxMatTuiCalendarEditorDialogComponent,
];
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,
NgxMatTuiCalendarEditorDialogComponent], imports: [BrowserAnimationsModule,
CommonModule,
FlexLayoutModule,
FlexModule,
FormsModule,
HttpClientModule,
OverlayModule,
ReactiveFormsModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatNativeDateModule,
MatRadioModule,
MatRippleModule,
MatSlideToggleModule,
MatToolbarModule,
FontAwesomeModule,
MatTimepickerModule], exports: [BrowserAnimationsModule,
CommonModule,
FlexLayoutModule,
FlexModule,
FormsModule,
HttpClientModule,
OverlayModule,
ReactiveFormsModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatNativeDateModule,
MatRadioModule,
MatRippleModule,
MatSlideToggleModule,
MatToolbarModule,
FontAwesomeModule,
MatTimepickerModule, NgxMatTuiCalendarComponent,
NgxMatTuiCalendarWrapperComponent,
NgxMatTuiCalendarEditorDialogComponent] });
NgxMatTuiCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarModule, imports: [[
...importedModules,
], BrowserAnimationsModule,
CommonModule,
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: [
...projectModules,
],
imports: [
...importedModules,
],
exports: [
...importedModules,
...projectModules,
],
entryComponents: [
...projectModules,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}]
}] });
class NgxMatTuiCalendarService {
constructor() { }
}
NgxMatTuiCalendarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxMatTuiCalendarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxMatTuiCalendarService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
/*
* Public API Surface of ngx-mat-tui-calendar
*/
/**
* Generated bundle index. Do not edit.
*/
export { LocalDate, NgxMatTuiCalendarComponent, NgxMatTuiCalendarEditorDialogComponent, NgxMatTuiCalendarModule, NgxMatTuiCalendarService, NgxMatTuiCalendarWrapperComponent };
//# sourceMappingURL=ngx-mat-tui-calendar.js.map