@smart-solutions-tech/smart-angular-calendar 0.0.10 → 0.0.12

package/esm2020/lib/smart-angular-calendar.module.mjs

@@ -9,6 +9,7 @@ import { TranslateMonthPipe } from './pipes/translate-month.pipe';
 import { MonthSelectorComponent } from './components/month-selector/month-selector.component';
 import { DayComponent } from './components/day/day.component';
 import { DurationEventComponent } from './components/duration-event/duration-event.component';
+import { WeekComponent } from './components/week/week.component';
 import * as i0 from "@angular/core";
 export class SmartAngularCalendarModule {
 }
@@ -21,7 +22,8 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
         TranslateMonthPipe,
         MonthSelectorComponent,
         DayComponent,
-        DurationEventComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
+        DurationEventComponent,
+        WeekComponent], 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,
@@ -35,7 +37,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TranslateMonthPipe,
                         MonthSelectorComponent,
                         DayComponent,
-                        DurationEventComponent
+                        DurationEventComponent,
+                        WeekComponent
                     ],
                     imports: [
                         CommonModule
@@ -45,4 +48,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                     ]
                 }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hcnQtYW5ndWxhci1jYWxlbmRhci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zbWFydC1hbmd1bGFyLWNhbGVuZGFyL3NyYy9saWIvc21hcnQtYW5ndWxhci1jYWxlbmRhci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sc0RBQXNELENBQUM7QUFDOUYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDN0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzlGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDREQUE0RCxDQUFDO0FBQ3RHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzlGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM5RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQzs7QUFxQjlGLE1BQU0sT0FBTywwQkFBMEI7O3VIQUExQiwwQkFBMEI7d0hBQTFCLDBCQUEwQixpQkFqQm5DLHNCQUFzQjtRQUN0QixpQkFBaUI7UUFDakIsYUFBYTtRQUNiLHNCQUFzQjtRQUN0Qix3QkFBd0I7UUFDeEIsa0JBQWtCO1FBQ2xCLHNCQUFzQjtRQUN0QixZQUFZO1FBQ1osc0JBQXNCLGFBR3RCLFlBQVksYUFHWixzQkFBc0I7d0hBR2IsMEJBQTBCLFlBTm5DLFlBQVk7MkZBTUgsMEJBQTBCO2tCQW5CdEMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUU7d0JBQ1osc0JBQXNCO3dCQUN0QixpQkFBaUI7d0JBQ2pCLGFBQWE7d0JBQ2Isc0JBQXNCO3dCQUN0Qix3QkFBd0I7d0JBQ3hCLGtCQUFrQjt3QkFDbEIsc0JBQXNCO3dCQUN0QixZQUFZO3dCQUNaLHNCQUFzQjtxQkFDdkI7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLFlBQVk7cUJBQ2I7b0JBQ0QsT0FBTyxFQUFFO3dCQUNQLHNCQUFzQjtxQkFDdkI7aUJBQ0YiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBTbWFydENhbGVuZGFyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL3NtYXJ0LWNhbGVuZGFyL3NtYXJ0LWNhbGVuZGFyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IENhbGVuZGFyQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2NhbGVuZGFyL2NhbGVuZGFyLmNvbXBvbmVudCc7XHJcbmltcG9ydCB7IFRyYW5zbGF0ZVBpcGUgfSBmcm9tICcuL3BpcGVzL3RyYW5zbGF0ZS5waXBlJztcclxuaW1wb3J0IHsgQ2FsZW5kYXJFdmVudENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jYWxlbmRhci1ldmVudC9jYWxlbmRhci1ldmVudC5jb21wb25lbnQnO1xuaW1wb3J0IHsgTW9yZUV2ZW50c01vZGFsQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL21vcmUtZXZlbnRzLW1vZGFsL21vcmUtZXZlbnRzLW1vZGFsLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb250aFBpcGUgfSBmcm9tICcuL3BpcGVzL3RyYW5zbGF0ZS1tb250aC5waXBlJztcbmltcG9ydCB7IE1vbnRoU2VsZWN0b3JDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvbW9udGgtc2VsZWN0b3IvbW9udGgtc2VsZWN0b3IuY29tcG9uZW50JztcbmltcG9ydCB7IERheUNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9kYXkvZGF5LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEdXJhdGlvbkV2ZW50Q29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL2R1cmF0aW9uLWV2ZW50L2R1cmF0aW9uLWV2ZW50LmNvbXBvbmVudCc7XHJcblxyXG5ATmdNb2R1bGUoe1xyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgU21hcnRDYWxlbmRhckNvbXBvbmVudCxcclxuICAgIENhbGVuZGFyQ29tcG9uZW50LFxyXG4gICAgVHJhbnNsYXRlUGlwZSxcclxuICAgIENhbGVuZGFyRXZlbnRDb21wb25lbnQsXHJcbiAgICBNb3JlRXZlbnRzTW9kYWxDb21wb25lbnQsXHJcbiAgICBUcmFuc2xhdGVNb250aFBpcGUsXHJcbiAgICBNb250aFNlbGVjdG9yQ29tcG9uZW50LFxyXG4gICAgRGF5Q29tcG9uZW50LFxyXG4gICAgRHVyYXRpb25FdmVudENvbXBvbmVudFxyXG4gIF0sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbXHJcbiAgICBTbWFydENhbGVuZGFyQ29tcG9uZW50XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU21hcnRBbmd1bGFyQ2FsZW5kYXJNb2R1bGUgeyB9XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic21hcnQtYW5ndWxhci1jYWxlbmRhci5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9zbWFydC1hbmd1bGFyLWNhbGVuZGFyL3NyYy9saWIvc21hcnQtYW5ndWxhci1jYWxlbmRhci5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN6QyxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sc0RBQXNELENBQUM7QUFDOUYsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMENBQTBDLENBQUM7QUFDN0UsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzlGLE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLDREQUE0RCxDQUFDO0FBQ3RHLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHNEQUFzRCxDQUFDO0FBQzlGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM5RCxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQztBQUM5RixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7O0FBc0JqRSxNQUFNLE9BQU8sMEJBQTBCOzt1SEFBMUIsMEJBQTBCO3dIQUExQiwwQkFBMEIsaUJBbEJuQyxzQkFBc0I7UUFDdEIsaUJBQWlCO1FBQ2pCLGFBQWE7UUFDYixzQkFBc0I7UUFDdEIsd0JBQXdCO1FBQ3hCLGtCQUFrQjtRQUNsQixzQkFBc0I7UUFDdEIsWUFBWTtRQUNaLHNCQUFzQjtRQUN0QixhQUFhLGFBR2IsWUFBWSxhQUdaLHNCQUFzQjt3SEFHYiwwQkFBMEIsWUFObkMsWUFBWTsyRkFNSCwwQkFBMEI7a0JBcEJ0QyxRQUFRO21CQUFDO29CQUNSLFlBQVksRUFBRTt3QkFDWixzQkFBc0I7d0JBQ3RCLGlCQUFpQjt3QkFDakIsYUFBYTt3QkFDYixzQkFBc0I7d0JBQ3RCLHdCQUF3Qjt3QkFDeEIsa0JBQWtCO3dCQUNsQixzQkFBc0I7d0JBQ3RCLFlBQVk7d0JBQ1osc0JBQXNCO3dCQUN0QixhQUFhO3FCQUNkO29CQUNELE9BQU8sRUFBRTt3QkFDUCxZQUFZO3FCQUNiO29CQUNELE9BQU8sRUFBRTt3QkFDUCxzQkFBc0I7cUJBQ3ZCO2lCQUNGIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgU21hcnRDYWxlbmRhckNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9zbWFydC1jYWxlbmRhci9zbWFydC1jYWxlbmRhci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBDYWxlbmRhckNvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9jYWxlbmRhci9jYWxlbmRhci5jb21wb25lbnQnO1xyXG5pbXBvcnQgeyBUcmFuc2xhdGVQaXBlIH0gZnJvbSAnLi9waXBlcy90cmFuc2xhdGUucGlwZSc7XHJcbmltcG9ydCB7IENhbGVuZGFyRXZlbnRDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvY2FsZW5kYXItZXZlbnQvY2FsZW5kYXItZXZlbnQuY29tcG9uZW50JztcbmltcG9ydCB7IE1vcmVFdmVudHNNb2RhbENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9tb3JlLWV2ZW50cy1tb2RhbC9tb3JlLWV2ZW50cy1tb2RhbC5jb21wb25lbnQnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9udGhQaXBlIH0gZnJvbSAnLi9waXBlcy90cmFuc2xhdGUtbW9udGgucGlwZSc7XG5pbXBvcnQgeyBNb250aFNlbGVjdG9yQ29tcG9uZW50IH0gZnJvbSAnLi9jb21wb25lbnRzL21vbnRoLXNlbGVjdG9yL21vbnRoLXNlbGVjdG9yLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBEYXlDb21wb25lbnQgfSBmcm9tICcuL2NvbXBvbmVudHMvZGF5L2RheS5jb21wb25lbnQnO1xuaW1wb3J0IHsgRHVyYXRpb25FdmVudENvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy9kdXJhdGlvbi1ldmVudC9kdXJhdGlvbi1ldmVudC5jb21wb25lbnQnO1xuaW1wb3J0IHsgV2Vla0NvbXBvbmVudCB9IGZyb20gJy4vY29tcG9uZW50cy93ZWVrL3dlZWsuY29tcG9uZW50JztcclxuXHJcbkBOZ01vZHVsZSh7XHJcbiAgZGVjbGFyYXRpb25zOiBbXHJcbiAgICBTbWFydENhbGVuZGFyQ29tcG9uZW50LFxyXG4gICAgQ2FsZW5kYXJDb21wb25lbnQsXHJcbiAgICBUcmFuc2xhdGVQaXBlLFxyXG4gICAgQ2FsZW5kYXJFdmVudENvbXBvbmVudCxcclxuICAgIE1vcmVFdmVudHNNb2RhbENvbXBvbmVudCxcclxuICAgIFRyYW5zbGF0ZU1vbnRoUGlwZSxcclxuICAgIE1vbnRoU2VsZWN0b3JDb21wb25lbnQsXHJcbiAgICBEYXlDb21wb25lbnQsXHJcbiAgICBEdXJhdGlvbkV2ZW50Q29tcG9uZW50LFxyXG4gICAgV2Vla0NvbXBvbmVudFxyXG4gIF0sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQ29tbW9uTW9kdWxlXHJcbiAgXSxcclxuICBleHBvcnRzOiBbXHJcbiAgICBTbWFydENhbGVuZGFyQ29tcG9uZW50XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgU21hcnRBbmd1bGFyQ2FsZW5kYXJNb2R1bGUgeyB9XHJcbiJdfQ==

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

