@acorex/components 19.12.0-next.1 → 19.12.0-next.3

package/fesm2022/acorex-components-scheduler.mjs

@@ -1,161 +1,1357 @@
-import { AXButtonComponent, AXButtonItemComponent, AXButtonModule } from '@acorex/components/button';
-import { MXBaseComponent } from '@acorex/components/common';
-import { AXDecoratorIconComponent, AXDecoratorGenericComponent, AXDecoratorModule } from '@acorex/components/decorators';
-import { AXDateTimeRange, AXCalendarService, AXDateTimeModule } from '@acorex/core/date-time';
+import { AXButtonComponent } from '@acorex/components/button';
+import { AXCalendarComponent } from '@acorex/components/calendar';
+import { MXBaseComponent, convertArrayToDataSource } from '@acorex/components/common';
+import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/components/decorators';
+import { AXPopoverComponent } from '@acorex/components/popover';
+import { AXSelectBoxComponent } from '@acorex/components/select-box';
+import { AXCalendarService } from '@acorex/core/date-time';
+import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
+import { AXLocaleService } from '@acorex/core/locale';
 import { AXPlatform } from '@acorex/core/platform';
-import { NgFor, NgClass, NgIf, CommonModule } from '@angular/common';
+import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
+import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
+import { AsyncPipe, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { AXDropdownPanelComponent, AXDropdownModule } from '@acorex/components/dropdown';
+import { inject, Injectable, input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, viewChild, linkedSignal, signal, model, effect, untracked } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { Observable, distinctUntilChanged, switchMap, of, map, startWith } from 'rxjs';
+import { orderBy } from 'lodash-es';
 
-/**
- * @category
- * Represents a view in the scheduler component that displays the calendar month.
- */
-class AXSchedulerMonthViewComponent extends MXBaseComponent {
+class AXSchedulerService {
     constructor() {
-        super(...arguments);
-        /** @ignore */
-        this._platform = inject(AXPlatform);
-        /** @ignore */
-        this._slots = [];
+        this.formatService = inject(AXFormatService);
+        this.HOURS_PER_DAY = 24;
+        this.MINUTES_PER_HOUR = 60;
+        this.BLOCK_DURATION_MINUTES = 30;
+        this.MILLISECONDS_PER_MINUTE = 60 * 1000;
+        this.MILLISECONDS_PER_DAY = this.HOURS_PER_DAY * this.MINUTES_PER_HOUR * this.MILLISECONDS_PER_MINUTE;
     }
-    /** @ignore */
-    get dayNames() {
-        return this._platform.is('SM') ? [] : [];
+    /**
+     * Checks if two appointments overlap in time.
+     */
+    doAppointmentsOverlap(appointmentA, appointmentB) {
+        if (!appointmentA?.startDate || !appointmentA.endDate || !appointmentB?.startDate || !appointmentB.endDate) {
+            return false;
+        }
+        const startA = appointmentA.startDate.date.getTime();
+        const endA = appointmentA.endDate.date.getTime();
+        const startB = appointmentB.startDate.date.getTime();
+        const endB = appointmentB.endDate.date.getTime();
+        // Uses strict overlap check (change < / > to <= / >= if touching boundaries count)
+        return startA < endB && endA > startB;
     }
     /**
-     * Gets or sets the date for the scheduler view.
+     * Calculates appointment duration in minutes.
      */
-    get date() {
-        return this._date;
+    calculateDurationInMinutes(Appointment) {
+        if (!Appointment?.startDate || !Appointment.endDate)
+            return 0;
+        const durationMillis = Appointment.endDate.date.getTime() - Appointment.startDate.date.getTime();
+        return Math.max(0, durationMillis / this.MILLISECONDS_PER_MINUTE);
     }
     /**
-     * Sets the date for the scheduler view and triggers the generation of time slots.
-     * @param {AXDateTime} v
+     * Calculates appointment duration in blocks (default 30 min).
      */
-    set date(v) {
-        this._date = v;
-        this.generateSlots();
+    calculateDurationInBlocks(appointment) {
+        const durationMinutes = this.calculateDurationInMinutes(appointment);
+        return Math.ceil(durationMinutes / this.BLOCK_DURATION_MINUTES);
     }
-    /** @ignore */
-    ngOnInit() {
-        super.ngOnInit();
-        this.generateSlots();
-        this._platform.resize.subscribe((c) => {
-            this.cdr.markForCheck();
+    /**
+     * Gets the day index (relative to view start) and block index (relative to start hour)
+     * for a given date time within the view context. Returns null if outside view.
+     */
+    getBlockIdentifier(dateTime, viewStartDate, startHour, endHour, // Exclusive end hour
+    viewTotalDays = 1) {
+        if (!viewStartDate || !dateTime || typeof startHour !== 'number' || typeof endHour !== 'number') {
+            return null;
+        }
+        const viewEndDate = viewStartDate.add('day', viewTotalDays); // Calculate exclusive end date
+        // Check if dateTime is within the view's date and time range
+        if (dateTime.compare(viewStartDate, 'day') < 0 ||
+            dateTime.compare(viewEndDate, 'day') >= 0 || // Check against exclusive end date
+            dateTime.hour < startHour ||
+            dateTime.hour >= endHour // Check against exclusive end hour
+        ) {
+            return null;
+        }
+        // Calculate day index relative to view start
+        const dayIndex = Math.floor((dateTime.date.getTime() - viewStartDate.date.getTime()) / this.MILLISECONDS_PER_DAY);
+        // Ensure dayIndex is valid for the view duration
+        if (dayIndex < 0 || dayIndex >= viewTotalDays) {
+            return null;
+        }
+        const minutesIntoDay = dateTime.hour * this.MINUTES_PER_HOUR + dateTime.minute;
+        const minutesIntoViewHours = minutesIntoDay - startHour * this.MINUTES_PER_HOUR;
+        // This check should be redundant due to initial hour check, but safe to keep
+        if (minutesIntoViewHours < 0)
+            return null;
+        const blockIndex = Math.floor(minutesIntoViewHours / this.BLOCK_DURATION_MINUTES);
+        return { dayIndex, blockIndex };
+    }
+    /**
+     * Groups appointments by the blocks they are ACTIVE in for a given view.
+     * @param viewTotalDays - Number of days in the current view (1 for Day, 7 for Week, etc.)
+     */
+    calculateActiveAppointmentsInBlock(singleDayAppointments, viewStartDate, startHour, endHour, viewTotalDays) {
+        const blocks = {};
+        if (!viewStartDate || typeof startHour !== 'number' || typeof endHour !== 'number' || viewTotalDays <= 0) {
+            return blocks;
+        }
+        const viewEndDate = viewStartDate.add('day', viewTotalDays); // Exclusive end date
+        // Calculate total blocks based on consistent block duration
+        const totalBlocksPerDay = Math.max(0, (endHour - startHour) * (this.MINUTES_PER_HOUR / this.BLOCK_DURATION_MINUTES));
+        singleDayAppointments.forEach((appointment) => {
+            if (!appointment.startDate || !appointment.endDate || !appointment.key)
+                return;
+            // Clamp appointment start/end times to the view boundaries (days and hours)
+            let effectiveStart = appointment.startDate.compare(viewStartDate) < 0 ? viewStartDate : appointment.startDate;
+            if (effectiveStart.hour < startHour)
+                effectiveStart = effectiveStart.set('hour', startHour).set('minute', 0);
+            let effectiveEnd = appointment.endDate.compare(viewEndDate) >= 0 ? viewEndDate : appointment.endDate;
+            if (effectiveEnd.hour >= endHour) {
+                const endDayBase = effectiveEnd.compare(viewEndDate) >= 0 ? viewEndDate.add('day', -1) : effectiveEnd;
+                effectiveEnd = endDayBase.set('hour', endHour).set('minute', 0);
+            }
+            // Get start block info using the specified viewTotalDays
+            const startInfo = this.getBlockIdentifier(effectiveStart, viewStartDate, startHour, endHour, viewTotalDays);
+            if (!startInfo)
+                return; // Appointment starts completely outside view
+            // Get end block info (last block occupied) using the specified viewTotalDays
+            const timeBeforeEnd = effectiveEnd.add('minute', -1);
+            const endInfo = this.getBlockIdentifier(timeBeforeEnd, viewStartDate, startHour, endHour, viewTotalDays);
+            // If endInfo is null, it means the appointment ends before the viewable part starts,
+            // or exactly at the start, so it occupies no blocks. Handle this case.
+            if (!endInfo ||
+                endInfo.dayIndex < startInfo.dayIndex ||
+                (endInfo.dayIndex === startInfo.dayIndex && endInfo.blockIndex < startInfo.blockIndex)) {
+                return; // Appointment effectively has no duration within the viewable blocks
+            }
+            // Iterate through the days and blocks the appointment spans within the view
+            for (let dIdx = startInfo.dayIndex; dIdx <= endInfo.dayIndex; dIdx++) {
+                // Clamp day index just in case (should be handled by getBlockIdentifier checks)
+                if (dIdx < 0 || dIdx >= viewTotalDays)
+                    continue;
+                const startBlock = dIdx === startInfo.dayIndex ? startInfo.blockIndex : 0;
+                // Make sure endBlock doesn't exceed the calculated totalBlocksPerDay
+                const endBlock = dIdx === endInfo.dayIndex ? endInfo.blockIndex : totalBlocksPerDay - 1;
+                if (!blocks[dIdx])
+                    blocks[dIdx] = {};
+                for (let bIdx = startBlock; bIdx <= endBlock; bIdx++) {
+                    // Final check for block index validity
+                    if (bIdx >= 0 && bIdx < totalBlocksPerDay) {
+                        if (!blocks[dIdx][bIdx])
+                            blocks[dIdx][bIdx] = [];
+                        // Avoid duplicates if the same appointment is processed multiple times (shouldn't happen with outer loop)
+                        if (!blocks[dIdx][bIdx].some((e) => e.key === appointment.key)) {
+                            blocks[dIdx][bIdx].push(appointment);
+                        }
+                    }
+                }
+            }
+        });
+        return blocks;
+    }
+    /**
+     * Calculates max concurrency and effective total columns for Day View appointments.
+     */
+    calculateDayViewConcurrencyInfo(singleDayAppointments, viewStartDate, // Need start date for context
+    startHour, endHour) {
+        const concurrencyInfo = new Map();
+        if (singleDayAppointments.length === 0)
+            return concurrencyInfo;
+        // Use the consolidated function for day view (viewTotalDays = 1)
+        // It returns ActiveAppointmentsInBlock, which has dayIndex 0 for Day view
+        const activeAppointmentsMap = this.calculateActiveAppointmentsInBlock(singleDayAppointments, viewStartDate, startHour, endHour, 1);
+        const blocks = activeAppointmentsMap[0] ?? {}; // Extract blocks for the single day (dayIndex 0)
+        // --- The rest of the logic remains the same, using the 'blocks' derived above ---
+        // 1. Calculate maxConcurrency for each appointment based on blocks it occupies
+        const maxConcurrencyMap = {};
+        singleDayAppointments.forEach((appointment) => {
+            let maxOverlap = 0;
+            // Recalculate block range for *this specific appointment* relative to view hours
+            const startMinutes = appointment.startDate.hour * this.MINUTES_PER_HOUR + appointment.startDate.minute;
+            const endMinutes = appointment.endDate.hour * this.MINUTES_PER_HOUR + appointment.endDate.minute;
+            const startBlockOffset = Math.max(0, startMinutes - startHour * this.MINUTES_PER_HOUR);
+            const endBlockOffset = Math.min((endHour - startHour) * this.MINUTES_PER_HOUR, endMinutes - startHour * this.MINUTES_PER_HOUR);
+            const startBlockIndex = Math.floor(startBlockOffset / this.BLOCK_DURATION_MINUTES);
+            const endBlockIndex = Math.ceil(endBlockOffset / this.BLOCK_DURATION_MINUTES);
+            for (let blockIdx = startBlockIndex; blockIdx < endBlockIndex; blockIdx++) {
+                const blockData = blocks[blockIdx]; // Access block data using block index
+                if (blockData) {
+                    // blockData now contains appointment objects, use length directly
+                    maxOverlap = Math.max(maxOverlap, blockData.length);
+                }
+            }
+            // Edge case handling (use blockData.length)
+            const startBlockData = blocks[startBlockIndex];
+            if (startBlockData) {
+                if (startBlockIndex === endBlockIndex - 1 || startBlockIndex >= endBlockIndex) {
+                    maxOverlap = Math.max(maxOverlap, startBlockData.length);
+                }
+            }
+            maxConcurrencyMap[appointment.key] = maxOverlap || 1;
+        });
+        // 2. Calculate effectiveTotalColumns by checking overlaps
+        singleDayAppointments.forEach((appointment) => {
+            const appointmentKey = appointment.key;
+            let effectiveTotalColumns = maxConcurrencyMap[appointmentKey] || 1;
+            for (const otherAppointment of singleDayAppointments) {
+                if (appointmentKey === otherAppointment.key)
+                    continue;
+                if (this.doAppointmentsOverlap(appointment, otherAppointment)) {
+                    const otherMaxConcurrency = maxConcurrencyMap[otherAppointment.key] || 1;
+                    effectiveTotalColumns = Math.max(effectiveTotalColumns, otherMaxConcurrency);
+                }
+            }
+            concurrencyInfo.set(appointmentKey, {
+                maxConcurrency: maxConcurrencyMap[appointmentKey] || 1, // Keep original max concurrency
+                effectiveTotalColumns: effectiveTotalColumns,
+            });
+        });
+        return concurrencyInfo;
+    }
+    /**
+     * Groups appointments by the block they START in for Week View.
+     */
+    calculateWeekViewAppointmentsByStartBlock(singleDayAppointments, viewStartDate, startHour, endHour) {
+        const blocks = {};
+        singleDayAppointments.forEach((appointment) => {
+            if (!appointment.startDate)
+                return;
+            const startInfo = this.getBlockIdentifier(appointment.startDate, viewStartDate, startHour, endHour, 7);
+            if (startInfo) {
+                const { dayIndex, blockIndex } = startInfo;
+                if (!blocks[dayIndex])
+                    blocks[dayIndex] = {};
+                if (!blocks[dayIndex][blockIndex])
+                    blocks[dayIndex][blockIndex] = [];
+                blocks[dayIndex][blockIndex].push(appointment);
+            }
         });
+        return blocks;
     }
     /**
-     * Generates slots for the scheduler, including CSS classes for days outside the current month
-     * and a flag for the current day.
+     * Groups appointments by the day(s) they occur on within a given date range.
+     * Returns a Map where the key is the date string ('YYYY-MM-DD') and the value is an array of appointments.
      */
-    generateSlots() {
-        const startDate = this.date.startOf('month').startOf('week');
-        const endDate = this.date.endOf('month').endOf('week');
-        const range = new AXDateTimeRange(startDate, endDate).enumurate('day');
-        this._slots = range.map((c) => ({
-            date: c,
-            cssClass: {
-                '!ax-bg-secondary-100': c.monthOfYear != this.date.monthOfYear,
+    groupAppointmentsByDay(appointments, viewStartDate, // First day visible in the grid
+    viewEndDate) {
+        const groupedAppointments = new Map();
+        if (!appointments || appointments.length === 0 || !viewStartDate || !viewEndDate) {
+            return groupedAppointments;
+        }
+        // Pre-calculate the end date for comparison (exclusive)
+        const exclusiveViewEndDate = viewEndDate.add('day', 1);
+        appointments.forEach((appointment) => {
+            if (!appointment.startDate || !appointment.endDate || !appointment.key)
+                return;
+            // Determine the effective start and end dates of the appointment clamped by the view range
+            const appointmentStart = appointment.startDate;
+            const appointmentEnd = appointment.endDate;
+            // Skip if appointment ends before the view starts or starts after the view ends
+            if (appointmentEnd.compare(viewStartDate, 'day') < 0 ||
+                appointmentStart.compare(exclusiveViewEndDate, 'day') >= 0) {
+                return;
+            }
+            // Clamp start date to the view start date
+            let currentDay = appointmentStart.compare(viewStartDate, 'day') < 0 ? viewStartDate : appointmentStart.startOf('day');
+            // Loop through each day the appointment spans within the view range
+            let safeCount = 0; // Prevent infinite loops
+            while (currentDay.compare(appointmentEnd, 'day') <= 0 &&
+                currentDay.compare(exclusiveViewEndDate, 'day') < 0 &&
+                safeCount < 100) {
+                const dateString = this.formatService.format(currentDay, 'datetime', { format: 'YYYY-MM-DD' }); // Use a consistent key format
+                if (!groupedAppointments.has(dateString)) {
+                    groupedAppointments.set(dateString, []);
+                }
+                // Add the appointment if it's not already in the list for that day
+                if (!groupedAppointments.get(dateString).some((e) => e.key === appointment.key)) {
+                    groupedAppointments.get(dateString).push(appointment);
+                }
+                currentDay = currentDay.add('day', 1);
+                safeCount++;
+            }
+            if (safeCount >= 100) {
+                console.warn('Safety break hit in groupAppointmentsByDay loop for appointment:', appointment.key);
+            }
+        });
+        return groupedAppointments;
+    }
+    getDayOfWeekNumber(dayName) {
+        switch (dayName) {
+            case 'Sunday':
+                return 1;
+            case 'Monday':
+                return 2;
+            case 'Tuesday':
+                return 3;
+            case 'Wednesday':
+                return 4;
+            case 'Thursday':
+                return 5;
+            case 'Friday':
+                return 6;
+            case 'Saturday':
+                return 7;
+            default:
+                console.warn(`Invalid day name: ${dayName}. Defaulting to Sunday (1).`);
+                return 1;
+        }
+    }
+    getSlotData(startDate, view) {
+        let endDate;
+        switch (view) {
+            case 'day':
+                endDate = startDate.add('minute', 30);
+                break;
+            case 'week':
+                endDate = startDate.add('minute', 30);
+                break;
+            case 'month':
+                startDate = startDate.startOf('day');
+                endDate = startDate.endOf('day');
+                break;
+        }
+        return { startDate, endDate, view };
+    }
+    handleEvent(event, eventOutputMap, eventType) {
+        const mouseEvent = event.event;
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
+        if (eventType === 'appointment') {
+            const appointmentOutputMap = eventOutputMap[eventType];
+            const emitter = appointmentOutputMap[mouseEvent.type];
+            if (emitter)
+                emitter.emit(event);
+        }
+        if (eventType === 'slot') {
+            const slotOutputMap = eventOutputMap[eventType];
+            const emitter = slotOutputMap[mouseEvent.type];
+            if (emitter)
+                emitter.emit(event);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root', // Provide service application-wide
+                }]
+        }] });
+
+class AXSchedulerDayViewComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.schedulerCalcService = inject(AXSchedulerService);
+        this.GAP_WIDTH_PX = 1;
+        this.draggable = input(true);
+        this.calendar = input();
+        this.endHour = input.required();
+        this.date = input.required();
+        this.startHour = input.required();
+        this.appointments = input([]);
+        this.allDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.allDay) ?? []);
+        this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
+        // Internal outputs to be caught by parent AXSchedulerComponent
+        this.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+        // --- Event Handlers ---
+        this.eventOutputMap = {
+            slot: {
+                click: this.slotClickedInternal,
+                dblclick: this.slotDblClickedInternal,
+                contextmenu: this.slotRightClickedInternal,
+            },
+            appointment: {
+                click: this.appointmentClickedInternal,
+                dblclick: this.appointmentDblClickedInternal,
+                contextmenu: this.appointmentRightClickedInternal,
+            },
+        };
+        this.hoursArray = computed(() => {
+            let time = this.date();
+            if (!time)
+                return [];
+            time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
+            const hours = [time];
+            while (time.hour < this.endHour()) {
+                time = time.add('hour', 1);
+                hours.push(time);
+            }
+            return hours;
+        });
+        this.appointmentLayouts = computed(() => {
+            const layouts = new Map();
+            const sAppointments = this.singleDayAppointments();
+            const viewDate = this.date(); // Get the start date for the view
+            const startH = this.startHour();
+            const endH = this.endHour();
+            // Add check for viewDate
+            if (sAppointments.length === 0 || !viewDate || typeof startH !== 'number' || typeof endH !== 'number') {
+                return layouts;
+            }
+            // Pass viewDate to the service method
+            const concurrencyInfo = this.schedulerCalcService.calculateDayViewConcurrencyInfo(sAppointments, viewDate, startH, endH);
+            // Sort for greedy placement
+            const sortedAppointments = orderBy(sAppointments, [(e) => e.startDate.date.getTime(), (e) => e.endDate.date.getTime()], ['asc', 'desc']);
+            // --- First Pass: Assign Columns Greedily (remains in component) ---
+            const columnEndTimes = new Map();
+            const assignedColumns = new Map(); // Store assigned col index per appointment key
+            for (const appointment of sortedAppointments) {
+                let assignedColumn = -1;
+                let colIdx = 0;
+                while (assignedColumn < 0) {
+                    const lastAppointmentEndTimeInColumn = columnEndTimes.get(colIdx);
+                    // Use service overlap check? (Optional, simple comparison is fine here)
+                    if (!lastAppointmentEndTimeInColumn ||
+                        lastAppointmentEndTimeInColumn.compare(appointment.startDate, 'minute') <= 0) {
+                        assignedColumn = colIdx;
+                    }
+                    else {
+                        colIdx++;
+                    }
+                    // Safety break
+                    if (colIdx > sAppointments.length * 2 && assignedColumn < 0) {
+                        console.warn(`DayView: Safety break assigning column 0 for appointment ${appointment.key}`);
+                        assignedColumn = 0;
+                        break;
+                    }
+                }
+                assignedColumns.set(appointment.key, assignedColumn); // Store assignment
+                // Update end time for the assigned column
+                const currentEndTimeInColumn = columnEndTimes.get(assignedColumn);
+                if (!currentEndTimeInColumn || appointment.endDate.compare(currentEndTimeInColumn, 'minute') > 0) {
+                    columnEndTimes.set(assignedColumn, appointment.endDate);
+                }
+            }
+            // --- Combine results ---
+            sAppointments.forEach((appointment) => {
+                const appointmentKey = appointment.key;
+                const assignedCol = assignedColumns.get(appointmentKey);
+                const effectiveCols = concurrencyInfo.get(appointmentKey)?.effectiveTotalColumns;
+                // Ensure we have both pieces of info
+                if (typeof assignedCol === 'number' && typeof effectiveCols === 'number') {
+                    layouts.set(appointmentKey, {
+                        columnIndex: assignedCol,
+                        effectiveTotalColumns: effectiveCols,
+                    });
+                }
+                else {
+                    console.warn(`DayView: Missing layout info for appointment ${appointmentKey}. Assigning default.`);
+                    // Provide a fallback default layout?
+                    layouts.set(appointmentKey, { columnIndex: 0, effectiveTotalColumns: 1 });
+                }
+            });
+            return layouts;
+        });
+    }
+    handleAppointmentEvent(mouseEvent, appointment) {
+        this.schedulerCalcService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    }
+    handleSingleSlotEvent(mouseEvent, startDate, minuteIndex) {
+        startDate = startDate.add('minute', minuteIndex * 30);
+        const slotData = this.schedulerCalcService.getSlotData(startDate, 'day');
+        if (slotData)
+            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+    }
+    handleAllDaySlotEvent(mouseEvent) {
+        const endDate = this.date().endOf('day');
+        const startDate = this.date().startOf('day');
+        const slotData = { startDate, endDate, view: 'week' };
+        if (slotData)
+            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+    }
+    // --- Style Calculation Functions (depend on appointmentLayouts - no change needed) ---
+    getAppointmentLayout(key) {
+        return this.appointmentLayouts().get(key);
+    }
+    getAppointmentLeft(key) {
+        const layout = this.getAppointmentLayout(key);
+        if (layout && layout.effectiveTotalColumns > 0) {
+            const N = layout.effectiveTotalColumns;
+            const C = layout.columnIndex;
+            if (C === 0 || N <= 1)
+                return '0px';
+            const leftPercent = C * (100 / N);
+            const gapOffsetPx = C * this.GAP_WIDTH_PX;
+            return `calc(${leftPercent}% + ${gapOffsetPx}px)`;
+        }
+        return '0px';
+    }
+    getAppointmentWidth(key) {
+        const layout = this.getAppointmentLayout(key);
+        if (layout && layout.effectiveTotalColumns > 0) {
+            const N = layout.effectiveTotalColumns;
+            const C = layout.columnIndex;
+            if (N <= 0)
+                return '0%';
+            if (N === 1)
+                return '100%';
+            const widthPercent = (1 / N) * 100;
+            const isLastColumn = C + 1 === N;
+            if (!isLastColumn) {
+                return `calc(${widthPercent}% - ${this.GAP_WIDTH_PX}px)`;
+            }
+            else {
+                const cumulativeGapPx = (N - 1) * this.GAP_WIDTH_PX;
+                return `calc(${widthPercent}% - ${cumulativeGapPx}px)`;
+            }
+        }
+        return '0%';
+    }
+    getAppointmentTransform(key) {
+        const appointment = this.appointments().find((e) => e.key === key);
+        const layout = this.getAppointmentLayout(key);
+        if (appointment?.singleDay && layout) {
+            const startMinutes = appointment.startDate.hour * 60 + appointment.startDate.minute;
+            const startBlockOffset = startMinutes - this.startHour() * 60;
+            const yBlock = startBlockOffset / 30;
+            const translateY = `calc(var(--ax-comp-scheduler-view-blocks-height) * ${yBlock} + 1px)`;
+            return `translateY(${translateY})`;
+        }
+        return '';
+    }
+    getAppointmentHeight(key) {
+        const appointment = this.appointments().find((e) => e.key === key);
+        if (appointment?.singleDay) {
+            const durationMillis = appointment.endDate.date.getTime() - appointment.startDate.date.getTime();
+            const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
+            const heightBlock = durationMinutes / 30;
+            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height)`;
+            return `calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_WIDTH_PX}px)`;
+        }
+        return '0px';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n  <table class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      <tr>\n        {{\n          'dateTime.duration.all-day' | translate | async\n        }}\n      </tr>\n    </tbody>\n  </table>\n  <div\n    class=\"ax-scheduler-day-header-table-container\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          [class.ax-draggable]=\"draggable()\"\n          [title]=\"allDayAppointments()[0].title\"\n          class=\"ax-scheduler-header-day-appointment\"\n          [style.color]=\"allDayAppointments()[0].textColor\"\n          [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n        </div>\n      }\n      @if (allDayAppointments().length > 1) {\n        <div\n          #moreAppointments\n          class=\"ax-scheduler-day-header-more-tag\"\n          [style.color]=\"allDayAppointments()[1].textColor\"\n          [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n        >\n          {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n        </div>\n        <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n          <div class=\"ax-overlay-pane\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                </div>\n              }\n            }\n          </div>\n        </ax-popover>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n  <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <tr>\n          {{\n            time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n          }}\n        </tr>\n      }\n    </tbody>\n  </table>\n  <div class=\"ax-scheduler-day-table-container\">\n    <div class=\"ax-scheduler-day-appointment-container\">\n      @for (appointment of singleDayAppointments(); track appointment.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-day-appointment\"\n          [style.color]=\"appointment.textColor\"\n          [style.width]=\"getAppointmentWidth(appointment.key)\"\n          [style.height]=\"getAppointmentHeight(appointment.key)\"\n          [style.background-color]=\"appointment.backgroundColor\"\n          [style.transform]=\"getAppointmentTransform(appointment.key)\"\n          [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n    </div>\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 0)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n          ></tr>\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 1)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\n          ></tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-day-header\">\n  <table class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      <tr>\n        {{\n          'dateTime.duration.all-day' | translate | async\n        }}\n      </tr>\n    </tbody>\n  </table>\n  <div\n    class=\"ax-scheduler-day-header-table-container\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          [class.ax-draggable]=\"draggable()\"\n          [title]=\"allDayAppointments()[0].title\"\n          class=\"ax-scheduler-header-day-appointment\"\n          [style.color]=\"allDayAppointments()[0].textColor\"\n          [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n        </div>\n      }\n      @if (allDayAppointments().length > 1) {\n        <div\n          #moreAppointments\n          class=\"ax-scheduler-day-header-more-tag\"\n          [style.color]=\"allDayAppointments()[1].textColor\"\n          [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n        >\n          {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n        </div>\n        <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n          <div class=\"ax-overlay-pane\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                </div>\n              }\n            }\n          </div>\n        </ax-popover>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n  <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <tr>\n          {{\n            time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n          }}\n        </tr>\n      }\n    </tbody>\n  </table>\n  <div class=\"ax-scheduler-day-table-container\">\n    <div class=\"ax-scheduler-day-appointment-container\">\n      @for (appointment of singleDayAppointments(); track appointment.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-day-appointment\"\n          [style.color]=\"appointment.textColor\"\n          [style.width]=\"getAppointmentWidth(appointment.key)\"\n          [style.height]=\"getAppointmentHeight(appointment.key)\"\n          [style.background-color]=\"appointment.backgroundColor\"\n          [style.transform]=\"getAppointmentTransform(appointment.key)\"\n          [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n    </div>\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 0)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n          ></tr>\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 1)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\n          ></tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n" }]
+        }] });
+
+class AXSchedulerMonthViewComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.formatService = inject(AXFormatService);
+        this.calendarService = inject(AXCalendarService);
+        this.schedulerCalcService = inject(AXSchedulerService);
+        // --- Inputs ---
+        this.draggable = input(true);
+        this.calendar = input();
+        this.date = input.required(); // A date within the target month
+        this.appointments = input([]);
+        this.firstDayOfWeek = input('Saturday'); // Match scheduler component default
+        // --- Constants ---
+        this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 2;
+        this.DAYS_IN_WEEK = 7;
+        // Internal outputs to be caught by parent AXSchedulerComponent
+        this.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+        // --- Event Handlers ---
+        this.eventOutputMap = {
+            slot: {
+                click: this.slotClickedInternal,
+                dblclick: this.slotDblClickedInternal,
+                contextmenu: this.slotRightClickedInternal,
             },
-            isToday: c.dayOfYear == this.date.dayOfYear,
-        }));
+            appointment: {
+                click: this.appointmentClickedInternal,
+                dblclick: this.appointmentDblClickedInternal,
+                contextmenu: this.appointmentRightClickedInternal,
+            },
+        };
+        // --- Base Computeds ---
+        // Calculate the start of the month based on the input date
+        this.monthStartDate = computed(() => {
+            const d = this.date();
+            return d ? d.startOf('month') : null;
+        });
+        // Generate the list of weekday names based on the firstDayOfWeek
+        this.daysArray = computed(() => {
+            const firstDayNum = this.schedulerCalcService.getDayOfWeekNumber(this.firstDayOfWeek());
+            const dayNames = [];
+            const currentDate = this.date();
+            const currentDayOfWeek = currentDate.dayOfWeek;
+            const desiredFirstDayName = this.firstDayOfWeek();
+            const desiredFirstDayNumber = this.schedulerCalcService.getDayOfWeekNumber(desiredFirstDayName);
+            const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
+            let date = currentDate.add('day', -daysToSubtract);
+            date = date.add('day', firstDayNum - 1);
+            for (let i = 0; i < 7; i++) {
+                dayNames.push(date);
+                date = date.add('day', 1);
+            }
+            return dayNames;
+        });
+        // --- Calendar Grid Calculation ---
+        this.calendarDaysInfo = computed(() => {
+            const monthStart = this.monthStartDate();
+            if (!monthStart)
+                return { days: [], weeksNeeded: 0 }; // Return object
+            const firstDayOfMonth = monthStart;
+            const lastDayOfMonth = monthStart.endOf('month');
+            const daysInMonth = lastDayOfMonth.dayOfMonth; // Get number of days in the month
+            const firstDayGridNum = this.schedulerCalcService.getDayOfWeekNumber(this.firstDayOfWeek());
+            const firstDisplayedDayOfWeek = firstDayOfMonth.dayOfWeek;
+            const leadingDays = (firstDisplayedDayOfWeek - firstDayGridNum + this.DAYS_IN_WEEK) % this.DAYS_IN_WEEK;
+            const firstDayOfGrid = firstDayOfMonth.add('day', -leadingDays);
+            // Calculate total cells needed (leading days + days in month)
+            const totalCells = leadingDays + daysInMonth;
+            // Calculate weeks needed (round up)
+            const weeksNeeded = Math.ceil(totalCells / this.DAYS_IN_WEEK);
+            // Ensure a minimum of 4 and maximum of 6 weeks for reasonable display, adjust if needed
+            const actualWeeksToShow = Math.max(4, Math.min(weeksNeeded, 6));
+            const totalDaysToGenerate = actualWeeksToShow * this.DAYS_IN_WEEK;
+            const days = [];
+            const today = this.calendarService.create(new Date());
+            let currentDay = firstDayOfGrid;
+            for (let i = 0; i < totalDaysToGenerate; i++) {
+                days.push({
+                    date: currentDay,
+                    isCurrentMonth: currentDay.monthOfYear === monthStart.monthOfYear,
+                    isToday: currentDay.equal(today, 'day'),
+                    appointments: [],
+                    visibleAppointments: [],
+                    hiddenAppointments: [],
+                    overflowCount: 0,
+                });
+                currentDay = currentDay.add('day', 1);
+            }
+            // Return both days array and weeks needed
+            return { days: days, weeksNeeded: actualWeeksToShow };
+        });
+        // --- Appointment Grouping ---
+        this.appointmentsGroupedByDay = computed(() => {
+            const { days } = this.calendarDaysInfo(); // Destructure to get days array
+            if (days.length === 0)
+                return new Map();
+            const viewStartDate = days[0].date;
+            const viewEndDate = days[days.length - 1].date;
+            const relevantAppointments = this.appointments();
+            return this.schedulerCalcService.groupAppointmentsByDay(relevantAppointments, viewStartDate, viewEndDate);
+        });
+        // --- Day Cell Layout Calculation ---
+        this.dayCellLayouts = computed(() => {
+            // Get initial day info (date, isCurrentMonth, isToday)
+            const { days: initialDaysInfo } = this.calendarDaysInfo();
+            // Get appointments grouped by YYYY-MM-DD string
+            const groupedAppointments = this.appointmentsGroupedByDay();
+            return initialDaysInfo.map((dayInfo) => {
+                const dateString = this.formatService.format(dayInfo.date, 'datetime', {
+                    format: 'YYYY-MM-DD',
+                    calendar: this.calendar(),
+                });
+                const appointmentsForDay = groupedAppointments.get(dateString) ?? [];
+                // Sort appointments (all-day first, then by time)
+                const sortedAppointments = orderBy(appointmentsForDay, [(e) => (e.allDay ? 0 : 1), (e) => e.startDate.date.getTime()], ['asc', 'asc']);
+                // Determine visible and hidden appointments
+                const visibleAppointments = sortedAppointments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
+                const hiddenAppointments = sortedAppointments.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY); // Get the actual hidden ones
+                const overflowCount = hiddenAppointments.length; // Count is simply the length
+                return {
+                    ...dayInfo, // Keep date, isCurrentMonth, isToday
+                    appointments: sortedAppointments, // Store all sorted appointments
+                    visibleAppointments: visibleAppointments,
+                    hiddenAppointments: hiddenAppointments, // **** STORE HIDDEN APPOINTMENTS ****
+                    overflowCount: overflowCount,
+                };
+            });
+        });
+        // --- Dynamic Grid Rows ---
+        this.gridTemplateRowsStyle = computed(() => {
+            const { weeksNeeded } = this.calendarDaysInfo();
+            if (!weeksNeeded || weeksNeeded <= 0) {
+                return `repeat(6, minmax(5rem, 1fr))`; // Default fallback
+            }
+            // Use the calculated number of weeks
+            return `repeat(${weeksNeeded}, minmax(5rem, 1fr))`;
+        });
+    }
+    handleAppointmentEvent(mouseEvent, appointment) {
+        this.schedulerCalcService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    }
+    handleSlotEvent(mouseEvent, date) {
+        const slotData = this.schedulerCalcService.getSlotData(date, 'month');
+        if (slotData) {
+            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { date: "date" }, usesInheritance: true, ngImport: i0, template: "<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-w-full ax-grid-cols-7 ax-gap-[1px] ax-border-b ax-bg-secondary-200\">\n  <ng-container *ngFor=\"let item of dayNames\">\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-bg-white ax-py-2 ax-font-medium\">\n      {{ item }}\n    </div>\n  </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-secondary-200\">\n  <div class=\"ax-grid ax-w-full ax-grid-cols-7 ax-gap-[1px]\">\n    <ng-container *ngFor=\"let item of _slots\">\n      <div\n        class=\"ax-flex ax-cursor-pointer ax-flex-col ax-justify-between ax-bg-white ax-px-3 ax-py-2 hover:ax-bg-secondary-100\"\n        [ngClass]=\"item.cssClass\"\n      >\n        <time\n          class=\"ax-flex ax-h-6 ax-w-6 ax-items-center ax-justify-center ax-rounded-full ax-text-sm\"\n          [class.ax-bg-primary-500]=\"item.isToday\"\n          [class.ax-text-white]=\"item.isToday\"\n          datetime=\"item.date.format('dd')\"\n          >{{ item.date.format('d') }}</time\n        >\n        <ol class=\"ax-mt-2 ax-hidden ax-flex-col ax-gap-1 lg:ax-flex\">\n          <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n            <a\n              href=\"#\"\n              class=\"ax-text-primary-fore ax-flex ax-justify-between ax-rounded ax-bg-primary-500 ax-px-2 ax-py-1 ax-text-sm\"\n            >\n              <p class=\"ax-text-sm\">Launch Time</p>\n              <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                {{ item.date.format('hh A') }}\n              </time>\n            </a>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n            <a\n              href=\"#\"\n              class=\"ax-text-success-fore ax-flex ax-justify-between ax-rounded ax-bg-success-500 ax-px-2 ax-py-1 ax-text-sm\"\n            >\n              <p class=\"ax-text-sm\">Daily meeting</p>\n              <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                {{ item.date.format('hh A') }}\n              </time>\n            </a>\n          </li>\n        </ol>\n        <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n          <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n          </li>\n        </ol>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n  <ol class=\"ax-flex ax-cursor-pointer ax-flex-col ax-divide-y ax-overflow-hidden ax-rounded-lg ax-border\">\n    <li class=\"mobile-task ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-secondary-100\">\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-clock ax-text-secondary-400\"></ax-icon>\n          <p class=\"ax-text-sm\">3 PM</p>\n        </div>\n      </div>\n      <ax-button text=\"Edit\" class=\"! ax-border ax-opacity-0 ax-sm\"></ax-button>\n    </li>\n  </ol>\n</div>\n", dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\n    <!-- Use daysArray for header, assuming it provides correct names/order -->\n    @for (day of daysArray(); track day.date.getTime()) {\n      <div class=\"ax-scheduler-month-weekday\">\n        {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <!-- Calendar Grid - Add dynamic style -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    <!-- Iterate over the final layout data -->\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        [class.ax-today]=\"dayCell.isToday\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Chips -->\n          @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n            <div\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [style.background-color]=\"appointment.backgroundColor\"\n            >\n              <!-- Optionally show time for non-all-day appointments -->\n              <!-- @if (!appointment.allDay) {\n                <span class=\"ax-appointment-chip-time\">\n                  {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              } -->\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n            </div>\n          }\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane ax-scheduler-month-popover-appointment\">\n                @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n                  <div\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [style.color]=\"appointment.textColor\"\n                    [style.background-color]=\"appointment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgFor, NgClass, NgIf, AXDecoratorIconComponent, AXButtonComponent], template: "<!-- <div class=\"ax-flex ax-flex-col ax-flex-auto ax-shadow-md\"> -->\n<div class=\"ax-grid ax-w-full ax-grid-cols-7 ax-gap-[1px] ax-border-b ax-bg-secondary-200\">\n  <ng-container *ngFor=\"let item of dayNames\">\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-bg-white ax-py-2 ax-font-medium\">\n      {{ item }}\n    </div>\n  </ng-container>\n</div>\n<div class=\"ax-flex ax-flex-auto ax-bg-secondary-200\">\n  <div class=\"ax-grid ax-w-full ax-grid-cols-7 ax-gap-[1px]\">\n    <ng-container *ngFor=\"let item of _slots\">\n      <div\n        class=\"ax-flex ax-cursor-pointer ax-flex-col ax-justify-between ax-bg-white ax-px-3 ax-py-2 hover:ax-bg-secondary-100\"\n        [ngClass]=\"item.cssClass\"\n      >\n        <time\n          class=\"ax-flex ax-h-6 ax-w-6 ax-items-center ax-justify-center ax-rounded-full ax-text-sm\"\n          [class.ax-bg-primary-500]=\"item.isToday\"\n          [class.ax-text-white]=\"item.isToday\"\n          datetime=\"item.date.format('dd')\"\n          >{{ item.date.format('d') }}</time\n        >\n        <ol class=\"ax-mt-2 ax-hidden ax-flex-col ax-gap-1 lg:ax-flex\">\n          <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n            <a\n              href=\"#\"\n              class=\"ax-text-primary-fore ax-flex ax-justify-between ax-rounded ax-bg-primary-500 ax-px-2 ax-py-1 ax-text-sm\"\n            >\n              <p class=\"ax-text-sm\">Launch Time</p>\n              <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                {{ item.date.format('hh A') }}\n              </time>\n            </a>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n            <a\n              href=\"#\"\n              class=\"ax-text-success-fore ax-flex ax-justify-between ax-rounded ax-bg-success-500 ax-px-2 ax-py-1 ax-text-sm\"\n            >\n              <p class=\"ax-text-sm\">Daily meeting</p>\n              <time class=\"ax-ms-3\" datetime=\"item.date.format('HH A')\">\n                {{ item.date.format('hh A') }}\n              </time>\n            </a>\n          </li>\n        </ol>\n        <ol class=\"ax-flex ax-gap-1 ax-self-center md:ax-hidden\">\n          <li *ngIf=\"item.date.dayOfMonth % 5 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-primary-500 lg:ax-hidden\"></span>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 6 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-danger-500 lg:ax-hidden\"></span>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 8 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-warning-500 lg:ax-hidden\"></span>\n          </li>\n          <li *ngIf=\"item.date.dayOfMonth % 3 === 0\">\n            <span class=\"ax-flex ax-h-1.5 ax-w-1.5 ax-rounded-full ax-bg-success-500 lg:ax-hidden\"></span>\n          </li>\n        </ol>\n      </div>\n    </ng-container>\n  </div>\n</div>\n<!-- </div> -->\n<div class=\"ax-p-4 lg:ax-hidden\">\n  <ol class=\"ax-flex ax-cursor-pointer ax-flex-col ax-divide-y ax-overflow-hidden ax-rounded-lg ax-border\">\n    <li class=\"mobile-task ax-flex ax-items-start ax-justify-between ax-p-4 hover:ax-bg-secondary-100\">\n      <div class=\"ax-flex ax-flex-col ax-gap-2\">\n        <p class=\"ax-font-medium\">Daily Meeting at the Office</p>\n        <div class=\"ax-flex ax-items-center ax-gap-2\">\n          <ax-icon class=\"fa-solid fa-clock ax-text-secondary-400\"></ax-icon>\n          <p class=\"ax-text-sm\">3 PM</p>\n        </div>\n      </div>\n      <ax-button text=\"Edit\" class=\"! ax-border ax-opacity-0 ax-sm\"></ax-button>\n    </li>\n  </ol>\n</div>\n" }]
-        }], propDecorators: { date: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe, AsyncPipe], template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\n    <!-- Use daysArray for header, assuming it provides correct names/order -->\n    @for (day of daysArray(); track day.date.getTime()) {\n      <div class=\"ax-scheduler-month-weekday\">\n        {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <!-- Calendar Grid - Add dynamic style -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    <!-- Iterate over the final layout data -->\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        [class.ax-today]=\"dayCell.isToday\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Chips -->\n          @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n            <div\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [style.background-color]=\"appointment.backgroundColor\"\n            >\n              <!-- Optionally show time for non-all-day appointments -->\n              <!-- @if (!appointment.allDay) {\n                <span class=\"ax-appointment-chip-time\">\n                  {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              } -->\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n            </div>\n          }\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane ax-scheduler-month-popover-appointment\">\n                @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n                  <div\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [style.color]=\"appointment.textColor\"\n                    [style.background-color]=\"appointment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
+        }] });
 
-/**
- * @category
- * This component renders the weekly view for the scheduler.
- */
 class AXSchedulerWeekViewComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.schedulerCalcService = inject(AXSchedulerService);
+        this.GAP_WIDTH_PX = 1;
+        this.draggable = input(true);
+        this.calendar = input();
+        this.endHour = input.required();
+        this.date = input.required();
+        this.startHour = input.required();
+        this.appointments = input([]);
+        // Internal outputs to be caught by parent AXSchedulerComponent
+        this.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+        // --- Event Handlers ---
+        this.eventOutputMap = {
+            slot: {
+                click: this.slotClickedInternal,
+                dblclick: this.slotDblClickedInternal,
+                contextmenu: this.slotRightClickedInternal,
+            },
+            appointment: {
+                click: this.appointmentClickedInternal,
+                dblclick: this.appointmentDblClickedInternal,
+                contextmenu: this.appointmentRightClickedInternal,
+            },
+        };
+        this.allDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.allDay) ?? []);
+        this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
+        this.hoursArray = computed(() => {
+            let time = this.date();
+            if (!time)
+                return [];
+            time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
+            const hours = [time];
+            while (time.hour < this.endHour()) {
+                time = time.add('hour', 1);
+                hours.push(time);
+            }
+            return hours;
+        });
+        this.daysArray = computed(() => {
+            const time = this.date();
+            if (!time)
+                return [];
+            const days = [time];
+            for (let index = 1; index <= 6; index++) {
+                days.push(time.add('day', index));
+            }
+            return days;
+        });
+        this.totalBlocksPerViewDay = computed(() => {
+            const startH = this.startHour();
+            const endH = this.endHour();
+            if (typeof startH !== 'number' || typeof endH !== 'number')
+                return 0;
+            return Math.max(0, (endH - startH) * (60 / 30));
+        });
+        this.appointmentsByStartBlock = computed(() => {
+            const viewDate = this.date();
+            const startH = this.startHour();
+            const endH = this.endHour();
+            if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
+                return {};
+            return this.schedulerCalcService.calculateWeekViewAppointmentsByStartBlock(this.singleDayAppointments(), viewDate, startH, endH);
+        });
+        this.activeAppointmentsInBlock = computed(() => {
+            const viewDate = this.date();
+            const startH = this.startHour();
+            const endH = this.endHour();
+            if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
+                return {};
+            return this.schedulerCalcService.calculateActiveAppointmentsInBlock(this.singleDayAppointments(), viewDate, startH, endH, 7);
+        });
+        this.visibleAppointmentsLayout = computed(() => {
+            const layouts = [];
+            const startingBlocks = this.appointmentsByStartBlock();
+            const daysCount = 7;
+            const totalBlocksPerDay = this.totalBlocksPerViewDay();
+            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height, 30px)`;
+            const N = daysCount;
+            const occupiedBlocks = {};
+            for (let dayIndex = 0; dayIndex < daysCount; dayIndex++) {
+                const dayBlocks = startingBlocks[dayIndex] ?? {};
+                for (let blockIndex = 0; blockIndex < totalBlocksPerDay; blockIndex++) {
+                    if (occupiedBlocks[dayIndex]?.[blockIndex])
+                        continue;
+                    const startingAppointments = dayBlocks[blockIndex] ?? [];
+                    if (startingAppointments.length > 0) {
+                        const appointmentToShow = orderBy(startingAppointments, [(e) => e.endDate.date.getTime()], ['desc'])[0];
+                        const C = dayIndex;
+                        let layoutLeft = '0px';
+                        if (C > 0 && N > 1)
+                            layoutLeft = `calc(${C * (100 / N)}%)`;
+                        const layoutTop = `calc(${blockHeightExpr} * ${blockIndex})`;
+                        let layoutHeight = '0px';
+                        let appointmentDurationMinutes = 0;
+                        if (appointmentToShow.endDate && appointmentToShow.startDate) {
+                            appointmentDurationMinutes = this.schedulerCalcService.calculateDurationInMinutes(appointmentToShow);
+                            if (appointmentDurationMinutes > 0) {
+                                const heightBlock = appointmentDurationMinutes / 30;
+                                layoutHeight = `max(0px, calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_WIDTH_PX}px))`;
+                            }
+                        }
+                        layouts.push({ ...appointmentToShow, layoutTop, layoutLeft, layoutHeight });
+                        const blocksToOccupy = Math.ceil(appointmentDurationMinutes / 30);
+                        for (let i = 0; i < blocksToOccupy; i++) {
+                            const occupiedBlockIndex = blockIndex + i;
+                            if (occupiedBlockIndex < totalBlocksPerDay) {
+                                if (!occupiedBlocks[dayIndex])
+                                    occupiedBlocks[dayIndex] = {};
+                                if (!occupiedBlocks[dayIndex][occupiedBlockIndex]) {
+                                    occupiedBlocks[dayIndex][occupiedBlockIndex] = appointmentToShow.key;
+                                }
+                            }
+                            else {
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+            return layouts;
+        });
+        this.visualOccupancyMap = computed(() => {
+            const map = new Map();
+            const visibleLayouts = this.visibleAppointmentsLayout();
+            const viewStartDate = this.date();
+            const startH = this.startHour();
+            const endH = this.endHour();
+            const totalBlocksPerDay = this.totalBlocksPerViewDay();
+            if (!viewStartDate || typeof startH !== 'number' || typeof endH !== 'number')
+                return map;
+            for (const appointmentLayout of visibleLayouts) {
+                const startInfo = this.schedulerCalcService.getBlockIdentifier(appointmentLayout.startDate, viewStartDate, startH, endH, 7);
+                if (!startInfo)
+                    continue;
+                const durationMinutes = this.schedulerCalcService.calculateDurationInMinutes(appointmentLayout);
+                const blocksToOccupy = Math.ceil(durationMinutes / 30);
+                for (let i = 0; i < blocksToOccupy; i++) {
+                    const occupiedBlockIndex = startInfo.blockIndex + i;
+                    if (occupiedBlockIndex >= 0 && occupiedBlockIndex < totalBlocksPerDay) {
+                        const mapKey = `${startInfo.dayIndex}-${occupiedBlockIndex}`;
+                        if (!map.has(mapKey)) {
+                            map.set(mapKey, appointmentLayout.key);
+                        }
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+            return map;
+        });
+        this.overflowBadges = computed(() => {
+            const badges = [];
+            const activeBlocks = this.activeAppointmentsInBlock();
+            const occupancyMap = this.visualOccupancyMap();
+            const daysCount = 7;
+            const totalBlocksPerDay = this.totalBlocksPerViewDay();
+            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height, 30px)`;
+            const N = daysCount;
+            if (!activeBlocks || !occupancyMap || totalBlocksPerDay === 0)
+                return badges;
+            const countedHiddenAppointmentKeysToday = new Map();
+            for (let dayIndex = 0; dayIndex < daysCount; dayIndex++) {
+                countedHiddenAppointmentKeysToday.set(dayIndex, new Set());
+                for (let blockIndex = 0; blockIndex < totalBlocksPerDay; blockIndex++) {
+                    const blockMapKey = `${dayIndex}-${blockIndex}`;
+                    const activeAppointments = activeBlocks[dayIndex]?.[blockIndex] ?? [];
+                    if (activeAppointments.length === 0)
+                        continue;
+                    const visibleAppointmentKey = occupancyMap.get(blockMapKey);
+                    const hiddenAppointments = activeAppointments.filter((appointment) => appointment.key !== visibleAppointmentKey);
+                    const newlyHidden = hiddenAppointments.filter((e) => !countedHiddenAppointmentKeysToday.get(dayIndex).has(e.key));
+                    if (newlyHidden.length > 0) {
+                        const C = dayIndex;
+                        let baseColLeft = '0px';
+                        if (C > 0 && N > 1)
+                            baseColLeft = `calc(${C * (100 / N)}%)`;
+                        const baseTop = `calc(${blockHeightExpr} * ${blockIndex})`;
+                        const badgeLeft = `calc(${baseColLeft} + calc(100% / ${N} - 1.75rem))`;
+                        const badgeTop = `calc(${baseTop} + 0.75rem)`;
+                        badges.push({ key: blockMapKey, count: newlyHidden.length, badgeTop, badgeLeft });
+                        newlyHidden.forEach((e) => countedHiddenAppointmentKeysToday.get(dayIndex).add(e.key));
+                    }
+                }
+            }
+            return badges;
+        });
+        this.allDayAppointmentsPerDay = computed(() => {
+            const days = this.daysArray();
+            const allDayAppointments = this.allDayAppointments(); // Use renamed type if needed
+            const result = [];
+            if (days.length !== 7)
+                return result; // Should always be 7 for week view
+            days.forEach((day) => {
+                const dayStart = day.startOf('day');
+                const dayEnd = day.endOf('day');
+                const appointmentsForThisDay = []; // Use renamed type
+                allDayAppointments.forEach((appointment) => {
+                    // Check if the appointment overlaps with the current day
+                    if (appointment.startDate.compare(dayEnd) <= 0 && appointment.endDate.compare(dayStart) >= 0) {
+                        appointmentsForThisDay.push(appointment);
+                    }
+                });
+                // Sort appointments for this day
+                appointmentsForThisDay.sort((a, b) => a.startDate.date.getTime() - b.startDate.date.getTime());
+                result.push({
+                    day: day, // Include the AXDateTime object for the day
+                    appointments: appointmentsForThisDay,
+                });
+            });
+            return result;
+        });
+        this.overflowBadgesWithData = computed(() => {
+            const badgesInfo = [];
+            const activeBlocks = this.activeAppointmentsInBlock();
+            const occupancyMap = this.visualOccupancyMap();
+            const daysCount = 7;
+            const totalBlocksPerDay = this.totalBlocksPerViewDay();
+            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height, 30px)`;
+            const N = daysCount;
+            if (!activeBlocks || !occupancyMap || totalBlocksPerDay === 0)
+                return badgesInfo;
+            const countedHiddenAppointmentKeysToday = new Map();
+            for (let dayIndex = 0; dayIndex < daysCount; dayIndex++) {
+                countedHiddenAppointmentKeysToday.set(dayIndex, new Set());
+                for (let blockIndex = 0; blockIndex < totalBlocksPerDay; blockIndex++) {
+                    const blockMapKey = `${dayIndex}-${blockIndex}`;
+                    const activeAppointments = activeBlocks[dayIndex]?.[blockIndex] ?? [];
+                    if (activeAppointments.length === 0)
+                        continue;
+                    const visibleAppointmentKey = occupancyMap.get(blockMapKey);
+                    // Find all hidden appointments for this specific block
+                    const hiddenAppointments = activeAppointments.filter((appointment) => appointment.key !== visibleAppointmentKey);
+                    // Find which of those hidden ones haven't been counted today yet
+                    const newlyHidden = hiddenAppointments.filter((e) => !countedHiddenAppointmentKeysToday.get(dayIndex).has(e.key));
+                    if (newlyHidden.length > 0) {
+                        const C = dayIndex;
+                        let baseColLeft = '0px';
+                        if (C > 0 && N > 1)
+                            baseColLeft = `calc(${C * (100 / N)}%)`;
+                        const baseTop = `calc(${blockHeightExpr} * ${blockIndex})`;
+                        // Keep your positioning logic for the badge itself
+                        const badgeLeft = `calc(${baseColLeft} + calc(100% / ${N} - 1.75rem))`;
+                        const badgeTop = `calc(${baseTop} + 0.75rem)`;
+                        // Store the badge info *and* the list of appointments it represents
+                        badgesInfo.push({
+                            key: blockMapKey,
+                            count: newlyHidden.length,
+                            badgeTop,
+                            badgeLeft,
+                            hiddenAppointments: newlyHidden, // Store the actual hidden appointments
+                        });
+                        // Mark these as counted for today
+                        newlyHidden.forEach((e) => countedHiddenAppointmentKeysToday.get(dayIndex).add(e.key));
+                    }
+                }
+            }
+            // Sort the badges by top then left for consistent rendering order? (Optional)
+            // badgesInfo.sort((a, b) => {
+            //   const topCompare = a.badgeTop.localeCompare(b.badgeTop);
+            //   if (topCompare !== 0) return topCompare;
+            //   return a.badgeLeft.localeCompare(b.badgeLeft);
+            // });
+            return badgesInfo;
+        });
+    }
+    handleAppointmentEvent(mouseEvent, appointment) {
+        this.schedulerCalcService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    }
+    handleSingleSlotEvent(mouseEvent, hour, day, minuteIndex) {
+        const startDate = day.set('hour', hour.hour).set('minute', minuteIndex * 30);
+        const slotData = this.schedulerCalcService.getSlotData(startDate, 'week');
+        if (slotData)
+            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+    }
+    handleAllDaySlotEvent(mouseEvent, day) {
+        const startDate = day.startOf('day');
+        const endDate = day.endOf('day');
+        const slotData = { startDate, endDate, view: 'week' };
+        if (slotData)
+            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\"></div>\n    <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n      @for (day of daysArray(); track day.date.getTime()) {\n        <div>{{ day | format: 'date' : { format: 'ddd DD', calendar: calendar() } | async }}</div>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\">{{ 'dateTime.duration.all-day' | translate | async }}</div>\n    <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n      @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n        <div\n          class=\"ax-scheduler-all-day-slot\"\n          (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n        >\n          @if (slotData.appointments.length > 0) {\n            <div\n              (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              [title]=\"slotData.appointments[0].title\"\n              class=\"ax-scheduler-header-week-appointment\"\n              [style.color]=\"slotData.appointments[0].textColor\"\n              [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n            </div>\n          }\n          @if (slotData.appointments.length > 1) {\n            <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\n                      [class.ax-draggable]=\"draggable()\"\n                      class=\"ax-scheduler-popover-appointment\"\n                      [style.color]=\"appointment.textColor\"\n                      [style.background-color]=\"appointment.backgroundColor\"\n                    >\n                      <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                    </div>\n                  }\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n  <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-scheduler-week-table-container\">\n    <div class=\"ax-scheduler-week-appointment-container\">\n      @for (appointmentLayout of visibleAppointmentsLayout(); track appointmentLayout.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          [title]=\"appointmentLayout.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.top]=\"appointmentLayout.layoutTop\"\n          [style.left]=\"appointmentLayout.layoutLeft\"\n          [style.color]=\"appointmentLayout.textColor\"\n          [style.height]=\"appointmentLayout.layoutHeight\"\n          [style.background-color]=\"appointmentLayout.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointmentLayout.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointmentLayout.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointmentLayout.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n\n      <!-- Overflow Badges with Popovers -->\n      @for (badge of overflowBadgesWithData(); track badge.key) {\n        <!-- Wrap badge and popover for targeting -->\n        <div\n          class=\"ax-scheduler-badge-wrapper\"\n          style=\"position: absolute\"\n          [style.top]=\"badge.badgeTop\"\n          [style.left]=\"badge.badgeLeft\"\n        >\n          <!-- The Badge itself -->\n          <div #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n          <!-- The Popover -->\n          <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n            <div class=\"ax-overlay-pane\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                  <ax-subtitle>\n                    {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n                    {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  </ax-subtitle>\n                </div>\n              }\n            </div>\n          </ax-popover>\n        </div>\n      }\n    </div>\n\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"ax-flex ax-flex-col ax-flex-auto ax-isolate ax-overflow-auto ax-bg-white\">\n    <div class=\"ax-flex ax-flex-col ax-max-w-full\">\n        <div class=\"ax-shadow-md ax-pr-8 ax-z-30 ax-sticky ax-top-0\">\n            <div class=\"ax-grid ax-leading-6 ax-border-r ax-grid-cols-7\">\n                <div class=\"ax-w-14 ax-col-end-1\"></div>\n                <div\n                    class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-l ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium ax-border-r\">\n                    Mon 10\n                </div>\n                <div class=\"ax-flex ax-items-center ax-justify-center ax-py-3 ax-bg-white ax-font-medium\">\n                    Mon 10\n                </div>\n            </div>\n        </div>\n        <div class=\"ax-flex ax-flex-auto\">\n            <div class=\"ax-w-14 ax-z-10 ax-sticky ax-left-0 ax-bg-white ax-shadow\"></div>\n            <div class=\"ax-grid ax-flex-auto ax-grid-cols-1 ax-grid-rows-1\">\n                <div class=\"ax-grid ax-col-start-1 ax-col-end-2 ax-row-start-1\"\n                    style=\"grid-template-rows: repeat(45, minmax(3.5rem, 1fr))\">\n                    <div class=\"ax-row-end-1 ax-h-7\"></div>\n                    <div class=\"ax-border-t ax-border-b\">\n                        <div class=\"ax-leading-5 ax-text-right ax-w-14 -ax-mt-[0.625rem] -ax-ml-14 ax-sticky ax-left-0\">\n                        </div>\n                    </div>\n                </div>\n                <div class=\"ax-grid ax-grid-rows-1 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-1\">\n                    <div class=\"ax-col-start-1 ax-row-start-1 ax-row-end-[-1]\"></div>\n                    <div class=\"ax-col-start-2 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-3 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-4 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-5 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-6 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-7 ax-row-start-1 ax-row-end-[-1] ax-border-l\"></div>\n                    <div class=\"ax-col-start-8 ax-row-start-1 ax-row-end-[-1] ax-border-l ax-w-8\"></div>\n                </div>\n                <ol class=\"ax-grid ax-pr-8 ax-grid-cols-7 ax-row-start-1 ax-col-end-2 ax-col-start-2\"\n                    style=\"grid-template-rows: 1.75rem repeat(288, minmax(0px, 1fr)) auto\"></ol>\n            </div>\n        </div>\n    </div>\n</div>" }]
+            args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-week-header\">\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\"></div>\n    <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n      @for (day of daysArray(); track day.date.getTime()) {\n        <div>{{ day | format: 'date' : { format: 'ddd DD', calendar: calendar() } | async }}</div>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\">{{ 'dateTime.duration.all-day' | translate | async }}</div>\n    <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n      @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n        <div\n          class=\"ax-scheduler-all-day-slot\"\n          (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n        >\n          @if (slotData.appointments.length > 0) {\n            <div\n              (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              [title]=\"slotData.appointments[0].title\"\n              class=\"ax-scheduler-header-week-appointment\"\n              [style.color]=\"slotData.appointments[0].textColor\"\n              [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n            </div>\n          }\n          @if (slotData.appointments.length > 1) {\n            <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\n                      [class.ax-draggable]=\"draggable()\"\n                      class=\"ax-scheduler-popover-appointment\"\n                      [style.color]=\"appointment.textColor\"\n                      [style.background-color]=\"appointment.backgroundColor\"\n                    >\n                      <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                    </div>\n                  }\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n  <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-scheduler-week-table-container\">\n    <div class=\"ax-scheduler-week-appointment-container\">\n      @for (appointmentLayout of visibleAppointmentsLayout(); track appointmentLayout.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          [title]=\"appointmentLayout.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.top]=\"appointmentLayout.layoutTop\"\n          [style.left]=\"appointmentLayout.layoutLeft\"\n          [style.color]=\"appointmentLayout.textColor\"\n          [style.height]=\"appointmentLayout.layoutHeight\"\n          [style.background-color]=\"appointmentLayout.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointmentLayout.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointmentLayout.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointmentLayout.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n\n      <!-- Overflow Badges with Popovers -->\n      @for (badge of overflowBadgesWithData(); track badge.key) {\n        <!-- Wrap badge and popover for targeting -->\n        <div\n          class=\"ax-scheduler-badge-wrapper\"\n          style=\"position: absolute\"\n          [style.top]=\"badge.badgeTop\"\n          [style.left]=\"badge.badgeLeft\"\n        >\n          <!-- The Badge itself -->\n          <div #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n          <!-- The Popover -->\n          <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n            <div class=\"ax-overlay-pane\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                  <ax-subtitle>\n                    {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n                    {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  </ax-subtitle>\n                </div>\n              }\n            </div>\n          </ax-popover>\n        </div>\n      }\n    </div>\n\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n" }]
+        }] });
+
+const COMPONENT = [
+    AXSchedulerComponent,
+    AXSchedulerDayViewComponent,
+    AXSchedulerWeekViewComponent,
+    AXSchedulerMonthViewComponent,
+];
+class AXSchedulerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, imports: [AXSchedulerComponent,
+            AXSchedulerDayViewComponent,
+            AXSchedulerWeekViewComponent,
+            AXSchedulerMonthViewComponent], exports: [AXSchedulerComponent,
+            AXSchedulerDayViewComponent,
+            AXSchedulerWeekViewComponent,
+            AXSchedulerMonthViewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, imports: [COMPONENT] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENT],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
-/**
- * @category
- * This component provides the main scheduler functionality, integrating various views and handling scheduling operations.
- */
 class AXSchedulerComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        /** @ignore */
-        this._calendarService = inject(AXCalendarService);
-        /** @ignore */
-        this._platform = inject(AXPlatform);
-        /** @ignore */
-        this.current = this._calendarService.now();
-    }
-    handleOnItemClick() { }
-    /** @ignore */
+        this.platform = inject(AXPlatform);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.formatService = inject(AXFormatService);
+        this.localeService = inject(AXLocaleService);
+        this.calendarService = inject(AXCalendarService);
+        this.schedulerService = inject(AXSchedulerService);
+        this.translationService = inject(AXTranslationService);
+        this.viewModeSelectbox = viewChild(AXSelectBoxComponent);
+        this.displayViews = {
+            day: 'daily',
+            week: 'weekly',
+            month: 'monthly',
+            year: 'yearly',
+        };
+        this.calendar = input();
+        this.calendarType = linkedSignal(() => this.calendar() ?? this.localeService.activeProfile().calendar.system);
+        this.startingDate = input();
+        this.currentDate = linkedSignal(() => this.calendarService
+            .create(this.startingDate(), this.calendarType())
+            .set('hour', 0)
+            .set('minute', 0)
+            .set('second', 0));
+        this.draggable = signal(false); // TODO
+        this.rtl = signal(false);
+        this.isLoading = signal(false);
+        this.isFullScreen = signal(false);
+        this.size = signal(null);
+        this.viewsDataSource = signal([]);
+        this.oldDate = signal(this.calendarService.create(new Date(), this.calendarType()));
+        this.endHour = input(23);
+        this.startHour = input(8);
+        this.keyField = input('id');
+        this.titleField = input('title');
+        this.allDayField = input('allDay');
+        this.allowFullScreen = input(true);
+        this.endDateField = input('endDate');
+        this.readonlyField = input('readonly');
+        this.startDateField = input('startDate');
+        this.textColorField = input('textColor');
+        this.descriptionField = input('description');
+        this.backgroundColorField = input('backgroundColor');
+        this.dataSource = input();
+        this.firstDayOfWeek = input('Sunday');
+        this.views = input(['day', 'week', 'month']);
+        this.selectedView = model(this.views()[0]);
+        // --- Public Outputs ---
+        this.onSlotClicked = output();
+        this.onSlotDblClicked = output();
+        this.onSlotRightClick = output();
+        this.onAppointmentClicked = output();
+        this.onAppointmentDblClicked = output();
+        this.onAppointmentRightClick = output();
+        this.appointmentsList = computed(() => {
+            const v = this.dataSource();
+            let ds;
+            if (Array.isArray(v)) {
+                ds = convertArrayToDataSource(v, { key: this.keyField(), pageSize: 9999 });
+            }
+            else {
+                ds = v;
+            }
+            ds.refresh();
+            return ds;
+        });
+        this.dataSourceItemsSignal = toSignal(new Observable((subscriber) => {
+            const watcher = effect(() => {
+                const dsInstance = this.appointmentsList();
+                subscriber.next(dsInstance);
+            });
+            return () => {
+                watcher.destroy();
+            };
+        }).pipe(distinctUntilChanged(), switchMap((dsInstance) => {
+            if (!dsInstance)
+                return of([]);
+            return dsInstance.onChanged.pipe(map((event) => event.items ?? []), startWith(dsInstance.items ?? []));
+        })), { initialValue: [] });
+        this.#updatedDataSource = effect(() => {
+            const ds = this.appointmentsList();
+            untracked(() => {
+                if (ds)
+                    ds.refresh();
+            });
+        });
+        this.currentDateText = computed(() => {
+            switch (this.selectedView()) {
+                case 'day':
+                    return this.formatService.format(this.currentDate(), 'datetime', {
+                        format: 'DD MMMM yyyy',
+                        calendar: this.calendarType(),
+                    });
+                case 'week': {
+                    const startOfWeek = this.formatService.format(this.currentDate(), 'datetime', {
+                        format: 'DD MMMM yyyy',
+                        calendar: this.calendarType(),
+                    });
+                    const endOfWeek = this.formatService.format(this.currentDate().add('week', 1).add('day', -1), 'datetime', {
+                        format: 'DD MMMM yyyy',
+                        calendar: this.calendarType(),
+                    });
+                    return `${startOfWeek} - ${endOfWeek}`;
+                }
+                case 'month':
+                    return this.formatService.format(this.currentDate(), 'datetime', {
+                        format: 'MMMM yyyy',
+                        calendar: this.calendarType(),
+                    });
+            }
+            return '';
+        });
+        this.calendarDepth = computed(() => {
+            if (this.selectedView() === 'week')
+                return 'day';
+            return this.selectedView();
+        });
+        this.mappedAppointments = computed(() => {
+            const items = this.dataSourceItemsSignal();
+            const keyField = this.keyField();
+            const titleField = this.titleField();
+            const allDayField = this.allDayField();
+            const readonlyField = this.readonlyField();
+            const textColorField = this.textColorField();
+            const descriptionField = this.descriptionField();
+            const backgroundColorField = this.backgroundColorField();
+            const startDateField = this.startDateField();
+            const endDateField = this.endDateField();
+            return items
+                .map((item) => {
+                const startDate = this.calendarService.create(item[startDateField], this.calendarType());
+                const endDate = this.calendarService.create(item[endDateField], this.calendarType());
+                // Basic validation
+                if (!startDate?.date || !endDate?.date) {
+                    console.warn('Scheduler: Skipping item due to invalid date fields:', item);
+                    return null;
+                }
+                // Check if dates are valid after creation
+                if (isNaN(startDate.date.getTime()) || isNaN(endDate.date.getTime())) {
+                    console.warn('Scheduler: Skipping item due to invalid parsed date (NaN):', item);
+                    return null;
+                }
+                // Calculate singleDay based on *calendar day*, not just time
+                const isSingleDay = startDate.equal(endDate, 'day');
+                const appointment = {
+                    key: item[keyField],
+                    title: item[titleField],
+                    startDate,
+                    endDate,
+                    allDay: !!item[allDayField], // Ensure boolean
+                    singleDay: isSingleDay, // Use calculated singleDay
+                    readonly: !!item[readonlyField],
+                    textColor: item[textColorField],
+                    description: item[descriptionField],
+                    backgroundColor: item[backgroundColorField],
+                };
+                return appointment;
+            })
+                .filter((appt) => appt !== null); // Filter out nulls from invalid dates
+        });
+        this.viewAppointments = computed(() => {
+            const mapped = this.mappedAppointments();
+            const view = this.selectedView();
+            const current = this.currentDate();
+            if (!current || mapped.length === 0)
+                return [];
+            switch (view) {
+                case 'day': {
+                    const dayStart = current.startOf('day');
+                    const dayEnd = current.endOf('day');
+                    return mapped.filter((appt) => appt.endDate.compare(dayStart, 'day') >= 0 && appt.startDate.compare(dayEnd, 'day') <= 0);
+                }
+                case 'week': {
+                    const weekStart = current;
+                    const weekEnd = weekStart.add('day', 7);
+                    return mapped.filter((appt) => appt.startDate.compare(weekEnd, 'day') < 0 && appt.endDate.compare(weekStart, 'day') >= 0);
+                }
+                case 'month': {
+                    const { gridStartDate, gridEndDate } = this.getGridDateRange(current);
+                    const exclusiveGridEndDate = gridEndDate.add('day', 1);
+                    return mapped.filter((appt) => appt.startDate.compare(exclusiveGridEndDate, 'day') < 0 && appt.endDate.compare(gridStartDate, 'day') >= 0);
+                }
+                default:
+                    return [];
+            }
+        });
+    }
+    // --- Internal Handlers for View Outputs ---
+    handleSlotClickInternal(eventData) {
+        this.onSlotClicked.emit(eventData);
+    }
+    handleSlotDblClickInternal(eventData) {
+        this.onSlotDblClicked.emit(eventData);
+    }
+    handleSlotRightClickInternal(eventData) {
+        this.onSlotRightClick.emit(eventData);
+    }
+    handleAppointmentClickInternal(eventData) {
+        this.onAppointmentClicked.emit(eventData);
+    }
+    handleAppointmentDblClickInternal(eventData) {
+        this.onAppointmentDblClicked.emit(eventData);
+    }
+    handleAppointmentRightClickInternal(eventData) {
+        this.onAppointmentRightClick.emit(eventData);
+    }
     ngOnInit() {
         super.ngOnInit();
         this.detectSize();
-        this._platform.resize.subscribe(() => {
+        this.platform.resize.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
             this.detectSize();
             super.cdr.markForCheck();
         });
+        this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
+            this.currentDate.set(this.calendarService.create(this.currentDate().date, this.calendarType()));
+            this.appointmentsList().refresh();
+        });
+        this.translationService.langChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
+            await this.fillDataSource();
+            this.viewModeSelectbox().selectItems(this.viewsDataSource().find((c) => c.id == this.selectedView()));
+            this.currentDate.set(this.calendarService.create(this.currentDate().date, this.calendarType()));
+        });
+        this.rtl.set(AXHtmlUtil.isRtl(this.getHostElement()));
+        this.fillDataSource();
+    }
+    async fillDataSource() {
+        const result = [];
+        for await (const c of this.views()) {
+            const text = await this.translationService.translateAsync(`dateTime.duration.${this.displayViews[c]}`);
+            result.push({ text, id: c });
+        }
+        this.viewsDataSource.set(result);
     }
