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

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

@@ -55,6 +55,7 @@ const TRANSLATIONS = {
         fri: 'Friday',
         sat: 'Saturday',
         today: 'Today',
+        allDayEvents: 'All-day events',
         january: 'January',
         february: 'February',
         march: 'March',
@@ -79,6 +80,7 @@ const TRANSLATIONS = {
         fri: 'Viernes',
         sat: 'Sábado',
         today: 'Hoy',
+        allDayEvents: 'Eventos de todo el día',
         january: 'Enero',
         february: 'Febrero',
         march: 'Marzo',
@@ -186,6 +188,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+class CalendarComponent {
+    constructor() {
+        this.currentMonth = {
+            year: new Date().getFullYear(),
+            month: new Date().getMonth() + 1
+        };
+        this.events = [];
+        this.startAt = 'sunday';
+        this.dayCells = [];
+        this.weekDays = [
+            { tag: 'sun' },
+            { tag: 'mon' },
+            { tag: 'tue' },
+            { tag: 'wed' },
+            { tag: 'thu' },
+            { tag: 'fri' },
+            { tag: 'sat' },
+        ];
+        this.showMoreEventsModal = false;
+        this.moreEventsModalEvents = [];
+        this.resizeListener = () => {
+            this.setCalendarBodyHeight();
+            this.setMaxEventsInDayCell();
+        };
+    }
+    isToday(date) {
+        const today = new Date();
+        return date.getDate() === today.getDate() &&
+            date.getMonth() === today.getMonth() &&
+            date.getFullYear() === today.getFullYear();
+    }
+    getEventsForDay(date) {
+        return this.events.filter(event => {
+            const eventStart = new Date(event.start);
+            const eventEnd = event.end ? new Date(event.end) : eventStart;
+            return date >= new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate()) &&
+                date <= new Date(eventEnd.getFullYear(), eventEnd.getMonth(), eventEnd.getDate());
+        });
+    }
+    initDaysCells() {
+        const daysInMonth = new Date(this.currentMonth.year, this.currentMonth.month, 0).getDate();
+        const firstDayOfWeek = new Date(this.currentMonth.year, this.currentMonth.month - 1, 1).getDay();
+        const prevDaysCount = this.startAt === 'monday' ? (firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1) : firstDayOfWeek;
+        // const nextDaysCount = (7 - ((prevDaysCount + daysInMonth) % 7)) % 7;
+        const nextDaysCount = 42 - (prevDaysCount + daysInMonth); // Always show 6 weeks
+        this.dayCells = [];
+        for (let i = 0; i < prevDaysCount; i++) {
+            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, i - prevDaysCount + 1);
+            const _events = this.getEventsForDay(date);
+            this.dayCells.push({
+                date,
+                events: _events,
+                isOutsideMonth: true,
+                isToday: this.isToday(date)
+            });
+        }
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, day);
+            const _events = this.getEventsForDay(date);
+            this.dayCells.push({
+                date,
+                events: _events,
+                isToday: this.isToday(date)
+            });
+        }
+        for (let i = 1; i <= nextDaysCount; i++) {
+            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, daysInMonth + i);
+            const _events = this.getEventsForDay(date);
+            this.dayCells.push({
+                date,
+                events: _events,
+                isOutsideMonth: true,
+                isToday: this.isToday(date)
+            });
+        }
+    }
+    setCalendarBodyHeight() {
+        this.calendarBodyHeight = this.calendarBodyRef.nativeElement.clientHeight;
+    }
+    setMaxEventsInDayCell() {
+        const element = document.getElementsByClassName('events-list')[0];
+        console.log(element);
+        if (element) {
+            const eventItemHeight = 22;
+            this.maxEventsInDayCell = Math.floor(element.clientHeight / eventItemHeight) - 1;
+        }
+    }
+    openMoreEventsModal(date, events) {
+        this.moreEventsModalDate = date;
+        this.moreEventsModalEvents = events;
+        this.showMoreEventsModal = true;
+    }
+    closeMoreEventsModal() {
+        this.showMoreEventsModal = false;
+        this.moreEventsModalDate = undefined;
+        this.moreEventsModalEvents = [];
+    }
+    ngOnInit() {
+        if (this.startAt === 'monday') {
+            this.weekDays = [
+                { tag: 'mon' },
+                { tag: 'tue' },
+                { tag: 'wed' },
+                { tag: 'thu' },
+                { tag: 'fri' },
+                { tag: 'sat' },
+                { tag: 'sun' },
+            ];
+        }
+        this.initDaysCells();
+    }
+    ngAfterViewInit() {
+        window.addEventListener('resize', this.resizeListener);
+        setTimeout(() => {
+            this.setCalendarBodyHeight();
+            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" }, 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=\"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
+            }], calendarRef: [{
+                type: ViewChild,
+                args: ['calendar']
+            }], calendarBodyRef: [{
+                type: ViewChild,
+                args: ['calendarBody']
+            }] } });
+
 class TranslateMonthPipe {
     constructor(translationService) {
         this.translationService = translationService;
@@ -281,33 +429,157 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-class CalendarComponent {
+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.startAt = 'sunday';
         this.monthChange = new EventEmitter();
-        this.dayCells = [];
-        this.weekDays = [
-            { tag: 'sun' },
-            { tag: 'mon' },
-            { tag: 'tue' },
-            { tag: 'wed' },
-            { tag: 'thu' },
-            { tag: 'fri' },
-            { tag: 'sat' },
-        ];
-        this.showMoreEventsModal = false;
-        this.moreEventsModalEvents = [];
-        this.currentMonthTitle = ``;
+        this.dateChanged = new EventEmitter();
         this.showDateSelector = false;
-        this.resizeListener = () => {
-            this.setCalendarBodyHeight();
-            this.setMaxEventsInDayCell();
-        };
+        this.selectedDate = new Date();
+        this.selectedDateEvents = [];
     }
     onDocumentClick(event) {
         if (!this.showDateSelector)
@@ -318,176 +590,160 @@ class CalendarComponent {
             this.showDateSelector = false;
         }
     }
-    isToday(date) {
-        const today = new Date();
-        return date.getDate() === today.getDate() &&
-            date.getMonth() === today.getMonth() &&
-            date.getFullYear() === today.getFullYear();
-    }
-    getEventsForDay(date) {
-        return this.events.filter(event => {
-            const eventStart = new Date(event.start);
-            const eventEnd = event.end ? new Date(event.end) : eventStart;
-            return date >= new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate()) &&
-                date <= new Date(eventEnd.getFullYear(), eventEnd.getMonth(), eventEnd.getDate());
-        });
-    }
-    initDaysCells() {
-        const daysInMonth = new Date(this.currentMonth.year, this.currentMonth.month, 0).getDate();
-        const firstDayOfWeek = new Date(this.currentMonth.year, this.currentMonth.month - 1, 1).getDay();
-        const prevDaysCount = this.startAt === 'monday' ? (firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1) : firstDayOfWeek;
-        // const nextDaysCount = (7 - ((prevDaysCount + daysInMonth) % 7)) % 7;
-        const nextDaysCount = 42 - (prevDaysCount + daysInMonth); // Always show 6 weeks
-        this.dayCells = [];
-        for (let i = 0; i < prevDaysCount; i++) {
-            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, i - prevDaysCount + 1);
-            const _events = this.getEventsForDay(date);
-            this.dayCells.push({
-                date,
-                events: _events,
-                isOutsideMonth: true,
-                isToday: this.isToday(date)
-            });
-        }
-        for (let day = 1; day <= daysInMonth; day++) {
-            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, day);
-            const _events = this.getEventsForDay(date);
-            this.dayCells.push({
-                date,
-                events: _events,
-                isToday: this.isToday(date)
-            });
-        }
-        for (let i = 1; i <= nextDaysCount; i++) {
-            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, daysInMonth + i);
-            const _events = this.getEventsForDay(date);
-            this.dayCells.push({
-                date,
-                events: _events,
-                isOutsideMonth: true,
-                isToday: this.isToday(date)
-            });
-        }
-    }
-    setCalendarBodyHeight() {
-        this.calendarBodyHeight = this.calendarBodyRef.nativeElement.clientHeight;
-    }
-    setMaxEventsInDayCell() {
-        const element = document.getElementsByClassName('events-list')[0];
-        console.log(element);
-        if (element) {
-            const eventItemHeight = 22;
-            this.maxEventsInDayCell = Math.floor(element.clientHeight / eventItemHeight) - 1;
-        }
+    ngOnInit() {
+        this.selectDate(new Date());
     }
-    openMoreEventsModal(date, events) {
-        this.moreEventsModalDate = date;
-        this.moreEventsModalEvents = events;
-        this.showMoreEventsModal = true;
+    toggleDateSelector() {
+        this.showDateSelector = !this.showDateSelector;
     }
-    closeMoreEventsModal() {
-        this.showMoreEventsModal = false;
-        this.moreEventsModalDate = undefined;
-        this.moreEventsModalEvents = [];
+    onMonthSelected(newMonth) {
+        const oldMonth = { ...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 = { ...this.currentMonth };
         if (this.currentMonth.month === 12) {
-            this.currentMonth.month = 1;
-            this.currentMonth.year += 1;
+            this.currentMonth = {
+                year: this.currentMonth.year + 1,
+                month: 1
+            };
         }
         else {
-            this.currentMonth.month += 1;
+            this.currentMonth = {
+                year: this.currentMonth.year,
+                month: this.currentMonth.month + 1
+            };
         }
-        this.initDaysCells();
+        this.selectDate(new Date(this.currentMonth.year, this.currentMonth.month - 1, 1));
         this.monthChange.emit({
-            newMonth: { ...this.currentMonth },
+            newMonth: this.currentMonth,
             oldMonth
         });
     }
     prevMonth() {
         const oldMonth = { ...this.currentMonth };
         if (this.currentMonth.month === 1) {
-            this.currentMonth.month = 12;
-            this.currentMonth.year -= 1;
+            this.currentMonth = {
+                year: this.currentMonth.year - 1,
+                month: 12
+            };
         }
         else {
-            this.currentMonth.month -= 1;
+            this.currentMonth = {
+                year: this.currentMonth.year,
+                month: this.currentMonth.month - 1
+            };
         }
-        this.initDaysCells();
+        this.selectDate(new Date(this.currentMonth.year, this.currentMonth.month - 1, 1));
         this.monthChange.emit({
-            newMonth: { ...this.currentMonth },
+            newMonth: this.currentMonth,
             oldMonth
         });
     }
     goToToday() {
         const today = new Date();
         const oldMonth = { ...this.currentMonth };
-        this.currentMonth.year = today.getFullYear();
-        this.currentMonth.month = today.getMonth() + 1;
-        this.initDaysCells();
-        this.monthChange.emit({
-            newMonth: { ...this.currentMonth },
-            oldMonth
-        });
-    }
-    toggleDateSelector() {
-        this.showDateSelector = !this.showDateSelector;
+        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
+            });
     }
-    onMonthSelected(newMonth) {
+    nextDay() {
         const oldMonth = { ...this.currentMonth };
-        this.currentMonth = newMonth;
-        this.initDaysCells();
-        this.monthChange.emit({
-            newMonth: { ...this.currentMonth },
-            oldMonth
-        });
-        this.showDateSelector = false;
+        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
+            });
     }
-    ngOnInit() {
-        if (this.startAt === 'monday') {
-            this.weekDays = [
-                { tag: 'mon' },
-                { tag: 'tue' },
-                { tag: 'wed' },
-                { tag: 'thu' },
-                { tag: 'fri' },
-                { tag: 'sat' },
-                { tag: 'sun' },
-            ];
-        }
-        this.initDaysCells();
+    prevDay() {
+        const oldMonth = { ...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
+            });
     }
-    ngAfterViewInit() {
-        window.addEventListener('resize', this.resizeListener);
-        setTimeout(() => {
-            this.setCalendarBodyHeight();
-            this.setMaxEventsInDayCell();
+    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);
         });
-    }
-    onDestroy() {
-        window.removeEventListener('resize', this.resizeListener);
+        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);
     }
 }
