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

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

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, NgModule } from '@angular/core';
+import { Injectable, Component, Input, Pipe, EventEmitter, Output, ViewChild, HostListener, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 class SmartAngularCalendarService {
     constructor() { }
@@ -13,40 +15,531 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-class SmartAngularCalendarComponent {
-    constructor() { }
+const isDarkColor = (hexColor, threshold = 0.5) => {
+    const hex = hexColor.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    const [rs, gs, bs] = [r, g, b].map((c) => {
+        const cs = c / 255;
+        return cs <= 0.03928 ? cs / 12.92 : Math.pow((cs + 0.055) / 1.055, 2.4);
+    });
+    const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+    return luminance < threshold;
+};
+
+class CalendarEventComponent {
+    constructor() {
+        this.isDarkColor = false;
+    }
     ngOnInit() {
+        this.isDarkColor = isDarkColor(this.event.color || '#000000');
     }
 }
-SmartAngularCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SmartAngularCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartAngularCalendarComponent, selector: "lib-smart-angular-calendar", ngImport: i0, template: `
-    <p>
-      smart-angular-calendar works!
-    </p>
-  `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarComponent, decorators: [{
+CalendarEventComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalendarEventComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: { event: "event" }, ngImport: i0, template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n    [title]=\"event.title\">\r\n    <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.calendar-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarEventComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-smart-angular-calendar', template: `
-    <p>
-      smart-angular-calendar works!
-    </p>
-  ` }]
+            args: [{ selector: 'lib-calendar-event', template: "<div class=\"calendar-event-component\" style=\"--color: {{ event.color }};\" [ngClass]=\"{'dark-color': isDarkColor}\"\r\n    [title]=\"event.title\">\r\n    <div class=\"event-title\">{{ event.title }}</div>\r\n</div>", styles: [".calendar-event-component{position:relative;z-index:1;background-color:var(--color, rgba(0, 0, 0, .05));border-radius:4px;padding:2px 8px;cursor:pointer;-webkit-user-select:none;user-select:none;color:#212121}.calendar-event-component.dark-color{color:#fafafa}.event-title{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { event: [{
+                type: Input
+            }] } });
+
+const TRANSLATIONS = {
+    en: {
+        sun: 'Sunday',
+        mon: 'Monday',
+        tue: 'Tuesday',
+        wed: 'Wednesday',
+        thu: 'Thursday',
+        fri: 'Friday',
+        sat: 'Saturday',
+        today: 'Today',
+        january: 'January',
+        february: 'February',
+        march: 'March',
+        april: 'April',
+        may: 'May',
+        june: 'June',
+        july: 'July',
+        august: 'August',
+        september: 'September',
+        october: 'October',
+        november: 'November',
+        december: 'December',
+        moreEvents: 'More events',
+        nMoreEvents: '{{n}} More events'
+    },
+    es: {
+        sun: 'Domingo',
+        mon: 'Lunes',
+        tue: 'Martes',
+        wed: 'Miércoles',
+        thu: 'Jueves',
+        fri: 'Viernes',
+        sat: 'Sábado',
+        today: 'Hoy',
+        january: 'Enero',
+        february: 'Febrero',
+        march: 'Marzo',
+        april: 'Abril',
+        may: 'Mayo',
+        june: 'Junio',
+        july: 'Julio',
+        august: 'Agosto',
+        september: 'Septiembre',
+        october: 'Octubre',
+        november: 'Noviembre',
+        december: 'Diciembre',
+        moreEvents: 'Más eventos',
+        nMoreEvents: '{{n}} Eventos más'
+    },
+};
+const MONTHS = {
+    1: 'january',
+    2: 'february',
+    3: 'march',
+    4: 'april',
+    5: 'may',
+    6: 'june',
+    7: 'july',
+    8: 'august',
+    9: 'september',
+    10: 'october',
+    11: 'november',
+    12: 'december'
+};
+
+class TranslationService {
+    constructor() {
+        this.currentLanguage = 'en';
+    }
+    translate(tag, args) {
+        if (tag === 'nMoreEvents' && args) {
+            const n = args['n'];
+            return TRANSLATIONS[this.currentLanguage][tag].replace('{{n}}', n);
+        }
+        return TRANSLATIONS[this.currentLanguage][tag];
+    }
+    setLanguage(lang) {
+        if (TRANSLATIONS[lang]) {
+            this.currentLanguage = lang;
+        }
+    }
+}
+TranslationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TranslationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
         }], ctorParameters: function () { return []; } });
 
+class TranslatePipe {
+    constructor(translationService) {
+        this.translationService = translationService;
+    }
+    transform(tag, args) {
+        return this.translationService.translate(tag, args);
+    }
+}
+TranslatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslatePipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
+TranslatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TranslatePipe, name: "translate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translate'
+                }]
+        }], ctorParameters: function () { return [{ type: TranslationService }]; } });
+
+class MoreEventsModalComponent {
+    constructor() {
+        this.events = [];
+        this.close = new EventEmitter();
+        this.eventClick = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    isDarkColor(color) {
+        return isDarkColor(color || '#ffffff');
+    }
+    onClose() {
+        this.close.emit();
+    }
+    onEventClick(event) {
+        this.eventClick.emit(event);
+    }
+}
+MoreEventsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MoreEventsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: { events: "events", date: "date" }, outputs: { close: "close", eventClick: "eventClick" }, ngImport: i0, template: "<div class=\"more-events-modal-component\">\n    <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n    <div class=\"modal\">\n        <div class=\"header\">\n            <div class=\"title\">{{'moreEvents' | translate}}</div>\n            <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n            <button class=\"btn-close\" (click)=\"onClose()\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                    class=\"feather feather-x\" fill=\"yellow\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n            </button>\n        </div>\n\n        <div class=\"events-list\">\n            <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n                [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n                <div class=\"event-title\">{{ event.title }}</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;padding:8px;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none}.events-list .event-item.is-dark{color:#fafafa}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MoreEventsModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-more-events-modal', template: "<div class=\"more-events-modal-component\">\n    <div class=\"backdrop\" (click)=\"onClose()\"></div>\n\n    <div class=\"modal\">\n        <div class=\"header\">\n            <div class=\"title\">{{'moreEvents' | translate}}</div>\n            <div class=\"subtitle\">{{date.toLocaleDateString()}}</div>\n\n            <button class=\"btn-close\" (click)=\"onClose()\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\"\n                    stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\n                    class=\"feather feather-x\" fill=\"yellow\">\n                    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n                    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n                </svg>\n            </button>\n        </div>\n\n        <div class=\"events-list\">\n            <div class=\"event-item\" *ngFor=\"let event of events\" style=\"--color: {{event.color}};\"\n                [ngClass]=\"{'is-dark':isDarkColor(event.color)}\" (click)=\"onEventClick(event)\">\n                <div class=\"event-title\">{{ event.title }}</div>\n            </div>\n        </div>\n    </div>\n</div>", styles: [".more-events-modal-component{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;box-shadow:0 2px 8px #00000026}.more-events-modal-component .backdrop{position:absolute;top:0;left:0;z-index:1;width:100%;height:100%;background-color:#00000080;cursor:pointer}.modal{z-index:2;display:flex;flex-direction:column;max-width:400px;width:100%;max-height:80%;margin:24px;background-color:#fff;border-radius:8px}.header{position:relative;display:flex;flex-direction:column;padding:16px 64px 16px 16px}.title{font-size:18px;font-weight:700}.subtitle{font-size:13px;color:#666}.btn-close{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-close:hover{background-color:#f0f0f0}.events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:0 16px 16px;overflow-y:auto}.events-list .event-item{display:flex;padding:8px;background-color:var(--color, #e2e2e2);border-radius:4px;color:#212121;cursor:pointer;-webkit-user-select:none;user-select:none}.events-list .event-item.is-dark{color:#fafafa}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { events: [{
+                type: Input
+            }], date: [{
+                type: Input
+            }], close: [{
+                type: Output
+            }], eventClick: [{
+                type: Output
+            }] } });
+
+class TranslateMonthPipe {
+    constructor(translationService) {
+        this.translationService = translationService;
+    }
+    transform(value) {
+        const monthTag = MONTHS[value];
+        return this.translationService.translate(monthTag);
+    }
+}
+TranslateMonthPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, deps: [{ token: TranslationService }], target: i0.ɵɵFactoryTarget.Pipe });
+TranslateMonthPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, name: "translateMonth" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TranslateMonthPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'translateMonth'
+                }]
+        }], ctorParameters: function () { return [{ type: TranslationService }]; } });
+
+class MonthSelectorComponent {
+    constructor() {
+        this.monthSelected = new EventEmitter();
+        this.mode = 'decade';
+        this.currentYear = new Date().getFullYear();
+        this.currentMonth = new Date().getMonth() + 1;
+        this.selectedMonth = { year: new Date().getFullYear(), month: new Date().getMonth() + 1 };
+        this.selectedYear = new Date().getFullYear();
+        this.currentDecadeStart = Math.floor(this.selectedYear / 10) * 10;
+        this.years = [];
+        this.months = Object.keys(MONTHS).map(key => Number(key));
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.selectedYear = this.selectedMonth.year;
+            this.selectDecadeByYear(this.selectedYear);
+            this.setYears();
+        });
+    }
+    toggleMode(event) {
+        event.stopPropagation();
+        this.mode = this.mode === 'year' ? 'decade' : 'year';
+    }
+    setYears() {
+        this.years = [];
+        for (let i = this.currentDecadeStart; i < this.currentDecadeStart + 10; i++) {
+            this.years.push(i);
+        }
+    }
+    ;
+    next(event) {
+        event.stopPropagation();
+        if (this.mode === 'year') {
+            this.selectedYear++;
+        }
+        else {
+            this.currentDecadeStart += 10;
+            this.setYears();
+            this.selectedYear = this.currentDecadeStart;
+        }
+    }
+    previous(event) {
+        event.stopPropagation();
+        if (this.mode === 'year') {
+            this.selectedYear--;
+        }
+        else {
+            this.currentDecadeStart -= 10;
+            this.setYears();
+            this.selectedYear = this.currentDecadeStart;
+        }
+    }
+    selectYear(event, year) {
+        event.stopPropagation();
+        this.selectedYear = year;
+        this.mode = 'year';
+    }
+    selectDecadeByYear(year) {
+        this.currentDecadeStart = Math.floor(year / 10) * 10;
+        this.setYears();
+        this.mode = 'decade';
+    }
+    selectMonth(month) {
+        this.monthSelected.emit({ year: this.selectedYear, month });
+    }
+}
+MonthSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MonthSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: { selectedMonth: "selectedMonth" }, outputs: { monthSelected: "monthSelected" }, ngImport: i0, template: "<div class=\"month-selector-component\">\n    <div class=\"header\">\n        <button class=\"btn-range\" *ngIf=\"mode === 'decade'\" (click)=\"toggleMode($event)\">\n            <span>{{currentDecadeStart}} - {{currentDecadeStart + 9}}</span>\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                fill=\"currentColor\">\n                <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n        </button>\n\n        <button class=\"btn-range\" *ngIf=\"mode === 'year'\" (click)=\"toggleMode($event)\">\n            <span>{{selectedYear}}</span>\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: rotate(180deg);\" height=\"24px\"\n                viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n                <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n        </button>\n\n        <div class=\"nav-controls\">\n            <button class=\"btn-prev\" (click)=\"previous($event)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-next\" (click)=\"next($event)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"years-grid\" *ngIf=\"mode === 'decade'\">\n        <button class=\"btn-year\" *ngFor=\"let year of years\"\n            [ngClass]=\"{selected: year === selectedYear, current: year === currentYear }\"\n            (click)=\"selectYear($event, year)\">\n            {{ year }}\n        </button>\n    </div>\n\n    <div class=\"months-grid\" *ngIf=\"mode === 'year'\">\n        <button class=\"btn-month\" *ngFor=\"let month of months\"\n            [ngClass]=\"{selected: month === selectedMonth.month && selectedYear === selectedMonth.year, current: currentYear === selectedYear && month === currentMonth}\"\n            (click)=\"selectMonth(month)\">\n            {{ month | translateMonth | slice:0:3 }}\n        </button>\n    </div>\n</div>", styles: [".month-selector-component{display:flex;flex-direction:column;width:280px;-webkit-user-select:none;user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.btn-range{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;background:none;border:none;border-radius:50px;cursor:pointer;font-weight:600}.btn-range:hover{background-color:#0000000a}.btn-range span{white-space:nowrap}.nav-controls{display:flex;align-items:center}.btn-prev,.btn-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-prev:hover,.btn-next:hover{background-color:#0000000a}.years-grid,.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.btn-month,.btn-year{display:flex;align-items:center;justify-content:center;padding:6px 12px;border:none;background:none;border-radius:50px;font-size:14px;cursor:pointer}.btn-month:hover,.btn-year:hover{background-color:#0000000a}.btn-month.selected,.btn-year.selected{border:1px solid rgba(0,0,0,.12)}.btn-month.current,.btn-year.current{background-color:#0000001f}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MonthSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-month-selector', template: "<div class=\"month-selector-component\">\n    <div class=\"header\">\n        <button class=\"btn-range\" *ngIf=\"mode === 'decade'\" (click)=\"toggleMode($event)\">\n            <span>{{currentDecadeStart}} - {{currentDecadeStart + 9}}</span>\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                fill=\"currentColor\">\n                <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n        </button>\n\n        <button class=\"btn-range\" *ngIf=\"mode === 'year'\" (click)=\"toggleMode($event)\">\n            <span>{{selectedYear}}</span>\n\n            <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"transform: rotate(180deg);\" height=\"24px\"\n                viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n                <path d=\"M480-360 280-560h400L480-360Z\" />\n            </svg>\n        </button>\n\n        <div class=\"nav-controls\">\n            <button class=\"btn-prev\" (click)=\"previous($event)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\n                </svg>\n            </button>\n\n            <button class=\"btn-next\" (click)=\"next($event)\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\n                    fill=\"currentColor\">\n                    <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\n                </svg>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"years-grid\" *ngIf=\"mode === 'decade'\">\n        <button class=\"btn-year\" *ngFor=\"let year of years\"\n            [ngClass]=\"{selected: year === selectedYear, current: year === currentYear }\"\n            (click)=\"selectYear($event, year)\">\n            {{ year }}\n        </button>\n    </div>\n\n    <div class=\"months-grid\" *ngIf=\"mode === 'year'\">\n        <button class=\"btn-month\" *ngFor=\"let month of months\"\n            [ngClass]=\"{selected: month === selectedMonth.month && selectedYear === selectedMonth.year, current: currentYear === selectedYear && month === currentMonth}\"\n            (click)=\"selectMonth(month)\">\n            {{ month | translateMonth | slice:0:3 }}\n        </button>\n    </div>\n</div>", styles: [".month-selector-component{display:flex;flex-direction:column;width:280px;-webkit-user-select:none;user-select:none}.header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px}.btn-range{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;background:none;border:none;border-radius:50px;cursor:pointer;font-weight:600}.btn-range:hover{background-color:#0000000a}.btn-range span{white-space:nowrap}.nav-controls{display:flex;align-items:center}.btn-prev,.btn-next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;cursor:pointer}.btn-prev:hover,.btn-next:hover{background-color:#0000000a}.years-grid,.months-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 16px}.btn-month,.btn-year{display:flex;align-items:center;justify-content:center;padding:6px 12px;border:none;background:none;border-radius:50px;font-size:14px;cursor:pointer}.btn-month:hover,.btn-year:hover{background-color:#0000000a}.btn-month.selected,.btn-year.selected{border:1px solid rgba(0,0,0,.12)}.btn-month.current,.btn-year.current{background-color:#0000001f}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { monthSelected: [{
+                type: Output
+            }], selectedMonth: [{
+                type: Input
+            }] } });
+
+class CalendarComponent {
+    constructor() {
+        this.currentMonth = {
+            year: new Date().getFullYear(),
+            month: new Date().getMonth() + 1
+        };
+        this.events = [];
+        this.startAt = 'sunday';
+        this.monthChange = new EventEmitter();
+        this.dayCells = [];
+        this.weekDays = [
+            { tag: 'sun' },
+            { tag: 'mon' },
+            { tag: 'tue' },
+            { tag: 'wed' },
+            { tag: 'thu' },
+            { tag: 'fri' },
+            { tag: 'sat' },
+        ];
+        this.showMoreEventsModal = false;
+        this.moreEventsModalEvents = [];
+        this.currentMonthTitle = ``;
+        this.showDateSelector = false;
+        this.resizeListener = () => {
+            this.setCalendarBodyHeight();
+            this.setMaxEventsInDayCell();
+        };
+    }
+    onDocumentClick(event) {
+        if (!this.showDateSelector)
+            return;
+        const dropdown = this.dateSelectorDropdown?.nativeElement;
+        const button = document.querySelector('.btn-date-selector');
+        if (dropdown && !dropdown.contains(event.target) && button && !button.contains(event.target)) {
+            this.showDateSelector = false;
+        }
+    }
+    isToday(date) {
+        const today = new Date();
+        return date.getDate() === today.getDate() &&
+            date.getMonth() === today.getMonth() &&
+            date.getFullYear() === today.getFullYear();
+    }
+    getEventsForDay(date) {
+        return this.events.filter(event => {
+            const eventStart = new Date(event.start);
+            const eventEnd = event.end ? new Date(event.end) : eventStart;
+            return date >= new Date(eventStart.getFullYear(), eventStart.getMonth(), eventStart.getDate()) &&
+                date <= new Date(eventEnd.getFullYear(), eventEnd.getMonth(), eventEnd.getDate());
+        });
+    }
+    initDaysCells() {
+        const daysInMonth = new Date(this.currentMonth.year, this.currentMonth.month, 0).getDate();
+        const firstDayOfWeek = new Date(this.currentMonth.year, this.currentMonth.month - 1, 1).getDay();
+        const prevDaysCount = this.startAt === 'monday' ? (firstDayOfWeek === 0 ? 6 : firstDayOfWeek - 1) : firstDayOfWeek;
+        // const nextDaysCount = (7 - ((prevDaysCount + daysInMonth) % 7)) % 7;
+        const nextDaysCount = 42 - (prevDaysCount + daysInMonth); // Always show 6 weeks
+        this.dayCells = [];
+        for (let i = 0; i < prevDaysCount; i++) {
+            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, i - prevDaysCount + 1);
+            const _events = this.getEventsForDay(date);
+            this.dayCells.push({
+                date,
+                events: _events,
+                isOutsideMonth: true,
+                isToday: this.isToday(date)
+            });
+        }
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, day);
+            const _events = this.getEventsForDay(date);
+            this.dayCells.push({
+                date,
+                events: _events,
+                isToday: this.isToday(date)
+            });
+        }
+        for (let i = 1; i <= nextDaysCount; i++) {
+            const date = new Date(this.currentMonth.year, this.currentMonth.month - 1, daysInMonth + i);
+            const _events = this.getEventsForDay(date);
+            this.dayCells.push({
+                date,
+                events: _events,
+                isOutsideMonth: true,
+                isToday: this.isToday(date)
+            });
+        }
+    }
+    setCalendarBodyHeight() {
+        this.calendarBodyHeight = this.calendarBodyRef.nativeElement.clientHeight;
+    }
+    setMaxEventsInDayCell() {
+        const element = document.getElementsByClassName('events-list')[0];
+        console.log(element);
+        if (element) {
+            const eventItemHeight = 22;
+            this.maxEventsInDayCell = Math.floor(element.clientHeight / eventItemHeight) - 1;
+        }
+    }
+    openMoreEventsModal(date, events) {
+        this.moreEventsModalDate = date;
+        this.moreEventsModalEvents = events;
+        this.showMoreEventsModal = true;
+    }
+    closeMoreEventsModal() {
+        this.showMoreEventsModal = false;
+        this.moreEventsModalDate = undefined;
+        this.moreEventsModalEvents = [];
+    }
+    nextMonth() {
+        const oldMonth = { ...this.currentMonth };
+        if (this.currentMonth.month === 12) {
+            this.currentMonth.month = 1;
+            this.currentMonth.year += 1;
+        }
+        else {
+            this.currentMonth.month += 1;
+        }
+        this.initDaysCells();
+        this.monthChange.emit({
+            newMonth: { ...this.currentMonth },
+            oldMonth
+        });
+    }
+    prevMonth() {
+        const oldMonth = { ...this.currentMonth };
+        if (this.currentMonth.month === 1) {
+            this.currentMonth.month = 12;
+            this.currentMonth.year -= 1;
+        }
+        else {
+            this.currentMonth.month -= 1;
+        }
+        this.initDaysCells();
+        this.monthChange.emit({
+            newMonth: { ...this.currentMonth },
+            oldMonth
+        });
+    }
+    goToToday() {
+        const today = new Date();
+        const oldMonth = { ...this.currentMonth };
+        this.currentMonth.year = today.getFullYear();
+        this.currentMonth.month = today.getMonth() + 1;
+        this.initDaysCells();
+        this.monthChange.emit({
+            newMonth: { ...this.currentMonth },
+            oldMonth
+        });
+    }
+    toggleDateSelector() {
+        this.showDateSelector = !this.showDateSelector;
+    }
+    onMonthSelected(newMonth) {
+        const oldMonth = { ...this.currentMonth };
+        this.currentMonth = newMonth;
+        this.initDaysCells();
+        this.monthChange.emit({
+            newMonth: { ...this.currentMonth },
+            oldMonth
+        });
+        this.showDateSelector = false;
+    }
+    ngOnInit() {
+        if (this.startAt === 'monday') {
+            this.weekDays = [
+                { tag: 'mon' },
+                { tag: 'tue' },
+                { tag: 'wed' },
+                { tag: 'thu' },
+                { tag: 'fri' },
+                { tag: 'sat' },
+                { tag: 'sun' },
+            ];
+        }
+        this.initDaysCells();
+    }
+    ngAfterViewInit() {
+        window.addEventListener('resize', this.resizeListener);
+        setTimeout(() => {
+            this.setCalendarBodyHeight();
+            this.setMaxEventsInDayCell();
+        });
+    }
+    onDestroy() {
+        window.removeEventListener('resize', this.resizeListener);
+    }
+}
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "lib-calendar", inputs: { currentMonth: "currentMonth", events: "events", startAt: "startAt" }, outputs: { monthChange: "monthChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "calendarRef", first: true, predicate: ["calendar"], descendants: true }, { propertyName: "calendarBodyRef", first: true, predicate: ["calendarBody"], descendants: true }, { propertyName: "dateSelectorDropdown", first: true, predicate: ["dateSelectorDropdown"], descendants: true }], ngImport: i0, template: "<div class=\"calendar-component\">\r\n    <div class=\"header\">\r\n        <div class=\"nav-controls\">\r\n            <button class=\"btn-prev\" (click)=\"prevMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\r\n\r\n            <button class=\"btn-next\" (click)=\"nextMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n                </svg>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"date-selector-container\">\r\n            <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\r\n                <span>{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\r\n\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\r\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\r\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"view-selector\">\r\n            <button class=\"btn-view active\">\r\n                <!-- month view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\n                        d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- week view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\n                        d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- day view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\n                        d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"body\" #calendarBody>\r\n        <div class=\"week-days\">\r\n            <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n                {{ day.tag | translate | slice:0:3 }}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"days-grid\">\r\n            <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n                [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n                <div class=\"day-number\">\r\n                    {{ day.date.getDate() }}\r\n                </div>\r\n\r\n                <div class=\"events-list\">\r\n                    <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\"\r\n                        [event]=\"event\"></lib-calendar-event>\r\n\r\n                    <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n                        (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n                        {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"footer\">\r\n        Footer\r\n    </div>\r\n\r\n    <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n        [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n        (eventClick)=\"closeMoreEventsModal()\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalendarEventComponent, selector: "lib-calendar-event", inputs: ["event"] }, { kind: "component", type: MoreEventsModalComponent, selector: "lib-more-events-modal", inputs: ["events", "date"], outputs: ["close", "eventClick"] }, { kind: "component", type: MonthSelectorComponent, selector: "lib-month-selector", inputs: ["selectedMonth"], outputs: ["monthSelected"] }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: TranslateMonthPipe, name: "translateMonth" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-calendar', template: "<div class=\"calendar-component\">\r\n    <div class=\"header\">\r\n        <div class=\"nav-controls\">\r\n            <button class=\"btn-prev\" (click)=\"prevMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-today\" (click)=\"goToToday()\">{{'today' | translate}}</button>\r\n\r\n            <button class=\"btn-next\" (click)=\"nextMonth()\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z\" />\r\n                </svg>\r\n            </button>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"date-selector-container\">\r\n            <button class=\"btn-date-selector\" (click)=\"toggleDateSelector()\">\r\n                <span>{{ currentMonth.month | translateMonth}} - {{ currentMonth.year }}</span>\r\n\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path d=\"M480-360 280-560h400L480-360Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <div class=\"date-selector-dropdown\" *ngIf=\"showDateSelector\" #dateSelectorDropdown>\r\n                <lib-month-selector [selectedMonth]=\"currentMonth\"\r\n                    (monthSelected)=\"onMonthSelected($event)\"></lib-month-selector>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"spacer\"></div>\r\n\r\n        <div class=\"view-selector\">\r\n            <button class=\"btn-view active\">\r\n                <!-- month view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\n                        d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- week view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\n                        d=\"M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm360-80h100v-480H520v480Zm-180 0h100v-480H340v480Zm-180 0h100v-480H160v480Zm540 0h100v-480H700v480Z\" />\r\n                </svg>\r\n            </button>\r\n\r\n            <button class=\"btn-view\">\r\n                <!-- day view -->\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\"\r\n                    fill=\"currentColor\">\r\n                    <path\r\n                        d=\"M120-160v-80h720v80H120Zm0-560v-80h720v80H120Zm80 400q-33 0-56.5-23.5T120-400v-160q0-33 23.5-56.5T200-640h560q33 0 56.5 23.5T840-560v160q0 33-23.5 56.5T760-320H200Zm0-80h560v-160H200v160Zm0-160v160-160Z\" />\r\n                </svg>\r\n            </button>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"body\" #calendarBody>\r\n        <div class=\"week-days\">\r\n            <div class=\"week-day\" *ngFor=\"let day of weekDays\">\r\n                {{ day.tag | translate | slice:0:3 }}\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"days-grid\">\r\n            <div class=\"day-cell\" *ngFor=\"let day of dayCells; let i = index\"\r\n                [ngClass]=\"{'outside-month': day.isOutsideMonth, 'is-today': day.isToday}\">\r\n                <div class=\"day-number\">\r\n                    {{ day.date.getDate() }}\r\n                </div>\r\n\r\n                <div class=\"events-list\">\r\n                    <lib-calendar-event *ngFor=\"let event of day.events | slice:0:maxEventsInDayCell\"\r\n                        [event]=\"event\"></lib-calendar-event>\r\n\r\n                    <div class=\"more-events\" *ngIf=\"day.events.length > (maxEventsInDayCell || 0)\"\r\n                        (click)=\"openMoreEventsModal(day.date, day.events)\">\r\n                        {{'nMoreEvents' | translate: {n:(day.events.length - (maxEventsInDayCell || 0))} }}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"footer\">\r\n        Footer\r\n    </div>\r\n\r\n    <lib-more-events-modal *ngIf=\"showMoreEventsModal && moreEventsModalDate\" [events]=\"moreEventsModalEvents\"\r\n        [date]=\"moreEventsModalDate\" (close)=\"closeMoreEventsModal()\"\r\n        (eventClick)=\"closeMoreEventsModal()\"></lib-more-events-modal>\r\n</div>", styles: ["*{box-sizing:border-box;margin:0;padding:0}.calendar-component{display:flex;flex-direction:column;width:100%;height:100%}.header{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:2px 16px}.header .spacer{flex:1 1 auto}.header .nav-controls{display:flex;align-items:center}.header .nav-controls .btn-prev,.header .nav-controls .btn-next{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:none;background:none;border-radius:50%;cursor:pointer;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-prev:hover,.header .nav-controls .btn-next:hover{background-color:#eee}.header .nav-controls .btn-today{display:flex;align-items:center;height:30px;padding:0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .nav-controls .btn-today:hover{background-color:#eee}.header .view-selector{display:flex;align-items:center}.header .view-selector .btn-view{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #cccccc;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}.header .view-selector .btn-view:first-child{border-top-left-radius:4px;border-bottom-left-radius:4px;border-right:none}.header .view-selector .btn-view:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px;border-left:none}.header .view-selector .btn-view:hover{background-color:#eee}.header .view-selector .btn-view svg{width:22px;height:22px}.header .view-selector .btn-view.active{background-color:#0000001a}.header .date-selector-container{position:relative}.header .date-selector-container .date-selector-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#fff;border-radius:4px;box-shadow:0 2px 24px #0000004d;z-index:3}.header .date-selector-container .date-selector-dropdown:before{content:\"\";position:absolute;top:-6px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background-color:#fff;border-radius:2px}.header .btn-date-selector{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px 0 12px;border:none;background:none;border-radius:50px;cursor:pointer;font-weight:600;-webkit-user-select:none;user-select:none}.header .btn-date-selector:hover{background-color:#eee}.body{flex:1 1 0;display:flex;flex-direction:column;width:100%;min-height:0;height:100%}.week-days{flex-shrink:0;display:grid;grid-template-columns:repeat(7,1fr);width:100%;background-color:#f4f4f4}.week-day{display:flex;align-items:center;justify-content:center;padding:4px;background-color:#fff;font-size:14px;color:#00000080}.days-grid{flex:1 1 0;display:grid;grid-template-columns:repeat(7,1fr);gap:1px;grid-auto-rows:1fr;width:100%;padding:1px;background-color:#f4f4f4;min-height:0;height:100%}.day-cell{display:flex;flex-direction:column;gap:4px;padding:4px;background-color:#fff;overflow:hidden}.day-cell .day-number{display:flex;align-items:center;justify-content:center;width:fit-content;aspect-ratio:1;padding:2px;border-radius:50%;font-size:12px;line-height:16px;font-weight:600;-webkit-user-select:none;user-select:none}.day-cell.outside-month{background-color:#f8f8f8}.day-cell.is-today .day-number{background-color:#007bff;color:#fff}.day-cell .events-list{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;overflow:hidden;min-height:0;max-height:100%}.day-cell .events-list .more-events{padding:2px 8px;border-radius:4px;font-size:12px;color:#555;cursor:pointer}.day-cell .events-list .more-events:hover{background-color:#eee}.footer{flex-shrink:0;background-color:#add8e6}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { currentMonth: [{
+                type: Input
+            }], events: [{
+                type: Input
+            }], startAt: [{
+                type: Input
+            }], monthChange: [{
+                type: Output
+            }], calendarRef: [{
+                type: ViewChild,
+                args: ['calendar']
+            }], calendarBodyRef: [{
+                type: ViewChild,
+                args: ['calendarBody']
+            }], dateSelectorDropdown: [{
+                type: ViewChild,
+                args: ['dateSelectorDropdown', { static: false }]
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class SmartCalendarComponent {
+    constructor() {
+        this.events = [];
+    }
+    ngOnInit() {
+    }
+}
+SmartCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SmartCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SmartCalendarComponent, selector: "smart-calendar", inputs: { events: "events" }, ngImport: i0, template: "<div class=\"smart-calendar-component\">\n    <lib-calendar [events]=\"events\"></lib-calendar>\n</div>", styles: [".smart-calendar-component{width:100%;height:100%;background-color:#fff;border:1px solid #dddddd}\n"], dependencies: [{ kind: "component", type: CalendarComponent, selector: "lib-calendar", inputs: ["currentMonth", "events", "startAt"], outputs: ["monthChange"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartCalendarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-calendar', template: "<div class=\"smart-calendar-component\">\n    <lib-calendar [events]=\"events\"></lib-calendar>\n</div>", styles: [".smart-calendar-component{width:100%;height:100%;background-color:#fff;border:1px solid #dddddd}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { events: [{
+                type: Input
+            }] } });
+
 class SmartAngularCalendarModule {
 }
 SmartAngularCalendarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, declarations: [SmartAngularCalendarComponent], exports: [SmartAngularCalendarComponent] });
-SmartAngularCalendarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule });
+SmartAngularCalendarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmartAngularCalendarModule, declarations: [SmartCalendarComponent,
+        CalendarComponent,
+        TranslatePipe,
+        CalendarEventComponent,
+        MoreEventsModalComponent,
+        TranslateMonthPipe,
+        MonthSelectorComponent], 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,
             args: [{
                     declarations: [
-                        SmartAngularCalendarComponent
+                        SmartCalendarComponent,
+                        CalendarComponent,
+                        TranslatePipe,
+                        CalendarEventComponent,
+                        MoreEventsModalComponent,
+                        TranslateMonthPipe,
+                        MonthSelectorComponent
+                    ],
+                    imports: [
+                        CommonModule
                     ],
-                    imports: [],
                     exports: [
-                        SmartAngularCalendarComponent
+                        SmartCalendarComponent
                     ]
                 }]
         }] });
@@ -59,5 +552,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SmartAngularCalendarComponent, SmartAngularCalendarModule, SmartAngularCalendarService };
+export { SmartAngularCalendarModule, SmartAngularCalendarService, SmartCalendarComponent };
 //# sourceMappingURL=smart-solutions-tech-smart-angular-calendar.mjs.map