ngx-mat-tui-calendar 12.0.0 → 12.0.1
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 +46 -24
- package/bundles/ngx-mat-tui-calendar.umd.js.map +1 -1
- package/esm2015/lib/ngx-mat-tui-calendar.component.js +47 -25
- package/fesm2015/ngx-mat-tui-calendar.js +46 -24
- package/fesm2015/ngx-mat-tui-calendar.js.map +1 -1
- package/lib/ngx-mat-tui-calendar.component.d.ts +7 -4
- package/package.json +1 -1
- package/src/lib/ngx-mat-tui-calendar-wrapper/ngx-mat-tui-calendar-wrapper.component.theme.scss +0 -6
- package/src/lib/ngx-mat-tui-calendar.component.theme.scss +3 -0
|
@@ -651,9 +651,11 @@
|
|
|
651
651
|
this.colors = distinctColors__default["default"]({ lightMin: 70, count: 15 }).slice(1);
|
|
652
652
|
this.colorIndex = 0;
|
|
653
653
|
this.calendarId = uuid.v4();
|
|
654
|
+
this.appliedOptions = this.getDefaultOptions();
|
|
654
655
|
}
|
|
655
656
|
NgxMatTuiCalendarComponent.prototype.ngOnInit = function () {
|
|
656
|
-
|
|
657
|
+
console.warn("calendar.component.ts: ngOnit");
|
|
658
|
+
this.createTUICalendar();
|
|
657
659
|
this.bindCallbacks();
|
|
658
660
|
};
|
|
659
661
|
NgxMatTuiCalendarComponent.prototype.ngOnChanges = function (changes) {
|
|
@@ -662,13 +664,7 @@
|
|
|
662
664
|
if (changes.options) {
|
|
663
665
|
console.warn("change.option:", changes.options);
|
|
664
666
|
var options = changes.options.currentValue;
|
|
665
|
-
|
|
666
|
-
options.theme = this.getDefaultTheme();
|
|
667
|
-
}
|
|
668
|
-
console.warn("TUI theme:", options.theme);
|
|
669
|
-
this.calendar.setOptions(options.ioptions);
|
|
670
|
-
this.calendar.setTheme(options.theme);
|
|
671
|
-
this.calendar.render(true);
|
|
667
|
+
this.setOptions(options);
|
|
672
668
|
}
|
|
673
669
|
}
|
|
674
670
|
};
|
|
@@ -743,8 +739,11 @@
|
|
|
743
739
|
});
|
|
744
740
|
return str;
|
|
745
741
|
};
|
|
746
|
-
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function (
|
|
747
|
-
|
|
742
|
+
NgxMatTuiCalendarComponent.prototype.createTUICalendar = function () {
|
|
743
|
+
var ioptions = this.preprocessIOptions(null);
|
|
744
|
+
console.warn("calendar.component.ts: createTUICalendar: ioptions:", ioptions);
|
|
745
|
+
this.calendar = new Calendar__default["default"]('#calendar', ioptions);
|
|
746
|
+
console.warn("calendar.component.ts: createTUICalendar: this.calendar:", this.calendar);
|
|
748
747
|
};
|
|
749
748
|
NgxMatTuiCalendarComponent.prototype.bindCallbacks = function () {
|
|
750
749
|
this.bindAfterRenderSchedule();
|
|
@@ -911,9 +910,11 @@
|
|
|
911
910
|
var _this = this;
|
|
912
911
|
// console.log('openPopupScheduleEditor: calevent:', schedule);
|
|
913
912
|
var dialogConfig = new i1.MatDialogConfig();
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
913
|
+
if (this.appliedOptions.themeClass) {
|
|
914
|
+
dialogConfig.panelClass = this.appliedOptions.themeClass;
|
|
915
|
+
}
|
|
916
|
+
console.warn("options: ", this.appliedOptions);
|
|
917
|
+
dialogConfig.data = { schedule: schedule, darkMode: this.appliedOptions.darkMode, themeClass: this.appliedOptions.themeClass };
|
|
917
918
|
dialogConfig.autoFocus = true;
|
|
918
919
|
var dialogRef = this.dialog.open(NgxMatTuiCalendarEditorDialogComponent, dialogConfig);
|
|
919
920
|
// const dialogRef = this.dialog.open(NgxMatTuiCalendarScheduleEditorDialogComponent, {
|
|
@@ -941,21 +942,42 @@
|
|
|
941
942
|
});
|
|
942
943
|
};
|
|
943
944
|
NgxMatTuiCalendarComponent.prototype.setOptions = function (options) {
|
|
944
|
-
this.calendar.setOptions(this.prerocessOptions(options));
|
|
945
|
-
};
|
|
946
|
-
NgxMatTuiCalendarComponent.prototype.prerocessOptions = function (options) {
|
|
947
|
-
var defs = this.getDefaultOptions();
|
|
948
945
|
if (options == null) {
|
|
949
|
-
options =
|
|
946
|
+
options = this.getDefaultOptions();
|
|
947
|
+
}
|
|
948
|
+
options.ioptions = this.setIOptions(options.ioptions);
|
|
949
|
+
this.appliedOptions = Object.assign({}, options);
|
|
950
|
+
};
|
|
951
|
+
NgxMatTuiCalendarComponent.prototype.setIOptions = function (ioptionsIn) {
|
|
952
|
+
var ioptions = this.preprocessIOptions(ioptionsIn);
|
|
953
|
+
this.calendar.setOptions(ioptions);
|
|
954
|
+
this.calendar.setTheme(ioptions.theme);
|
|
955
|
+
this.calendar.render(true);
|
|
956
|
+
return ioptions;
|
|
957
|
+
};
|
|
958
|
+
NgxMatTuiCalendarComponent.prototype.preprocessIOptions = function (ioptions) {
|
|
959
|
+
var defs = this.getDefaultIOptions();
|
|
960
|
+
if (ioptions == null) {
|
|
961
|
+
ioptions = defs;
|
|
950
962
|
}
|
|
951
963
|
else {
|
|
952
|
-
|
|
964
|
+
ioptions = Object.assign(Object.assign({}, defs), ioptions);
|
|
965
|
+
}
|
|
966
|
+
ioptions.useCreationPopup = false;
|
|
967
|
+
ioptions.useDetailPopup = false;
|
|
968
|
+
if (!ioptions.theme) {
|
|
969
|
+
ioptions.theme = this.getDefaultTheme();
|
|
953
970
|
}
|
|
954
|
-
|
|
955
|
-
options.useDetailPopup = false;
|
|
956
|
-
return options;
|
|
971
|
+
return ioptions;
|
|
957
972
|
};
|
|
958
973
|
NgxMatTuiCalendarComponent.prototype.getDefaultOptions = function () {
|
|
974
|
+
return {
|
|
975
|
+
darkMode: false,
|
|
976
|
+
themeClass: null,
|
|
977
|
+
ioptions: this.getDefaultIOptions(),
|
|
978
|
+
};
|
|
979
|
+
};
|
|
980
|
+
NgxMatTuiCalendarComponent.prototype.getDefaultIOptions = function () {
|
|
959
981
|
return {
|
|
960
982
|
defaultView: 'month',
|
|
961
983
|
taskView: true,
|
|
@@ -983,7 +1005,7 @@
|
|
|
983
1005
|
var el = document.getElementById("theme-" + name);
|
|
984
1006
|
if (el) {
|
|
985
1007
|
var style = window.getComputedStyle(el, null);
|
|
986
|
-
console.warn("color:", style.color);
|
|
1008
|
+
console.warn("theme-" + name + " color:", style.color);
|
|
987
1009
|
return style.color;
|
|
988
1010
|
}
|
|
989
1011
|
return '';
|
|
@@ -1114,7 +1136,7 @@
|
|
|
1114
1136
|
return NgxMatTuiCalendarComponent;
|
|
1115
1137
|
}());
|
|
1116
1138
|
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 });
|
|
1117
|
-
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: "<
|
|
1139
|
+
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 <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__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4__namespace$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
|
|
1118
1140
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0__namespace, type: NgxMatTuiCalendarComponent, decorators: [{
|
|
1119
1141
|
type: i0.Component,
|
|
1120
1142
|
args: [{
|