mn-angular-lib 0.0.52 → 0.0.53

package/types/mn-angular-lib.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Provider, TemplateRef, OnInit, Type, ComponentRef, AfterViewInit, OnDestroy, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, ViewContainerRef, PipeTransform } from '@angular/core';
+import { InjectionToken, Provider, TemplateRef, OnInit, Type, ComponentRef, AfterViewInit, OnDestroy, ElementRef, EventEmitter, QueryList, ChangeDetectorRef, ViewContainerRef, OnChanges, SimpleChanges, PipeTransform } from '@angular/core';
 export { TemplateRef, Type } from '@angular/core';
 import * as tailwind_variants from 'tailwind-variants';
 import { VariantProps } from 'tailwind-variants';
 import * as rxjs from 'rxjs';
-import { Observable, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';
 import * as mn_angular_lib from 'mn-angular-lib';
 import * as _angular_forms from '@angular/forms';
 import { ValidationErrors, NgControl, AbstractControl, FormGroup, FormBuilder } from '@angular/forms';
@@ -3091,6 +3091,696 @@ declare class MnTable<T = any> implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<MnTable<any>, "mn-table", never, { "dataSource": { "alias": "dataSource"; "required": false; }; }, { "sortChange": "sortChange"; "selectionChange": "selectionChange"; "rowClick": "rowClick"; }, never, never, true, never>;
 }
 