@@ -593,9 +593,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+class WeekComponent {
+    constructor() {
+        this.startAt = 'sunday';
+        this.events = [];
+        this.eventClick = new EventEmitter();
+        this.weekDays = [
+            { tag: 'sun' },
+            { tag: 'mon' },
+            { tag: 'tue' },
+            { tag: 'wed' },
+            { tag: 'thu' },
+            { tag: 'fri' },
+            { tag: 'sat' },
+        ];
+        this.hourBlocks = Array.from({ length: 24 }, (_, i) => i);
+        this.allDayHeight = 60;
+        this.weekDayCols = [];
+        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() {
+        if (this.startAt === 'monday') {
+            this.weekDays = [
+                { tag: 'mon' },
+                { tag: 'tue' },
+                { tag: 'wed' },
+                { tag: 'thu' },
+                { tag: 'fri' },
+                { tag: 'sat' },
+                { tag: 'sun' },
+            ];
+        }
+        this.initWeekDayCols();
+    }
+    initWeekDayCols() {
+        this.weekDayCols = [];
+        for (let i = 0; i < 7; i++) {
+            const currentDate = new Date(this.startDate.getTime() + i * 24 * 60 * 60 * 1000);
+            this.weekDayCols.push({
+                date: currentDate,
+                eventCols: [],
+                allDayEvents: []
+            });
+        }
+        this.events.forEach(event => this.addEvent(event));
+    }
+    addEvent(event) {
+        const index = this.weekDayCols.findIndex(col => col.date.getFullYear() === event.start.getFullYear() &&
+            col.date.getMonth() === event.start.getMonth() &&
+            col.date.getDate() === event.start.getDate());
+        if (index === -1)
+            return;
+        const eventCols = this.weekDayCols[index].eventCols;
+        if (event.allDay) {
+            this.weekDayCols[index].allDayEvents.push(event);
+        }
+        else {
+            const colIndex = this.findAvalailableColumn(event, index);
+            if (colIndex === eventCols.length) {
+                eventCols.push({ events: [event] });
+            }
+            else {
+                eventCols[colIndex].events.push(event);
+            }
+        }
+    }
+    findAvalailableColumn(event, dayIndex) {
+        const eventCols = this.weekDayCols[dayIndex].eventCols;
+        for (let colIndex = 0; colIndex < eventCols.length; colIndex++) {
+            const col = 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 eventCols.length;
+    }
+    ngOnChanges(changes) {
+        if (changes['events'] || changes['startDate']) {
+            this.initWeekDayCols();
+        }
+    }
+    onResizeMouseDown(event) {
+        this.resizing = true;
+        this.startY = event.clientY;
+        this.startHeight = this.allDayHeight;
+        document.addEventListener('mousemove', this.onResizeMouseMove);
+        document.addEventListener('mouseup', this.onResizeMouseUp);
+    }
+    onEventClick(event) {
+        this.eventClick.emit(event);
+    }
+}
+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" }] });
+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"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { startAt: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }], startDate: [{
+                type: Input
+            }], eventClick: [{
+                type: Output
+            }] } });
+
 class SmartCalendarComponent {
     constructor() {
         this.mode = 'month';
+        this.startAt = 'sunday';
         this.currentMonth = {
             year: new Date().getFullYear(),
             month: new Date().getMonth() + 1
@@ -607,6 +735,9 @@ class SmartCalendarComponent {
         this.showDateSelector = false;
         this.selectedDate = new Date();
         this.selectedDateEvents = [];
+        this.weekStartDate = new Date();
+        this.weekEndDate = new Date(this.weekStartDate.getTime() + 6 * 24 * 60 * 60 * 1000);
+        this.weekEvents = [];
     }
     onDocumentClick(event) {
         var _a;
@@ -677,24 +808,25 @@ class SmartCalendarComponent {
             oldMonth
         });
     }
-    goToToday() {
-        const today = new Date();
+    nextDay() {
         const oldMonth = Object.assign({}, this.currentMonth);
+        const newDate = new Date(this.selectedDate);
+        newDate.setDate(newDate.getDate() + 1);
+        this.selectDate(newDate);
         this.currentMonth = {
-            year: today.getFullYear(),
-            month: today.getMonth() + 1
+            year: newDate.getFullYear(),
+            month: newDate.getMonth() + 1
         };
-        this.selectDate(today);
         if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
             this.monthChange.emit({
                 newMonth: this.currentMonth,
                 oldMonth
             });
     }
-    nextDay() {
+    prevDay() {
         const oldMonth = Object.assign({}, this.currentMonth);
         const newDate = new Date(this.selectedDate);
-        newDate.setDate(newDate.getDate() + 1);
+        newDate.setDate(newDate.getDate() - 1);
         this.selectDate(newDate);
         this.currentMonth = {
             year: newDate.getFullYear(),
@@ -706,11 +838,26 @@ class SmartCalendarComponent {
                 oldMonth
             });
     }
-    prevDay() {
+    nextWeek() {
         const oldMonth = Object.assign({}, this.currentMonth);
-        const newDate = new Date(this.selectedDate);
-        newDate.setDate(newDate.getDate() - 1);
-        this.selectDate(newDate);
+        const newDate = new Date(this.weekStartDate);
+        newDate.setDate(newDate.getDate() + 7);
+        this.selectWeekByDate(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
+            });
+    }
+    prevWeek() {
+        const oldMonth = Object.assign({}, this.currentMonth);
+        const newDate = new Date(this.weekStartDate);
+        newDate.setDate(newDate.getDate() - 7);
+        this.selectWeekByDate(newDate);
         this.currentMonth = {
             year: newDate.getFullYear(),
             month: newDate.getMonth() + 1
@@ -724,15 +871,34 @@ class SmartCalendarComponent {
     onNext() {
         if (this.mode === 'month')
             this.nextMonth();
+        else if (this.mode === 'week')
+            this.nextWeek();
         else if (this.mode === 'day')
             this.nextDay();
     }
     onPrev() {
         if (this.mode === 'month')
             this.prevMonth();
+        else if (this.mode === 'week')
+            this.prevWeek();
         else if (this.mode === 'day')
             this.prevDay();
     }
+    goToToday() {
+        const today = new Date();
+        const oldMonth = Object.assign({}, this.currentMonth);
+        this.currentMonth = {
+            year: today.getFullYear(),
+            month: today.getMonth() + 1
+        };
+        this.selectDate(today);
+        this.selectWeekByDate(today, false);
+        if (this.currentMonth.month !== oldMonth.month || this.currentMonth.year !== oldMonth.year)
+            this.monthChange.emit({
+                newMonth: this.currentMonth,
+                oldMonth
+            });
+    }
     setSelectedDateEvents() {
         this.selectedDateEvents = this.events.filter(event => {
             const eventDate = new Date(event.start);
@@ -762,20 +928,58 @@ class SmartCalendarComponent {
             });
         this.dateChanged.emit(this.selectedDate);
     }
+    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;
+        if (this.startAt === 'monday') {
+            diffToStart = (dayOfWeek === 0) ? -6 : 1 - dayOfWeek; // If Sunday, go back 6 days
+        }
+        else {
+            diffToStart = -dayOfWeek; // Sunday start
+        }
+        this.weekStartDate = new Date(date);
+        this.weekStartDate.setDate(date.getDate() + diffToStart);
+        this.weekEndDate = new Date(this.weekStartDate);
+        this.weekEndDate.setDate(this.weekStartDate.getDate() + 6);
+        // Filter events for the week
+        this.weekEvents = this.events.filter(event => {
+            const eventStart = new Date(event.start);
+            const eventEnd = event.end ? new Date(event.end) : eventStart;
+            return (eventStart <= this.weekEndDate) && (eventEnd >= this.weekStartDate);
+        });
+        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;
         if (newMode === 'day') {
             this.setSelectedDateEvents();
         }
+        else if (newMode === 'week') {
+            this.selectWeekByDate(this.selectedDate);
+        }
     }
 }
 SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { mode: "mode", 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 === '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'\"\n            (eventClick)=\"onEventClick($event)\"></lib-calendar>\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: "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\"\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" }] });
 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 === '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'\"\n            (eventClick)=\"onEventClick($event)\"></lib-calendar>\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\"\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"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { mode: [{
                 type: Input
+            }], startAt: [{
+                type: Input
             }], currentMonth: [{
                 type: Input
             }], events: [{
@@ -805,7 +1009,8 @@ SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.
         TranslateMonthPipe,
         MonthSelectorComponent,
         DayComponent,
-        DurationEventComponent], imports: [CommonModule], exports: [SmartCalendarComponent] });
+        DurationEventComponent,
+        WeekComponent], 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,
@@ -819,7 +1024,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         TranslateMonthPipe,
                         MonthSelectorComponent,
                         DayComponent,
-                        DurationEventComponent
+                        DurationEventComponent,
+                        WeekComponent
                     ],
                     imports: [
                         CommonModule