@smart-solutions-tech/smart-angular-calendar 0.0.2 → 0.0.4

package/fesm2015/smart-solutions-tech-smart-angular-calendar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Pipe, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import { Injectable, Component, Input, Pipe, EventEmitter, Output, ViewChild, HostListener, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -54,6 +54,20 @@ const TRANSLATIONS = {
         thu: 'Thursday',
         fri: 'Friday',
         sat: 'Saturday',
+        today: 'Today',
+        allDayEvents: 'All-day events',
+        january: 'January',
+        february: 'February',
+        march: 'March',
+        april: 'April',
+        may: 'May',
+        june: 'June',
+        july: 'July',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December',
         moreEvents: 'More events',
         nMoreEvents: '{{n}} More events'
     },
@@ -65,9 +79,37 @@ const TRANSLATIONS = {
         thu: 'Jueves',
         fri: 'Viernes',
         sat: 'Sábado',
+        today: 'Hoy',
+        allDayEvents: 'Eventos de todo el día',
+        january: 'Enero',
+        february: 'Febrero',
+        march: 'Marzo',
+        april: 'Abril',
+        may: 'Mayo',
+        june: 'Junio',
+        july: 'Julio',
+        august: 'Agosto',
+        september: 'Septiembre',
+        october: 'Octubre',
+        november: 'Noviembre',
+        december: 'Diciembre',
         moreEvents: 'Más eventos',
         nMoreEvents: '{{n}} Eventos más'
     },
+};
+const MONTHS = {
+    1: 'january',
+    2: 'february',
+    3: 'march',
+    4: 'april',
+    5: 'may',
+    6: 'june',
+    7: 'july',
+    8: 'august',
+    9: 'september',
+    10: 'october',
+    11: 'november',
+    12: 'december'
 };
 
 class TranslationService {
@@ -132,10 +174,10 @@ class MoreEventsModalComponent {
     }
 }
 MoreEventsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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:100vw;height:100vh;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:80vh;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" }] });
+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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, decorators: [{
             type: Component,
-            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:100vw;height:100vh;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:80vh;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"] }]
+            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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { events: [{
                 type: Input
             }], date: [{
@@ -154,7 +196,6 @@ class CalendarComponent {
         };
         this.events = [];
         this.startAt = 'sunday';
-        this.monthChange = new EventEmitter();
         this.dayCells = [];
         this.weekDays = [
             { tag: 'sun' },
@@ -265,23 +306,26 @@ class CalendarComponent {
             this.setMaxEventsInDayCell();
         });
     }
+    ngOnChanges(changes) {
+        if (changes['currentMonth']) {
+            this.initDaysCells();
+        }
+    }
     onDestroy() {
         window.removeEventListener('resize', this.resizeListener);
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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: { monthChange: "monthChange" }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }], ngImport: i0, template: "<div class=\"calendar-component\">\r\n    <div class=\"header\">\r\n        Header {{ maxEventsInDayCell }}\r\n    </div>\r\n\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\"\r\n                        [event]=\"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)=\"closeMoreEventsModal()\"></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%}.header{flex-shrink:0;background-color:#add8e6}.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"] }, { 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" }] });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt" }, 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\"\r\n                        [event]=\"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)=\"closeMoreEventsModal()\"></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"] }, { 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" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n    <div class=\"header\">\r\n        Header {{ maxEventsInDayCell }}\r\n    </div>\r\n\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\"\r\n                        [event]=\"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)=\"closeMoreEventsModal()\"></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%}.header{flex-shrink:0;background-color:#add8e6}.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"] }]
+            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\"\r\n                        [event]=\"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)=\"closeMoreEventsModal()\"></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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { currentMonth: [{
                 type: Input
             }], events: [{
                 type: Input
             }], startAt: [{
                 type: Input
-            }], monthChange: [{
-                type: Output
             }], calendarRef: [{
                 type: ViewChild,
                 args: ['calendar']
@@ -290,20 +334,423 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['calendarBody']
             }] } });
 