-    /** @ignore */
     detectSize() {
-        this._size = this._platform.screenSize;
+        this.size.set(this.platform.screenSize);
+    }
+    getGridDateRange(dateInMonth) {
+        const firstDayOfMonth = dateInMonth.startOf('month');
+        const firstDayGridNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
+        const firstDisplayedDayOfWeek = firstDayOfMonth.dayOfWeek;
+        const daysFromPrevMonth = (firstDisplayedDayOfWeek - firstDayGridNum + 7) % 7;
+        const gridStartDate = firstDayOfMonth.add('day', -daysFromPrevMonth);
+        // Calculate end date based on standard 6 weeks for safety, or calculate dynamically if preferred
+        const gridEndDate = gridStartDate.add('day', 6 * 7 - 1);
+        return { gridStartDate, gridEndDate };
+    }
+    #updatedDataSource;
+    viewChanged(e) {
+        const newView = e.value;
+        const oldView = e.oldValue;
+        this.selectedView.set(newView);
+        if (oldView === 'week') {
+            const oldDayOfWeek = this.oldDate().dayOfWeek % 7;
+            const date = this.currentDate().add('day', oldDayOfWeek - 1);
+            this.currentDate.set(date);
+        }
+        this.oldDate.set(this.currentDate());
+        if (newView === 'week') {
+            const currentDate = this.currentDate();
+            const currentDayOfWeek = currentDate.dayOfWeek;
+            const desiredFirstDayName = this.firstDayOfWeek();
+            const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
+            const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
+            const startOfWeekDate = currentDate.add('day', -daysToSubtract);
+            this.currentDate.set(startOfWeekDate);
+        }
+    }
+    nextClick() {
+        switch (this.selectedView()) {
+            case 'day':
+                this.currentDate.set(this.currentDate().add('day', 1));
+                break;
+            case 'week':
+                this.currentDate.set(this.currentDate().add('week', 1));
+                break;
+            case 'month':
+                this.currentDate.set(this.currentDate().add('month', 1));
+                break;
+        }
     }
