mn-angular-lib 0.0.52 → 0.0.54

package/fesm2022/mn-angular-lib.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, Injectable, Optional, Inject, inject, Input, ChangeDetectionStrategy, Component, HostBinding, signal, ElementRef, DestroyRef, Self, APP_INITIALIZER, HostListener, forwardRef, Directive, EventEmitter, TemplateRef, Output, ViewContainerRef, ViewChild, ViewChildren, ApplicationRef, EnvironmentInjector, createComponent, SkipSelf, Attribute, Pipe } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
-import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, map, catchError, of } from 'rxjs';
+import { BehaviorSubject, firstValueFrom, skip, Subject, debounceTime, of, takeUntil, map, catchError } from 'rxjs';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgOptimizedImage, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
 import { tv } from 'tailwind-variants';
@@ -606,6 +606,7 @@ class MnLanguageService {
     _translations = {};
     _locale$ = new BehaviorSubject('en');
     _urlPattern = null;
+    _debug = false;
     /** Observable of the current active locale. */
     locale$ = this._locale$.asObservable();
     constructor(http) {
@@ -615,11 +616,23 @@ class MnLanguageService {
     get locale() {
         return this._locale$.value;
     }
+    /**
+     * Enable or disable debug logging.
+     */
+    setDebug(enabled) {
+        this._debug = enabled;
+        if (enabled) {
+            console.log(`[MnLanguage] Debug mode enabled`);
+        }
+    }
     /**
      * Configure the URL pattern used to fetch translation files.
      * Use `{locale}` as placeholder, e.g. `"assets/i18n/{locale}.json"`.
      */
     configure(urlPattern) {
+        if (this._debug) {
+            console.log(`[MnLanguage] Configured urlPattern: ${urlPattern}`);
+        }
         this._urlPattern = urlPattern;
     }
     /**
@@ -634,9 +647,15 @@ class MnLanguageService {
             return;
         }
         const url = this._urlPattern.replace('{locale}', locale);
+        if (this._debug) {
+            console.log(`[MnLanguage] Loading locale "${locale}" from ${url}`);
+        }
         try {
             const map = await firstValueFrom(this.http.get(url));
             this._translations[locale] = map ?? {};
+            if (this._debug) {
+                console.log(`[MnLanguage] Loaded locale "${locale}"`, this._translations[locale]);
+            }
         }
         catch (err) {
             console.warn(`[MnLanguage] Failed to load translations from ${url}`, err);
@@ -647,6 +666,9 @@ class MnLanguageService {
      * Switch the active locale. Loads translations if not yet loaded.
      */
     async setLocale(locale) {
+        if (this._debug) {
+            console.log(`[MnLanguage] Setting locale to "${locale}"`);
+        }
         await this.loadLocale(locale);
         this._locale$.next(locale);
     }
@@ -667,8 +689,11 @@ class MnLanguageService {
      */
     translate(key, params) {
         const map = this._translations[this.locale] ?? {};
-        let value = map[key];
+        let value = this.getValueFromMap(map, key);
         if (value === undefined) {
+            if (this._debug) {
+                console.warn(`[MnLanguage] Missing translation for key: "${key}" in locale: "${this.locale}"`);
+            }
             return key;
         }
         if (params) {
@@ -678,6 +703,21 @@ class MnLanguageService {
         }
         return value;
     }
+    /**
+     * Helper to retrieve a value from a potentially nested translation map using a dot-notated key.
+     */
+    getValueFromMap(map, key) {
+        if (map[key] !== undefined)
+            return map[key];
+        const parts = key.split('.');
+        let current = map;
+        for (const part of parts) {
+            if (current === null || typeof current !== 'object')
+                return undefined;
+            current = current[part];
+        }
+        return typeof current === 'string' ? current : undefined;
+    }
     /**
      * Shorthand alias for `translate`.
      */
@@ -739,6 +779,7 @@ class MnConfigService {
      */
     async load(url, debugMode = false) {
         this._debugMode = debugMode;
+        this.lang.setDebug(debugMode);
         let text;
         try {
             text = await firstValueFrom(this.http.get(url, { responseType: 'text' }));
@@ -768,9 +809,12 @@ class MnConfigService {
         const langCfg = cfg.language;
         if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
             const lc = langCfg;
+            if (this._debugMode) {
+                console.log(`[MnConfig] Applying language config from file`, lc);
+            }
             this.lang.configure(lc.urlPattern);
             const effectiveLocale = this.lang.resolveLocaleForDomain(lc.domainLocaleMap, lc.defaultLocale);
-            const localesToLoad = lc.preload ?? [effectiveLocale];
+            const localesToLoad = Array.from(new Set([...(lc.preload ?? []), effectiveLocale]));
             await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
             await this.lang.setLocale(effectiveLocale);
         }
@@ -791,9 +835,12 @@ class MnConfigService {
             const langCfg = config['language'];
             if (isPlainObject(langCfg) && typeof langCfg['urlPattern'] === 'string') {
                 const lc = langCfg;
+                if (this._debugMode) {
+                    console.log(`[MnConfig] Applying language config from object`, lc);
+                }
                 this.lang.configure(lc.urlPattern);
                 const effectiveLocale = this.lang.resolveLocaleForDomain(lc.domainLocaleMap, lc.defaultLocale);
-                const localesToLoad = lc.preload ?? [effectiveLocale];
+                const localesToLoad = Array.from(new Set([...(lc.preload ?? []), effectiveLocale]));
                 await Promise.all(localesToLoad.map(l => this.lang.loadLocale(l)));
                 await this.lang.setLocale(effectiveLocale);
             }
@@ -1278,7 +1325,7 @@ function provideMnComponentConfig(token, componentName, initial) {
             const cfg = resolveConfig();
             // Re-resolve translatable values whenever the locale changes.
             // skip(1) because the current locale was already used for the initial resolve.
-            const sub = lang.locale$.pipe(skip(1)).subscribe(() => {
+            const sub = lang.locale$.subscribe(() => {
                 const updated = resolveConfig();
                 // Mutate the existing object in place so all template bindings pick up the new values.
                 for (const key of Object.keys(updated)) {
@@ -4861,6 +4908,1274 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 // Types
 
+/**
+ * Available calendar view modes.
+ */
+var CalendarView;
+(function (CalendarView) {
+    CalendarView["MONTH"] = "MONTH";
+    CalendarView["WEEK"] = "WEEK";
+    CalendarView["DAY"] = "DAY";
+})(CalendarView || (CalendarView = {}));
+/**
+ * Builds locale-derived day name arrays from a BCP 47 locale string.
+ * Uses January 1 2024 (a Monday) as the reference date.
+ */
+function buildDayNames(locale) {
+    const base = new Date(2024, 0, 1); // 2024-01-01 is a Monday
+    const short = [];
+    const long = [];
+    for (let i = 0; i < 7; i++) {
+        const d = new Date(base);
+        d.setDate(base.getDate() + i);
+        short.push(d.toLocaleDateString(locale, { weekday: 'short' }));
+        long.push(d.toLocaleDateString(locale, { weekday: 'long' }));
+    }
+    return { short, long };
+}
+/** Default calendar configuration values. */
+const DEFAULT_CALENDAR_CONFIG = (() => {
+    const locale = 'en-US';
+    const names = buildDayNames(locale);
+    return {
+        startHour: 7,
+        endHour: 22,
+        locale,
+        todayLabel: 'Today',
+        upcomingEventsTitle: 'Upcoming events',
+        viewLabels: { MONTH: 'Month', WEEK: 'Week', DAY: 'Day' },
+        shortDayNames: names.short,
+        longDayNames: names.long,
+        mobileBreakpoint: 768,
+    };
+})();
+/**
+ * Injection token for the resolved calendar configuration.
+ *
+ * Prefer using {@link MN_CALENDAR_CONFIG} with `provideMnComponentConfig`
+ * so that settings can be managed via `mn-config.json5`. This token is
+ * kept for backward compatibility and manual `providers` usage.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: CALENDAR_CONFIG, useValue: { startHour: 8, endHour: 20, locale: 'nl-NL' } }
+ * ]
+ * ```
+ */
+const CALENDAR_CONFIG = new InjectionToken('CalendarConfig', {
+    providedIn: 'root',
+    factory: () => DEFAULT_CALENDAR_CONFIG
+});
+/**
+ * Injection token resolved via `MnConfigService` (the `mn-config.json5` system).
+ *
+ * Use the helper {@link provideMnCalendarConfig} in the component's `providers`
+ * array so that calendar settings are read from the config file and support
+ * `$translate` markers, section scoping, and instance-id overrides.
+ *
+ * Component name in the config file: `'mn-calendar'`.
+ *
+ * @example
+ * ```json5
+ * // mn-config.json5
+ * {
+ *   defaults: {
+ *     "mn-calendar": {
+ *       startHour: 8,
+ *       endHour: 20,
+ *       locale: "nl-NL",
+ *       todayLabel: { $translate: "calendar.today" }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+const MN_CALENDAR_CONFIG = new InjectionToken('MN_CALENDAR_CONFIG');
+/** Component name used to look up calendar settings in `mn-config.json5`. */
+const MN_CALENDAR_COMPONENT_NAME = 'mn-calendar';
+/**
+ * Provider helper that wires the calendar into the `mn-config` system.
+ *
+ * Add this to the `providers` array of the component (or module) that hosts
+ * `<app-calendar-view>`. It reads defaults and overrides from `mn-config.json5`
+ * under the key `"mn-calendar"` and provides them via {@link MN_CALENDAR_CONFIG}.
+ *
+ * @param initial — optional partial defaults merged before config-file values.
+ */
+function provideMnCalendarConfig(initial) {
+    return provideMnComponentConfig(MN_CALENDAR_CONFIG, MN_CALENDAR_COMPONENT_NAME, initial);
+}
+/**
+ * Merges a partial config with defaults, re-deriving day names from locale when needed.
+ */
+function resolveCalendarConfig(partial) {
+    if (!partial)
+        return { ...DEFAULT_CALENDAR_CONFIG };
+    const locale = partial.locale ?? DEFAULT_CALENDAR_CONFIG.locale;
+    const names = buildDayNames(locale);
+    return {
+        ...DEFAULT_CALENDAR_CONFIG,
+        ...partial,
+        locale,
+        shortDayNames: partial.shortDayNames ?? names.short,
+        longDayNames: partial.longDayNames ?? names.long,
+    };
+}
+
+/**
+ * Injection token for the calendar date formatter.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: CALENDAR_DATE_FORMATTER, useClass: MyCustomFormatter }
+ * ]
+ * ```
+ */
+const CALENDAR_DATE_FORMATTER = new InjectionToken('CalendarDateFormatter');
+
+/**
+ * Default implementation of {@link CalendarDateFormatter} that uses the
+ * browser's `Intl.DateTimeFormat` API for locale-aware formatting.
+ *
+ * The locale is read from the injected {@link CALENDAR_CONFIG}. If no config
+ * is provided, `'en-US'` is used as the fallback.
+ *
+ * This service has no dependency on `@ngx-translate` or any other i18n library,
+ * so the calendar library works out of the box. Consumers can replace it with
+ * their own implementation via the `CALENDAR_DATE_FORMATTER` injection token.
+ */
+class DefaultCalendarDateFormatter {
+    locale;
+    constructor(config) {
+        this.locale = config?.locale ?? DEFAULT_CALENDAR_CONFIG.locale;
+    }
+    /** Formats an hour and minute pair into a locale time string (e.g. "09:00 AM"). */
+    formatTimeI(hour, minute) {
+        const date = new Date();
+        date.setHours(hour, minute, 0, 0);
+        return Promise.resolve(date.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit' }));
+    }
+    /** Formats the time portion of a Date (e.g. "2:30 PM"). Returns empty string for undefined. */
+    formatTime(date) {
+        if (!date)
+            return Promise.resolve('');
+        return Promise.resolve(date.toLocaleTimeString(this.locale, { hour: '2-digit', minute: '2-digit' }));
+    }
+    /** Formats a Date as a full date-time string (e.g. "May 15, 2026, 02:30 PM"). */
+    formatDateTime(date) {
+        return of(date.toLocaleString(this.locale, {
+            year: 'numeric', month: 'short', day: 'numeric',
+            hour: '2-digit', minute: '2-digit'
+        }));
+    }
+    /** Formats a Date as a date-only string (e.g. "May 15, 2026"). */
+    formatDate(date) {
+        return of(date.toLocaleDateString(this.locale, {
+            year: 'numeric', month: 'short', day: 'numeric'
+        }));
+    }
+    /** Formats a Date as `YYYY-MM-DD` for use in `<input type="date">` controls. */
+    formatDateForFormControl(date) {
+        const y = date.getFullYear();
+        const m = String(date.getMonth() + 1).padStart(2, '0');
+        const d = String(date.getDate()).padStart(2, '0');
+        return `${y}-${m}-${d}`;
+    }
+    /** Returns `true` if both dates fall on the same calendar day. */
+    isSameDay(date1, date2) {
+        return date1.getFullYear() === date2.getFullYear()
+            && date1.getMonth() === date2.getMonth()
+            && date1.getDate() === date2.getDate();
+    }
+    /** Formats a Date as "Month Year" (e.g. "January 2026"). */
+    formatMonthName(date) {
+        return Promise.resolve(date.toLocaleString(this.locale, { month: 'long', year: 'numeric' }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, deps: [{ token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: DefaultCalendarDateFormatter, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_CONFIG]
+                }] }] });
+
+/**
+ * Month grid view showing a 7×6 grid of day cells.
+ *
+ * Each cell displays the day number and up to 3 coloured dots representing
+ * events on that day. Clicking a cell emits `dayClicked`.
+ */
+class CalendarMonthComponent {
+    /** The date whose month is displayed. */
+    focusDay;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Emits the date of a clicked day cell. */
+    dayClicked = new EventEmitter();
+    monthItems = [];
+    longDayNames;
+    events = [];
+    destroy$ = new Subject();
+    formatter;
+    constructor() {
+        this.formatter = new DefaultCalendarDateFormatter();
+        this.longDayNames = DEFAULT_CALENDAR_CONFIG.longDayNames;
+    }
+    ngOnInit() {
+        const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.longDayNames = resolved.longDayNames;
+        this.buildMonth();
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.events = events;
+                this.buildMonth();
+            });
+        }
+        if (this.focusDayChanged) {
+            this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
+                this.focusDay = date;
+                this.buildMonth();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /** Emits the clicked day's date. */
+    onDayClick(date) {
+        this.dayClicked.emit(date);
+    }
+    /** trackBy for day name headers. */
+    trackByDayName(index) {
+        return index;
+    }
+    /** trackBy for month grid cells. */
+    trackByMonthItem(_index, item) {
+        return item.date.getTime();
+    }
+    /** trackBy for event dots. */
+    trackByEventDot(_index, event) {
+        return event.id;
+    }
+    /** Builds the 42-cell month grid (6 rows × 7 columns). */
+    buildMonth() {
+        if (!this.focusDay)
+            return;
+        const year = this.focusDay.getFullYear();
+        const month = this.focusDay.getMonth();
+        const firstDay = new Date(year, month, 1);
+        const lastDay = new Date(year, month + 1, 0);
+        let startOffset = firstDay.getDay() - 1;
+        if (startOffset < 0)
+            startOffset = 6;
+        const today = new Date();
+        this.monthItems = [];
+        for (let i = startOffset - 1; i >= 0; i--) {
+            const date = new Date(year, month, -i);
+            this.monthItems.push(this.createMonthItem(date, false, today));
+        }
+        for (let d = 1; d <= lastDay.getDate(); d++) {
+            const date = new Date(year, month, d);
+            this.monthItems.push(this.createMonthItem(date, true, today));
+        }
+        const remaining = 42 - this.monthItems.length;
+        for (let i = 1; i <= remaining; i++) {
+            const date = new Date(year, month + 1, i);
+            this.monthItems.push(this.createMonthItem(date, false, today));
+        }
+    }
+    createMonthItem(date, isCurrentMonth, today) {
+        const isToday = this.formatter.isSameDay(date, today);
+        const dayEvents = this.events.filter(e => this.formatter.isSameDay(e.startTime, date) ||
+            this.formatter.isSameDay(e.endTime, date) ||
+            (e.startTime < date && e.endTime > date));
+        return {
+            date,
+            dayNumber: date.getDate(),
+            isCurrentMonth,
+            isToday,
+            events: dayEvents
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarMonthComponent, isStandalone: true, selector: "app-calendar-month", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config" }, outputs: { dayClicked: "dayClicked" }, ngImport: i0, template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    <div class=\"day-header\" *ngFor=\"let day of longDayNames; trackBy: trackByDayName\" role=\"columnheader\">{{ day }}</div>\n  </div>\n  <div class=\"month-grid\">\n    <div\n      class=\"month-cell\"\n      *ngFor=\"let item of monthItems; trackBy: trackByMonthItem\"\n      [class.other-month]=\"!item.isCurrentMonth\"\n      [class.today]=\"item.isToday\"\n      (click)=\"onDayClick(item.date)\"\n      role=\"gridcell\"\n      [attr.aria-label]=\"item.date.toDateString()\">\n      <span class=\"day-number\">{{ item.dayNumber }}</span>\n      <div class=\"month-events\">\n        <div\n          class=\"month-event-dot\"\n          *ngFor=\"let event of item.events.slice(0, 3); trackBy: trackByEventDot\"\n          [style.background-color]=\"event.color.primaryColor\"\n          [title]=\"event.title\">\n        </div>\n        <span class=\"more-events\" *ngIf=\"item.events.length > 3\">+{{ item.events.length - 3 }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid #e5e7eb}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid #f3f4f6;cursor:pointer;transition:background .15s}.month-cell:hover{background:#f9fafb}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:#3b82f6;color:#fff;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:#6b7280}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarMonthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-month', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-month\" role=\"grid\" aria-label=\"Month view\">\n  <div class=\"month-header\">\n    <div class=\"day-header\" *ngFor=\"let day of longDayNames; trackBy: trackByDayName\" role=\"columnheader\">{{ day }}</div>\n  </div>\n  <div class=\"month-grid\">\n    <div\n      class=\"month-cell\"\n      *ngFor=\"let item of monthItems; trackBy: trackByMonthItem\"\n      [class.other-month]=\"!item.isCurrentMonth\"\n      [class.today]=\"item.isToday\"\n      (click)=\"onDayClick(item.date)\"\n      role=\"gridcell\"\n      [attr.aria-label]=\"item.date.toDateString()\">\n      <span class=\"day-number\">{{ item.dayNumber }}</span>\n      <div class=\"month-events\">\n        <div\n          class=\"month-event-dot\"\n          *ngFor=\"let event of item.events.slice(0, 3); trackBy: trackByEventDot\"\n          [style.background-color]=\"event.color.primaryColor\"\n          [title]=\"event.title\">\n        </div>\n        <span class=\"more-events\" *ngIf=\"item.events.length > 3\">+{{ item.events.length - 3 }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-month{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.month-header{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:600;font-size:13px;padding:8px 0;border-bottom:1px solid #e5e7eb}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);flex:1;min-height:0}.month-cell{min-height:0;padding:4px 8px;border:1px solid #f3f4f6;cursor:pointer;transition:background .15s}.month-cell:hover{background:#f9fafb}.month-cell.other-month{opacity:.4}.month-cell.today .day-number{background:#3b82f6;color:#fff;border-radius:50%;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center}.day-number{font-size:13px;font-weight:500}.month-events{display:flex;gap:2px;flex-wrap:wrap;margin-top:4px}.month-event-dot{width:8px;height:8px;border-radius:50%}.more-events{font-size:10px;color:#6b7280}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { focusDay: [{
+                type: Input
+            }], eventsChanged: [{
+                type: Input
+            }], focusDayChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], dayClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Service that computes the visual layout of calendar events within a
+ * time-grid (week or day view).
+ *
+ * Responsibilities:
+ * - Splitting multi-day events into per-day segments.
+ * - Assigning non-overlapping column indices to concurrent events.
+ * - Computing the width (column span) each event should occupy.
+ *
+ * This service is stateless — all state is passed via method parameters.
+ * Provide it per-component (not root) so each view gets its own instance.
+ */
+class CalendarEventLayoutService {
+    /**
+     * Returns `true` when two time ranges overlap (exclusive boundaries).
+     */
+    eventsOverlap(startA, endA, startB, endB) {
+        return startA < endB && startB < endA;
+    }
+    /**
+     * Returns all events whose time range overlaps the given `[start, end)` window.
+     */
+    getAllEventsOnSpecificTime(events, start, end) {
+        return events.filter(e => this.eventsOverlap(e.startTime, e.endTime, start, end));
+    }
+    /**
+     * Splits multi-day events into per-day segments that fit within the
+     * visible hour range (`startHour`–`endHour`) and date range.
+     *
+     * Single-day events are shallow-copied as-is. Multi-day events produce
+     * one segment per day with `continued` / `continuedEnd` flags set.
+     */
+    calculateMultiDayEvents(events, startHour, endHour, rangeStart, rangeEnd) {
+        const result = [];
+        for (const event of events) {
+            const eventStart = new Date(event.startTime);
+            const eventEnd = new Date(event.endTime);
+            if (eventStart.toDateString() === eventEnd.toDateString()) {
+                result.push({ ...event });
+                continue;
+            }
+            const current = new Date(eventStart);
+            let isFirst = true;
+            while (current < eventEnd && current < rangeEnd) {
+                if (current >= rangeStart) {
+                    const dayStart = new Date(current);
+                    const dayEnd = new Date(current);
+                    if (isFirst) {
+                        dayEnd.setHours(endHour, 0, 0, 0);
+                    }
+                    else {
+                        dayStart.setHours(startHour, 0, 0, 0);
+                        if (current.toDateString() === eventEnd.toDateString()) {
+                            dayEnd.setHours(eventEnd.getHours(), eventEnd.getMinutes(), 0, 0);
+                        }
+                        else {
+                            dayEnd.setHours(endHour, 0, 0, 0);
+                        }
+                    }
+                    result.push({
+                        ...event,
+                        startTime: isFirst ? eventStart : dayStart,
+                        endTime: current.toDateString() === eventEnd.toDateString() ? eventEnd : dayEnd,
+                        continued: !isFirst,
+                        continuedEnd: current.toDateString() !== eventEnd.toDateString()
+                    });
+                }
+                isFirst = false;
+                current.setDate(current.getDate() + 1);
+                current.setHours(0, 0, 0, 0);
+            }
+        }
+        return result;
+    }
+    /**
+     * Assigns a zero-based `column` index to each event so that overlapping
+     * events occupy different columns.
+     *
+     * Events are processed in start-time order (longest duration first for ties).
+     * Each event gets the earliest column not already occupied by an overlapping event.
+     */
+    assignColumnsToEvents(events) {
+        const sorted = [...events].sort((a, b) => {
+            const diff = a.startTime.getTime() - b.startTime.getTime();
+            if (diff !== 0)
+                return diff;
+            return (b.endTime.getTime() - b.startTime.getTime()) - (a.endTime.getTime() - a.startTime.getTime());
+        });
+        for (const event of sorted) {
+            event.column = this.findEarliestPossibleColumn(event, sorted);
+        }
+    }
+    /**
+     * Assigns a `width` (column span) to each event, expanding it to fill
+     * unused columns to its right within the overlapping group.
+     */
+    assignWidthsToEvents(events, scanStart, scanEnd) {
+        for (const event of events) {
+            const overlapping = this.getAllEventsOnSpecificTime(events, event.startTime, event.endTime);
+            const maxCol = Math.max(...overlapping.map(e => e.column ?? 0));
+            const biggestPossible = this.findBiggestPossibleWidth(event, events, scanStart, scanEnd);
+            event.width = Math.max(1, biggestPossible);
+            if ((event.column ?? 0) + event.width > maxCol + 1) {
+                event.width = maxCol + 1 - (event.column ?? 0);
+            }
+            if (event.width < 1)
+                event.width = 1;
+        }
+    }
+    /** Finds the lowest column index not occupied by any overlapping event. */
+    findEarliestPossibleColumn(event, allEvents) {
+        const overlapping = allEvents.filter(e => e !== event
+            && e.column !== undefined
+            && this.eventsOverlap(e.startTime, e.endTime, event.startTime, event.endTime));
+        let column = 0;
+        while (overlapping.some(e => e.column === column)) {
+            column++;
+        }
+        return column;
+    }
+    /** Computes the maximum width an event can span without overlapping a neighbour to its right. */
+    findBiggestPossibleWidth(event, allEvents, _scanStart, _scanEnd) {
+        const overlapping = this.getAllEventsOnSpecificTime(allEvents, event.startTime, event.endTime);
+        const maxCol = Math.max(...overlapping.map(e => e.column ?? 0));
+        const totalColumns = maxCol + 1;
+        const occupiedCols = overlapping
+            .filter(e => e !== event && (e.column ?? 0) > (event.column ?? 0))
+            .map(e => e.column ?? 0);
+        if (occupiedCols.length === 0) {
+            return totalColumns - (event.column ?? 0);
+        }
+        return Math.min(...occupiedCols) - (event.column ?? 0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventLayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventLayoutService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Static utility methods for calendar grid positioning.
+ */
+class CalendarUtility {
+    /**
+     * Converts a weekday (from `Date.getDay()`) to a 1-based Monday-first column index.
+     * Monday = 1, Tuesday = 2, …, Sunday = 7.
+     */
+    static getCorrectColumn(date) {
+        const day = date.getDay();
+        return day === 0 ? 7 : day;
+    }
+    /**
+     * Converts an hour + minute pair to a 1-based CSS grid row index
+     * within a half-hour grid starting at `startHour`.
+     *
+     * Each hour occupies two rows (one per 30-minute slot).
+     * Formula: `(hour - startHour) * 2 + (minute >= 30 ? 1 : 0) + 1`
+     *
+     * @returns Grid row number (minimum 1).
+     */
+    static getCorrectRow(hour, minute, startHour) {
+        const hourOffset = hour - startHour;
+        const row = hourOffset * 2 + (minute >= 30 ? 1 : 0) + 1;
+        return Math.max(1, row);
+    }
+}
+
+/**
+ * Default event renderer used when no custom component is provided.
+ *
+ * Displays the event title, formatted time range, and optional description
+ * with the event's colour scheme applied as background and left-border accent.
+ */
+class CalendarEventDefaultComponent {
+    /** The event to render. Set by {@link CalendarEventComponent} after creation. */
+    event;
+    formattedTime = '';
+    formatter;
+    constructor(formatter) {
+        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
+    }
+    async ngOnInit() {
+        if (this.event) {
+            const start = await this.formatter.formatTime(this.event.startTime);
+            const end = await this.formatter.formatTime(this.event.endTime);
+            this.formattedTime = `${start} - ${end}`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventDefaultComponent, isStandalone: true, selector: "app-calendar-event-default", ngImport: i0, template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid #3b82f6;border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-time{font-size:11px;opacity:.8}.event-description{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventDefaultComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-event-default', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-default\" [style.background-color]=\"event.color.secondaryColor\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedTime }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".calendar-event-default{padding:4px 8px;border-left:3px solid #3b82f6;border-radius:4px;font-size:12px;height:100%;overflow:hidden;cursor:pointer}.event-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.event-time{font-size:11px;opacity:.8}.event-description{font-size:11px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_DATE_FORMATTER]
+                }] }] });
+
+/**
+ * Dynamic event renderer that injects a custom or default event component
+ * into its view container.
+ *
+ * The component to render is resolved in this order:
+ * 1. `customComponent` input (set on the parent week/day view)
+ * 2. `event.component` (per-event override)
+ * 3. {@link CalendarEventDefaultComponent} (library default)
+ */
+class CalendarEventComponent {
+    /** The event data to render. */
+    event;
+    /** Optional custom component type that overrides the default renderer. */
+    customComponent;
+    /** Emits when the rendered event is clicked. */
+    eventClicked = new EventEmitter();
+    eventContainer;
+    rendered = false;
+    ngAfterViewInit() {
+        this.renderComponent();
+    }
+    ngOnChanges(changes) {
+        if (this.rendered && (changes['event'] || changes['customComponent'])) {
+            this.renderComponent();
+        }
+    }
+    /** Emits the event click. */
+    onEventClick() {
+        this.eventClicked.emit(this.event);
+    }
+    /** Creates the event component dynamically and sets its `event` property. */
+    renderComponent() {
+        if (!this.eventContainer)
+            return;
+        this.eventContainer.clear();
+        const component = this.customComponent ?? this.event?.component ?? CalendarEventDefaultComponent;
+        const ref = this.eventContainer.createComponent(component);
+        ref.instance.event = this.event;
+        ref.changeDetectorRef.detectChanges();
+        this.rendered = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarEventComponent, isStandalone: true, selector: "app-calendar-event", inputs: { event: "event", customComponent: "customComponent" }, outputs: { eventClicked: "eventClicked" }, viewQueries: [{ propertyName: "eventContainer", first: true, predicate: ["eventContainer"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-event-wrapper\" (click)=\"onEventClick()\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarEventComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-event', standalone: true, imports: [CommonModule], template: "<div class=\"calendar-event-wrapper\" (click)=\"onEventClick()\">\n  <ng-template #eventContainer></ng-template>\n</div>\n", styles: [".calendar-event-wrapper{height:100%;width:100%}\n"] }]
+        }], propDecorators: { event: [{
+                type: Input
+            }], customComponent: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }], eventContainer: [{
+                type: ViewChild,
+                args: ['eventContainer', { read: ViewContainerRef, static: true }]
+            }] } });
+
+/**
+ * Week grid view showing 7 day columns with half-hour time slots.
+ *
+ * Overlapping events within the same day are laid out in sub-columns
+ * so they appear side-by-side rather than stacked.
+ */
+class CalendarWeekComponent {
+    layoutService;
+    /** The date around which the week is centred. */
+    focusDay;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Optional custom event renderer component. */
+    calendarEventComponent;
+    /** Emits when a calendar event is clicked. */
+    eventClicked = new EventEmitter();
+    columns = [];
+    hourRows = [];
+    displayEvents = [];
+    totalRows = 0;
+    currentTimeRow = 0;
+    currentTimeCol = '';
+    gridTemplateColumns = 'repeat(7, 1fr)';
+    dayColumnMap = [];
+    events = [];
+    destroy$ = new Subject();
+    formatter;
+    resolvedConfig;
+    currentTimeInterval;
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.formatter = new DefaultCalendarDateFormatter();
+    }
+    ngOnInit() {
+        this.resolvedConfig = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.buildHourRows();
+        this.buildColumns();
+        this.updateCurrentTime();
+        this.currentTimeInterval = setInterval(() => this.updateCurrentTime(), 60000);
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.events = events;
+                this.refreshEvents();
+            });
+        }
+        if (this.focusDayChanged) {
+            this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
+                this.focusDay = date;
+                this.buildColumns();
+                this.refreshEvents();
+                this.updateCurrentTime();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.currentTimeInterval)
+            clearInterval(this.currentTimeInterval);
+    }
+    /** Returns the CSS `grid-row` value for an event based on its start/end times. */
+    getEventRow(event) {
+        const startRow = CalendarUtility.getCorrectRow(event.startTime.getHours(), event.startTime.getMinutes(), this.resolvedConfig.startHour);
+        const endRow = CalendarUtility.getCorrectRow(event.endTime.getHours(), event.endTime.getMinutes(), this.resolvedConfig.startHour);
+        return `${startRow} / ${Math.max(endRow, startRow + 1)}`;
+    }
+    /** Returns the CSS `grid-column` span for a day header, accounting for sub-columns. */
+    getHeaderColumn(dayIndex) {
+        if (!this.dayColumnMap.length)
+            return `${dayIndex + 2} / span 1`;
+        const dayInfo = this.dayColumnMap[dayIndex];
+        return `${dayInfo.startCol + 1} / span ${dayInfo.subColumns}`;
+    }
+    /** Returns the CSS `grid-column` value for an event within its day's sub-columns. */
+    getEventColumn(event) {
+        const dayIdx = this.columns.findIndex(c => this.formatter.isSameDay(c.date, event.startTime));
+        if (dayIdx < 0)
+            return '1 / span 1';
+        const dayInfo = this.dayColumnMap[dayIdx];
+        const subCol = (event.column ?? 0) + dayInfo.startCol;
+        const width = event.width ?? 1;
+        return `${subCol} / span ${width}`;
+    }
+    /** Forwards event click to parent. */
+    onEventClick(event) {
+        this.eventClicked.emit(event);
+    }
+    /** trackBy for hour rows. */
+    trackByHour(_index, row) {
+        return row.hour;
+    }
+    /** trackBy for day columns. */
+    trackByColumn(_index, col) {
+        return col.date.getTime();
+    }
+    /** trackBy for events. */
+    trackByEvent(_index, event) {
+        return event.id;
+    }
+    async buildHourRows() {
+        this.hourRows = [];
+        const hours = this.resolvedConfig.endHour - this.resolvedConfig.startHour;
+        this.totalRows = hours * 2;
+        for (let i = 0; i < hours; i++) {
+            const hour = this.resolvedConfig.startHour + i;
+            const label = await this.formatter.formatTimeI(hour, 0);
+            this.hourRows.push({
+                hour,
+                topRow: i * 2 + 1,
+                bottomRow: i * 2 + 3,
+                hourLabel: label
+            });
+        }
+    }
+    /** Builds the 7 day columns for the current week (Monday–Sunday). */
+    buildColumns() {
+        if (!this.focusDay)
+            return;
+        const shortNames = this.resolvedConfig.shortDayNames;
+        const today = new Date();
+        const day = this.focusDay.getDay();
+        const mondayOffset = day === 0 ? -6 : 1 - day;
+        const monday = new Date(this.focusDay);
+        monday.setDate(this.focusDay.getDate() + mondayOffset);
+        this.columns = [];
+        for (let i = 0; i < 7; i++) {
+            const date = new Date(monday);
+            date.setDate(monday.getDate() + i);
+            this.columns.push({
+                date,
+                dayName: shortNames[i],
+                dayNumber: date.getDate(),
+                isToday: this.formatter.isSameDay(date, today)
+            });
+        }
+    }
+    /** Filters, splits, and lays out events for the current week. */
+    refreshEvents() {
+        if (!this.columns.length)
+            return;
+        const rangeStart = this.columns[0].date;
+        const rangeEnd = new Date(this.columns[6].date);
+        rangeEnd.setHours(23, 59, 59, 999);
+        const filtered = this.events.filter(e => this.layoutService.eventsOverlap(e.startTime, e.endTime, rangeStart, rangeEnd));
+        this.displayEvents = this.layoutService.calculateMultiDayEvents(filtered, this.resolvedConfig.startHour, this.resolvedConfig.endHour, rangeStart, rangeEnd);
+        // Assign columns per day so overlapping events within a day get sub-columns
+        for (let i = 0; i < 7; i++) {
+            const dayStart = new Date(this.columns[i].date);
+            dayStart.setHours(0, 0, 0, 0);
+            const dayEnd = new Date(this.columns[i].date);
+            dayEnd.setHours(23, 59, 59, 999);
+            const dayEvents = this.displayEvents.filter(e => this.formatter.isSameDay(e.startTime, this.columns[i].date));
+            this.layoutService.assignColumnsToEvents(dayEvents);
+            this.layoutService.assignWidthsToEvents(dayEvents, dayStart, dayEnd);
+        }
+        this.buildGridColumns();
+        this.updateCurrentTime();
+    }
+    /** Computes the CSS grid-template-columns string based on per-day sub-column counts. */
+    buildGridColumns() {
+        this.dayColumnMap = [];
+        let currentCol = 1;
+        for (let i = 0; i < 7; i++) {
+            const dayEvents = this.displayEvents.filter(e => this.formatter.isSameDay(e.startTime, this.columns[i].date));
+            let maxSubCols = 1;
+            for (const e of dayEvents) {
+                maxSubCols = Math.max(maxSubCols, (e.column ?? 0) + (e.width ?? 1));
+            }
+            this.dayColumnMap.push({ subColumns: maxSubCols, startCol: currentCol });
+            currentCol += maxSubCols;
+        }
+        const parts = [];
+        for (const day of this.dayColumnMap) {
+            for (let j = 0; j < day.subColumns; j++) {
+                parts.push(`${1 / day.subColumns}fr`);
+            }
+        }
+        this.gridTemplateColumns = parts.join(' ');
+    }
+    /** Updates the current-time red line position. */
+    updateCurrentTime() {
+        const now = new Date();
+        const dayIdx = this.columns.findIndex(c => this.formatter.isSameDay(c.date, now));
+        if (dayIdx >= 0 && this.dayColumnMap.length > 0) {
+            const dayInfo = this.dayColumnMap[dayIdx];
+            this.currentTimeCol = `${dayInfo.startCol} / span ${dayInfo.subColumns}`;
+            this.currentTimeRow = CalendarUtility.getCorrectRow(now.getHours(), now.getMinutes(), this.resolvedConfig.startHour);
+        }
+        else {
+            this.currentTimeCol = '';
+            this.currentTimeRow = 0;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, deps: [{ token: CalendarEventLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarWeekComponent, isStandalone: true, selector: "app-calendar-week", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\"\n      *ngFor=\"let col of columns; let i = index; trackBy: trackByColumn\"\n      [class.today]=\"col.isToday\"\n      [style.grid-column]=\"getHeaderColumn(i)\"\n      role=\"columnheader\">\n      <span class=\"day-name\">{{ col.dayName }}</span>\n      <span class=\"day-number\">{{ col.dayNumber }}</span>\n    </div>\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && currentTimeCol\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"currentTimeCol\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"week-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "app-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarWeekComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-week', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-week\" role=\"grid\" aria-label=\"Week view\">\n  <div class=\"week-header\" [style.grid-template-columns]=\"'60px ' + gridTemplateColumns\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\"\n      *ngFor=\"let col of columns; let i = index; trackBy: trackByColumn\"\n      [class.today]=\"col.isToday\"\n      [style.grid-column]=\"getHeaderColumn(i)\"\n      role=\"columnheader\">\n      <span class=\"day-name\">{{ col.dayName }}</span>\n      <span class=\"day-number\">{{ col.dayNumber }}</span>\n    </div>\n  </div>\n  <div class=\"week-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"week-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"gridTemplateColumns\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && currentTimeCol\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"currentTimeCol\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"week-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-week{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.week-header{display:grid;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.week-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.week-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.week-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: CalendarEventLayoutService }], propDecorators: { focusDay: [{
+                type: Input
+            }], eventsChanged: [{
+                type: Input
+            }], focusDayChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], calendarEventComponent: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Day grid view showing a single day with half-hour time slots.
+ *
+ * Shares the same layout algorithm as the week view via
+ * {@link CalendarEventLayoutService}.
+ */
+class CalendarDayComponent {
+    layoutService;
+    /** The date to display. */
+    focusDay;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Optional custom event renderer component. */
+    calendarEventComponent;
+    /** Emits when a calendar event is clicked. */
+    eventClicked = new EventEmitter();
+    hourRows = [];
+    displayEvents = [];
+    totalRows = 0;
+    totalColumns = 1;
+    currentTimeRow = 0;
+    isToday = false;
+    dayName = '';
+    events = [];
+    destroy$ = new Subject();
+    formatter;
+    resolvedConfig;
+    currentTimeInterval;
+    constructor(layoutService) {
+        this.layoutService = layoutService;
+        this.formatter = new DefaultCalendarDateFormatter();
+    }
+    ngOnInit() {
+        this.resolvedConfig = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.buildHourRows();
+        this.updateDayInfo();
+        this.updateCurrentTime();
+        this.currentTimeInterval = setInterval(() => this.updateCurrentTime(), 60000);
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.events = events;
+                this.refreshEvents();
+            });
+        }
+        if (this.focusDayChanged) {
+            this.focusDayChanged.pipe(takeUntil(this.destroy$)).subscribe(date => {
+                this.focusDay = date;
+                this.updateDayInfo();
+                this.refreshEvents();
+                this.updateCurrentTime();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        if (this.currentTimeInterval)
+            clearInterval(this.currentTimeInterval);
+    }
+    /** Returns the CSS `grid-row` value for an event. */
+    getEventRow(event) {
+        const startRow = CalendarUtility.getCorrectRow(event.startTime.getHours(), event.startTime.getMinutes(), this.resolvedConfig.startHour);
+        const endRow = CalendarUtility.getCorrectRow(event.endTime.getHours(), event.endTime.getMinutes(), this.resolvedConfig.startHour);
+        return `${startRow} / ${Math.max(endRow, startRow + 1)}`;
+    }
+    /** Returns the CSS `grid-column` value for an event within its sub-columns. */
+    getEventColumn(event) {
+        const col = (event.column ?? 0) + 1;
+        const width = event.width ?? 1;
+        return `${col} / span ${width}`;
+    }
+    /** Forwards event click to parent. */
+    onEventClick(event) {
+        this.eventClicked.emit(event);
+    }
+    /** trackBy for hour rows. */
+    trackByHour(_index, row) {
+        return row.hour;
+    }
+    /** trackBy for events. */
+    trackByEvent(_index, event) {
+        return event.id;
+    }
+    async buildHourRows() {
+        this.hourRows = [];
+        const hours = this.resolvedConfig.endHour - this.resolvedConfig.startHour;
+        this.totalRows = hours * 2;
+        for (let i = 0; i < hours; i++) {
+            const hour = this.resolvedConfig.startHour + i;
+            const label = await this.formatter.formatTimeI(hour, 0);
+            this.hourRows.push({
+                hour,
+                topRow: i * 2 + 1,
+                bottomRow: i * 2 + 3,
+                hourLabel: label
+            });
+        }
+    }
+    /** Updates the day name and isToday flag. */
+    updateDayInfo() {
+        if (!this.focusDay)
+            return;
+        const today = new Date();
+        this.isToday = this.formatter.isSameDay(this.focusDay, today);
+        const longNames = this.resolvedConfig.longDayNames;
+        const dayIdx = this.focusDay.getDay();
+        const mondayIdx = dayIdx === 0 ? 6 : dayIdx - 1;
+        this.dayName = longNames[mondayIdx];
+    }
+    /** Filters, splits, and lays out events for the focus day. */
+    refreshEvents() {
+        if (!this.focusDay)
+            return;
+        const rangeStart = new Date(this.focusDay);
+        rangeStart.setHours(0, 0, 0, 0);
+        const rangeEnd = new Date(this.focusDay);
+        rangeEnd.setHours(23, 59, 59, 999);
+        const filtered = this.events.filter(e => this.layoutService.eventsOverlap(e.startTime, e.endTime, rangeStart, rangeEnd));
+        this.displayEvents = this.layoutService.calculateMultiDayEvents(filtered, this.resolvedConfig.startHour, this.resolvedConfig.endHour, rangeStart, rangeEnd);
+        this.layoutService.assignColumnsToEvents(this.displayEvents);
+        this.layoutService.assignWidthsToEvents(this.displayEvents, rangeStart, rangeEnd);
+        const maxCol = this.displayEvents.reduce((max, e) => Math.max(max, (e.column ?? 0) + (e.width ?? 1)), 1);
+        this.totalColumns = maxCol;
+    }
+    /** Updates the current-time red line position. */
+    updateCurrentTime() {
+        const now = new Date();
+        if (this.focusDay && this.formatter.isSameDay(this.focusDay, now)) {
+            this.currentTimeRow = CalendarUtility.getCorrectRow(now.getHours(), now.getMinutes(), this.resolvedConfig.startHour);
+            this.isToday = true;
+        }
+        else {
+            this.currentTimeRow = 0;
+            this.isToday = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, deps: [{ token: CalendarEventLayoutService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarDayComponent, isStandalone: true, selector: "app-calendar-day", inputs: { focusDay: "focusDay", eventsChanged: "eventsChanged", focusDayChanged: "focusDayChanged", config: "config", calendarEventComponent: "calendarEventComponent" }, outputs: { eventClicked: "eventClicked" }, providers: [CalendarEventLayoutService], ngImport: i0, template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && isToday\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"'1 / -1'\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"day-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "app-calendar-event", inputs: ["event", "customComponent"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarDayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-day', standalone: true, imports: [CommonModule, CalendarEventComponent], providers: [CalendarEventLayoutService], template: "<div class=\"calendar-day\" role=\"grid\" aria-label=\"Day view\">\n  <div class=\"day-header\">\n    <div class=\"time-gutter-header\"></div>\n    <div class=\"day-column-header\" [class.today]=\"isToday\" role=\"columnheader\">\n      <span class=\"day-name\">{{ dayName }}</span>\n      <span class=\"day-number\">{{ focusDay.getDate() }}</span>\n    </div>\n  </div>\n  <div class=\"day-body\">\n    <div class=\"time-gutter\" [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\">\n      <div class=\"hour-label\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\">\n        {{ row.hourLabel }}\n      </div>\n    </div>\n    <div class=\"day-grid\"\n      [style.grid-template-rows]=\"'repeat(' + totalRows + ', 1fr)'\"\n      [style.grid-template-columns]=\"'repeat(' + totalColumns + ', 1fr)'\">\n      <div class=\"hour-line\"\n        *ngFor=\"let row of hourRows; trackBy: trackByHour\"\n        [style.grid-row]=\"row.topRow + '/' + row.bottomRow\"\n        [style.grid-column]=\"'1 / -1'\">\n      </div>\n      <div class=\"current-time-line\" *ngIf=\"currentTimeRow > 0 && isToday\"\n        [style.grid-row]=\"currentTimeRow\"\n        [style.grid-column]=\"'1 / -1'\">\n        <div class=\"current-time-dot\"></div>\n        <div class=\"current-time-rule\"></div>\n      </div>\n      <div class=\"day-event\"\n        *ngFor=\"let event of displayEvents; trackBy: trackByEvent\"\n        [style.grid-row]=\"getEventRow(event)\"\n        [style.grid-column]=\"getEventColumn(event)\"\n        (click)=\"onEventClick(event)\">\n        <app-calendar-event [event]=\"event\" [customComponent]=\"calendarEventComponent\"></app-calendar-event>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".calendar-day{width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}.day-header{display:grid;grid-template-columns:60px 1fr;border-bottom:1px solid #e5e7eb}.time-gutter-header{min-width:60px}.day-column-header{text-align:center;padding:8px 4px;font-size:13px}.day-column-header.today{color:#3b82f6;font-weight:700}.day-name{display:block;font-size:11px;text-transform:uppercase;color:#6b7280}.day-number{font-size:18px;font-weight:600}.day-body{display:grid;grid-template-columns:60px 1fr;flex:1;min-height:0;overflow:hidden;align-items:stretch}.time-gutter{display:grid;height:100%;min-height:0}.hour-label{font-size:11px;color:#6b7280;text-align:right;padding-right:8px;display:flex;align-items:start;min-height:0;overflow:hidden}.day-grid{display:grid;position:relative;grid-auto-rows:1fr;height:100%;min-height:0}.hour-line{border-top:1px solid #f3f4f6;pointer-events:none;min-height:0}.day-event{z-index:1;padding:1px 2px;overflow:hidden;min-height:0}.current-time-line{position:relative;z-index:2;pointer-events:none}.current-time-dot{width:8px;height:8px;background:#ef4444;border-radius:50%;position:absolute;left:-4px;top:-4px}.current-time-rule{height:2px;background:#ef4444;width:100%}\n"] }]
+        }], ctorParameters: () => [{ type: CalendarEventLayoutService }], propDecorators: { focusDay: [{
+                type: Input
+            }], eventsChanged: [{
+                type: Input
+            }], focusDayChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], calendarEventComponent: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Renders a single row in the upcoming-events sidebar.
+ * Shows the event title, formatted date/time, and optional description.
+ */
+class UpcomingEventRowComponent {
+    /** The event to display. */
+    event;
+    /** Emits the event when this row is clicked. */
+    eventClicked = new EventEmitter();
+    formattedDate = '';
+    formatter;
+    constructor(formatter) {
+        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
+    }
+    async ngOnInit() {
+        if (this.event) {
+            const start = await this.formatter.formatTime(this.event.startTime);
+            const end = await this.formatter.formatTime(this.event.endTime);
+            this.formattedDate = `${start} - ${end}`;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UpcomingEventRowComponent, isStandalone: true, selector: "app-upcoming-event-row", inputs: { event: "event" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-event-row\" (click)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid #3b82f6;margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:#f9fafb}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:#6b7280}.event-description{font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventRowComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-upcoming-event-row', standalone: true, imports: [CommonModule], template: "<div class=\"upcoming-event-row\" (click)=\"eventClicked.emit(event)\" [style.border-left-color]=\"event.color.primaryColor\">\n  <div class=\"event-title\">{{ event.title }}</div>\n  <div class=\"event-time\">{{ formattedDate }}</div>\n  <div class=\"event-description\" *ngIf=\"event.description\">{{ event.description }}</div>\n</div>\n", styles: [".upcoming-event-row{padding:8px 12px;border-left:3px solid #3b82f6;margin-bottom:8px;cursor:pointer;border-radius:4px;transition:background .15s}.upcoming-event-row:hover{background:#f9fafb}.event-title{font-weight:600;font-size:13px}.event-time{font-size:12px;color:#6b7280}.event-description{font-size:12px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_DATE_FORMATTER]
+                }] }], propDecorators: { event: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Sidebar component that lists the next 10 upcoming events
+ * (events whose end time is in the future), sorted by start time.
+ */
+class UpcomingEventsComponent {
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged;
+    /** Resolved calendar configuration passed from the parent view. */
+    config;
+    /** Emits when an upcoming event row is clicked. */
+    eventClicked = new EventEmitter();
+    upcomingEvents = [];
+    title;
+    destroy$ = new Subject();
+    constructor() {
+        this.title = DEFAULT_CALENDAR_CONFIG.upcomingEventsTitle;
+    }
+    ngOnInit() {
+        const resolved = this.config ? resolveCalendarConfig(this.config) : { ...DEFAULT_CALENDAR_CONFIG };
+        this.title = resolved.upcomingEventsTitle;
+        if (this.eventsChanged) {
+            this.eventsChanged.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                const now = new Date();
+                this.upcomingEvents = events
+                    .filter(e => e.endTime > now)
+                    .sort((a, b) => a.startTime.getTime() - b.startTime.getTime())
+                    .slice(0, 10);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /** trackBy for upcoming event rows. */
+    trackByEvent(_index, event) {
+        return event.id;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: UpcomingEventsComponent, isStandalone: true, selector: "app-upcoming-events", inputs: { eventsChanged: "eventsChanged", config: "config" }, outputs: { eventClicked: "eventClicked" }, ngImport: i0, template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  <app-upcoming-event-row\n    *ngFor=\"let event of upcomingEvents; trackBy: trackByEvent\"\n    [event]=\"event\"\n    (eventClicked)=\"eventClicked.emit($event)\">\n  </app-upcoming-event-row>\n  <div class=\"no-events\" *ngIf=\"upcomingEvents.length === 0\">No upcoming events</div>\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:#9ca3af;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: UpcomingEventRowComponent, selector: "app-upcoming-event-row", inputs: ["event"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UpcomingEventsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-upcoming-events', standalone: true, imports: [CommonModule, UpcomingEventRowComponent], template: "<div class=\"upcoming-events\" role=\"complementary\" aria-label=\"Upcoming events\">\n  <div class=\"upcoming-title\">{{ title }}</div>\n  <app-upcoming-event-row\n    *ngFor=\"let event of upcomingEvents; trackBy: trackByEvent\"\n    [event]=\"event\"\n    (eventClicked)=\"eventClicked.emit($event)\">\n  </app-upcoming-event-row>\n  <div class=\"no-events\" *ngIf=\"upcomingEvents.length === 0\">No upcoming events</div>\n</div>\n", styles: [".upcoming-events{padding:16px}.upcoming-title{font-size:16px;font-weight:600;margin-bottom:12px}.no-events{color:#9ca3af;font-size:14px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { eventsChanged: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], eventClicked: [{
+                type: Output
+            }] } });
+
+/**
+ * Main calendar orchestrator component.
+ *
+ * Provides a toolbar with view switching (month / week / day), date navigation,
+ * and an optional action button. The active view and an upcoming-events sidebar
+ * are rendered inside a responsive grid layout.
+ *
+ * All configuration (visible hours, locale, labels, mobile breakpoint) is read
+ * from the `mn-config.json5` system via {@link MN_CALENDAR_CONFIG}, falling back
+ * to the legacy {@link CALENDAR_CONFIG} injection token, then to built-in defaults.
+ * Date formatting is delegated to the {@link CALENDAR_DATE_FORMATTER} token.
+ *
+ * @example
+ * ```html
+ * <app-calendar-view
+ *   [showButton]="true"
+ *   [buttonTitle]="'New Event'"
+ *   [NewCalendarItemsEvent]="eventsEmitter"
+ *   (RequestNewCalendarItemsEvent)="loadEvents($event)"
+ *   (CalendarItemClickedEvent)="onEventClick($event)"
+ *   (ButtonClickedEvent)="openModal()">
+ * </app-calendar-view>
+ * ```
+ */
+class CalendarViewComponent {
+    /** Whether to show the action button in the toolbar. */
+    showButton = false;
+    /** Label text for the action button. */
+    buttonTitle = '';
+    /** Custom event renderer component type. */
+    CalendarEventComponent;
+    /** Observable or EventEmitter that pushes new event arrays into the calendar. */
+    NewCalendarItemsEvent;
+    /** Emits when the calendar needs fresh event data (e.g. after navigation). */
+    RequestNewCalendarItemsEvent = new EventEmitter();
+    /** Emits when a calendar event is clicked. */
+    CalendarItemClickedEvent = new EventEmitter();
+    /** Emits when the action button is clicked. */
+    ButtonClickedEvent = new EventEmitter();
+    CalendarView = CalendarView;
+    currentView = CalendarView.WEEK;
+    focusDay = new Date();
+    dateInputValue = '';
+    viewOptions = [];
+    isMobileView = false;
+    /** BehaviorSubject so late-subscribing child views receive the last emitted events. */
+    internalEventsChanged = new BehaviorSubject([]);
+    /** Subject for broadcasting focus-day changes to child views. */
+    internalFocusDayChanged = new Subject();
+    destroy$ = new Subject();
+    formatter;
+    config;
+    destroyRef = inject(DestroyRef);
+    lang = inject(MnLanguageService);
+    constructor(formatter, mnConfig, legacyConfig) {
+        this.formatter = formatter ?? new DefaultCalendarDateFormatter();
+        // Priority: mn-config system > legacy CALENDAR_CONFIG > built-in defaults
+        const raw = mnConfig ?? legacyConfig ?? undefined;
+        this.config = resolveCalendarConfig(raw);
+    }
+    onResize() {
+        this.checkMobileView();
+    }
+    ngOnInit() {
+        this.rebuildFromConfig();
+        // Re-resolve config when locale changes (supports $translate in mn-config).
+        const sub = this.lang.locale$.pipe(skip(1)).subscribe(() => {
+            this.rebuildFromConfig();
+        });
+        this.destroyRef.onDestroy(() => sub.unsubscribe());
+        this.checkMobileView();
+        this.updateDateInput();
+        this.RequestNewCalendarItemsEvent.emit(this.focusDay);
+        if (this.NewCalendarItemsEvent) {
+            this.NewCalendarItemsEvent.pipe(takeUntil(this.destroy$)).subscribe(events => {
+                this.internalEventsChanged.next(events);
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    /** Switches the active view. On mobile, forces day view. */
+    switchView(view) {
+        if (this.isMobileView) {
+            this.currentView = CalendarView.DAY;
+            return;
+        }
+        this.currentView = view;
+    }
+    /** Navigates to the previous period (month / week / day). */
+    navigatePrevious() {
+        const d = new Date(this.focusDay);
+        switch (this.currentView) {
+            case CalendarView.MONTH:
+                d.setMonth(d.getMonth() - 1);
+                break;
+            case CalendarView.WEEK:
+                d.setDate(d.getDate() - 7);
+                break;
+            case CalendarView.DAY:
+                d.setDate(d.getDate() - 1);
+                break;
+        }
+        this.setFocusDay(d);
+    }
+    /** Navigates to the next period (month / week / day). */
+    navigateNext() {
+        const d = new Date(this.focusDay);
+        switch (this.currentView) {
+            case CalendarView.MONTH:
+                d.setMonth(d.getMonth() + 1);
+                break;
+            case CalendarView.WEEK:
+                d.setDate(d.getDate() + 7);
+                break;
+            case CalendarView.DAY:
+                d.setDate(d.getDate() + 1);
+                break;
+        }
+        this.setFocusDay(d);
+    }
+    /** Navigates to today. */
+    goToToday() {
+        this.setFocusDay(new Date());
+    }
+    /** Handles the date-picker input change. */
+    onDateInputChange(event) {
+        const value = event.target.value;
+        if (value) {
+            this.setFocusDay(new Date(value));
+        }
+    }
+    /** Handles a day click from the month view — switches to day view. */
+    onMonthDayClick(date) {
+        this.currentView = CalendarView.DAY;
+        this.setFocusDay(date);
+    }
+    /** Forwards a child event click to the parent output. */
+    onEventClick(event) {
+        this.CalendarItemClickedEvent.emit(event);
+    }
+    /** trackBy for view option buttons. */
+    trackByView(_index, item) {
+        return item.value;
+    }
+    /** Rebuilds view options and labels from the current config. */
+    rebuildFromConfig() {
+        this.viewOptions = [
+            { value: CalendarView.MONTH, label: this.config.viewLabels['MONTH'] ?? 'Month' },
+            { value: CalendarView.WEEK, label: this.config.viewLabels['WEEK'] ?? 'Week' },
+            { value: CalendarView.DAY, label: this.config.viewLabels['DAY'] ?? 'Day' }
+        ];
+    }
+    checkMobileView() {
+        const wasMobile = this.isMobileView;
+        this.isMobileView = window.innerWidth < this.config.mobileBreakpoint;
+        if (this.isMobileView && !wasMobile) {
+            this.currentView = CalendarView.DAY;
+        }
+    }
+    setFocusDay(date) {
+        this.focusDay = date;
+        this.updateDateInput();
+        this.internalFocusDayChanged.next(date);
+        this.RequestNewCalendarItemsEvent.emit(date);
+    }
+    updateDateInput() {
+        this.dateInputValue = this.formatter.formatDateForFormControl(this.focusDay);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, deps: [{ token: CALENDAR_DATE_FORMATTER, optional: true }, { token: MN_CALENDAR_CONFIG, optional: true }, { token: CALENDAR_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: CalendarViewComponent, isStandalone: true, selector: "app-calendar-view", inputs: { showButton: "showButton", buttonTitle: "buttonTitle", CalendarEventComponent: "CalendarEventComponent", NewCalendarItemsEvent: "NewCalendarItemsEvent" }, outputs: { RequestNewCalendarItemsEvent: "RequestNewCalendarItemsEvent", CalendarItemClickedEvent: "CalendarItemClickedEvent", ButtonClickedEvent: "ButtonClickedEvent" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+            provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
+        ], ngImport: i0, template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        <button\n          *ngFor=\"let view of viewOptions; trackBy: trackByView\"\n          class=\"view-btn\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentView === view.value\"\n          [class.active]=\"currentView === view.value\"\n          (click)=\"switchView(view.value)\">\n          {{ view.label }}\n        </button>\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      <button *ngIf=\"showButton\" class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n        {{ buttonTitle }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      <app-calendar-month\n        *ngIf=\"currentView === CalendarView.MONTH\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        (dayClicked)=\"onMonthDayClick($event)\">\n      </app-calendar-month>\n\n      <app-calendar-week\n        *ngIf=\"currentView === CalendarView.WEEK\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-week>\n\n      <app-calendar-day\n        *ngIf=\"currentView === CalendarView.DAY\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-day>\n    </div>\n\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:#fff;cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:#f3f4f6}.view-btn.active{background:#3b82f6;color:#fff}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:#f3f4f6}.date-input{padding:4px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px}.today-btn{padding:6px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:13px}.today-btn:hover{background:#f3f4f6}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px}.action-btn:hover{background:#2563eb}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid #e5e7eb;overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: CalendarMonthComponent, selector: "app-calendar-month", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config"], outputs: ["dayClicked"] }, { kind: "component", type: CalendarWeekComponent, selector: "app-calendar-week", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: CalendarDayComponent, selector: "app-calendar-day", inputs: ["focusDay", "eventsChanged", "focusDayChanged", "config", "calendarEventComponent"], outputs: ["eventClicked"] }, { kind: "component", type: UpcomingEventsComponent, selector: "app-upcoming-events", inputs: ["eventsChanged", "config"], outputs: ["eventClicked"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CalendarViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-calendar-view', standalone: true, imports: [
+                        CommonModule,
+                        CalendarMonthComponent,
+                        CalendarWeekComponent,
+                        CalendarDayComponent,
+                        UpcomingEventsComponent
+                    ], providers: [
+                        provideMnCalendarConfig(DEFAULT_CALENDAR_CONFIG),
+                    ], template: "<div class=\"calendar-view\" role=\"application\" aria-label=\"Calendar\">\n  <div class=\"calendar-toolbar\">\n    <div class=\"toolbar-left\">\n      <div class=\"view-switcher\" role=\"tablist\" aria-label=\"Calendar view\">\n        <button\n          *ngFor=\"let view of viewOptions; trackBy: trackByView\"\n          class=\"view-btn\"\n          role=\"tab\"\n          [attr.aria-selected]=\"currentView === view.value\"\n          [class.active]=\"currentView === view.value\"\n          (click)=\"switchView(view.value)\">\n          {{ view.label }}\n        </button>\n      </div>\n      <div class=\"date-nav\">\n        <button class=\"nav-btn\" (click)=\"navigatePrevious()\" aria-label=\"Previous\">&#8249;</button>\n        <input type=\"date\" [value]=\"dateInputValue\" (change)=\"onDateInputChange($event)\" class=\"date-input\" aria-label=\"Select date\" />\n        <button class=\"nav-btn\" (click)=\"navigateNext()\" aria-label=\"Next\">&#8250;</button>\n        <button class=\"today-btn\" (click)=\"goToToday()\">{{ config.todayLabel }}</button>\n      </div>\n    </div>\n    <div class=\"toolbar-right\">\n      <button *ngIf=\"showButton\" class=\"action-btn\" (click)=\"ButtonClickedEvent.emit()\">\n        {{ buttonTitle }}\n      </button>\n    </div>\n  </div>\n\n  <div class=\"calendar-content\">\n    <div class=\"calendar-main\">\n      <app-calendar-month\n        *ngIf=\"currentView === CalendarView.MONTH\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        (dayClicked)=\"onMonthDayClick($event)\">\n      </app-calendar-month>\n\n      <app-calendar-week\n        *ngIf=\"currentView === CalendarView.WEEK\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-week>\n\n      <app-calendar-day\n        *ngIf=\"currentView === CalendarView.DAY\"\n        [focusDay]=\"focusDay\"\n        [eventsChanged]=\"internalEventsChanged\"\n        [focusDayChanged]=\"internalFocusDayChanged\"\n        [config]=\"config\"\n        [calendarEventComponent]=\"CalendarEventComponent\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-calendar-day>\n    </div>\n\n    <div class=\"calendar-sidebar\">\n      <app-upcoming-events\n        [eventsChanged]=\"internalEventsChanged\"\n        [config]=\"config\"\n        (eventClicked)=\"onEventClick($event)\">\n      </app-upcoming-events>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;width:100%;height:100%}.calendar-view{width:100%;height:100%;font-family:inherit;display:flex;flex-direction:column}.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 0;gap:12px;flex-wrap:wrap}.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.view-switcher{display:flex;border:1px solid #e5e7eb;border-radius:6px;overflow:hidden}.view-btn{padding:6px 14px;border:none;background:#fff;cursor:pointer;font-size:13px;transition:background .15s}.view-btn:hover{background:#f3f4f6}.view-btn.active{background:#3b82f6;color:#fff}.date-nav{display:flex;align-items:center;gap:4px}.nav-btn{width:32px;height:32px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}.nav-btn:hover{background:#f3f4f6}.date-input{padding:4px 8px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px}.today-btn{padding:6px 12px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-size:13px}.today-btn:hover{background:#f3f4f6}.action-btn{padding:8px 16px;border:none;border-radius:6px;background:#3b82f6;color:#fff;cursor:pointer;font-size:13px}.action-btn:hover{background:#2563eb}.calendar-content{display:grid;grid-template-columns:1fr 220px;gap:12px;flex:1;min-height:0}.calendar-main{min-width:0;min-height:0;overflow:hidden}.calendar-sidebar{border-left:1px solid #e5e7eb;overflow:auto}@media(max-width:767px){.calendar-toolbar{padding:8px 0}.toolbar-left{flex-direction:column;align-items:flex-start;gap:8px}.view-switcher{display:none}.calendar-content{grid-template-columns:1fr}.calendar-sidebar{display:none}.calendar-main{overflow-y:auto}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_DATE_FORMATTER]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MN_CALENDAR_CONFIG]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [CALENDAR_CONFIG]
+                }] }], propDecorators: { showButton: [{
+                type: Input
+            }], buttonTitle: [{
+                type: Input
+            }], CalendarEventComponent: [{
+                type: Input
+            }], NewCalendarItemsEvent: [{
+                type: Input
+            }], RequestNewCalendarItemsEvent: [{
+                type: Output
+            }], CalendarItemClickedEvent: [{
+                type: Output
+            }], ButtonClickedEvent: [{
+                type: Output
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
+// Main component
+
 class MnSectionDirective {
     /** Section name contributed by this DOM node to the section path */
     mnSection;
@@ -5310,6 +6625,9 @@ function provideMnLanguage(config) {
             provide: APP_INITIALIZER,
             multi: true,
             useFactory: (svc) => async () => {
+                if (config.debug) {
+                    svc.setDebug(true);
+                }
                 svc.configure(config.urlPattern);
                 const effectiveLocale = svc.resolveLocaleForDomain(config.domainLocaleMap, config.defaultLocale);
                 const localesToLoad = config.preload ?? [effectiveLocale];
@@ -5394,5 +6712,5 @@ function enableMnPreviewMode(configService, langService, allowedOrigins) {
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_MN_ALERT_CONFIG, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnComponentConfig, provideMnConfig, provideMnLanguage };
+export { API_BASE_URL, ActionStyle, BackdropMode, BaseModalBuilder, CALENDAR_CONFIG, CALENDAR_DATE_FORMATTER, CalendarDayComponent, CalendarEventComponent, CalendarEventDefaultComponent, CalendarEventLayoutService, CalendarMonthComponent, CalendarUtility, CalendarView, CalendarViewComponent, CalendarWeekComponent, CloseMode, ColumnSortType, ConfirmationModalBuilder, ConfirmationTone, CrudService, CustomModalBuilder, DEFAULT_CALENDAR_CONFIG, DEFAULT_MN_ALERT_CONFIG, DefaultCalendarDateFormatter, FieldAppearance, FieldKind, FormLayoutMode, FormModalBuilder, KeyboardMode, MN_ALERT_CONFIG, MN_CALENDAR_COMPONENT_NAME, MN_CALENDAR_CONFIG, MN_CHECKBOX_CONFIG, MN_DATETIME_CONFIG, MN_INPUT_FIELD_CONFIG, MN_INSTANCE_ID, MN_LIB_DUAL_HORIZONTAL_IMAGE, MN_MULTI_SELECT_CONFIG, MN_SECTION_PATH, MN_TEST_COMPONENT_CONFIG, MN_TEXTAREA_CONFIG, MnAlertOutletComponent, MnAlertService, MnAlertStore, MnButton, MnCheckbox, MnConfigService, MnConfirmationBodyComponent, MnCustomBodyHostComponent, MnDatetime, MnDualHorizontalImage, MnFormBodyComponent, MnInformationCard, MnInputField, MnInstanceDirective, MnLanguageService, MnModalRef, MnModalService, MnModalShellComponent, MnMultiSelect, MnSectionDirective, MnTable, MnTestComponent, MnTextarea, MnTranslatePipe, MnWizardBodyComponent, ModalBuilder, ModalCloseReason, ModalIntent, ModalKind, ModalSize, NavigationDirection, OptionState, SelectionMode, StepBuilder, StepState, SubmitMode, Test, UpcomingEventRowComponent, UpcomingEventsComponent, ValidationCode, ValidationStatus, WizardFlowMode, WizardModalBuilder, dateTimeAdapter, defaultTextAdapter, enableMnPreviewMode, isTranslatable, mnAlertVariants, mnButtonVariants, mnCheckboxVariants, mnDatetimeVariants, mnInformationCardVariants, mnInputFieldVariants, mnMultiSelectVariants, mnTextareaVariants, numberAdapter, pickAdapter, provideMnAlerts, provideMnCalendarConfig, provideMnComponentConfig, provideMnConfig, provideMnLanguage, resolveCalendarConfig };
 //# sourceMappingURL=mn-angular-lib.mjs.map