+class TranslateMonthPipe {
+    constructor(translationService) {
+        this.translationService = translationService;
+    }
+    transform(value) {
+        const monthTag = MONTHS[value];
+        return this.translationService.translate(monthTag);
+    }
+}
+TranslateMonthPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
+TranslateMonthPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, name: "translateMonth" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translateMonth'
+                }]
+        }], ctorParameters: function () { return [{ type: TranslationService }]; } });
+
+class MonthSelectorComponent {
+    constructor() {
+        this.monthSelected = new EventEmitter();
+        this.mode = 'decade';
+        this.currentYear = new Date().getFullYear();
+        this.currentMonth = new Date().getMonth() + 1;
+        this.selectedMonth = { year: new Date().getFullYear(), month: new Date().getMonth() + 1 };
+        this.selectedYear = new Date().getFullYear();
+        this.currentDecadeStart = Math.floor(this.selectedYear / 10) * 10;
+        this.years = [];
+        this.months = Object.keys(MONTHS).map(key => Number(key));
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.selectedYear = this.selectedMonth.year;
+            this.selectDecadeByYear(this.selectedYear);
+            this.setYears();
+        });
+    }
+    toggleMode(event) {
+        event.stopPropagation();
+        this.mode = this.mode === 'year' ? 'decade' : 'year';
+    }
+    setYears() {
+        this.years = [];
+        for (let i = this.currentDecadeStart; i < this.currentDecadeStart + 10; i++) {
+            this.years.push(i);
+        }
+    }
+    ;
+    next(event) {
+        event.stopPropagation();
+        if (this.mode === 'year') {
+            this.selectedYear++;
+        }
+        else {
+            this.currentDecadeStart += 10;
+            this.setYears();
+            this.selectedYear = this.currentDecadeStart;
+        }
+    }
+    previous(event) {
+        event.stopPropagation();
+        if (this.mode === 'year') {
+            this.selectedYear--;
+        }
+        else {
+            this.currentDecadeStart -= 10;
+            this.setYears();
+            this.selectedYear = this.currentDecadeStart;
+        }
+    }
+    selectYear(event, year) {
+        event.stopPropagation();
+        this.selectedYear = year;
+        this.mode = 'year';
+    }
+    selectDecadeByYear(year) {
+        this.currentDecadeStart = Math.floor(year / 10) * 10;
+        this.setYears();
+        this.mode = 'decade';
+    }
+    selectMonth(month) {
+        this.monthSelected.emit({ year: this.selectedYear, month });
+    }
+}
+MonthSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MonthSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: { selectedMonth: "selectedMonth" }, outputs: { monthSelected: "monthSelected" }, ngImport: i0, template: "<div class=\"month-selector-component\">\n    <div class=\"header\">\n        <button class=\"btn-range\" *ngIf=\"mode === 'decade'\" (click)=\"toggleMode($event)\">\n            <span>{{currentDecadeStart}} - {{currentDecadeStart + 9}}</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-range\" *ngIf=\"mode === 'year'\" (click)=\"toggleMode($event)\">\n            <span>{{selectedYear}}</span>\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: rotate(180deg);\" height=\"24px\"\n                viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n                <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n        </button>\n\n        <div class=\"nav-controls\">\n            <button class=\"btn-prev\" (click)=\"previous($event)\">\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-next\" (click)=\"next($event)\">\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        </div>\n    </div>\n\n    <div class=\"years-grid\" *ngIf=\"mode === 'decade'\">\n        <button class=\"btn-year\" *ngFor=\"let year of years\"\n            [ngClass]=\"{selected: year === selectedYear, current: year === currentYear }\"\n            (click)=\"selectYear($event, year)\">\n            {{ year }}\n        </button>\n    </div>\n\n    <div class=\"months-grid\" *ngIf=\"mode === 'year'\">\n        <button class=\"btn-month\" *ngFor=\"let month of months\"\n            [ngClass]=\"{selected: month === selectedMonth.month && selectedYear === selectedMonth.year, current: currentYear === selectedYear && month === currentMonth}\"\n            (click)=\"selectMonth(month)\">\n            {{ month | translateMonth | slice:0:3 }}\n        </button>\n    </div>\n</div>", styles: [".month-selector-component{display:flex;flex-direction:column;width:280px;-webkit-user-select:none;user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.btn-range{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;background:none;border:none;border-radius:50px;cursor:pointer;font-weight:600}.btn-range:hover{background-color:#0000000a}.btn-range span{white-space:nowrap}.nav-controls{display:flex;align-items:center}.btn-prev,.btn-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-prev:hover,.btn-next:hover{background-color:#0000000a}.years-grid,.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.btn-month,.btn-year{display:flex;align-items:center;justify-content:center;padding:6px 12px;border:none;background:none;border-radius:50px;font-size:14px;cursor:pointer}.btn-month:hover,.btn-year:hover{background-color:#0000000a}.btn-month.selected,.btn-year.selected{border:1px solid rgba(0,0,0,.12)}.btn-month.current,.btn-year.current{background-color:#0000001f}\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: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-month-selector', template: "<div class=\"month-selector-component\">\n    <div class=\"header\">\n        <button class=\"btn-range\" *ngIf=\"mode === 'decade'\" (click)=\"toggleMode($event)\">\n            <span>{{currentDecadeStart}} - {{currentDecadeStart + 9}}</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-range\" *ngIf=\"mode === 'year'\" (click)=\"toggleMode($event)\">\n            <span>{{selectedYear}}</span>\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: rotate(180deg);\" height=\"24px\"\n                viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n                <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n        </button>\n\n        <div class=\"nav-controls\">\n            <button class=\"btn-prev\" (click)=\"previous($event)\">\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-next\" (click)=\"next($event)\">\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        </div>\n    </div>\n\n    <div class=\"years-grid\" *ngIf=\"mode === 'decade'\">\n        <button class=\"btn-year\" *ngFor=\"let year of years\"\n            [ngClass]=\"{selected: year === selectedYear, current: year === currentYear }\"\n            (click)=\"selectYear($event, year)\">\n            {{ year }}\n        </button>\n    </div>\n\n    <div class=\"months-grid\" *ngIf=\"mode === 'year'\">\n        <button class=\"btn-month\" *ngFor=\"let month of months\"\n            [ngClass]=\"{selected: month === selectedMonth.month && selectedYear === selectedMonth.year, current: currentYear === selectedYear && month === currentMonth}\"\n            (click)=\"selectMonth(month)\">\n            {{ month | translateMonth | slice:0:3 }}\n        </button>\n    </div>\n</div>", styles: [".month-selector-component{display:flex;flex-direction:column;width:280px;-webkit-user-select:none;user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.btn-range{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;background:none;border:none;border-radius:50px;cursor:pointer;font-weight:600}.btn-range:hover{background-color:#0000000a}.btn-range span{white-space:nowrap}.nav-controls{display:flex;align-items:center}.btn-prev,.btn-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-prev:hover,.btn-next:hover{background-color:#0000000a}.years-grid,.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.btn-month,.btn-year{display:flex;align-items:center;justify-content:center;padding:6px 12px;border:none;background:none;border-radius:50px;font-size:14px;cursor:pointer}.btn-month:hover,.btn-year:hover{background-color:#0000000a}.btn-month.selected,.btn-year.selected{border:1px solid rgba(0,0,0,.12)}.btn-month.current,.btn-year.current{background-color:#0000001f}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { monthSelected: [{
+                type: Output
+            }], selectedMonth: [{
+                type: Input
+            }] } });
+
+class DurationEventComponent {
+    constructor() {
+        this.isDarkColor = false;
+        this.topPosition = 0;
+        this.height = 0;
+        this.isEventStartInThisDay = false;
+        this.isEventEndInThisDay = false;
+    }
+    ngOnInit() {
+        this.isDarkColor = isDarkColor(this.event.color || '#000000');
+        this.isEventStartInThisDay = this.getIsEventStartInThisDay();
+        this.isEventEndInThisDay = this.getIsEventEndInThisDay();
+        this.topPosition = this.getTopPosition();
+        this.height = this.getEventHeight();
+    }
+    getIsEventStartInThisDay() {
+        return this.event.start.getDate() === this.date.getDate() && this.event.start.getMonth() === this.date.getMonth() && this.event.start.getFullYear() === this.date.getFullYear();
+    }
+    getIsEventEndInThisDay() {
+        return this.event.end.getDate() === this.date.getDate() && this.event.end.getMonth() === this.date.getMonth() && this.event.end.getFullYear() === this.date.getFullYear();
+    }
+    getTopPosition() {
+        if (!this.isEventStartInThisDay)
+            return 0;
+        return this.event.start.getHours() * 60 + this.event.start.getMinutes();
+    }
+    getEventHeight() {
+        const max_minutes_in_day = 24 * 60;
+        if (!this.isEventStartInThisDay && !this.isEventEndInThisDay)
+            return max_minutes_in_day;
+        const result = (this.event.end.getTime() - this.event.start.getTime()) / (1000 * 60);
+        if (result < 20)
+            return 20;
+        if (!this.isEventStartInThisDay)
+            return (this.event.end.getTime() - new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate(), 0, 0, 0).getTime()) / (1000 * 60);
+        const startPosition = this.getTopPosition();
+        if (startPosition + result > max_minutes_in_day)
+            return max_minutes_in_day - startPosition;
+        return result;
+    }
+}
+DurationEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DurationEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DurationEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DurationEventComponent, selector: "lib-duration-event", inputs: { event: "event", date: "date" }, 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\">\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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DurationEventComponent, decorators: [{
+            type: Component,
+            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\">\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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { event: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }] } });
+
+class DayComponent {
+    constructor() {
+        this.events = [];
+        this.hourBlocks = Array.from({ length: 24 }, (_, i) => i);
+        this.allDayEvents = [];
+        this.allDayHeight = 60;
+        this.eventCols = [];
+        this.resizing = false;
+        this.startY = 0;
+        this.startHeight = 0;
+        this.onResizeMouseMove = (event) => {
+            if (!this.resizing)
+                return;
+            const delta = event.clientY - this.startY;
+            const newHeight = this.startHeight + delta;
+            this.allDayHeight = Math.max(60, newHeight); // mínimo 80px
+        };
+        this.onResizeMouseUp = () => {
+            this.resizing = false;
+            document.removeEventListener('mousemove', this.onResizeMouseMove);
+            document.removeEventListener('mouseup', this.onResizeMouseUp);
+        };
+    }
+    ngOnInit() {
+        this.initEventCols();
+    }
+    findAvalailableColumn(event) {
+        for (let colIndex = 0; colIndex < this.eventCols.length; colIndex++) {
+            const col = this.eventCols[colIndex];
+            // conflict if event overlaps with any existing event in the column
+            const hasConflict = col.events.some(existingEvent => {
+                const startsDuringExisting = event.start < existingEvent.end && event.start >= existingEvent.start;
+                const endsDuringExisting = event.end > existingEvent.start && event.end <= existingEvent.end;
+                const spansExisting = event.start <= existingEvent.start && event.end >= existingEvent.end;
+                return startsDuringExisting || endsDuringExisting || spansExisting;
+            });
+            if (!hasConflict) {
+                return colIndex;
+            }
+        }
+        return this.eventCols.length;
+    }
+    addEventToEventCols(event) {
+        const colIndex = this.findAvalailableColumn(event);
+        if (colIndex === this.eventCols.length) {
+            this.eventCols.push({ events: [event] });
+        }
+        else {
+            this.eventCols[colIndex].events.push(event);
+        }
+    }
+    addEvent(event) {
+        if (event.allDay)
+            this.allDayEvents.push(event);
+        else
+            this.addEventToEventCols(event);
+    }
+    initEventCols() {
+        this.eventCols = [];
+        this.allDayEvents = [];
+        this.events.forEach(event => this.addEvent(event));
+    }
+    ngOnChanges(changes) {
+        if (changes['events']) {
+            this.initEventCols();
+        }
+    }
+    onResizeMouseDown(event) {
+        this.resizing = true;
+        this.startY = event.clientY;
+        this.startHeight = this.allDayHeight;
+        document.addEventListener('mousemove', this.onResizeMouseMove);
+        document.addEventListener('mouseup', this.onResizeMouseUp);
+    }
+}
+DayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DayComponent, selector: "lib-day", inputs: { events: "events", date: "date" }, 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\"></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\"\n                        [date]=\"date\"></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"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DayComponent, decorators: [{
+            type: Component,
+            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\"></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\"\n                        [date]=\"date\"></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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { events: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }] } });
+
 class SmartCalendarComponent {
     constructor() {
+        this.mode = 'month';
+        this.currentMonth = {
+            year: new Date().getFullYear(),
+            month: new Date().getMonth() + 1
+        };
         this.events = [];
+        this.monthChange = new EventEmitter();
+        this.dateChanged = new EventEmitter();
+        this.showDateSelector = false;
+        this.selectedDate = new Date();
+        this.selectedDateEvents = [];
+    }
+    onDocumentClick(event) {
+        var _a;
+        if (!this.showDateSelector)
+            return;
+        const dropdown = (_a = this.dateSelectorDropdown) === null || _a === void 0 ? void 0 : _a.nativeElement;
+        const button = document.querySelector('.btn-date-selector');
+        if (dropdown && !dropdown.contains(event.target) && button && !button.contains(event.target)) {
+            this.showDateSelector = false;
+        }
     }
     ngOnInit() {
+        this.selectDate(new Date());
+    }
+    toggleDateSelector() {
+        this.showDateSelector = !this.showDateSelector;
+    }
+    onMonthSelected(newMonth) {
+        const oldMonth = Object.assign({}, this.currentMonth);
+        this.currentMonth = newMonth;
+        this.selectDate(new Date(this.currentMonth.year, this.currentMonth.month - 1, 1));
+        this.monthChange.emit({
+            newMonth: this.currentMonth,
+            oldMonth
+        });
+        this.showDateSelector = false;
+    }
+    nextMonth() {
+        const oldMonth = Object.assign({}, this.currentMonth);
+        if (this.currentMonth.month === 12) {
+            this.currentMonth = {
+                year: this.currentMonth.year + 1,
+                month: 1
+            };
+        }
+        else {
+            this.currentMonth = {
+                year: this.currentMonth.year,
+                month: this.currentMonth.month + 1
+            };
+        }
+        this.selectDate(new Date(this.currentMonth.year, this.currentMonth.month - 1, 1));
+        this.monthChange.emit({
+            newMonth: this.currentMonth,
+            oldMonth
+        });
+    }
+    prevMonth() {
+        const oldMonth = Object.assign({}, this.currentMonth);
+        if (this.currentMonth.month === 1) {
+            this.currentMonth = {
+                year: this.currentMonth.year - 1,
+                month: 12
+            };
+        }
+        else {
+            this.currentMonth = {
+                year: this.currentMonth.year,
+                month: this.currentMonth.month - 1
+            };
+        }
+        this.selectDate(new Date(this.currentMonth.year, this.currentMonth.month - 1, 1));
+        this.monthChange.emit({
+            newMonth: this.currentMonth,
+            oldMonth
+        });
+    }
+    goToToday() {
+        const today = new Date();
+        const oldMonth = Object.assign({}, this.currentMonth);
+        this.currentMonth = {
+            year: today.getFullYear(),
+            month: today.getMonth() + 1
+        };
+        this.selectDate(today);
+        if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
+            this.monthChange.emit({
+                newMonth: this.currentMonth,
+                oldMonth
+            });
+    }
+    nextDay() {
+        const oldMonth = Object.assign({}, this.currentMonth);
+        const newDate = new Date(this.selectedDate);
+        newDate.setDate(newDate.getDate() + 1);
+        this.selectDate(newDate);
+        this.currentMonth = {
+            year: newDate.getFullYear(),
+            month: newDate.getMonth() + 1
+        };
+        if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
+            this.monthChange.emit({
+                newMonth: this.currentMonth,
+                oldMonth
+            });
+    }
+    prevDay() {
+        const oldMonth = Object.assign({}, this.currentMonth);
+        const newDate = new Date(this.selectedDate);
+        newDate.setDate(newDate.getDate() - 1);
+        this.selectDate(newDate);
+        this.currentMonth = {
+            year: newDate.getFullYear(),
+            month: newDate.getMonth() + 1
+        };
+        if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
+            this.monthChange.emit({
+                newMonth: this.currentMonth,
+                oldMonth
+            });
+    }
+    onNext() {
+        if (this.mode === 'month')
+            this.nextMonth();
+        else if (this.mode === 'day')
+            this.nextDay();
+    }
+    onPrev() {
+        if (this.mode === 'month')
+            this.prevMonth();
+        else if (this.mode === 'day')
+            this.prevDay();
+    }
+    selectDate(date) {
+        this.selectedDate = date;
+        this.selectedDateEvents = this.events.filter(event => {
+            const eventDate = new Date(event.start);
+            // return events that starts, ends or spans the selected date
+            return (eventDate.getDate() === date.getDate() &&
+                eventDate.getMonth() === date.getMonth() &&
+                eventDate.getFullYear() === date.getFullYear()) ||
+                (event.end &&
+                    event.end.getDate() === date.getDate() &&
+                    event.end.getMonth() === date.getMonth() &&
+                    event.end.getFullYear() === date.getFullYear()) ||
+                (event.start < date && event.end && event.end > date);
+        });
+        const oldMonth = this.currentMonth;
+        this.currentMonth = {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1
+        };
+        if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
+            this.monthChange.emit({
+                newMonth: this.currentMonth,
+                oldMonth
+            });
+        this.dateChanged.emit(this.selectedDate);
     }
 }
 SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { events: "events" }, ngImport: i0, template: "<div class=\"smart-calendar-component\">\n    <lib-calendar [events]=\"events\"></lib-calendar>\n</div>", styles: [".smart-calendar-component{width:100%;height:100%;background-color:#fff;border:1px solid #dddddd}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "lib-calendar", inputs: ["currentMonth", "events", "startAt"], outputs: ["monthChange"] }] });
+SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", currentMonth: "currentMonth", events: "events" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged" }, 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-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-today\" (click)=\"goToToday()\">{{'today' | translate}}</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        </div>\n\n        <div class=\"spacer\"></div>\n\n        <div class=\"date-selector-container\">\n            <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n                <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</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            <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)=\"mode = '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)=\"mode = '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)=\"mode = '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'\"></lib-calendar>\n\n        <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"></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-prev,.header .nav-controls .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 .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.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}.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"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n    <lib-calendar [events]=\"events\"></lib-calendar>\n</div>", styles: [".smart-calendar-component{width:100%;height:100%;background-color:#fff;border:1px solid #dddddd}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { events: [{
+            args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n    <div class=\"header\">\n        <div class=\"nav-controls\">\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-today\" (click)=\"goToToday()\">{{'today' | translate}}</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        </div>\n\n        <div class=\"spacer\"></div>\n\n        <div class=\"date-selector-container\">\n            <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\n                <span *ngIf=\"mode === 'month'\">{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</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            <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)=\"mode = '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)=\"mode = '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)=\"mode = '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'\"></lib-calendar>\n\n        <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"></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-prev,.header .nav-controls .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 .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.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}.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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
+                type: Input
+            }], currentMonth: [{
+                type: Input
+            }], events: [{
                 type: Input
+            }], monthChange: [{
+                type: Output
+            }], dateChanged: [{
+                type: Output
+            }], dateSelectorDropdown: [{
+                type: ViewChild,
+                args: ['dateSelectorDropdown', { static: false }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
             }] } });
 
 class SmartAngularCalendarModule {
@@ -313,7 +760,11 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
         CalendarComponent,
         TranslatePipe,
         CalendarEventComponent,
-        MoreEventsModalComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
+        MoreEventsModalComponent,
+        TranslateMonthPipe,
+        MonthSelectorComponent,
+        DayComponent,
+        DurationEventComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
 SmartAngularCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, decorators: [{
             type: NgModule,
@@ -323,7 +774,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CalendarComponent,
                         TranslatePipe,
                         CalendarEventComponent,
-                        MoreEventsModalComponent
+                        MoreEventsModalComponent,
+                        TranslateMonthPipe,
+                        MonthSelectorComponent,
+                        DayComponent,
+                        DurationEventComponent
                     ],
                     imports: [
                         CommonModule