@smart-solutions-tech/smart-angular-calendar 0.0.11 → 0.0.13

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

@@ -704,12 +704,18 @@ class WeekComponent {
     onEventClick(event) {
         this.eventClick.emit(event);
     }
+    isToday(date) {
+        const today = new Date();
+        return date.getFullYear() === today.getFullYear() &&
+            date.getMonth() === today.getMonth() &&
+            date.getDate() === today.getDate();
+    }
 }
 WeekComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n    <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n        <div class=\"header\">\n            {{'allDayEvents' | translate}}\n        </div>\n\n        <div class=\"days-container\">\n            <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n                <div class=\"week-day\">\n                    {{ weekDays[i].tag | translate | slice:0:3 }}\n                </div>\n\n                <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n                    (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n            </div>\n        </div>\n    </section>\n\n    <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n    <section class=\"duration-events\">\n        <div class=\"hour-blocks\">\n            <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n                <span>{{ hour }}:00</span>\n            </div>\n        </div>\n\n        <div class=\"events-wrapper\">\n            <div class=\"time-blocks\">\n                <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n                    <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n                        <div class=\"time-block-middle\"></div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"days-container\">\n                <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n                    [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n                    <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n                        <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n                            (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{position:sticky;top:0;left:0;z-index:2;width:100%;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+WeekComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: WeekComponent, selector: "lib-week", inputs: { startAt: "startAt", events: "events", startDate: "startDate" }, outputs: { eventClick: "eventClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"week-view-component\">\n    <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n        <div class=\"header\">\n            {{'allDayEvents' | translate}}\n        </div>\n\n        <div class=\"days-container\">\n            <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n                <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n                    {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n                </div>\n\n                <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n                    (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n            </div>\n        </div>\n    </section>\n\n    <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n    <section class=\"duration-events\">\n        <div class=\"hour-blocks\">\n            <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n                <span>{{ hour }}:00</span>\n            </div>\n        </div>\n\n        <div class=\"events-wrapper\">\n            <div class=\"time-blocks\">\n                <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n                    <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n                        <div class=\"time-block-middle\"></div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"days-container\">\n                <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n                    [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n                    <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n                        <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n                            (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"], outputs: ["eventClick"] }, { kind: "component", type: DurationEventComponent, selector: "lib-duration-event", inputs: ["event", "date"], outputs: ["eventClick"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: WeekComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n    <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n        <div class=\"header\">\n            {{'allDayEvents' | translate}}\n        </div>\n\n        <div class=\"days-container\">\n            <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n                <div class=\"week-day\">\n                    {{ weekDays[i].tag | translate | slice:0:3 }}\n                </div>\n\n                <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n                    (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n            </div>\n        </div>\n    </section>\n\n    <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n    <section class=\"duration-events\">\n        <div class=\"hour-blocks\">\n            <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n                <span>{{ hour }}:00</span>\n            </div>\n        </div>\n\n        <div class=\"events-wrapper\">\n            <div class=\"time-blocks\">\n                <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n                    <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n                        <div class=\"time-block-middle\"></div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"days-container\">\n                <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n                    [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n                    <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n                        <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n                            (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{position:sticky;top:0;left:0;z-index:2;width:100%;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
+            args: [{ selector: 'lib-week', template: "<div class=\"week-view-component\">\n    <section class=\"all-day-events\" [style.height.px]=\"allDayHeight\">\n        <div class=\"header\">\n            {{'allDayEvents' | translate}}\n        </div>\n\n        <div class=\"days-container\">\n            <div class=\"events-container\" *ngFor=\"let day of weekDayCols; let i = index\">\n                <div class=\"week-day\" [ngClass]=\"{'active': isToday(day.date)}\">\n                    {{ weekDays[i].tag | translate | slice:0:3 }} {{day.date | date:'dd'}}\n                </div>\n\n                <lib-calendar-event *ngFor=\"let event of day.allDayEvents\" [event]=\"event\"\n                    (eventClick)=\"onEventClick($event)\"></lib-calendar-event>\n            </div>\n        </div>\n    </section>\n\n    <div class=\"resize-divider\" (mousedown)=\"onResizeMouseDown($event)\"></div>\n\n    <section class=\"duration-events\">\n        <div class=\"hour-blocks\">\n            <div class=\"hour-block\" *ngFor=\"let hour of hourBlocks\">\n                <span>{{ hour }}:00</span>\n            </div>\n        </div>\n\n        <div class=\"events-wrapper\">\n            <div class=\"time-blocks\">\n                <div class=\"day-block\" *ngFor=\"let day of weekDayCols\">\n                    <div class=\"time-block\" *ngFor=\"let hour of hourBlocks\">\n                        <div class=\"time-block-middle\"></div>\n                    </div>\n                </div>\n            </div>\n\n            <div class=\"days-container\">\n                <div class=\"events-container\" *ngFor=\"let day of weekDayCols\"\n                    [style.gridTemplateColumns]=\"'repeat(' + day.eventCols.length + ', 1fr)'\">\n                    <div class=\"event-column\" *ngFor=\"let col of day.eventCols\">\n\n                        <lib-duration-event *ngFor=\"let event of col.events\" [event]=\"event\" [date]=\"day.date\"\n                            (eventClick)=\"onEventClick($event)\"></lib-duration-event>\n\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.week-view-component{display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden}section.all-day-events{position:relative;flex-shrink:0;display:flex;flex-direction:column;width:100%;min-height:60px;border-top:1px solid rgba(0,0,0,.12);overflow-y:scroll}section.all-day-events .header{position:sticky;top:0;left:0;z-index:2;width:100%;flex-shrink:0;padding:2px 8px;background-color:#fff;font-size:12px;color:#000000b3;-webkit-user-select:none;user-select:none}section.all-day-events .days-container{display:grid;grid-template-columns:repeat(7,1fr);height:100%;padding-left:45px}section.all-day-events .events-container{display:flex;flex-direction:column;gap:1px;min-width:0;width:100%;border-right:1px solid rgba(0,0,0,.12)}section.all-day-events .week-day{align-self:center;position:sticky;top:0;left:0;z-index:2;width:fit-content;padding:2px 6px;margin-bottom:4px;background-color:transparent;border-radius:50px;font-size:12px;text-align:center;-webkit-user-select:none;user-select:none}section.all-day-events .week-day.active{background-color:#007bff;color:#fff;font-weight:600}section.duration-events{flex-grow:1;display:flex;width:100%;overflow:auto}section.duration-events .hour-blocks{display:flex;flex-direction:column;width:45px;-webkit-user-select:none;user-select:none}section.duration-events .hour-blocks .hour-block{flex-shrink:0;height:60px;padding:4px;border:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper{position:relative;flex-grow:1;width:100%}section.duration-events .events-wrapper .time-blocks{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;display:grid;grid-template-columns:repeat(7,1fr)}section.duration-events .events-wrapper .time-blocks .day-block{display:flex;flex-direction:column;border-right:1px solid rgba(0,0,0,.12)}section.duration-events .events-wrapper .time-blocks .time-block{flex-shrink:0;height:60px;padding:4px;border-bottom:1px solid rgba(0,0,0,.12);border-top:none;font-size:12px;color:#00000080}section.duration-events .events-wrapper .time-blocks .time-block .time-block-middle{width:100%;height:50%;border-bottom:1px dashed rgba(0,0,0,.12)}section.duration-events .events-wrapper .days-container{display:grid;grid-template-columns:repeat(7,1fr);column-gap:1px}section.duration-events .events-wrapper .events-container{display:grid;column-gap:1px}section.duration-events .events-wrapper .events-container .event-column{position:relative}.resize-divider{flex-shrink:0;width:100%;height:4px;background-color:#0000001f;cursor:row-resize;transition:transform .2s ease}.resize-divider:hover{z-index:5;background:repeating-linear-gradient(45deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 4px,#ffffff 4px,#ffffff 8px);background-color:#fff;background-size:22px 8px;animation:stripe-move 1s linear infinite;transform:scaleY(2)}@keyframes stripe-move{0%{background-position:0 0}to{background-position:22px 0}}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { startAt: [{
                 type: Input
             }], events: [{
@@ -891,7 +897,7 @@ class SmartCalendarComponent {
             month: today.getMonth() + 1
         };
         this.selectDate(today);
-        this.selectWeekByDate(today);
+        this.selectWeekByDate(today, false);
         if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
             this.monthChange.emit({
                 newMonth: this.currentMonth,
@@ -927,7 +933,7 @@ class SmartCalendarComponent {
             });
         this.dateChanged.emit(this.selectedDate);
     }
-    selectWeekByDate(date) {
+    selectWeekByDate(date, emitChange = true) {
         // Calculate the start date of the week based on startAt
         const dayOfWeek = date.getDay(); // 0 (Sun) to 6 (Sat)
         let diffToStart;
@@ -947,16 +953,18 @@ class SmartCalendarComponent {
             const eventEnd = event.end ? new Date(event.end) : eventStart;
             return (eventStart <= this.weekEndDate) && (eventEnd >= this.weekStartDate);
         });
-        const oldMonth = this.currentMonth;
-        this.currentMonth = {
-            year: this.weekStartDate.getFullYear(),
-            month: this.weekStartDate.getMonth() + 1
-        };
-        if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
-            this.monthChange.emit({
-                newMonth: this.currentMonth,
-                oldMonth
-            });
+        if (emitChange) {
+            const oldMonth = this.currentMonth;
+            this.currentMonth = {
+                year: this.weekStartDate.getFullYear(),
+                month: this.weekStartDate.getMonth() + 1
+            };
+            if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
+                this.monthChange.emit({
+                    newMonth: this.currentMonth,
+                    oldMonth
+                });
+        }
     }
     setMode(newMode) {
         this.mode = newMode;
@@ -969,10 +977,10 @@ class SmartCalendarComponent {
     }
 }
 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", startAt: "startAt", currentMonth: "currentMonth", events: "events" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n    <div class=\"header\">\n        <div class=\"nav-controls\">\n            <button class=\"btn-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 === 'week'\">\n                    {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n                </span>\n                <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\n                </svg>\n            </button>\n\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n            </div>\n        </div>\n\n        <div class=\"spacer\"></div>\n\n        <div class=\"view-selector\">\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n                <!-- month view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n                <!-- week view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n                <!-- day view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"view-container\">\n        <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n            (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n        <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\"\n            [events]=\"weekEvents\"></lib-week>\n\n        <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n            (eventClick)=\"onEventClick($event)\"></lib-day>\n    </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-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"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
+SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", startAt: "startAt", currentMonth: "currentMonth", events: "events" }, outputs: { monthChange: "monthChange", dateChanged: "dateChanged", eventClick: "eventClick" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"smart-calendar-component\">\n    <div class=\"header\">\n        <div class=\"nav-controls\">\n            <button class=\"btn-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 === 'week'\">\n                    {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n                </span>\n                <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\n                </svg>\n            </button>\n\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n            </div>\n        </div>\n\n        <div class=\"spacer\"></div>\n\n        <div class=\"view-selector\">\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n                <!-- month view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n                <!-- week view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n                <!-- day view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"view-container\">\n        <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n            (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n        <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n            (eventClick)=\"onEventClick($event)\"></lib-week>\n\n        <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n            (eventClick)=\"onEventClick($event)\"></lib-day>\n    </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-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"], outputs: ["eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "component", type: DayComponent, selector: "lib-day", inputs: ["events", "date"], outputs: ["eventClick"] }, { kind: "component", type: WeekComponent, selector: "lib-week", inputs: ["startAt", "events", "startDate"], outputs: ["eventClick"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
 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    <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 === 'week'\">\n                    {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n                </span>\n                <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\n                </svg>\n            </button>\n\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n            </div>\n        </div>\n\n        <div class=\"spacer\"></div>\n\n        <div class=\"view-selector\">\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n                <!-- month view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n                <!-- week view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n                <!-- day view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"view-container\">\n        <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n            (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n        <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\"\n            [events]=\"weekEvents\"></lib-week>\n\n        <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n            (eventClick)=\"onEventClick($event)\"></lib-day>\n    </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-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"] }]
+            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 === 'week'\">\n                    {{ weekStartDate.toDateString() }} - {{ weekEndDate.toDateString() }}\n                </span>\n                <span *ngIf=\"mode === 'day'\">{{ selectedDate.toDateString() }}</span>\n\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\n                </svg>\n            </button>\n\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\n            </div>\n        </div>\n\n        <div class=\"spacer\"></div>\n\n        <div class=\"view-selector\">\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'month'}\" (click)=\"setMode('month')\">\n                <!-- month view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'week'}\" (click)=\"setMode('week')\">\n                <!-- week view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-view\" [ngClass]=\"{active: mode === 'day'}\" (click)=\"setMode('day')\">\n                <!-- day view -->\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path\n                        d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"view-container\">\n        <lib-calendar [events]=\"events\" [currentMonth]=\"currentMonth\" *ngIf=\"mode === 'month'\" [startAt]=\"startAt\"\n            (eventClick)=\"onEventClick($event)\"></lib-calendar>\n\n        <lib-week *ngIf=\"mode === 'week'\" [startAt]=\"startAt\" [startDate]=\"weekStartDate\" [events]=\"weekEvents\"\n            (eventClick)=\"onEventClick($event)\"></lib-week>\n\n        <lib-day *ngIf=\"mode === 'day'\" [date]=\"selectedDate\" [events]=\"selectedDateEvents\"\n            (eventClick)=\"onEventClick($event)\"></lib-day>\n    </div>\n\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.smart-calendar-component{display:flex;flex-direction:column;width:100%;height:100%;background-color:#fff}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-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
             }], startAt: [{