ngx-mat-tui-calendar 12.0.0 → 12.0.4

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
@@ -20,13 +20,13 @@ This project is an [Angular](https://angular.io/), [Material Design](https://mat
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.
24
-
25
- Curently using Angular ^12.2, which requires node ^v14.15 (npm ^v6.14).
26
-
27
-
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`
28
26
 
27
+ The top-level `angular.json` and `package.json` files are used for building both projects.
29
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).
30
30
 
31
31
 
32
32
  # UI
@@ -53,32 +53,32 @@ npm i --save ngx-mat-tui-calendar
53
53
  Next import the module into your app's ```app.module.ts```:
54
54
  ```typescript
55
55
  import {NgxMatTuiCalendarModule} from 'ngx-mat-tui-calendar';
56
-
57
- @NgModule({
58
- imports: [NgxMatTuiCalendarModule]
59
- })
60
-
61
56
  ```
57
+ Then add `NgxMatTuiCalendarModule` to your list of NgModule imports, in ```app.module.ts```
62
58
 
63
59
  Insert the following HTML into one of your app's template files
64
60
  ```angular2html
65
61
  <mat-tui-calendar></mat-tui-calendar>
66
62
  ```
67
63
 
64
+ ## Quickstart Project
65
+ *TODO*
66
+
68
67
  ## Demo Project
68
+ *TODO*
69
69
 
70
- ## Stackblitz
70
+ ### Stackblitz
71
+ *TODO*
71
72
 
72
73
  # Documentation
73
74
 
74
75
  ## MatTuiCalendar
75
76
 
76
- Directive responsible for managing the timepicker popup and setting value to input
77
77
 
78
- Selector: `mat-tui-calendar`
78
+ Selector: `ngx-mat-tui-calendar`
79
79
 
80
80
  ```typescript
81
- <mat-tui-calendar #tuiCalendar
81
+ <ngx-mat-tui-calendar #tuiCalendar
82
82
  (userCreatedSchedule)="onUserCreatedSchedule($event)"
83
83
  (userUpdatedSchedule)="onUserUpdatedSchedule($event)"
84
84
  (userDeletedSchedule)="onUserDeletedSchedule($event)"
@@ -91,45 +91,62 @@ Selector: `mat-tui-calendar`
91
91
  | Name | Description |
92
92
  |------|-------------|
93
93
  | @Input()
94
- ngxMatTimepicker: NgxMatTimepickerComponent | The timepicker that this input is associated with. |
95
- | @Input()
96
- color: ThemePalette | The material palette to use. |
97
- | @Input()
98
- disabled: boolean | Weather the timepicker popup should be disabled. |
99
- | @Input()
100
- 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. |
101
- | @Input()
102
- format: number | `12` or `24` . 12h/24h view for hour selection clock . `12` (AM/PM) format by default. |
103
- | @Input()
104
- min: string or DateTime | Set min time for timepicker (`11:15 pm` ) |
105
- | @Input()
106
- max: string or DateTime | Set max time for timepicker (`11:15 pm` ) |
107
- | @Input()
108
- 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). |
109
101
 
110
102
 
111
103
  # Development
112
104
 
113
- ## Development server
105
+ ## library package for ngx-mat-tui-calendar
114
106
 
115
- 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.
107
+ The code that makes up the npm package is located in folder ```projects/ngx-mat-tui-calendar```.
116
108
 
117
- ## Code scaffolding
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`.
112
+
113
+ ### API
114
+
115
+ The API is defined in ```projects/ngx-mat-tui-calendar/src/public-api.ts```.
116
+
117
+ ### Build
118
+
119
+ Run `ng build` to build the project. The build artifacts will be stored in the `dist/ngx-mat-tui-calendar` directory.
120
+
121
+ ### README
118
122
 
119
- 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`.
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.
120
124
 
121
- ## Build
125
+ ### Publish package to https://npmjs.com/
122
126
 
123
- Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
127
+ Change directories to the `dist/ngx-mat-tui-calendar` directory and run the following:
128
+ ```bash
129
+ npm login
130
+ npm publish
131
+ ```
132
+
133
+ ### publish source to github
124
134
 
125
- ## Running unit tests
135
+ Commit your changes and push to github.com. Then create a tab and release on github that matches the npm version number.
126
136
 
127
- Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
128
137
 
129
- ## Running end-to-end tests
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
130
149
 
131
- 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.*
132
151
 
133
- ## Further help
134
152
 
135
- 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.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 \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: [{