@smart-solutions-tech/smart-angular-calendar 0.0.17 → 0.0.18

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.
Files changed (19) hide show
  1. package/esm2020/lib/components/calendar/calendar.component.mjs +5 -3
  2. package/esm2020/lib/components/calendar-event/calendar-event.component.mjs +7 -3
  3. package/esm2020/lib/components/day/day.component.mjs +5 -3
  4. package/esm2020/lib/components/duration-event/duration-event.component.mjs +6 -2
  5. package/esm2020/lib/components/more-events-modal/more-events-modal.component.mjs +8 -3
  6. package/esm2020/lib/components/smart-calendar/smart-calendar.component.mjs +6 -3
  7. package/esm2020/lib/components/week/week.component.mjs +5 -3
  8. package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs +35 -13
  9. package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
  10. package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs +35 -13
  11. package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs.map +1 -1
  12. package/lib/components/calendar/calendar.component.d.ts +2 -1
  13. package/lib/components/calendar-event/calendar-event.component.d.ts +3 -1
  14. package/lib/components/day/day.component.d.ts +2 -1
  15. package/lib/components/duration-event/duration-event.component.d.ts +3 -1
  16. package/lib/components/more-events-modal/more-events-modal.component.d.ts +3 -1
  17. package/lib/components/smart-calendar/smart-calendar.component.d.ts +2 -1
  18. package/lib/components/week/week.component.d.ts +2 -1
  19. package/package.json +1 -1
package/fesm2020/smart-solutions-tech-smart-angular-calendar.mjs CHANGED
@@ -127,21 +127,25 @@ class CalendarEventComponent {
127
127
  constructor() {
128
128
  this.eventClick = new EventEmitter();
129
129
  this.isDarkColor = false;
130
+ this.isDarkTagColor = false;
130
131
  }
131
132
  ngOnInit() {
132
133
  this.isDarkColor = isDarkColor(this.event.color || '#000000');
134
+ this.isDarkTagColor = isDarkColor(this.tagColor || '#000000');
133
135
  }
134
136
  onEventClick(event) {
135
137
  this.eventClick.emit(event);
136
138
  }
137
139
  }
138
140
  CalendarEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