-    /** @ignore */
-    _handleNextClick() {
-        this.current = this.current.add('month', 1);
+    prevClick() {
+        switch (this.selectedView()) {
+            case 'day':
+                this.currentDate.set(this.currentDate().add('day', -1));
+                break;
+            case 'week':
+                this.currentDate.set(this.currentDate().add('week', -1));
+                break;
+            case 'month':
+                this.currentDate.set(this.currentDate().add('month', -1));
+                break;
+        }
     }
-    /** @ignore */
-    _handlePrevClick() {
-        this.current = this.current.add('month', -1);
+    calendarDateChanged(e) {
+        let currentDate = this.calendarService.create(e, this.calendarType());
+        if (this.selectedView() === 'week') {
+            const currentDayOfWeek = currentDate.dayOfWeek;
+            const desiredFirstDayName = this.firstDayOfWeek();
+            const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
+            const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
+            currentDate = currentDate.add('day', -daysToSubtract);
+        }
+        this.currentDate.set(currentDate);
+    }
+    handleFullScreen() {
+        if (!this.isFullScreen())
+            this.getHostElement().classList.add('ax-full-screen-container');
+        if (this.isFullScreen())
+            this.getHostElement().classList.remove('ax-full-screen-container');
+        this.isFullScreen.set(!this.isFullScreen());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.5", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-h-full ax-flex-col\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-items-center ax-gap-0.5 ax-rounded-md ax-border ax-px-1\">\n        <button class=\"ax-h-8 ax-w-8 ax-rounded-md hover:ax-bg-secondary-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-secondary-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-h-8 ax-w-8 ax-rounded-md hover:ax-bg-secondary-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"! ax-border\">\n        <ax-suffix>\n          <ax-icon\n            [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-secondary-400'\n            \"\n          >\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item\n            *ngIf=\"_size === 'SM' || _size === 'MD'\"\n            text=\"Add Event\"\n            name=\"text\"\n            [divided]=\"true\"\n            color=\"primary\"\n          >\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>\n", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;background-color:rgba(var(--ax-sys-color-secondary-100));overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"], dependencies: [{ kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["date"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, allDayField: { classPropertyName: "allDayField", publicName: "allDayField", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, endDateField: { classPropertyName: "endDateField", publicName: "endDateField", isSignal: true, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: true, isRequired: false, transformFunction: null }, startDateField: { classPropertyName: "startDateField", publicName: "startDateField", isSignal: true, isRequired: false, transformFunction: null }, textColorField: { classPropertyName: "textColorField", publicName: "textColorField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, backgroundColorField: { classPropertyName: "backgroundColorField", publicName: "backgroundColorField", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n  <div class=\"ax-scheduler-header\">\n    <div class=\"ax-scheduler-date\">\n      <ax-button look=\"link\" (onClick)=\"prevClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-left': !rtl(),\n            'ax-icon-chevron-right': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n      <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n      <ax-button look=\"link\" (onClick)=\"nextClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-right': !rtl(),\n            'ax-icon-chevron-left': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n\n      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane ax-scheduler-calendar-container\">\n          <ax-calendar\n            [depth]=\"calendarDepth()\"\n            [ngModel]=\"currentDate()\"\n            (ngModelChange)=\"calendarDateChanged($event)\"\n          ></ax-calendar>\n        </div>\n      </ax-popover>\n    </div>\n    <div class=\"ax-scheduler-actions\">\n      <ax-select-box\n        [dropdownWidth]=\"100\"\n        [ngModel]=\"selectedView()\"\n        [dataSource]=\"viewsDataSource()\"\n        (onValueChanged)=\"viewChanged($event)\"\n      ></ax-select-box>\n\n      @if (allowFullScreen()) {\n        <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n          <ax-icon>\n            <i\n              class=\"fa-solid fa-expand\"\n              [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n            ></i>\n          </ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-views-container\">\n    @switch (selectedView()) {\n      @case ('day') {\n        <ax-scheduler-day-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-day-view>\n      }\n      @case ('week') {\n        <ax-scheduler-week-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-week-view>\n      }\n      @case ('month') {\n        <ax-scheduler-month-view\n          [date]=\"currentDate()\"\n          [draggable]=\"draggable()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-view-blocks-width: 3.5rem;--ax-comp-scheduler-view-blocks-height: 3rem;width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container .ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table tr{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;cursor:pointer;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time tr{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;cursor:pointer;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr{height:var(--ax-comp-scheduler-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;cursor:pointer;overflow:hidden;text-align:start;padding-inline:.5rem;width:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;cursor:pointer;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{font-size:.875rem;display:inline-block}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{cursor:pointer;overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip.ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}.ax-overlay-pane{gap:.25rem;display:grid;overflow:auto;max-height:7.5rem;font-size:.875rem;flex-direction:column}.ax-overlay-pane.ax-scheduler-calendar-container{max-height:unset}.ax-overlay-pane.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment{display:flex;cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;max-width:12.5rem;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSchedulerModule }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["draggable", "calendar", "date", "appointments", "firstDayOfWeek"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-scheduler', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        FormsModule,
+                        AXSchedulerModule,
+                        AXSelectBoxComponent,
                         AXDecoratorIconComponent,
-                        NgIf,
                         AXButtonComponent,
-                        AXDecoratorGenericComponent,
-                        AXDropdownPanelComponent,
-                        AXButtonItemComponent,
-                        AXSchedulerMonthViewComponent,
-                    ], template: "<div class=\"ax-flex ax-h-full ax-flex-col\">\n  <div class=\"scheduler-header\">\n    <p>\n      {{ current.format('MMMM yyyy') }}\n    </p>\n    <div class=\"scheduler-actions\">\n      <div class=\"ax-flex ax-items-center ax-gap-0.5 ax-rounded-md ax-border ax-px-1\">\n        <button class=\"ax-h-8 ax-w-8 ax-rounded-md hover:ax-bg-secondary-100\" (click)=\"_handlePrevClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-left\"> </ax-icon>\n        </button>\n        <ng-container *ngIf=\"_size === 'SM'; else elseTemplate\">\n          <span class=\"ax-text-secondary-200\">|</span>\n        </ng-container>\n        <ng-template #elseTemplate>\n          <ax-button look=\"blank\" class=\"ax-sm\" text=\"Today\"> </ax-button>\n        </ng-template>\n        <button class=\"ax-h-8 ax-w-8 ax-rounded-md hover:ax-bg-secondary-100\" (click)=\"_handleNextClick()\">\n          <ax-icon class=\"fa-solid fa-chevron-right\"> </ax-icon>\n        </button>\n      </div>\n      <ax-button [text]=\"_size === 'SM' ? '' : 'Week View'\" class=\"! ax-border\">\n        <ax-suffix>\n          <ax-icon\n            [class]=\"\n              _size === 'SM'\n                ? 'fa-solid fa-ellipsis-vertical'\n                : 'fa-solid fa-chevron-down ax-text-secondary-400'\n            \"\n          >\n          </ax-icon>\n        </ax-suffix>\n        <ax-dropdown-panel (onItemClick)=\"handleOnItemClick()\" [adaptivityEnabled]=\"true\">\n          <ax-button-item\n            *ngIf=\"_size === 'SM' || _size === 'MD'\"\n            text=\"Add Event\"\n            name=\"text\"\n            [divided]=\"true\"\n            color=\"primary\"\n          >\n          </ax-button-item>\n          <ax-button-item *ngIf=\"_size === 'SM'\" text=\"Go to Today\" name=\"text\" [divided]=\"true\">\n          </ax-button-item>\n          <ax-button-item text=\"Day View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Week View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Month View\" name=\"text\"> </ax-button-item>\n          <ax-button-item text=\"Year View\" name=\"text\"> </ax-button-item>\n        </ax-dropdown-panel>\n        <ax-suffix>\n          <ax-icon icon=\"\"></ax-icon>\n        </ax-suffix>\n      </ax-button>\n      <ax-button color=\"primary\" text=\"Add Event\" class=\"ax-hidden lg:ax-block\">\n        <ax-prefix>\n          <ax-icon class=\"fa-solid fa-plus\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </div>\n  <ax-scheduler-month-view [date]=\"current\"></ax-scheduler-month-view>\n  <!-- <ax-scheduler-week-view></ax-scheduler-week-view> -->\n</div>\n", styles: ["ax-scheduler{height:100%;display:block;border-width:1px;border-radius:.75rem;background-color:rgba(var(--ax-sys-color-secondary-100));overflow:hidden}ax-scheduler .scheduler-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom-width:1px}ax-scheduler .scheduler-header p{margin:0;font-size:1rem;font-weight:500}ax-scheduler .scheduler-actions{display:flex;gap:.75rem}ax-scheduler ax-scheduler-month-view{display:flex;flex-direction:column;flex:1 1 auto}ax-scheduler ax-scheduler-month-view .mobile-task:hover ax-button{opacity:1}\n"] }]
-        }] });
-
-const COMPONENT = [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent];
-const MODULES = [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule];
-class AXSchedulerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXDropdownModule, AXDateTimeModule, AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent], exports: [AXSchedulerComponent, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, imports: [MODULES, AXSchedulerComponent, AXSchedulerMonthViewComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...MODULES, ...COMPONENT],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
+                        NgClass,
+                        AXPopoverComponent,
+                        AXCalendarComponent,
+                    ], template: "<div class=\"ax-scheduler-container\">\n  <div class=\"ax-scheduler-header\">\n    <div class=\"ax-scheduler-date\">\n      <ax-button look=\"link\" (onClick)=\"prevClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-left': !rtl(),\n            'ax-icon-chevron-right': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n      <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n      <ax-button look=\"link\" (onClick)=\"nextClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-right': !rtl(),\n            'ax-icon-chevron-left': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n\n      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane ax-scheduler-calendar-container\">\n          <ax-calendar\n            [depth]=\"calendarDepth()\"\n            [ngModel]=\"currentDate()\"\n            (ngModelChange)=\"calendarDateChanged($event)\"\n          ></ax-calendar>\n        </div>\n      </ax-popover>\n    </div>\n    <div class=\"ax-scheduler-actions\">\n      <ax-select-box\n        [dropdownWidth]=\"100\"\n        [ngModel]=\"selectedView()\"\n        [dataSource]=\"viewsDataSource()\"\n        (onValueChanged)=\"viewChanged($event)\"\n      ></ax-select-box>\n\n      @if (allowFullScreen()) {\n        <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n          <ax-icon>\n            <i\n              class=\"fa-solid fa-expand\"\n              [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n            ></i>\n          </ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-views-container\">\n    @switch (selectedView()) {\n      @case ('day') {\n        <ax-scheduler-day-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-day-view>\n      }\n      @case ('week') {\n        <ax-scheduler-week-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-week-view>\n      }\n      @case ('month') {\n        <ax-scheduler-month-view\n          [date]=\"currentDate()\"\n          [draggable]=\"draggable()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-view-blocks-width: 3.5rem;--ax-comp-scheduler-view-blocks-height: 3rem;width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container .ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table tr{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;cursor:pointer;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time tr{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;cursor:pointer;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr{height:var(--ax-comp-scheduler-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;cursor:pointer;overflow:hidden;text-align:start;padding-inline:.5rem;width:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;cursor:pointer;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{font-size:.875rem;display:inline-block}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{cursor:pointer;overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip.ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}.ax-overlay-pane{gap:.25rem;display:grid;overflow:auto;max-height:7.5rem;font-size:.875rem;flex-direction:column}.ax-overlay-pane.ax-scheduler-calendar-container{max-height:unset}.ax-overlay-pane.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment{display:flex;cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;max-width:12.5rem;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"] }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXSchedulerComponent, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerWeekViewComponent };
+export { AXSchedulerComponent, AXSchedulerDayViewComponent, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerService, AXSchedulerWeekViewComponent };
 //# sourceMappingURL=acorex-components-scheduler.mjs.map