ngx-mat-tui-calendar 12.0.12 → 12.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/ngx-mat-tui-calendar.umd.js +54 -37
- package/bundles/ngx-mat-tui-calendar.umd.js.map +1 -1
- package/esm2015/lib/calendar-options.js +1 -1
- package/esm2015/lib/ngx-mat-tui-calendar.component.js +56 -38
- package/fesm2015/ngx-mat-tui-calendar.js +54 -37
- package/fesm2015/ngx-mat-tui-calendar.js.map +1 -1
- package/lib/calendar-options.d.ts +10 -0
- package/lib/ngx-mat-tui-calendar.component.d.ts +4 -4
- package/package.json +2 -4
|
@@ -637,23 +637,22 @@
|
|
|
637
637
|
// we slice off the first color since it is gray
|
|
638
638
|
this.colors = distinctColors__default["default"]({ lightMin: 70, count: 15 }).slice(1);
|
|
639
639
|
this.colorIndex = 0;
|
|
640
|
-
this.
|
|
641
|
-
this.appliedOptions = this.getDefaultOptions();
|
|
640
|
+
this.calendarIdDefault = "main";
|
|
642
641
|
}
|
|
643
642
|
NgxMatTuiCalendarComponent.prototype.ngOnInit = function () {
|
|
644
643
|
// console.warn(`calendar.component.ts: ngOnit`)
|
|
645
|
-
this.
|
|
644
|
+
this.setOptions(this.options);
|
|
645
|
+
this.createTUICalendar(this.appliedOptions.ioptions);
|
|
646
646
|
this.bindCallbacks();
|
|
647
|
+
this.calendar.toggleScheduleView(true);
|
|
648
|
+
this.calendar.render(true);
|
|
649
|
+
this.calendar.toggleScheduleView(true);
|
|
647
650
|
};
|
|
648
651
|
NgxMatTuiCalendarComponent.prototype.ngOnChanges = function (changes) {
|
|
649
|
-
// console.warn(changes);
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
var options = changes.options.currentValue;
|
|
654
|
-
this.setOptions(options);
|
|
655
|
-
}
|
|
656
|
-
}
|
|
652
|
+
// console.warn(`ngOnChanges: `, changes);
|
|
653
|
+
// console.warn(`change.option:`, changes.options);
|
|
654
|
+
var options = changes.options.currentValue;
|
|
655
|
+
this.setOptions(options);
|
|
657
656
|
};
|
|
658
657
|
NgxMatTuiCalendarComponent.prototype.ngOnDestroy = function () {
|
|
659
658
|
this.calendar.destroy();
|
|
@@ -716,14 +715,16 @@
|
|
|
716
715
|
};
|
|
717
716
|
NgxMatTuiCalendarComponent.prototype.onMonthView = function () {
|
|
718
717
|
this.calendar.changeView('month');
|
|
718
|
+
this.calendar.render(true); // <-- so that selection is cleared
|
|
719
719
|
};
|
|
720
720
|
NgxMatTuiCalendarComponent.prototype.onWeekView = function () {
|
|
721
|
-
console.log(
|
|
721
|
+
// console.log(`onWeekView`)
|
|
722
722
|
this.calendar.changeView('week');
|
|
723
723
|
this.calendar.render(true); // <-- so that selection is cleared
|
|
724
724
|
};
|
|
725
725
|
NgxMatTuiCalendarComponent.prototype.onDayView = function () {
|
|
726
726
|
this.calendar.changeView('day');
|
|
727
|
+
this.calendar.render(true); // <-- so that selection is cleared
|
|
727
728
|
};
|
|
728
729
|
NgxMatTuiCalendarComponent.prototype.getDate = function () {
|
|
729
730
|
var date = this.calendar.getDate();
|
|
@@ -733,8 +734,8 @@
|
|
|
733
734
|
});
|
|
734
735
|
return str;
|
|
735
736
|
};
|
|
736
|
-
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function () {
|
|
737
|
-
var ioptions = this.preprocessIOptions(
|
|
737
|
+
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function (iopts) {
|
|
738
|
+
var ioptions = this.preprocessIOptions(iopts);
|
|
738
739
|
// console.warn(`calendar.component.ts: createTUICalendar: ioptions:`, ioptions);
|
|
739
740
|
this.calendar = new Calendar__default["default"]('#calendar', ioptions);
|
|
740
741
|
// console.warn(`calendar.component.ts: createTUICalendar: this.calendar:`, this.calendar);
|
|
@@ -859,7 +860,7 @@
|
|
|
859
860
|
var end = LocalDate.convertToJsDate(args.end);
|
|
860
861
|
var schedule = {
|
|
861
862
|
id: id,
|
|
862
|
-
calendarId: (args.calendarId == null) ? this.
|
|
863
|
+
calendarId: (args.calendarId == null) ? this.calendarIdDefault : args.calendarId,
|
|
863
864
|
title: args.title,
|
|
864
865
|
start: start,
|
|
865
866
|
end: end,
|
|
@@ -879,23 +880,23 @@
|
|
|
879
880
|
};
|
|
880
881
|
NgxMatTuiCalendarComponent.prototype.updateSchedule = function (schedule) {
|
|
881
882
|
// console.log(`event-calendar.component.ts: updateSchedule:`, schedule);
|
|
882
|
-
var calendarId = (schedule.calendarId == null) ? this.
|
|
883
|
+
var calendarId = (schedule.calendarId == null) ? this.calendarIdDefault : schedule.calendarId;
|
|
883
884
|
this.calendar.updateSchedule(schedule.id, calendarId, schedule, false);
|
|
884
885
|
return this.calendar.getSchedule(schedule.id, calendarId);
|
|
885
886
|
};
|
|
886
887
|
NgxMatTuiCalendarComponent.prototype.getSchedule = function (args) {
|
|
887
888
|
// console.log(`event-calendar.component.ts: getSchedule:`, schedule);
|
|
888
|
-
var calendarId = (args.calendarId == null) ? this.
|
|
889
|
+
var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
|
|
889
890
|
return this.calendar.getSchedule(args.id, calendarId);
|
|
890
891
|
};
|
|
891
892
|
NgxMatTuiCalendarComponent.prototype.deleteScheduleAndNotifyParent = function (args) {
|
|
892
893
|
this.deleteSchedule(args);
|
|
893
|
-
var calendarId = (args.calendarId == null) ? this.
|
|
894
|
+
var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
|
|
894
895
|
this.userDeletedSchedule.emit({ id: args.id, calendarId: calendarId });
|
|
895
896
|
};
|
|
896
897
|
NgxMatTuiCalendarComponent.prototype.deleteSchedule = function (args) {
|
|
897
898
|
// console.log(`event-calendar.component.ts: deleteSchedule:`, schedule);
|
|
898
|
-
var calendarId = (args.calendarId == null) ? this.
|
|
899
|
+
var calendarId = (args.calendarId == null) ? this.calendarIdDefault : args.calendarId;
|
|
899
900
|
this.calendar.deleteSchedule(args.id, calendarId, false);
|
|
900
901
|
};
|
|
901
902
|
NgxMatTuiCalendarComponent.prototype.deleteAllSchedules = function () {
|
|
@@ -936,19 +937,42 @@
|
|
|
936
937
|
}
|
|
937
938
|
});
|
|
938
939
|
};
|
|
939
|
-
NgxMatTuiCalendarComponent.prototype.
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
940
|
+
NgxMatTuiCalendarComponent.prototype.setDefaultOptions = function () {
|
|
941
|
+
this.setOptions();
|
|
942
|
+
};
|
|
943
|
+
NgxMatTuiCalendarComponent.prototype.setOptions = function (o) {
|
|
944
|
+
var get = function (object, path, defaultValue) {
|
|
945
|
+
var value = path
|
|
946
|
+
.split('.')
|
|
947
|
+
.reduce(function (o, p) { return o[p]; }, object);
|
|
948
|
+
return (value !== undefined) ? value : defaultValue;
|
|
949
|
+
};
|
|
950
|
+
var options = {
|
|
951
|
+
darkMode: get(o, "darkMode", false),
|
|
952
|
+
themeClass: get(o, "themeClass", null),
|
|
953
|
+
ioptions: (o && o.ioptions) ? this.setIOptions(o.ioptions) : this.getDefaultIOptions(),
|
|
954
|
+
buttons: {
|
|
955
|
+
previous: get(o, "buttons.previous", true),
|
|
956
|
+
next: get(o, "buttons.next", true),
|
|
957
|
+
today: get(o, "buttons.today", true),
|
|
958
|
+
longPrevious: get(o, "buttons.longPrevious", true),
|
|
959
|
+
longNext: get(o, "buttons.longNext", true),
|
|
960
|
+
month: get(o, "buttons.month", true),
|
|
961
|
+
week: get(o, "buttons.week", true),
|
|
962
|
+
day: get(o, "buttons.day", true),
|
|
963
|
+
}
|
|
964
|
+
};
|
|
965
|
+
this.appliedOptions = options;
|
|
966
|
+
// console.warn(`setOptions: `, this.appliedOptions);
|
|
945
967
|
};
|
|
946
968
|
NgxMatTuiCalendarComponent.prototype.setIOptions = function (ioptionsIn) {
|
|
947
969
|
var ioptions = this.preprocessIOptions(ioptionsIn);
|
|
948
|
-
this.calendar
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
970
|
+
if (this.calendar) {
|
|
971
|
+
this.calendar.setOptions(ioptions);
|
|
972
|
+
this.calendar.setTheme(ioptions.theme);
|
|
973
|
+
this.calendar.render(true);
|
|
974
|
+
this.calendar.toggleScheduleView(true);
|
|
975
|
+
}
|
|
952
976
|
return ioptions;
|
|
953
977
|
};
|
|
954
978
|
NgxMatTuiCalendarComponent.prototype.preprocessIOptions = function (ioptions) {
|
|
@@ -966,13 +990,6 @@
|
|
|
966
990
|
}
|
|
967
991
|
return ioptions;
|
|
968
992
|
};
|
|
969
|
-
NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
|
|
970
|
-
return {
|
|
971
|
-
darkMode: false,
|
|
972
|
-
themeClass: null,
|
|
973
|
-
ioptions: this.getDefaultIOptions(),
|
|
974
|
-
};
|
|
975
|
-
};
|
|
976
993
|
NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
|
|
977
994
|
return {
|
|
978
995
|
defaultView: 'month',
|
|
@@ -1132,7 +1149,7 @@
|
|
|
1132
1149
|
return NgxMatTuiCalendarComponent;
|
|
1133
1150
|
}());
|
|
1134
1151
|
NgxMatTuiCalendarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, deps: [{ token: i1__namespace.MatDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
1135
|
-
NgxMatTuiCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0__namespace, template: "<section class=\"content-container\">\r\n <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n <!-- The outer div gives the default color for when user does not provide an Angular theme -->\r\n <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-highlight\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-accent\"></div></div>\r\n <div style=\"color: red;\"> <div id=\"theme-warn\"></div></div>\r\n <div style=\"color: rgba(0, 0, 255, 0.2);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n \r\n <div class=\"calendar-container\">\r\n <!-- calendar titlebar -->\r\n <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n <!-- <div style=\"align-self: center;display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\"> -->\r\n <div style=\"display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 100%; \">\r\n <div class=\"left-div\">\r\n <!-- LEFT -->\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongPrev()\">\r\n <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n </button>\r\n <button mat-button
|
|
1152
|
+
NgxMatTuiCalendarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: NgxMatTuiCalendarComponent, selector: "ngx-mat-tui-calendar", inputs: { options: "options" }, outputs: { userCreatedSchedule: "userCreatedSchedule", userUpdatedSchedule: "userUpdatedSchedule", userDeletedSchedule: "userDeletedSchedule" }, usesOnChanges: true, ngImport: i0__namespace, template: "<section class=\"content-container\">\r\n <!-- These divs are here so that we can read the theme colors for the tui theme -->\r\n <!-- The outer div gives the default color for when user does not provide an Angular theme -->\r\n <div style=\"color: blue;\"> <div id=\"theme-primary\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-highlight\"></div></div>\r\n <div style=\"color: blue;\"> <div id=\"theme-accent\"></div></div>\r\n <div style=\"color: red;\"> <div id=\"theme-warn\"></div></div>\r\n <div style=\"color: rgba(0, 0, 255, 0.2);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n \r\n <div class=\"calendar-container\">\r\n <!-- calendar titlebar -->\r\n <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n <!-- <div style=\"align-self: center;display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\"> -->\r\n <div style=\"display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 100%; \">\r\n <div class=\"left-div\">\r\n <!-- LEFT -->\r\n <button mat-button *ngIf=\"appliedOptions.buttons.longPrevious\"\r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongPrev()\">\r\n <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.previous\"\r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarPrev()\">\r\n <fa-icon [icon]=\"iconPrev\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.today\"\r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;\" \r\n (click)=\"onCalendarToday()\">\r\n <fa-icon [icon]=\"iconToday\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.next\"\r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarNext()\">\r\n <fa-icon [icon]=\"iconNext\"></fa-icon>\r\n </button>\r\n <button mat-button *ngIf=\"appliedOptions.buttons.longNext\"\r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongNext()\">\r\n <fa-icon [icon]=\"iconLongNext\"></fa-icon>\r\n </button>\r\n </div>\r\n <div class=\"center-div\">\r\n <!-- CENTER -->\r\n <span class=\"event-calendar-title\">{{ getDate() }}</span>\r\n </div>\r\n <div class=\"right-div\">\r\n \r\n <!-- RIGHT -->\r\n <mat-button-toggle-group [hidden]=\"!appliedOptions.buttons.month && !appliedOptions.buttons.week && !appliedOptions.buttons.day\"\r\n class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n layout_height=\"wrap_content\">\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.month\" mat-button value=\"month\" class=\"view-button\" (click)=\"onMonthView()\">\r\n <fa-icon [icon]=\"iconByMonth\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.week\" mat-button value=\"week\" class=\"view-button\" (click)=\"onWeekView()\">\r\n <fa-icon [icon]=\"iconByWeek\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle *ngIf=\"appliedOptions.buttons.day\" mat-button value=\"day\" class=\"view-button\" (click)=\"onDayView()\">\r\n <fa-icon [icon]=\"iconByDay\"></fa-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </mat-toolbar>\r\n <ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>\r\n </div>\r\n \r\n </section>\r\n", styles: [".calendar-container{transform-origin:top left}.menu-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem!important}.mat-button{font-size:1.1rem!important}.mat-button.navigation-button{padding:0;min-width:32px}.left-div{width:33%;float:left;display:flex;white-space:nowrap;vertical-align:middle}.center-div{width:33%;float:right;text-align:center;white-space:nowrap;vertical-align:middle}.event-calendar-title{font-size:2rem;vertical-align:middle}.right-div{width:33%;display:flex;white-space:nowrap;vertical-align:middle;flex-flow:row-reverse}@media screen and (max-width: 599px){.left-div{transform:scale(.75);transform-origin:center left}.center-div{transform:scale(.5)}.right-div{transform:scale(1);transform-origin:center right}.right-div .mat-button-toggle-group.view-button{font-size:1.1rem!important}.right-div ::ng-deep .mat-button-toggle-label-content{padding:0 8px!important}}.mat-button-toggle-group.view-button{height:36px;font-size:1.25rem!important}.view-button{align-items:center}::ng-deep .mat-button-toggle-label-content{padding:0 10px!important}\n"], components: [{ type: i2__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4__namespace$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i9__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
|
|
1136
1153
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, decorators: [{
|
|
1137
1154
|
type: i0.Component,
|
|
1138
1155
|
args: [{
|