+/**
+ * Colour scheme applied to calendar events.
+ *
+ * `primaryColor` is used for the left border accent; `secondaryColor` for the
+ * background fill. Both should be valid CSS colour values.
+ */
+interface ColorPreset {
+    /** Unique identifier. */
+    id: string;
+    /** Human-readable colour name (e.g. "Blue"). */
+    colorName: string;
+    /** Accent / border colour (e.g. "#3b82f6"). */
+    primaryColor: string;
+    /** Background fill colour (e.g. "#dbeafe"). */
+    secondaryColor: string;
+}
+
+/**
+ * Represents a single calendar event.
+ *
+ * Consumer-facing properties (`id` through `data`) are set by the application.
+ * Layout properties (`column`, `width`, `continued`, `continuedEnd`) are
+ * computed by {@link CalendarEventLayoutService} and should not be set manually.
+ */
+interface CalendarEvent {
+    /** Unique identifier for the event. */
+    id: string;
+    /** Display title. */
+    title: string;
+    /** Optional description shown below the title. */
+    description: string;
+    /** Event start date/time. */
+    startTime: Date;
+    /** Event end date/time. */
+    endTime: Date;
+    /** Colour scheme used for rendering. */
+    color: ColorPreset;
+    /** Optional custom component type to render this event (overrides the default renderer). */
+    component?: Type<any>;
+    /** Arbitrary payload attached to the event (passed through to custom renderers). */
+    data?: any;
+    /** Zero-based column index within overlapping event groups. */
+    column?: number;
+    /** Number of sub-columns this event spans. */
+    width?: number;
+    /** `true` when this segment is a continuation from a previous day (multi-day events). */
+    continued?: boolean;
+    /** `true` when this segment continues into the next day (multi-day events). */
+    continuedEnd?: boolean;
+}
+/**
+ * Represents the "current time" indicator rendered as a line in week/day views.
+ */
+interface CurrentTimeCalendarEvent {
+    id: 'current-time';
+    title: string;
+    startTime: Date;
+    endTime: Date;
+    column: number;
+    width: number;
+}
+
+/**
+ * Contract for pluggable event renderer components.
+ *
+ * Any component that implements this interface can be used as a custom
+ * event template inside the calendar. Pass the component type via
+ * `[CalendarEventComponent]` on `<app-calendar-view>`.
+ *
+ * The calendar will set the `event` property after creating the component
+ * dynamically via `ViewContainerRef.createComponent()`.
+ */
+interface CalendarEventData {
+    /** The calendar event to render. Set by the calendar after component creation. */
+    event: CalendarEvent;
+}
+
+/**
+ * Available calendar view modes.
+ */
+declare enum CalendarView {
+    MONTH = "MONTH",
+    WEEK = "WEEK",
+    DAY = "DAY"
+}
+/**
+ * Configuration for the calendar component.
+ * All properties are optional — sensible defaults are provided.
+ * Can be supplied via the `CALENDAR_CONFIG` injection token or through
+ * the `provideMnComponentConfig` helper using component name `'mn-calendar'`.
+ */
+interface CalendarConfig {
+    /** First visible hour in week/day views (0–23). Default: `7`. */
+    startHour: number;
+    /** Last visible hour in week/day views (1–24, exclusive). Default: `22`. */
+    endHour: number;
+    /** BCP 47 locale tag used for date/time formatting (e.g. `'en-US'`, `'nl-NL'`). Default: `'en-US'`. */
+    locale: string;
+    /** Label for the "Today" navigation button. Default: `'Today'`. */
+    todayLabel: string;
+    /** Title shown above the upcoming-events sidebar. Default: `'Upcoming events'`. */
+    upcomingEventsTitle: string;
+    /** Display labels for each calendar view mode. */
+    viewLabels: Record<string, string>;
+    /** Abbreviated day names starting from Monday (length 7). Derived from `locale` when not set. */
+    shortDayNames: string[];
+    /** Full day names starting from Monday (length 7). Derived from `locale` when not set. */
+    longDayNames: string[];
+    /** Screen-width breakpoint (px) below which only day view is shown. Default: `768`. */
+    mobileBreakpoint: number;
+}
+/** Default calendar configuration values. */
+declare const DEFAULT_CALENDAR_CONFIG: CalendarConfig;
+/**
+ * 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' } }
+ * ]
+ * ```
+ */
+declare const CALENDAR_CONFIG: InjectionToken<CalendarConfig>;
+/**
+ * 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" }
+ *     }
+ *   }
+ * }
+ * ```
+ */
+declare const MN_CALENDAR_CONFIG: InjectionToken<CalendarConfig>;
+/** Component name used to look up calendar settings in `mn-config.json5`. */
+declare 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.
+ */
+declare function provideMnCalendarConfig(initial?: Partial<CalendarConfig>): i0.Provider;
+/**
+ * Merges a partial config with defaults, re-deriving day names from locale when needed.
+ */
+declare function resolveCalendarConfig(partial?: Partial<CalendarConfig>): CalendarConfig;
+/**
+ * Represents a half-hour row in the week/day time grid.
+ */
+interface HourRow {
+    /** The hour value (e.g. 7, 8, …). */
+    hour: number;
+    /** CSS grid row start (1-based). */
+    topRow: number;
+    /** CSS grid row end (1-based, exclusive). */
+    bottomRow: number;
+}
+/**
+ * Represents a single day column in the week view header.
+ */
+interface ColumnDay {
+    /** The date this column represents. */
+    date: Date;
+    /** Abbreviated day name (e.g. "Mon"). */
+    dayName: string;
+    /** Day-of-month number (1–31). */
+    dayNumber: number;
+    /** Whether this column is today. */
+    isToday: boolean;
+}
+/**
+ * Represents a single cell in the month grid.
+ */
+interface MonthItem {
+    /** The date this cell represents. */
+    date: Date;
+    /** Day-of-month number (1–31). */
+    dayNumber: number;
+    /** Whether this date belongs to the currently focused month. */
+    isCurrentMonth: boolean;
+    /** Whether this date is today. */
+    isToday: boolean;
+    /** Events occurring on this date. */
+    events: CalendarEvent[];
+}
+
+/**
+ * Abstraction for date/time formatting used by calendar components.
+ *
+ * The library ships a default implementation ({@link DefaultCalendarDateFormatter})
+ * that uses `Intl.DateTimeFormat`. Consumers can provide their own implementation
+ * (e.g. wrapping `@ngx-translate`) via the {@link CALENDAR_DATE_FORMATTER} token.
+ *
+ * Locale-independent settings (day names, view labels, "Today" label) have been
+ * moved to {@link CalendarConfig} so they can be configured declaratively.
+ */
+interface CalendarDateFormatter {
+    /** Formats an hour + minute pair (e.g. `9, 0` → `"09:00 AM"`). */
+    formatTimeI(hour: number, minute: number): Promise<string>;
+    /** Formats the time portion of a Date. Returns `''` for `undefined`. */
+    formatTime(date: Date | undefined): Promise<string>;
+    /** Formats a full date-time string as an Observable. */
+    formatDateTime(date: Date): Observable<string>;
+    /** Formats a date-only string as an Observable. */
+    formatDate(date: Date): Observable<string>;
+    /** Formats a Date as `YYYY-MM-DD` for `<input type="date">`. */
+    formatDateForFormControl(date: Date): string;
+    /** Returns `true` when both dates fall on the same calendar day. */
+    isSameDay(date1: Date, date2: Date): boolean;
+    /** Formats a Date as "Month Year" (e.g. "January 2026"). */
+    formatMonthName(date: Date): Promise<string>;
+}
+/**
+ * Injection token for the calendar date formatter.
+ *
+ * @example
+ * ```ts
+ * providers: [
+ *   { provide: CALENDAR_DATE_FORMATTER, useClass: MyCustomFormatter }
+ * ]
+ * ```
+ */
+declare const CALENDAR_DATE_FORMATTER: InjectionToken<CalendarDateFormatter>;
+
+/**
+ * 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>
+ * ```
+ */
+declare class CalendarViewComponent implements OnInit, OnDestroy {
+    /** Whether to show the action button in the toolbar. */
+    showButton: boolean;
+    /** Label text for the action button. */
+    buttonTitle: string;
+    /** Custom event renderer component type. */
+    CalendarEventComponent?: Type<CalendarEventData>;
+    /** Observable or EventEmitter that pushes new event arrays into the calendar. */
+    NewCalendarItemsEvent?: EventEmitter<CalendarEvent[]>;
+    /** Emits when the calendar needs fresh event data (e.g. after navigation). */
+    RequestNewCalendarItemsEvent: EventEmitter<Date>;
+    /** Emits when a calendar event is clicked. */
+    CalendarItemClickedEvent: EventEmitter<CalendarEvent>;
+    /** Emits when the action button is clicked. */
+    ButtonClickedEvent: EventEmitter<void>;
+    readonly CalendarView: typeof CalendarView;
+    currentView: CalendarView;
+    focusDay: Date;
+    dateInputValue: string;
+    viewOptions: {
+        value: CalendarView;
+        label: string;
+    }[];
+    isMobileView: boolean;
+    /** BehaviorSubject so late-subscribing child views receive the last emitted events. */
+    internalEventsChanged: BehaviorSubject<CalendarEvent[]>;
+    /** Subject for broadcasting focus-day changes to child views. */
+    internalFocusDayChanged: Subject<Date>;
+    private destroy$;
+    private formatter;
+    protected config: CalendarConfig;
+    private readonly destroyRef;
+    private readonly lang;
+    constructor(formatter: CalendarDateFormatter | null, mnConfig: CalendarConfig | null, legacyConfig: CalendarConfig | null);
+    onResize(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Switches the active view. On mobile, forces day view. */
+    switchView(view: CalendarView): void;
+    /** Navigates to the previous period (month / week / day). */
+    navigatePrevious(): void;
+    /** Navigates to the next period (month / week / day). */
+    navigateNext(): void;
+    /** Navigates to today. */
+    goToToday(): void;
+    /** Handles the date-picker input change. */
+    onDateInputChange(event: Event): void;
+    /** Handles a day click from the month view — switches to day view. */
+    onMonthDayClick(date: Date): void;
+    /** Forwards a child event click to the parent output. */
+    onEventClick(event: CalendarEvent): void;
+    /** trackBy for view option buttons. */
+    trackByView(_index: number, item: {
+        value: CalendarView;
+    }): string;
+    /** Rebuilds view options and labels from the current config. */
+    private rebuildFromConfig;
+    private checkMobileView;
+    private setFocusDay;
+    private updateDateInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarViewComponent, [{ optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarViewComponent, "app-calendar-view", never, { "showButton": { "alias": "showButton"; "required": false; }; "buttonTitle": { "alias": "buttonTitle"; "required": false; }; "CalendarEventComponent": { "alias": "CalendarEventComponent"; "required": false; }; "NewCalendarItemsEvent": { "alias": "NewCalendarItemsEvent"; "required": false; }; }, { "RequestNewCalendarItemsEvent": "RequestNewCalendarItemsEvent"; "CalendarItemClickedEvent": "CalendarItemClickedEvent"; "ButtonClickedEvent": "ButtonClickedEvent"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class CalendarEventLayoutService {
+    /**
+     * Returns `true` when two time ranges overlap (exclusive boundaries).
+     */
+    eventsOverlap(startA: Date, endA: Date, startB: Date, endB: Date): boolean;
+    /**
+     * Returns all events whose time range overlaps the given `[start, end)` window.
+     */
+    getAllEventsOnSpecificTime(events: CalendarEvent[], start: Date, end: Date): CalendarEvent[];
+    /**
+     * 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: CalendarEvent[], startHour: number, endHour: number, rangeStart: Date, rangeEnd: Date): CalendarEvent[];
+    /**
+     * 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: CalendarEvent[]): void;
+    /**
+     * Assigns a `width` (column span) to each event, expanding it to fill
+     * unused columns to its right within the overlapping group.
+     */
+    assignWidthsToEvents(events: CalendarEvent[], scanStart: Date, scanEnd: Date): void;
+    /** Finds the lowest column index not occupied by any overlapping event. */
+    private findEarliestPossibleColumn;
+    /** Computes the maximum width an event can span without overlapping a neighbour to its right. */
+    private findBiggestPossibleWidth;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventLayoutService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CalendarEventLayoutService>;
+}
+
+/** Extended hour row with a pre-resolved display label. */
+interface DisplayHourRow$1 extends HourRow {
+    hourLabel: string;
+}
+/**
+ * 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.
+ */
+declare class CalendarWeekComponent implements OnInit, OnDestroy {
+    private layoutService;
+    /** The date around which the week is centred. */
+    focusDay: Date;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged: Observable<CalendarEvent[]>;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged: Observable<Date>;
+    /** Resolved calendar configuration passed from the parent view. */
+    config?: CalendarConfig;
+    /** Optional custom event renderer component. */
+    calendarEventComponent?: Type<CalendarEventData>;
+    /** Emits when a calendar event is clicked. */
+    eventClicked: EventEmitter<CalendarEvent>;
+    columns: ColumnDay[];
+    hourRows: DisplayHourRow$1[];
+    displayEvents: CalendarEvent[];
+    totalRows: number;
+    currentTimeRow: number;
+    currentTimeCol: string;
+    gridTemplateColumns: string;
+    private dayColumnMap;
+    private events;
+    private destroy$;
+    private formatter;
+    private resolvedConfig;
+    private currentTimeInterval?;
+    constructor(layoutService: CalendarEventLayoutService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Returns the CSS `grid-row` value for an event based on its start/end times. */
+    getEventRow(event: CalendarEvent): string;
+    /** Returns the CSS `grid-column` span for a day header, accounting for sub-columns. */
+    getHeaderColumn(dayIndex: number): string;
+    /** Returns the CSS `grid-column` value for an event within its day's sub-columns. */
+    getEventColumn(event: CalendarEvent): string;
+    /** Forwards event click to parent. */
+    onEventClick(event: CalendarEvent): void;
+    /** trackBy for hour rows. */
+    trackByHour(_index: number, row: DisplayHourRow$1): number;
+    /** trackBy for day columns. */
+    trackByColumn(_index: number, col: ColumnDay): number;
+    /** trackBy for events. */
+    trackByEvent(_index: number, event: CalendarEvent): string;
+    private buildHourRows;
+    /** Builds the 7 day columns for the current week (Monday–Sunday). */
+    private buildColumns;
+    /** Filters, splits, and lays out events for the current week. */
+    private refreshEvents;
+    /** Computes the CSS grid-template-columns string based on per-day sub-column counts. */
+    private buildGridColumns;
+    /** Updates the current-time red line position. */
+    private updateCurrentTime;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarWeekComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarWeekComponent, "app-calendar-week", never, { "focusDay": { "alias": "focusDay"; "required": false; }; "eventsChanged": { "alias": "eventsChanged"; "required": false; }; "focusDayChanged": { "alias": "focusDayChanged"; "required": false; }; "config": { "alias": "config"; "required": false; }; "calendarEventComponent": { "alias": "calendarEventComponent"; "required": false; }; }, { "eventClicked": "eventClicked"; }, never, never, true, never>;
+}
+
+/** Extended hour row with a pre-resolved display label. */
+interface DisplayHourRow extends HourRow {
+    hourLabel: string;
+}
+/**
+ * Day grid view showing a single day with half-hour time slots.
+ *
+ * Shares the same layout algorithm as the week view via
+ * {@link CalendarEventLayoutService}.
+ */
+declare class CalendarDayComponent implements OnInit, OnDestroy {
+    private layoutService;
+    /** The date to display. */
+    focusDay: Date;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged: Observable<CalendarEvent[]>;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged: Observable<Date>;
+    /** Resolved calendar configuration passed from the parent view. */
+    config?: CalendarConfig;
+    /** Optional custom event renderer component. */
+    calendarEventComponent?: Type<CalendarEventData>;
+    /** Emits when a calendar event is clicked. */
+    eventClicked: EventEmitter<CalendarEvent>;
+    hourRows: DisplayHourRow[];
+    displayEvents: CalendarEvent[];
+    totalRows: number;
+    totalColumns: number;
+    currentTimeRow: number;
+    isToday: boolean;
+    dayName: string;
+    private events;
+    private destroy$;
+    private formatter;
+    private resolvedConfig;
+    private currentTimeInterval?;
+    constructor(layoutService: CalendarEventLayoutService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Returns the CSS `grid-row` value for an event. */
+    getEventRow(event: CalendarEvent): string;
+    /** Returns the CSS `grid-column` value for an event within its sub-columns. */
+    getEventColumn(event: CalendarEvent): string;
+    /** Forwards event click to parent. */
+    onEventClick(event: CalendarEvent): void;
+    /** trackBy for hour rows. */
+    trackByHour(_index: number, row: DisplayHourRow): number;
+    /** trackBy for events. */
+    trackByEvent(_index: number, event: CalendarEvent): string;
+    private buildHourRows;
+    /** Updates the day name and isToday flag. */
+    private updateDayInfo;
+    /** Filters, splits, and lays out events for the focus day. */
+    private refreshEvents;
+    /** Updates the current-time red line position. */
+    private updateCurrentTime;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarDayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarDayComponent, "app-calendar-day", never, { "focusDay": { "alias": "focusDay"; "required": false; }; "eventsChanged": { "alias": "eventsChanged"; "required": false; }; "focusDayChanged": { "alias": "focusDayChanged"; "required": false; }; "config": { "alias": "config"; "required": false; }; "calendarEventComponent": { "alias": "calendarEventComponent"; "required": false; }; }, { "eventClicked": "eventClicked"; }, never, never, true, never>;
+}
+
+/**
+ * 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`.
+ */
+declare class CalendarMonthComponent implements OnInit, OnDestroy {
+    /** The date whose month is displayed. */
+    focusDay: Date;
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged: Observable<CalendarEvent[]>;
+    /** Observable that emits when the focus day changes. */
+    focusDayChanged: Observable<Date>;
+    /** Resolved calendar configuration passed from the parent view. */
+    config?: CalendarConfig;
+    /** Emits the date of a clicked day cell. */
+    dayClicked: EventEmitter<Date>;
+    monthItems: MonthItem[];
+    longDayNames: string[];
+    private events;
+    private destroy$;
+    private formatter;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** Emits the clicked day's date. */
+    onDayClick(date: Date): void;
+    /** trackBy for day name headers. */
+    trackByDayName(index: number): number;
+    /** trackBy for month grid cells. */
+    trackByMonthItem(_index: number, item: MonthItem): number;
+    /** trackBy for event dots. */
+    trackByEventDot(_index: number, event: CalendarEvent): string;
+    /** Builds the 42-cell month grid (6 rows × 7 columns). */
+    private buildMonth;
+    private createMonthItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarMonthComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarMonthComponent, "app-calendar-month", never, { "focusDay": { "alias": "focusDay"; "required": false; }; "eventsChanged": { "alias": "eventsChanged"; "required": false; }; "focusDayChanged": { "alias": "focusDayChanged"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "dayClicked": "dayClicked"; }, never, never, true, never>;
+}
+
+/**
+ * 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)
+ */
+declare class CalendarEventComponent implements AfterViewInit, OnChanges {
+    /** The event data to render. */
+    event: CalendarEvent;
+    /** Optional custom component type that overrides the default renderer. */
+    customComponent?: Type<CalendarEventData>;
+    /** Emits when the rendered event is clicked. */
+    eventClicked: EventEmitter<CalendarEvent>;
+    eventContainer: ViewContainerRef;
+    private rendered;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /** Emits the event click. */
+    onEventClick(): void;
+    /** Creates the event component dynamically and sets its `event` property. */
+    private renderComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarEventComponent, "app-calendar-event", never, { "event": { "alias": "event"; "required": false; }; "customComponent": { "alias": "customComponent"; "required": false; }; }, { "eventClicked": "eventClicked"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class CalendarEventDefaultComponent implements CalendarEventData, OnInit {
+    /** The event to render. Set by {@link CalendarEventComponent} after creation. */
+    event: CalendarEvent;
+    formattedTime: string;
+    private formatter;
+    constructor(formatter: CalendarDateFormatter | null);
+    ngOnInit(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CalendarEventDefaultComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CalendarEventDefaultComponent, "app-calendar-event-default", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Sidebar component that lists the next 10 upcoming events
+ * (events whose end time is in the future), sorted by start time.
+ */
+declare class UpcomingEventsComponent implements OnInit, OnDestroy {
+    /** Observable that emits the full event list whenever it changes. */
+    eventsChanged: Observable<CalendarEvent[]>;
+    /** Resolved calendar configuration passed from the parent view. */
+    config?: CalendarConfig;
+    /** Emits when an upcoming event row is clicked. */
+    eventClicked: EventEmitter<CalendarEvent>;
+    upcomingEvents: CalendarEvent[];
+    title: string;
+    private destroy$;
+    constructor();
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** trackBy for upcoming event rows. */
+    trackByEvent(_index: number, event: CalendarEvent): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpcomingEventsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpcomingEventsComponent, "app-upcoming-events", never, { "eventsChanged": { "alias": "eventsChanged"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "eventClicked": "eventClicked"; }, never, never, true, never>;
+}
+
+/**
+ * Renders a single row in the upcoming-events sidebar.
+ * Shows the event title, formatted date/time, and optional description.
+ */
+declare class UpcomingEventRowComponent implements OnInit {
+    /** The event to display. */
+    event: CalendarEvent;
+    /** Emits the event when this row is clicked. */
+    eventClicked: EventEmitter<CalendarEvent>;
+    formattedDate: string;
+    private formatter;
+    constructor(formatter: CalendarDateFormatter | null);
+    ngOnInit(): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<UpcomingEventRowComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<UpcomingEventRowComponent, "app-upcoming-event-row", never, { "event": { "alias": "event"; "required": false; }; }, { "eventClicked": "eventClicked"; }, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class DefaultCalendarDateFormatter implements CalendarDateFormatter {
+    private readonly locale;
+    constructor(config?: CalendarConfig | null);
+    /** Formats an hour and minute pair into a locale time string (e.g. "09:00 AM"). */
+    formatTimeI(hour: number, minute: number): Promise<string>;
+    /** Formats the time portion of a Date (e.g. "2:30 PM"). Returns empty string for undefined. */
+    formatTime(date: Date | undefined): Promise<string>;
+    /** Formats a Date as a full date-time string (e.g. "May 15, 2026, 02:30 PM"). */
+    formatDateTime(date: Date): Observable<string>;
+    /** Formats a Date as a date-only string (e.g. "May 15, 2026"). */
+    formatDate(date: Date): Observable<string>;
+    /** Formats a Date as `YYYY-MM-DD` for use in `<input type="date">` controls. */
+    formatDateForFormControl(date: Date): string;
+    /** Returns `true` if both dates fall on the same calendar day. */
+    isSameDay(date1: Date, date2: Date): boolean;
+    /** Formats a Date as "Month Year" (e.g. "January 2026"). */
+    formatMonthName(date: Date): Promise<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DefaultCalendarDateFormatter, [{ optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DefaultCalendarDateFormatter>;
+}
+
+/**
+ * Static utility methods for calendar grid positioning.
+ */
+declare 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: Date): number;
+    /**
+     * 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: number, minute: number, startHour: number): number;
+}
+
 /**
  * Types for mn-lib configuration.
  */
@@ -3642,5 +4332,5 @@ interface MnPreviewMessage {
  */
 declare function enableMnPreviewMode(configService: MnConfigService, langService: MnLanguageService, allowedOrigins?: string[]): void;
 
-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 type { AnimationOptions, ApiError, BaseModalConfig, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColumnDefinition, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessagesData, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnShowInput, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableRowAction, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };
+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 };
+export type { AnimationOptions, ApiError, BaseModalConfig, CalendarConfig, CalendarDateFormatter, CalendarEvent, CalendarEventData, CancellationActionConfig, CheckboxFieldConfig, ColorFieldConfig, ColorPreset, ColumnDay, ColumnDefinition, ConfirmationActionConfig, ConfirmationModalConfig, CrudConfig, CurrentTimeCalendarEvent, CursorPaginationStrategy, CustomFieldConfig, CustomModalConfig, DateFieldConfig, DatetimeFieldConfig, FailureResult, FieldDataSource, FieldValidator, FieldVisibilityCondition, FileFieldConfig, FormFieldConfig, FormFieldGroup, FormModalConfig, FormRow, FormRowField, FormValidator, HourRow, MnAlert, MnAlertConfig, MnAlertId, MnAlertKind, MnAlertTemplateContext, MnAlertVariants, MnButtonTypes, MnButtonVariants, MnCheckboxErrorMessageData, MnCheckboxErrorMessagesData, MnCheckboxProps, MnCheckboxUIConfig, MnCheckboxVariants, MnConfigFile, MnConfigSettings, MnConfigValue, MnDatetimeErrorMessageData, MnDatetimeErrorMessagesData, MnDatetimeMode, MnDatetimeProps, MnDatetimeUIConfig, MnDatetimeVariants, MnDomAttrs, MnDualHorizontalImageConfig, MnDualHorizontalImageTypes, MnErrorMessageData, MnErrorMessagesData, MnImageType, MnInformationCardBaseData, MnInformationCardData, MnInformationCardVariants, MnInputAdapter, MnInputBaseProps, MnInputDateTimeProps, MnInputFieldProps, MnInputFieldUIConfig, MnInputProps, MnInputType, MnInputVariants, MnLanguageConfig, MnMultiSelectErrorMessageData, MnMultiSelectErrorMessagesData, MnMultiSelectOption, MnMultiSelectProps, MnMultiSelectUIConfig, MnMultiSelectVariants, MnPreviewMessage, MnShowInput, MnTextareaErrorMessageData, MnTextareaErrorMessagesData, MnTextareaProps, MnTextareaUIConfig, MnTextareaVariants, MnTranslatable, MnTranslationMap, MnTranslations, ModalCancelHandler, ModalCloseEvent, ModalConfig, ModalFooterAction, ModalI18nLabels, ModalInputMap, ModalPollingConfig, ModalRef, ModalResultHandler, ModalStepId, MonthItem, MultiSelectFieldConfig, MultiSelectTableFieldConfig, NumberFieldConfig, OffsetPaginationStrategy, PaginationStrategy, PasswordFieldConfig, Primitive, QueryParams, QueryValue, RatingFieldConfig, Result, ResultMeta, SelectFieldConfig, SelectOption, SingleSelectTableFieldConfig, SliderFieldConfig, SortState, StepBodyConfig, StepGuard, StepValidator, SuccessResult, TableAppearance, TableDataSource, TableRowAction, TextFieldConfig, TextareaFieldConfig, ValidationResult, WizardBeforeCompleteValidator, WizardModalConfig, WizardResult, WizardStepChangeEvent, WizardStepChangeHandler, WizardStepConfig };