-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" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }, { propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"calendar-component\">\r\n    <div class=\"header\">\r\n        <div class=\"nav-controls\">\r\n            <button class=\"btn-prev\" (click)=\"prevMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\r\n\r\n            <button class=\"btn-next\" (click)=\"nextMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n                </svg>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"date-selector-container\">\r\n            <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\r\n                <span>{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\r\n\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\r\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\r\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"view-selector\">\r\n            <button class=\"btn-view active\">\r\n                <!-- month view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\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\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- week view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\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\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- day view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\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\" />\r\n                </svg>\r\n            </button>\r\n        </div>\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;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}.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: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { 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: CalendarComponent, decorators: [{
+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: { 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: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n    <div class=\"header\">\r\n        <div class=\"nav-controls\">\r\n            <button class=\"btn-prev\" (click)=\"prevMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\r\n\r\n            <button class=\"btn-next\" (click)=\"nextMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n                </svg>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"date-selector-container\">\r\n            <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\r\n                <span>{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\r\n\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\r\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\r\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"view-selector\">\r\n            <button class=\"btn-view active\">\r\n                <!-- month view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\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\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- week view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\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\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- day view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\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\" />\r\n                </svg>\r\n            </button>\r\n        </div>\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;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}.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: [{
+            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
-            }], events: [{
+            }], currentMonth: [{
                 type: Input
-            }], startAt: [{
+            }], events: [{
                 type: Input
             }], monthChange: [{
                 type: Output
-            }], calendarRef: [{
-                type: ViewChild,
-                args: ['calendar']
-            }], calendarBodyRef: [{
-                type: ViewChild,
-                args: ['calendarBody']
+            }], dateChanged: [{
+                type: Output
             }], dateSelectorDropdown: [{
                 type: ViewChild,
                 args: ['dateSelectorDropdown', { static: false }]
@@ -496,22 +752,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-class SmartCalendarComponent {
-    constructor() {
-        this.events = [];
-    }
-    ngOnInit() {
-    }
-}
-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"] }] });
-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: [{
-                type: Input
-            }] } });
-
 class SmartAngularCalendarModule {
 }
 SmartAngularCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -521,7 +761,9 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
         CalendarEventComponent,
         MoreEventsModalComponent,
         TranslateMonthPipe,
-        MonthSelectorComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
+        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,
@@ -533,7 +775,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         CalendarEventComponent,
                         MoreEventsModalComponent,
                         TranslateMonthPipe,
-                        MonthSelectorComponent
+                        MonthSelectorComponent,
+                        DayComponent,
+                        DurationEventComponent
                     ],
                     imports: [
                         CommonModule