ngx-mat-tui-calendar 1.0.0 → 12.0.3

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/README.md CHANGED
@@ -1,28 +1,33 @@
1
1
 
2
2
  ![ngx-mat-tui-calendar](https://user-images.githubusercontent.com/11559541/141514000-da6e6c8a-e00b-4f27-a8c2-b7f28538b2f0.png)
3
3
 
4
- [![Development Status](https://www.repostatus.org/badges/latest/wip.svg)](https://www.repostatus.org/#wip)
5
-
6
4
  [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+ [![Development Status](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)
7
6
  [![GitHub stars](https://img.shields.io/github/stars/ron2015schmitt/ngx-mat-tui-calendar.svg)](https://github.com/ron2015schmitt/ngx-mat-tui-calendar/stargazers)
8
7
  ![GitHub downloads all releases](https://img.shields.io/github/downloads/ron2015schmitt/ngx-mat-tui-calendar/total)
9
8
  ![GitHub release (latest by date)](https://img.shields.io/github/v/release/ron2015schmitt/ngx-mat-tui-calendar)
10
9
 
11
- ![npm](https://img.shields.io/npm/v/ngx-mat-tui-calendar?label=npm%20package)
10
+ [![npm](https://img.shields.io/npm/v/ngx-mat-tui-calendar?label=npm%20package)](https://www.npmjs.com/package/ngx-mat-tui-calendar)
12
11
  ![npm downloads](https://img.shields.io/npm/dt/ngx-mat-tui-calendar?label=npm%20downloads)
13
12
 
14
13
  # ngx-mat-tui-calendar
15
14
 
16
- ![#f03c15](https://via.placeholder.com/15/f03c15/000000?text=+) `Work In Progress`
17
- This project is an Angular, Material Design wrapper for the [Toast UI Calendar](https://github.com/nhn/tui.calendar).
15
+ This project is an [Angular](https://angular.io/), [Material Design](https://material.angular.io/) wrapper for the [Toast UI Calendar](https://github.com/nhn/tui.calendar), published via [![npm-logo_1-tiny](https://user-images.githubusercontent.com/11559541/144652561-1593db94-2901-43db-aa9c-80616f4eab0f.png)
16
+ ](https://www.npmjs.com/package/ngx-mat-tui-calendar).
17
+
18
18
  * Material Design theming
19
19
  * Material Design buttons and dialog
20
20
  * Responsive to mobile devices
21
21
  * Dark mode in progress...
22
22
 
23
- This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.3.
23
+ This repo contains two projects:
24
+ 1. the npm library called `ngx-mat-tui-calendar`, located in `projects/ngx-mat-tui-calendar`
25
+ 2. the demo app, located in `src`
26
+
27
+ The top-level `angular.json` and `package.json` files are used for building both projects.
28
+
29
+ This repo was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.2.3. Angular ^12.2 requires node ^v14.15 (npm ^v6.14).
24
30
 
25
- Using Angular 12 which requires node ^v14.15 (npm ^v6.14)
26
31
 
27
32
  # UI
28
33
  ## Month View
@@ -48,32 +53,32 @@ npm i --save ngx-mat-tui-calendar
48
53
  Next import the module into your app's ```app.module.ts```:
49
54
  ```typescript
50
55
  import {NgxMatTuiCalendarModule} from 'ngx-mat-tui-calendar';
51
-
52
- @NgModule({
53
- imports: [NgxMatTuiCalendarModule]
54
- })
55
-
56
56
  ```
57
+ Then add `NgxMatTuiCalendarModule` to your list of NgModule imports, in ```app.module.ts```
57
58
 
58
59
  Insert the following HTML into one of your app's template files
59
60
  ```angular2html
60
61
  <mat-tui-calendar></mat-tui-calendar>
61
62
  ```
62
63
 
64
+ ## Quickstart Project
65
+ *TODO*
66
+
63
67
  ## Demo Project
68
+ *TODO*
64
69
 
65
- ## Stackblitz
70
+ ### Stackblitz
71
+ *TODO*
66
72
 
67
73
  # Documentation
68
74
 
69
75
  ## MatTuiCalendar
70
76
 
71
- Directive responsible for managing the timepicker popup and setting value to input
72
77
 
73
- Selector: `mat-tui-calendar`
78
+ Selector: `ngx-mat-tui-calendar`
74
79
 
75
80
  ```typescript
76
- <mat-tui-calendar #tuiCalendar
81
+ <ngx-mat-tui-calendar #tuiCalendar
77
82
  (userCreatedSchedule)="onUserCreatedSchedule($event)"
78
83
  (userUpdatedSchedule)="onUserUpdatedSchedule($event)"
79
84
  (userDeletedSchedule)="onUserDeletedSchedule($event)"
@@ -86,45 +91,62 @@ Selector: `mat-tui-calendar`
86
91
  | Name | Description |
87
92
  |------|-------------|
88
93
  | @Input()
89
- ngxMatTimepicker: NgxMatTimepickerComponent | The timepicker that this input is associated with. |
90
- | @Input()
91
- color: ThemePalette | The material palette to use. |
92
- | @Input()
93
- disabled: boolean | Weather the timepicker popup should be disabled. |
94
- | @Input()
95
- value: string | Set a default value and time for a timepicker. The format of the time is in 12 hours notation `11:00 PM` or in 24 hours notation `23:00`. A Date string won't work. |
96
- | @Input()
97
- format: number | `12` or `24` . 12h/24h view for hour selection clock . `12` (AM/PM) format by default. |
98
- | @Input()
99
- min: string or DateTime | Set min time for timepicker (`11:15 pm` ) |
100
- | @Input()
101
- max: string or DateTime | Set max time for timepicker (`11:15 pm` ) |
102
- | @Input()
103
- disableClick: boolean | Set `true` to disable opening timepicker by clicking on the input |
94
+ options: CalendarOptions | The options object for the calendar. |
95
+ | @Output()
96
+ userCreatedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user creates a new "schedule" (ie calendar task). |
97
+ | @Output()
98
+ userUpdatedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user updates a "schedule" (ie calendar task). |
99
+ | @Output()
100
+ userDeletedSchedule: EventEmitter<ISchedule> | Event emitter that emits when the user deletes a "schedule" (ie calendar task). |
104
101
 
105
102
 
106
103
  # Development
107
104
 
108
- ## Development server
105
+ ## library package for ngx-mat-tui-calendar
106
+
107
+ The code that makes up the npm package is located in folder ```projects/ngx-mat-tui-calendar```.
108
+
109
+ After making changes, increment the version in ```projects/ngx-mat-tui-calendar/package.json```. We use the convention that the major version number corresponds to the major version of Angular used. The minor and patch versions are specific to this package.
110
+
111
+ The top-level `angular.json` file defines the build process for the library. The top-level `package.json` must include all the peer dependencies in `projects/ngx-mat-tui-calendar/package.json`.
109
112
 
110
- Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
113
+ ### API
111
114
 
112
- ## Code scaffolding
115
+ The API is defined in ```projects/ngx-mat-tui-calendar/src/public-api.ts```.
113
116
 
114
- Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
117
+ ### Build
115
118
 
116
- ## Build
119
+ Run `ng build` to build the project. The build artifacts will be stored in the `dist/ngx-mat-tui-calendar` directory.
117
120
 
118
- Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
121
+ ### README
119
122
 
120
- ## Running unit tests
123
+ The main README file (`README.md`) and the package README file (`projects/ngx-mat-tui-calendar/README.md`) must be manually kept in sync: if you change one, then copy the change to the other.
121
124
 
122
- Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
125
+ ### Publish package to https://npmjs.com/
126
+
127
+ Change directories to the `dist/ngx-mat-tui-calendar` directory and run the following:
128
+ ```bash
129
+ npm login
130
+ npm publish
131
+ ```
123
132
 
124
- ## Running end-to-end tests
133
+ ### publish source to github
134
+
135
+ Commit your changes and push to github.com. Then create a tab and release on github that matches the npm version number.
136
+
137
+
138
+ ## Demo App
139
+ ### Development server
140
+
141
+ The demo app is defined by the top-level `package.json` file, the top-level `angular.json` file and the contents of the `src` folder.
142
+
143
+ Run `ng serve demo` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
144
+
145
+ However, if you change the library files, in directory `projects/ngx-mat-tui-calendar`, you need to
146
+ 1. Rebuild the library using `ng build`
147
+ 2. Kill the dev server by typing `Ctrl-C` in the terminal where you are running `ng serve demo`
148
+ 3. Run `ng serve demo` to restart the dev server
125
149
 
126
- Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
150
+ *Step 2 is usually necessary! You will get spurious errors without killing and restarting the server.*
127
151
 
128
- ## Further help
129
152
 
130
- To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
@@ -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
- this.createTUICalendar(null);
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
- if (!options.theme) {
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 (options) {
747
- this.calendar = new Calendar__default["default"]('#calendar', this.prerocessOptions(options));
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
- dialogConfig.panelClass = this.options.themeClass;
915
- console.warn("options: ", this.options);
916
- dialogConfig.data = { schedule: schedule, darkMode: this.options.darkMode, themeClass: this.options.themeClass };
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 = defs;
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
- options = Object.assign(Object.assign({}, defs), options);
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
- options.useCreationPopup = false;
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: "<p>\r\n ngx-mat-tui-calendar v0.0.15 works!!!\r\n</p>\r\n<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 id=\"theme-primary\"></div>\r\n <div id=\"theme-primary-shaded\"></div>\r\n <div id=\"theme-highlight\"></div>\r\n <div id=\"theme-accent\"></div>\r\n <div id=\"theme-warn\"></div>\r\n <div id=\"theme-foreground\"></div>\r\n <div id=\"theme-divider\"></div>\r\n <div id=\"theme-background\"></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"] }] });
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 <!-- 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.308);\"> <div id=\"theme-primary-shaded\"></div></div>\r\n <div style=\"color: #3e3e3e;\"> <div id=\"theme-foreground\"></div></div>\r\n <div style=\"color: #e0e0e0;\"> <div id=\"theme-divider\"></div></div>\r\n <div style=\"color: white;\"> <div id=\"theme-background\"></div></div>\r\n \r\n <div class=\"calendar-container\">\r\n <!-- calendar titlebar -->\r\n <mat-toolbar class=\"menu-bar\" color=\"primary\">\r\n <!-- <div style=\"align-self: center;display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\"> -->\r\n <div style=\"display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 100%; \">\r\n <div class=\"left-div\">\r\n <!-- LEFT -->\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongPrev()\">\r\n <fa-icon [icon]=\"iconLongPrev\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarPrev()\">\r\n <fa-icon [icon]=\"iconPrev\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.7rem !important;\" \r\n (click)=\"onCalendarToday()\">\r\n <fa-icon [icon]=\"iconToday\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\" \r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 2rem !important;\" \r\n (click)=\"onCalendarNext()\">\r\n <fa-icon [icon]=\"iconNext\"></fa-icon>\r\n </button>\r\n <button mat-button \r\n class=\"navigation-button\"\r\n style=\"margin-left: 0px; margin-right: 0px; font-size: 1.5rem !important;\" \r\n (click)=\"onCalendarLongNext()\">\r\n <fa-icon [icon]=\"iconLongNext\"></fa-icon>\r\n </button>\r\n </div>\r\n <div class=\"center-div\">\r\n <!-- CENTER -->\r\n <span class=\"event-calendar-title\">{{ getDate() }}</span>\r\n </div>\r\n <div class=\"right-div\">\r\n \r\n <!-- RIGHT -->\r\n <mat-button-toggle-group class=\"view-button\" value=\"month\" id=\"@+id/toggleButton\" layout_width=\"wrap_content\"\r\n layout_height=\"wrap_content\">\r\n <mat-button-toggle mat-button value=\"month\" class=\"view-button\" (click)=\"onMonthView()\">\r\n <fa-icon [icon]=\"iconByMonth\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle mat-button value=\"week\" class=\"view-button\" (click)=\"onWeekView()\">\r\n <fa-icon [icon]=\"iconByWeek\"></fa-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle mat-button value=\"day\" class=\"view-button\" (click)=\"onDayView()\">\r\n <fa-icon [icon]=\"iconByDay\"></fa-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n </div>\r\n </div>\r\n </mat-toolbar>\r\n <ngx-mat-tui-calendar-wrapper></ngx-mat-tui-calendar-wrapper>\r\n </div>\r\n \r\n </section>\r\n", styles: [".calendar-container{transform-origin:top left}.menu-bar{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:2rem!important}.mat-button{font-size:1.1rem!important}.mat-button.navigation-button{padding:0;min-width:32px}.left-div{width:33%;float:left;display:flex;white-space:nowrap;vertical-align:middle}.center-div{width:33%;float:right;text-align:center;white-space:nowrap;vertical-align:middle}.event-calendar-title{font-size:2rem;vertical-align:middle}.right-div{width:33%;display:flex;white-space:nowrap;vertical-align:middle;flex-flow:row-reverse}@media screen and (max-width: 599px){.left-div{transform:scale(.75);transform-origin:center left}.center-div{transform:scale(.5)}.right-div{transform:scale(1);transform-origin:center right}.right-div .mat-button-toggle-group.view-button{font-size:1.1rem!important}.right-div ::ng-deep .mat-button-toggle-label-content{padding:0 8px!important}}.mat-button-toggle-group.view-button{height:36px;font-size:1.25rem!important}.view-button{align-items:center}::ng-deep .mat-button-toggle-label-content{padding:0 10px!important}\n"], components: [{ type: i2__namespace$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i6__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4__namespace$1.FaIconComponent, selector: "fa-icon", inputs: ["classes", "icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { type: i5__namespace$1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-labelledby", "tabIndex", "appearance", "checked", "disabled", "id", "name", "aria-label", "value"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { type: NgxMatTuiCalendarWrapperComponent, selector: "ngx-mat-tui-calendar-wrapper" }], directives: [{ type: i5__namespace$1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }] });
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: [{