139
- CalendarEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: { event: "event" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.calendar-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
141
+ CalendarEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: { event: "event", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"tag\" *ngIf=\"event.meta.tag\" [style]=\"{backgroundColor:tagColor}\"\r\n [ngClass]=\"{'dark-color': isDarkTagColor}\">{{ event.meta.tag }}</div>\r\n\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;display:flex;align-items:center;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121;overflow:hidden}.calendar-event-component.dark-color{color:#fafafa}.event-title{flex:1 1 auto;padding:2px 8px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag{flex-shrink:0;width:36px;padding:2px 0;font-size:12px;font-weight:500;text-align:center}.tag.dark-color{color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
140
142
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, decorators: [{
141
143
  type: Component,
142
- args: [{ selector: 'lib-calendar-event', template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.calendar-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
144
+ args: [{ selector: 'lib-calendar-event', template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n [title]=\"event.title\" (click)=\"onEventClick(event)\">\r\n <div class=\"tag\" *ngIf=\"event.meta.tag\" [style]=\"{backgroundColor:tagColor}\"\r\n [ngClass]=\"{'dark-color': isDarkTagColor}\">{{ event.meta.tag }}</div>\r\n\r\n <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;display:flex;align-items:center;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121;overflow:hidden}.calendar-event-component.dark-color{color:#fafafa}.event-title{flex:1 1 auto;padding:2px 8px;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tag{flex-shrink:0;width:36px;padding:2px 0;font-size:12px;font-weight:500;text-align:center}.tag.dark-color{color:#fafafa}\n"] }]
143
145
  }], ctorParameters: function () { return []; }, propDecorators: { event: [{
144
146
  type: Input
147
+ }], tagColor: [{
148
+ type: Input
145
149
  }], eventClick: [{
146
150
  type: Output
147
151
  }] } });
@@ -174,6 +178,9 @@ class MoreEventsModalComponent {
174
178
  isDarkColor(color) {
175
179
  return isDarkColor(color || '#ffffff');
176
180
  }
181
+ isTagColorDark() {
182
+ return isDarkColor(this.tagColor || '#ffffff');
183
+ }
177
184
  onClose() {
178
185
  this.close.emit();
179
186
  }
@@ -182,14 +189,16 @@ class MoreEventsModalComponent {
182
189
  }
183
190
  }
184
191
  MoreEventsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
185
- MoreEventsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: { events: "events", date: "date" }, outputs: { close: "close", eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;padding:8px;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none}.events-list .event-item.is-dark{color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
192
+ MoreEventsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: { events: "events", date: "date", tagColor: "tagColor" }, outputs: { close: "close", eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"tag\" *ngIf=\"event.meta.tag\" [ngClass]=\"{'is-dark': isTagColorDark()}\"\n [style.background-color]=\"tagColor\">{{ event.meta.tag }}</div>\n\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;align-items:center;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.events-list .event-item.is-dark{color:#fafafa}.events-list .event-item .tag{flex-shrink:0;width:56px;padding:8px 0;text-align:center}.events-list .event-item .event-title{flex:1 1 auto;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
186
193
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, decorators: [{
187
194
  type: Component,
188
- args: [{ selector: 'lib-more-events-modal', template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;padding:8px;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none}.events-list .event-item.is-dark{color:#fafafa}\n"] }]
195
+ args: [{ selector: 'lib-more-events-modal', template: "<div class=\"more-events-modal-component\">\n <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n <div class=\"modal\">\n <div class=\"header\">\n <div class=\"title\">{{'moreEvents' | translate}}</div>\n <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n <button class=\"btn-close\" (click)=\"onClose()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n class=\"feather feather-x\" fill=\"yellow\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n </div>\n\n <div class=\"events-list\">\n <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n <div class=\"tag\" *ngIf=\"event.meta.tag\" [ngClass]=\"{'is-dark': isTagColorDark()}\"\n [style.background-color]=\"tagColor\">{{ event.meta.tag }}</div>\n\n <div class=\"event-title\">{{ event.title }}</div>\n </div>\n </div>\n </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;align-items:center;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden}.events-list .event-item.is-dark{color:#fafafa}.events-list .event-item .tag{flex-shrink:0;width:56px;padding:8px 0;text-align:center}.events-list .event-item .event-title{flex:1 1 auto;padding:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
189
196
  }], ctorParameters: function () { return []; }, propDecorators: { events: [{
190
197
  type: Input
191
198
  }], date: [{
192
199
  type: Input
200
+ }], tagColor: [{
201
+ type: Input
193
202
  }], close: [{
194
203
  type: Output
195
204
  }], eventClick: [{
@@ -330,16 +339,18 @@ class CalendarComponent {
330
339
  }
331
340
  }
332
341
  CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
333
- CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt" }, outputs: { eventClick: "eventClick" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-component\">\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\" [event]=\"event\"\r\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"onEventClick($event, true)\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: ["events", "date"], outputs: ["close", "eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
342
+ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-component\">\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\" [event]=\"event\"\r\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [tagColor]=\"tagColor\" [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"onEventClick($event, true)\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: ["events", "date", "tagColor"], outputs: ["close", "eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
334
343
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
335
344
  type: Component,
336
- args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\" [event]=\"event\"\r\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"onEventClick($event, true)\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"] }]
345
+ args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n <div class=\"body\" #calendarBody>\r\n <div class=\"week-days\">\r\n <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n {{ day.tag | translate | slice:0:3 }}\r\n </div>\r\n </div>\r\n\r\n <div class=\"days-grid\">\r\n <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n <div class=\"day-number\">\r\n {{ day.date.getDate() }}\r\n </div>\r\n\r\n <div class=\"events-list\">\r\n <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\" [event]=\"event\"\r\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\r\n\r\n <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"footer\">\r\n Footer\r\n </div>\r\n\r\n <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n [tagColor]=\"tagColor\" [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n (eventClick)=\"onEventClick($event, true)\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"] }]
337
346
  }], ctorParameters: function () { return []; }, propDecorators: { currentMonth: [{
338
347
  type: Input
339
348
  }], events: [{
340
349
  type: Input
341
350
  }], startAt: [{
342
351
  type: Input
352
+ }], tagColor: [{
353
+ type: Input
343
354
  }], eventClick: [{
344
355
  type: Output
345
356
  }], calendarRef: [{
@@ -449,6 +460,7 @@ class DurationEventComponent {
449
460
  constructor() {
450
461
  this.eventClick = new EventEmitter();
451
462
  this.isDarkColor = false;
463
+ this.isDarkTagColor = false;
452
464
  this.topPosition = 0;
453
465
  this.height = 0;
454
466
  this.isEventStartInThisDay = false;
@@ -456,6 +468,7 @@ class DurationEventComponent {
456
468
  }
457
469
  ngOnInit() {
458
470
  this.isDarkColor = isDarkColor(this.event.color || '#000000');
471
+ this.isDarkTagColor = isDarkColor(this.tagColor || '#000000');
459
472
  this.isEventStartInThisDay = this.getIsEventStartInThisDay();
460
473
  this.isEventEndInThisDay = this.getIsEventEndInThisDay();
461
474
  this.topPosition = this.getTopPosition();
@@ -491,7 +504,7 @@ class DurationEventComponent {
491
504
  }
492
505
  }
493
506
  DurationEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DurationEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
494
- DurationEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DurationEventComponent, selector: "lib-duration-event", inputs: { event: "event", date: "date" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"duration-event-component\" style=\"--color: {{ event.color }};\" [style.top.px]=\"topPosition\"\n [style.height.px]=\"height\" [ngClass]=\"{'dark-color': isDarkColor}\" [title]=\"event.title\" (click)=\"onEventClick()\">\n <div class=\"event-title\">{{ event.title }}</div>\n</div>", styles: [".duration-event-component{position:absolute;left:0;z-index:1;width:100%;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.duration-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
507
+ DurationEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DurationEventComponent, selector: "lib-duration-event", inputs: { event: "event", date: "date", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"duration-event-component\" style=\"--color: {{ event.color }};\" [style.top.px]=\"topPosition\"\n [style.height.px]=\"height\" [ngClass]=\"{'dark-color': isDarkColor}\" [title]=\"event.title\" (click)=\"onEventClick()\">\n <div class=\"event-title\">{{ event.title }}</div>\n</div>", styles: [".duration-event-component{position:absolute;left:0;z-index:1;width:100%;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.duration-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
495
508
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DurationEventComponent, decorators: [{
496
509
  type: Component,
497
510
  args: [{ selector: 'lib-duration-event', template: "<div class=\"duration-event-component\" style=\"--color: {{ event.color }};\" [style.top.px]=\"topPosition\"\n [style.height.px]=\"height\" [ngClass]=\"{'dark-color': isDarkColor}\" [title]=\"event.title\" (click)=\"onEventClick()\">\n <div class=\"event-title\">{{ event.title }}</div>\n</div>", styles: [".duration-event-component{position:absolute;left:0;z-index:1;width:100%;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.duration-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
@@ -499,6 +512,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
499
512
  type: Input
500
513
  }], date: [{
501
514
  type: Input
515
+ }], tagColor: [{
516
+ type: Input
502
517
  }], eventClick: [{
503
518
  type: Output
504
519
  }] } });
@@ -583,14 +598,16 @@ class DayComponent {
583
598
  }
584
599
  }
585
600
  DayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
586
- DayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DayComponent, selector: "lib-day", inputs: { events: "events", date: "date" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
601
+ DayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DayComponent, selector: "lib-day", inputs: { events: "events", date: "date", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date", "tagColor"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
587
602
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DayComponent, decorators: [{
588
603
  type: Component,
589
- args: [{ selector: 'lib-day', template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
604
+ args: [{ selector: 'lib-day', template: "<div class=\"day-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"events-container\">\n <lib-calendar-event *ngFor=\"let event of allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n\n <div class=\"events-container\" [style.gridTemplateColumns]=\"'repeat(' + eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.day-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow:auto}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .events-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px;padding:4px}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:flex;flex-direction:column}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
590
605
  }], ctorParameters: function () { return []; }, propDecorators: { events: [{
591
606
  type: Input
592
607
  }], date: [{
593
608
  type: Input
609
+ }], tagColor: [{
610
+ type: Input
594
611
  }], eventClick: [{
595
612
  type: Output
596
613
  }] } });
@@ -722,16 +739,18 @@ class WeekComponent {
722
739
  }
723
740
  }
724
741
  WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
725
- WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
742
+ WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate", tagColor: "tagColor" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date", "tagColor"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
726
743
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, decorators: [{
727
744
  type: Component,
728
- args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
745
+ args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n <div class=\"header\">\n {{'allDayEvents' | translate}}\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n </div>\n\n <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n </div>\n </div>\n </section>\n\n <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n <section class=\"duration-events\">\n <div class=\"hour-blocks\">\n <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n <span>{{ hour }}:00</span>\n </div>\n </div>\n\n <div class=\"events-wrapper\">\n <div class=\"time-blocks\">\n <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n <div class=\"time-block-middle\"></div>\n </div>\n </div>\n </div>\n\n <div class=\"days-container\">\n <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n </div>\n </div>\n </div>\n </div>\n </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
729
746
  }], ctorParameters: function () { return []; }, propDecorators: { startAt: [{
730
747
  type: Input
731
748
  }], events: [{
732
749
  type: Input
733
750
  }], startDate: [{
734
751
  type: Input
752
+ }], tagColor: [{
753
+ type: Input
735
754
  }], eventClick: [{
736
755
  type: Output
737
756
  }] } });
@@ -747,6 +766,7 @@ class SmartCalendarComponent {
747
766
  };
748
767
  this.events = [];
749
768
  this.lang = 'en';
769
+ this.tagColor = '#007bff';
750
770
  this.monthChange = new EventEmitter();
751
771
  this.dateChanged = new EventEmitter();
752
772
  this.eventClick = new EventEmitter();
@@ -992,10 +1012,10 @@ class SmartCalendarComponent {
992
1012
  }
993
1013
  }
994
1014
  SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Component });
995
- SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", startAt: "startAt", currentMonth: "currentMonth", events: "events", lang: "lang" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'goToToday' | translate}}</button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative;display:flex;align-items:center}.header .date-selector-container .btn-prev,.header .date-selector-container .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .date-selector-container .btn-prev:hover,.header .date-selector-container .btn-next:hover{background-color:#eee}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "lib-calendar", inputs: ["currentMonth", "events", "startAt"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
1015
+ SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", startAt: "startAt", currentMonth: "currentMonth", events: "events", lang: "lang", tagColor: "tagColor" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'goToToday' | translate}}</button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative;display:flex;align-items:center}.header .date-selector-container .btn-prev,.header .date-selector-container .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .date-selector-container .btn-prev:hover,.header .date-selector-container .btn-next:hover{background-color:#eee}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarComponent, selector: "lib-calendar", inputs: ["currentMonth", "events", "startAt", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date", "tagColor"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate", "tagColor"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
996
1016
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
997
1017
  type: Component,
998
- args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'goToToday' | translate}}</button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative;display:flex;align-items:center}.header .date-selector-container .btn-prev,.header .date-selector-container .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .date-selector-container .btn-prev:hover,.header .date-selector-container .btn-next:hover{background-color:#eee}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"] }]
1018
+ args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n <div class=\"header\">\n <div class=\"nav-controls\">\n <button class=\"btn-today\" (click)=\"goToToday()\">{{'goToToday' | translate}}</button>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"date-selector-container\">\n <button class=\"btn-prev\" (click)=\"onPrev()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n </svg>\n </button>\n\n <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\n <span *ngIf=\"mode === 'week'\">\n {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n </span>\n <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M480-360 280-560h400L480-360Z\" />\n </svg>\n </button>\n\n <button class=\"btn-next\" (click)=\"onNext()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n </svg>\n </button>\n\n <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n <lib-month-selector [selectedMonth]=\"currentMonth\"\n (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n </div>\n </div>\n\n <div class=\"spacer\"></div>\n\n <div class=\"view-selector\">\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n <!-- month view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n <!-- week view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n </svg>\n </button>\n\n <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n <!-- day view -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n fill=\"currentColor\">\n <path\n d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n </svg>\n </button>\n </div>\n </div>\n\n <div class=\"view-container\">\n <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n [tagColor]=\"tagColor\" (eventClick)=\"onEventClick($event)\"></lib-week>\n\n <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\" [tagColor]=\"tagColor\"\n (eventClick)=\"onEventClick($event)\"></lib-day>\n </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative;display:flex;align-items:center}.header .date-selector-container .btn-prev,.header .date-selector-container .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .date-selector-container .btn-prev:hover,.header .date-selector-container .btn-next:hover{background-color:#eee}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.view-container{flex:1 1 auto;overflow:hidden}\n"] }]
999
1019
  }], ctorParameters: function () { return [{ type: TranslationService }]; }, propDecorators: { mode: [{
1000
1020
  type: Input
1001
1021
  }], startAt: [{
@@ -1006,6 +1026,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
1006
1026
  type: Input
1007
1027
  }], lang: [{
1008
1028
  type: Input
1029
+ }], tagColor: [{
1030
+ type: Input
1009
1031
  }], monthChange: [{
1010
1032
  type: Output
1011
1033
  }], dateChanged: [{