@acorex/components 19.14.0-next.3 → 19.14.1

package/fesm2022/acorex-components-scheduler.mjs

@@ -17,10 +17,12 @@ import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Observable, distinctUntilChanged, switchMap, of, map, startWith } from 'rxjs';
 import { AXDragDirective, AXDropZoneDirective } from '@acorex/cdk/drag-drop';
+import { AXTooltipDirective } from '@acorex/components/tooltip';
 import { orderBy } from 'lodash-es';
 
 class AXSchedulerService {
     constructor() {
+        this.calendarService = inject(AXCalendarService);
         this.formatService = inject(AXFormatService);
         this.HOURS_PER_DAY = 24;
         this.MINUTES_PER_HOUR = 60;
@@ -108,11 +110,11 @@ class AXSchedulerService {
             // 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);
+                effectiveStart = effectiveStart.set('hour', startHour).startOf('hour');
             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);
+                effectiveEnd = endDayBase.set('hour', endHour).startOf('hour');
             }
             // Get start block info using the specified viewTotalDays
             const startInfo = this.getBlockIdentifier(effectiveStart, viewStartDate, startHour, endHour, viewTotalDays);
@@ -156,61 +158,68 @@ class AXSchedulerService {
     /**
      * 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();
+    calculateDayViewConcurrencyInfo(singleDayAppointments, // These are segments for the current day
+    viewStartDate, startHour, endHour) {
+        const resultInfo = 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
+            return resultInfo;
         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);
+        const blocks = activeAppointmentsMap[0] ?? {};
+        // 1. Calculate initial maxConcurrency for each appointment segment
+        const maxConcurrencyMap = new Map();
+        singleDayAppointments.forEach((segment) => {
+            let maxOverlapInSegmentBlocks = 0;
+            const segmentStartMinutes = segment.startDate.hour * this.MINUTES_PER_HOUR + segment.startDate.minute;
+            const segmentEndMinutes = segment.endDate.hour * this.MINUTES_PER_HOUR + segment.endDate.minute;
+            // Determine blocks this segment occupies relative to view's startHour
+            const viewRelativeStartMinutes = Math.max(0, segmentStartMinutes - startHour * this.MINUTES_PER_HOUR);
+            const viewRelativeEndMinutes = Math.min((endHour - startHour) * this.MINUTES_PER_HOUR, segmentEndMinutes - startHour * this.MINUTES_PER_HOUR);
+            const firstBlockIndex = Math.floor(viewRelativeStartMinutes / this.BLOCK_DURATION_MINUTES);
+            const lastBlockIndex = Math.floor((viewRelativeEndMinutes - 1) / this.BLOCK_DURATION_MINUTES); // -1 because end is exclusive for block counting
+            for (let blockIdx = firstBlockIndex; blockIdx <= lastBlockIndex; blockIdx++) {
+                const appointmentsInBlock = blocks[blockIdx];
+                if (appointmentsInBlock) {
+                    maxOverlapInSegmentBlocks = Math.max(maxOverlapInSegmentBlocks, appointmentsInBlock.length);
                 }
             }
-            maxConcurrencyMap[appointment.key] = maxOverlap || 1;
+            maxConcurrencyMap.set(segment.key, maxOverlapInSegmentBlocks || 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,
+        // 2. Iteratively determine effectiveTotalColumns for groups of overlapping appointments
+        const initialEffectiveTotalColumns = new Map();
+        singleDayAppointments.forEach((segment) => {
+            initialEffectiveTotalColumns.set(segment.key, maxConcurrencyMap.get(segment.key) || 1);
+        });
+        let changed = true;
+        while (changed) {
+            changed = false;
+            singleDayAppointments.forEach((segmentA) => {
+                singleDayAppointments.forEach((segmentB) => {
+                    if (segmentA.key === segmentB.key)
+                        return;
+                    if (this.doAppointmentsOverlap(segmentA, segmentB)) {
+                        const etcA = initialEffectiveTotalColumns.get(segmentA.key) || 1;
+                        const etcB = initialEffectiveTotalColumns.get(segmentB.key) || 1;
+                        const maxETC = Math.max(etcA, etcB);
+                        if (etcA !== maxETC) {
+                            initialEffectiveTotalColumns.set(segmentA.key, maxETC);
+                            changed = true;
+                        }
+                        if (etcB !== maxETC) {
+                            initialEffectiveTotalColumns.set(segmentB.key, maxETC);
+                            changed = true;
+                        }
+                    }
+                });
+            });
+        }
+        // Populate final result
+        singleDayAppointments.forEach((segment) => {
+            resultInfo.set(segment.key, {
+                maxConcurrency: maxConcurrencyMap.get(segment.key) || 1,
+                effectiveTotalColumns: initialEffectiveTotalColumns.get(segment.key) || 1,
             });
         });
-        return concurrencyInfo;
+        return resultInfo;
     }
     /**
      * Groups appointments by the block they START in for Week View.
@@ -338,25 +347,166 @@ class AXSchedulerService {
         }
     }
     // --- Timeline Specific Helpers ---
-    calculateTimelineLayout(appt, startHour, endHour) {
+    calculateTimelineLayout(
+    // `appt` here will be an AXSchedulerAppointmentSegmentType when called from TimelineDayView
+    appt, viewStartHour, // e.g., 8 for 8 AM
+    viewEndHour) {
         if (!appt?.startDate ||
             !appt.endDate ||
-            typeof startHour !== 'number' ||
-            typeof endHour !== 'number' ||
-            startHour >= endHour) {
-            console.warn('calculateTimelinePixelLayout: Invalid input', { appt, startHour, endHour });
+            typeof viewStartHour !== 'number' ||
+            typeof viewEndHour !== 'number' ||
+            viewStartHour >= viewEndHour // Basic sanity check
+        ) {
+            console.warn('calculateTimelineLayout: Invalid input', { appt, viewStartHour, viewEndHour });
+            return null;
+        }
+        const totalViewDurationMinutes = (viewEndHour - viewStartHour) * 60;
+        if (totalViewDurationMinutes <= 0)
+            return null; // No viewable duration
+        // Segment's start and end times (these are already clipped to the day by getClonedAppointmentSegmentOnDay)
+        const segmentStart = appt.startDate;
+        const segmentEnd = appt.endDate;
+        // --- Calculate Start Position (left) ---
+        // Effective start of the segment within the view's hours for THIS day
+        let effectiveSegmentStartMinutesInDay = segmentStart.hour * 60 + segmentStart.minute;
+        // Clamp to viewStartHour for calculation if segment starts before viewable hours (shouldn't happen if segmenter worked)
+        effectiveSegmentStartMinutesInDay = Math.max(effectiveSegmentStartMinutesInDay, viewStartHour * 60);
+        // Clamp to viewEndHour for calculation if segment starts after viewable hours (shouldn't happen)
+        effectiveSegmentStartMinutesInDay = Math.min(effectiveSegmentStartMinutesInDay, viewEndHour * 60);
+        const minutesFromViewStartToSegmentStart = effectiveSegmentStartMinutesInDay - viewStartHour * 60;
+        // If segment effectively starts before the viewable part (after clamping), it means it's not visible or starts at 0%
+        if (minutesFromViewStartToSegmentStart < 0 &&
+            Math.abs(minutesFromViewStartToSegmentStart) > 1e-6 /*epsilon for float issues*/) {
+            // This case should ideally be caught by the segmenter or initial overlap checks.
+            // If it happens, treat as starting at 0% but it might mean no visible part.
+        }
+        const leftPercentage = (Math.max(0, minutesFromViewStartToSegmentStart) / totalViewDurationMinutes) * 100;
+        // --- Calculate Duration and Width ---
+        // Effective end of the segment within the view's hours for THIS day
+        let effectiveSegmentEndMinutesInDay = segmentEnd.hour * 60 + segmentEnd.minute;
+        if (segmentEnd.hour === 0 && segmentEnd.minute === 0 && segmentEnd.date.getTime() > segmentStart.date.getTime()) {
+            // If segment ends exactly at midnight (00:00 of next day, meaning it filled up to 24:00 of current day)
+            effectiveSegmentEndMinutesInDay = 24 * 60;
+        }
+        // Clamp to viewEndHour for calculation
+        effectiveSegmentEndMinutesInDay = Math.min(effectiveSegmentEndMinutesInDay, viewEndHour * 60);
+        // Clamp to viewStartHour for calculation (if segment ends before view starts)
+        effectiveSegmentEndMinutesInDay = Math.max(effectiveSegmentEndMinutesInDay, viewStartHour * 60);
+        const segmentDurationMinutesInView = Math.max(0, effectiveSegmentEndMinutesInDay - effectiveSegmentStartMinutesInDay);
+        if (segmentDurationMinutesInView <= 0) {
+            // Segment has no visible duration within the timeline hours
             return null;
         }
-        const startMinutes = appt.startDate.hour * 60 + appt.startDate.minute;
-        const startBlockOffset = startMinutes - startHour * 60;
-        const xBlock = startBlockOffset / 60;
-        const left = `calc(var(--ax-comp-scheduler-timeline-view-blocks-width) * ${xBlock} + 1px)`;
-        const durationMillis = appt.endDate.date.getTime() - appt.startDate.date.getTime();
-        const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
-        const widthBlock = durationMinutes / 60;
-        const blockWidthExpr = `var(--ax-comp-scheduler-timeline-view-blocks-width)`;
-        const width = `calc(${blockWidthExpr} * ${widthBlock})`;
-        return { left, width };
+        const widthPercentage = (segmentDurationMinutesInView / totalViewDurationMinutes) * 100;
+        // Ensure percentages are valid
+        if (leftPercentage > 100 ||
+            leftPercentage < 0 ||
+            widthPercentage <= 0 ||
+            widthPercentage > 100 ||
+            leftPercentage + widthPercentage > 100.0001 /*allow for float errors*/) {
+            // This might indicate an issue with date clamping or logic.
+            // For now, if it results in an invalid layout, return null.
+            // console.warn("Timeline layout calculation resulted in out-of-bounds percentages:",
+            //              {leftPercentage, widthPercentage, segmentStart, segmentEnd, viewStartHour, viewEndHour});
+            // A common case for (left + width > 100) is if an event ends *exactly* at viewEndHour,
+            // and viewEndHour itself is the boundary.
+            // Let's be a bit tolerant here if width is positive.
+            if (widthPercentage <= 0)
+                return null;
+        }
+        return {
+            left: `${Math.max(0, Math.min(100, leftPercentage))}%`,
+            width: `${Math.max(0, Math.min(100, widthPercentage))}%`,
+        };
+    }
+    /**
+     * Calculates the visible segment of a timed appointment on a specific day,
+     * constrained by the view's start and end hours.
+     * Returns a new appointment-like object representing the segment.
+     */
+    getClonedAppointmentSegmentOnDay(appointment, // This is the ORIGINAL appointment
+    day, viewStartHour, viewEndHour, isFullDayCellContext = false) {
+        if (!appointment || !appointment.startDate || !appointment.endDate) {
+            return null;
+        }
+        if (appointment.allDay) {
+            const dayStartOf = day.clone().startOf('day');
+            if (appointment.startDate.startOf('day').equal(dayStartOf, 'day')) {
+                return {
+                    ...appointment,
+                    startDate: dayStartOf,
+                    endDate: dayStartOf.clone().add('day', 1).startOf('day'),
+                    allDay: true,
+                    originalStartDate: appointment.startDate,
+                    originalEndDate: appointment.endDate,
+                    isContinuationFromPreviousDay: false,
+                    isContinuationToNextDay: appointment.endDate.startOf('day').compare(dayStartOf, 'day') > 0,
+                    originalAppointmentRef: appointment,
+                };
+            }
+            else if (appointment.startDate.startOf('day').compare(dayStartOf, 'day') < 0 &&
+                appointment.endDate.startOf('day').compare(dayStartOf, 'day') >= 0) {
+                return {
+                    ...appointment,
+                    startDate: dayStartOf,
+                    endDate: dayStartOf.clone().add('day', 1).startOf('day'),
+                    allDay: true,
+                    originalStartDate: appointment.startDate,
+                    originalEndDate: appointment.endDate,
+                    isContinuationFromPreviousDay: true,
+                    isContinuationToNextDay: appointment.endDate.startOf('day').compare(dayStartOf, 'day') > 0,
+                    originalAppointmentRef: appointment,
+                };
+            }
+            else {
+                return null;
+            }
+        }
+        const dayStartBoundary = isFullDayCellContext
+            ? day.clone().startOf('day')
+            : day.clone().set('hour', viewStartHour).startOf('hour');
+        const dayEndBoundary = isFullDayCellContext
+            ? day.clone().add('day', 1).startOf('day')
+            : viewEndHour === 24 || (viewEndHour === 0 && viewStartHour === 0)
+                ? day.clone().add('day', 1).startOf('day')
+                : day.clone().set('hour', viewEndHour).startOf('hour');
+        if (appointment.endDate.compare(dayStartBoundary, 'second') <= 0 ||
+            appointment.startDate.compare(dayEndBoundary, 'second') >= 0) {
+            return null;
+        }
+        const segmentStartDate = appointment.startDate.compare(dayStartBoundary, 'second') > 0 ? appointment.startDate : dayStartBoundary;
+        const segmentEndDate = appointment.endDate.compare(dayEndBoundary, 'second') < 0 ? appointment.endDate : dayEndBoundary;
+        if (segmentStartDate.compare(segmentEndDate, 'second') >= 0) {
+            return null;
+        }
+        const isContinuationFromPreviousDay = appointment.startDate.compare(segmentStartDate, 'second') < 0;
+        const isContinuationToNextDay = appointment.endDate.compare(segmentEndDate, 'second') > 0;
+        const duration = appointment.startDate.duration(appointment.endDate);
+        return {
+            ...appointment,
+            startDate: segmentStartDate,
+            endDate: segmentEndDate,
+            allDay: appointment.allDay || duration.total.days >= 1,
+            originalStartDate: appointment.startDate,
+            originalEndDate: appointment.endDate,
+            isContinuationFromPreviousDay,
+            isContinuationToNextDay,
+            originalAppointmentRef: appointment,
+        };
+    }
+    getOriginalAppointment(item) {
+        const segment = item;
+        if (segment.originalAppointmentRef) {
+            return segment.originalAppointmentRef;
+        }
+        return item;
+    }
+    isHoliday(date) {
+        return this.calendarService.holidays.some((d) => date.equal(d.date, 'day'));
+    }
+    isWeekend(date, calendar) {
+        const weekend = this.calendarService.resolveCalendar(calendar).weekend;
+        return weekend.includes(date.dayOfWeek - 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
@@ -377,28 +527,37 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
         this.readonly = input(false);
         this.draggable = input(true);
         this.calendar = input();
-        this.endHour = input.required();
         this.date = input.required();
-        this.startHour = input.required();
         this.appointments = input([]);
-        this.multiDayAppointments = computed(() => {
-            const current = this.date();
-            const mapped = this.appointments();
-            const daysCount = this.daysCount();
-            return Array.from({ length: daysCount }, (_, i) => {
-                const dayStart = current.add('day', i).add('hour', this.startHour());
-                const dayEnd = dayStart.add('day', 1).add('hour', this.endHour() - this.startHour());
-                const appointmentsForDay = mapped.filter((appt) => (appt.endDate.compare(dayStart, 'day') >= 0 &&
-                    appt.startDate.compare(dayEnd, 'day') < 0 &&
-                    appt.endDate.compare(dayStart, 'hour') >= 0 &&
-                    appt.startDate.compare(dayEnd, 'hour') < 0) ||
-                    (appt.endDate.compare(dayStart, 'day') >= 0 && appt.startDate.compare(dayEnd, 'day') < 0 && appt.allDay));
-                return {
-                    appointments: appointmentsForDay,
-                    date: dayStart,
-                };
-            });
-            return [];
+        this.agendaDaysLayout = computed(() => {
+            const allOriginalAppointments = this.appointments();
+            const agendaStartDate = this.date();
+            const numberOfDays = this.daysCount();
+            if (!agendaStartDate || !allOriginalAppointments) {
+                return [];
+            }
+            const result = [];
+            for (let i = 0; i < numberOfDays; i++) {
+                const currentDay = agendaStartDate.add('day', i).startOf('day');
+                const segmentsForThisDay = [];
+                for (const appt of allOriginalAppointments) {
+                    const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, currentDay, 0, 24, true);
+                    if (segment) {
+                        segmentsForThisDay.push(segment);
+                    }
+                }
+                const sortedSegments = orderBy(segmentsForThisDay, [
+                    (s) => (s.allDay ? 0 : 1),
+                    (s) => s.startDate.date.getTime(),
+                    (s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(),
+                ], ['asc', 'asc', 'desc']);
+                result.push({
+                    date: currentDay,
+                    appointments: sortedSegments,
+                    holiday: this.isHoliday(currentDay),
+                });
+            }
+            return result;
         });
         // Internal outputs to be caught by parent AXSchedulerComponent
         this.slotClickedInternal = output();
@@ -422,36 +581,62 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
             },
         };
     }
-    handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    handleAppointmentEvent(mouseEvent, appointmentItem) {
+        const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentItem);
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
     }
     handleSlotEvent(mouseEvent, date) {
-        const slotData = this.schedulerService.getSlotData(date, 'agenda');
+        const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'agenda');
         if (slotData) {
             this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
         }
     }
     handleDrop(e, date) {
-        const slotData = this.schedulerService.getSlotData(date, 'agenda');
+        const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'agenda');
+        const droppedItem = e.dropped.dragData();
+        const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalAppointment,
         });
     }
     isToday(date) {
         const today = this.calendarService.create(new Date());
         return date.equal(today, 'day');
     }
+    isHoliday(date) {
+        const isHoliday = this.schedulerService.isHoliday(date);
+        if (isHoliday) {
+            const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
+            return {
+                state: 'holiday',
+                holiday,
+            };
+        }
+        const isWeekend = this.schedulerService.isWeekend(date, this.calendar());
+        if (isWeekend) {
+            return { state: 'weekend' };
+        }
+        return { state: 'none' };
+    }
     get isReadonly() {
         return this.readonly();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n  @for (appt of multiDayAppointments(); track appt.appointments) {\n    <div\n      axDropZone\n      #zone=\"axDropZone\"\n      (onElementDrop)=\"handleDrop($event, appt.date)\"\n      [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n      [class.ax-today]=\"isToday(appt.date)\"\n      class=\"ax-scheduler-agenda-view-container\"\n      (click)=\"handleSlotEvent($event, appt.date)\"\n      (dblclick)=\"handleSlotEvent($event, appt.date)\"\n      (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n    >\n      <div class=\"ax-scheduler-agenda-header-date-day\">\n        <span class=\"ax-scheduler-agenda-header-date-day-char\">\n          {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n        </span>\n        <span class=\"ax-scheduler-agenda-header-date-day-num\">\n          {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <div class=\"ax-scheduler-agenda-appointment-container\">\n        @for (appointment of appt.appointments; track appointment.key) {\n          <div\n            axDrag\n            [dragCursor]=\"'grab'\"\n            [dragData]=\"appointment\"\n            [dragElementClone]=\"true\"\n            [dragDisabled]=\"!draggable()\"\n            (click)=\"handleAppointmentEvent($event, appointment)\"\n            (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n            (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n            [title]=\"appointment.title\"\n            [style.color]=\"appointment.textColor\"\n            class=\"ax-scheduler-agenda-appointment\"\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    </div>\n  }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{width:5.5rem;gap:.25rem;display:flex;height:2.75rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;display:flex;flex-direction:column;gap:.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{width:100%;display:flex;overflow:hidden;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-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { 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: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n  @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n    <div\n      axDropZone\n      #zone=\"axDropZone\"\n      (onElementDrop)=\"handleDrop($event, dayData.date)\"\n      [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n      [class.ax-state-today]=\"isToday(dayData.date)\"\n      [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n      class=\"ax-scheduler-agenda-view-container\"\n      (click)=\"handleSlotEvent($event, dayData.date)\"\n      (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n      (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n    >\n      <div class=\"ax-scheduler-agenda-header-date-day\">\n        <span\n          class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n          [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n          [axTooltipPlacement]=\"'top-start'\"\n        >\n          {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n            ( {{ dayData.holiday.holiday.title }} )\n          }\n        </span>\n        <span class=\"ax-scheduler-agenda-header-date-day-num\">\n          {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <div class=\"ax-scheduler-agenda-appointment-container\">\n        @for (segment of dayData.appointments; track segment.key + segment.originalStartDate.date.getTime()) {\n          <div\n            axDrag\n            [dragCursor]=\"'grab'\"\n            [dragData]=\"segment\"\n            [dragElementClone]=\"true\"\n            [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n            (click)=\"handleAppointmentEvent($event, segment)\"\n            (dblclick)=\"handleAppointmentEvent($event, segment)\"\n            (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n            [title]=\"\n              segment.title +\n              (segment.allDay\n                ? ' (All Day)'\n                : ' (' +\n                  (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                  ' - ' +\n                  (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                  ')')\n            \"\n            [style.color]=\"segment.textColor\"\n            class=\"ax-scheduler-agenda-appointment\"\n            [class.all-day-segment]=\"segment.allDay\"\n            [style.background-color]=\"segment.backgroundColor\"\n          >\n            <div class=\"ax-scheduler-agenda-appointment-time\">\n              @if (segment.allDay) {\n                <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n              } @else {\n                <span>\n                  {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  -\n                  {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              }\n            </div>\n            <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n            <!-- Description could go here if needed -->\n            <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n          </div>\n        }\n        @if (dayData.appointments.length === 0) {\n          <div class=\"ax-scheduler-agenda-no-appointments\">\n            {{ 'noRecord' | translate | async }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;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-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { 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: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-agenda-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXFormatPipe, AXDecoratorGenericComponent, AXDragDirective, AXDropZoneDirective], template: "<div class=\"ax-scheduler-agenda-container\">\n  @for (appt of multiDayAppointments(); track appt.appointments) {\n    <div\n      axDropZone\n      #zone=\"axDropZone\"\n      (onElementDrop)=\"handleDrop($event, appt.date)\"\n      [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n      [class.ax-today]=\"isToday(appt.date)\"\n      class=\"ax-scheduler-agenda-view-container\"\n      (click)=\"handleSlotEvent($event, appt.date)\"\n      (dblclick)=\"handleSlotEvent($event, appt.date)\"\n      (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n    >\n      <div class=\"ax-scheduler-agenda-header-date-day\">\n        <span class=\"ax-scheduler-agenda-header-date-day-char\">\n          {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n        </span>\n        <span class=\"ax-scheduler-agenda-header-date-day-num\">\n          {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <div class=\"ax-scheduler-agenda-appointment-container\">\n        @for (appointment of appt.appointments; track appointment.key) {\n          <div\n            axDrag\n            [dragCursor]=\"'grab'\"\n            [dragData]=\"appointment\"\n            [dragElementClone]=\"true\"\n            [dragDisabled]=\"!draggable()\"\n            (click)=\"handleAppointmentEvent($event, appointment)\"\n            (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n            (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n            [title]=\"appointment.title\"\n            [style.color]=\"appointment.textColor\"\n            class=\"ax-scheduler-agenda-appointment\"\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    </div>\n  }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{width:5.5rem;gap:.25rem;display:flex;height:2.75rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;display:flex;flex-direction:column;gap:.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{width:100%;display:flex;overflow:hidden;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-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
+            args: [{ selector: 'ax-scheduler-agenda-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+                        AsyncPipe,
+                        AXFormatPipe,
+                        AXDecoratorGenericComponent,
+                        AXDragDirective,
+                        AXDropZoneDirective,
+                        AXTranslatorPipe,
+                        AXTooltipDirective,
+                    ], template: "<div class=\"ax-scheduler-agenda-container\">\n  @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n    <div\n      axDropZone\n      #zone=\"axDropZone\"\n      (onElementDrop)=\"handleDrop($event, dayData.date)\"\n      [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n      [class.ax-state-today]=\"isToday(dayData.date)\"\n      [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n      class=\"ax-scheduler-agenda-view-container\"\n      (click)=\"handleSlotEvent($event, dayData.date)\"\n      (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n      (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n    >\n      <div class=\"ax-scheduler-agenda-header-date-day\">\n        <span\n          class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n          [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n          [axTooltipPlacement]=\"'top-start'\"\n        >\n          {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n            ( {{ dayData.holiday.holiday.title }} )\n          }\n        </span>\n        <span class=\"ax-scheduler-agenda-header-date-day-num\">\n          {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <div class=\"ax-scheduler-agenda-appointment-container\">\n        @for (segment of dayData.appointments; track segment.key + segment.originalStartDate.date.getTime()) {\n          <div\n            axDrag\n            [dragCursor]=\"'grab'\"\n            [dragData]=\"segment\"\n            [dragElementClone]=\"true\"\n            [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n            (click)=\"handleAppointmentEvent($event, segment)\"\n            (dblclick)=\"handleAppointmentEvent($event, segment)\"\n            (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n            [title]=\"\n              segment.title +\n              (segment.allDay\n                ? ' (All Day)'\n                : ' (' +\n                  (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                  ' - ' +\n                  (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                  ')')\n            \"\n            [style.color]=\"segment.textColor\"\n            class=\"ax-scheduler-agenda-appointment\"\n            [class.all-day-segment]=\"segment.allDay\"\n            [style.background-color]=\"segment.backgroundColor\"\n          >\n            <div class=\"ax-scheduler-agenda-appointment-time\">\n              @if (segment.allDay) {\n                <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n              } @else {\n                <span>\n                  {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  -\n                  {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              }\n            </div>\n            <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n            <!-- Description could go here if needed -->\n            <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n          </div>\n        }\n        @if (dayData.appointments.length === 0) {\n          <div class=\"ax-scheduler-agenda-no-appointments\">\n            {{ 'noRecord' | translate | async }}\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;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-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
         }], propDecorators: { isReadonly: [{
                 type: HostBinding,
                 args: ['class.ax-state-readonly']
@@ -469,9 +654,38 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         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.processedAppointmentsForLayout = computed(() => {
+            const viewDate = this.date();
+            const startH = this.startHour();
+            const endH = this.endHour();
+            const allAppointmentsInView = this.appointments();
+            if (!viewDate || allAppointmentsInView.length === 0) {
+                return [];
+            }
+            const segmentsForThisDay = [];
+            for (const appt of allAppointmentsInView) {
+                const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, viewDate, startH, endH);
+                if (segment) {
+                    segmentsForThisDay.push(segment);
+                }
+            }
+            return segmentsForThisDay;
+        });
+        this.allDayAppointments = computed(() => {
+            const originalAllDayAppointments = this.appointments()?.filter((e) => e && e.allDay) ?? [];
+            const multiDayBecomingAllDaySegments = this.processedAppointmentsForLayout()?.filter((segment) => segment && segment.allDay && !this.appointments().find((orig) => orig.key === segment.key)?.allDay) ?? [];
+            const combined = new Map();
+            originalAllDayAppointments.forEach((appt) => combined.set(appt.key, appt));
+            multiDayBecomingAllDaySegments.forEach((appt) => {
+                if (!combined.has(appt.key)) {
+                    combined.set(appt.key, appt);
+                }
+            });
+            return Array.from(combined.values());
+        });
+        this.singleDayAppointments = computed(() => {
+            return this.processedAppointmentsForLayout()?.filter((e) => e && !e.allDay) ?? [];
+        });
         this.slotClickedInternal = output();
         this.slotDblClickedInternal = output();
         this.slotRightClickedInternal = output();
@@ -479,7 +693,6 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         this.appointmentDblClickedInternal = output();
         this.appointmentRightClickedInternal = output();
         this.onAppointmentDropInternal = output();
-        // --- Event Handlers ---
         this.eventOutputMap = {
             slot: {
                 click: this.slotClickedInternal,
@@ -496,9 +709,9 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
             let time = this.date();
             if (!time)
                 return [];
-            time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
+            time = time.set('hour', this.startHour()).startOf('hour');
             const hours = [time];
-            while (time.hour < this.endHour()) {
+            while (time.hour < this.endHour() - 1) {
                 time = time.add('hour', 1);
                 hours.push(time);
             }
@@ -506,71 +719,63 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         });
         this.appointmentLayouts = computed(() => {
             const layouts = new Map();
-            const sAppointments = this.singleDayAppointments();
-            const viewDate = this.date(); // Get the start date for the view
+            const appointmentsToLayout = this.singleDayAppointments();
+            const viewDate = this.date();
             const startH = this.startHour();
             const endH = this.endHour();
-            // Add check for viewDate
-            if (sAppointments.length === 0 || !viewDate || typeof startH !== 'number' || typeof endH !== 'number') {
+            if (appointmentsToLayout.length === 0 || !viewDate || typeof startH !== 'number' || typeof endH !== 'number') {
                 return layouts;
             }
-            // Pass viewDate to the service method
-            const concurrencyInfo = this.schedulerService.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;
+            const concurrencyInfoMap = this.schedulerService.calculateDayViewConcurrencyInfo(appointmentsToLayout, viewDate, startH, endH);
+            const sortedAppointments = orderBy(appointmentsToLayout, [(e) => e.startDate.date.getTime(), (e) => e.originalEndDate.date.getTime() - e.originalStartDate.date.getTime()], ['asc', 'desc']);
+            const columnsData = [];
+            for (const appointmentSegment of sortedAppointments) {
+                let assignedCol = -1;
+                for (let c = 0;; c++) {
+                    if (!columnsData[c]) {
+                        columnsData[c] = { appointments: [] };
                     }
-                    else {
-                        colIdx++;
+                    let conflict = false;
+                    for (const placedSegment of columnsData[c].appointments) {
+                        if (appointmentSegment.startDate.compare(placedSegment.endDate, 'minute') < 0 &&
+                            appointmentSegment.endDate.compare(placedSegment.startDate, 'minute') > 0) {
+                            conflict = true;
+                            break;
+                        }
                     }
-                    // Safety break
-                    if (colIdx > sAppointments.length * 2 && assignedColumn < 0) {
-                        console.warn(`DayView: Safety break assigning column 0 for appointment ${appointment.key}`);
-                        assignedColumn = 0;
+                    if (!conflict) {
+                        assignedCol = c;
+                        columnsData[c].appointments.push(appointmentSegment);
+                        break;
+                    }
+                    if (c > appointmentsToLayout.length) {
+                        console.warn(`DayView: Safety break in column assignment for ${appointmentSegment.title}, assigning to new column ${c}`);
+                        if (!columnsData[c])
+                            columnsData[c] = { appointments: [] };
+                        columnsData[c].appointments.push(appointmentSegment);
+                        assignedCol = c;
                         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);
-                }
+                const concurrencyInfo = concurrencyInfoMap.get(appointmentSegment.key);
+                const effectiveCols = concurrencyInfo ? concurrencyInfo.effectiveTotalColumns : 1;
+                layouts.set(appointmentSegment.key, {
+                    columnIndex: assignedCol,
+                    effectiveTotalColumns: effectiveCols,
+                });
             }
-            // --- 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.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+        const originalAppointment = appointment.originalStartDate
+            ? {
+                ...appointment,
+                startDate: appointment.originalStartDate,
+                endDate: appointment.originalEndDate,
+            }
+            : appointment;
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
     }
     handleSingleSlotEvent(mouseEvent, startDate) {
         const slotData = this.schedulerService.getSlotData(startDate, 'day');
@@ -588,21 +793,36 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         const endDate = this.date().endOf('day');
         const startDate = this.date().startOf('day');
         const slotData = { startDate, endDate, view: 'day' };
+        const droppedAppt = e.dropped.dragData();
+        const originalDroppedAppt = droppedAppt.originalStartDate
+            ? {
+                ...droppedAppt,
+                startDate: droppedAppt.originalStartDate,
+                endDate: droppedAppt.originalEndDate,
+            }
+            : droppedAppt;
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalDroppedAppt,
         });
     }
     handleSingleDayDrop(e, startDate) {
         const slotData = this.schedulerService.getSlotData(startDate, 'day');
+        const droppedAppt = e.dropped.dragData();
+        const originalDroppedAppt = droppedAppt.originalStartDate
+            ? {
+                ...droppedAppt,
+                startDate: droppedAppt.originalStartDate,
+                endDate: droppedAppt.originalEndDate,
+            }
+            : droppedAppt;
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalDroppedAppt,
         });
     }
-    // --- Style Calculation Functions (depend on appointmentLayouts - no change needed) ---
     getAppointmentLayout(key) {
         return this.appointmentLayouts().get(key);
     }
@@ -611,6 +831,10 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         if (layout && layout.effectiveTotalColumns > 0) {
             const N = layout.effectiveTotalColumns;
             const C = layout.columnIndex;
+            if (C < 0) {
+                console.warn('Invalid columnIndex < 0 for key:', key);
+                return '0px';
+            }
             if (C === 0 || N <= 1)
                 return '0px';
             const leftPercent = C * (100 / N);
@@ -623,28 +847,19 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         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%';
+                return `calc(100% - ${this.GAP_PX}px)`;
             const widthPercent = (1 / N) * 100;
-            const isLastColumn = C + 1 === N;
-            if (!isLastColumn) {
-                return `calc(${widthPercent}% - ${this.GAP_PX}px)`;
-            }
-            else {
-                const cumulativeGapPx = (N - 1) * this.GAP_PX;
-                return `calc(${widthPercent}% - ${cumulativeGapPx}px)`;
-            }
+            return `calc(${widthPercent}% - ${this.GAP_PX}px)`;
         }
         return '0%';
     }
     getAppointmentTop(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 appointmentSegment = this.singleDayAppointments().find((e) => e.key === key);
+        if (appointmentSegment) {
+            const startMinutes = appointmentSegment.startDate.hour * 60 + appointmentSegment.startDate.minute;
             const startBlockOffset = startMinutes - this.startHour() * 60;
             const yBlock = startBlockOffset / 30;
             return `calc(var(--ax-comp-scheduler-basic-view-blocks-height) * ${yBlock} + 1px)`;
@@ -652,10 +867,12 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         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 appointmentSegment = this.singleDayAppointments().find((e) => e.key === key);
+        if (appointmentSegment) {
+            const durationMillis = appointmentSegment.endDate.date.getTime() - appointmentSegment.startDate.date.getTime();
             const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
+            if (durationMinutes <= 0)
+                return '0px';
             const heightBlock = durationMinutes / 30;
             const blockHeightExpr = `var(--ax-comp-scheduler-basic-view-blocks-height)`;
             return `calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_PX}px)`;
@@ -666,7 +883,7 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         return this.readonly();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n  <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n    <div>\n      {{ 'dateTime.duration.all-day' | translate | async }}\n    </div>\n  </div>\n  <div\n    axDropZone\n    #zone=\"axDropZone\"\n    (onElementDrop)=\"handleAllDayDrop($event)\"\n    [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n    class=\"ax-scheduler-day-header-table-container\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable()\"\n          [dragData]=\"allDayAppointments()[0]\"\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\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    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\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          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragData]=\"appointment\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable()\"\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\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.inset-block-start]=\"getAppointmentTop(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    <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <div\n          axDropZone\n          #zone=\"axDropZone\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n          [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n          (click)=\"handleSingleSlotEvent($event, time)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n        ></div>\n        <div\n          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n          (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n        ></div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}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-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%;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-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-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}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-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;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-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n  <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n    <div>\n      {{ 'dateTime.duration.all-day' | translate | async }}\n    </div>\n  </div>\n  <div\n    axDropZone\n    #zone=\"axDropZone\"\n    (onElementDrop)=\"handleAllDayDrop($event)\"\n    [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n    class=\"ax-scheduler-day-header-table-container\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n          [dragData]=\"allDayAppointments()[0]\"\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\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    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\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          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragData]=\"appointment\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\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.inset-block-start]=\"getAppointmentTop(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.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n    </div>\n    <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <div\n          axDropZone\n          #zone=\"axDropZone\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n          [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n          (click)=\"handleSingleSlotEvent($event, time)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n        ></div>\n        <div\n          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n          (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n        ></div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}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-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%;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-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-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}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-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;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-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
             type: Component,
@@ -678,7 +895,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXFormatPipe,
                         AXDragDirective,
                         AXDropZoneDirective,
-                    ], template: "<div class=\"ax-scheduler-day-header\">\n  <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n    <div>\n      {{ 'dateTime.duration.all-day' | translate | async }}\n    </div>\n  </div>\n  <div\n    axDropZone\n    #zone=\"axDropZone\"\n    (onElementDrop)=\"handleAllDayDrop($event)\"\n    [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n    class=\"ax-scheduler-day-header-table-container\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable()\"\n          [dragData]=\"allDayAppointments()[0]\"\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\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    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\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          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragData]=\"appointment\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable()\"\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\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.inset-block-start]=\"getAppointmentTop(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    <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <div\n          axDropZone\n          #zone=\"axDropZone\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n          [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n          (click)=\"handleSingleSlotEvent($event, time)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n        ></div>\n        <div\n          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n          (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n        ></div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}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-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%;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-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-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}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-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;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-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
+                    ], template: "<div class=\"ax-scheduler-day-header\">\n  <div class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\">\n    <div>\n      {{ 'dateTime.duration.all-day' | translate | async }}\n    </div>\n  </div>\n  <div\n    axDropZone\n    #zone=\"axDropZone\"\n    (onElementDrop)=\"handleAllDayDrop($event)\"\n    [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n    class=\"ax-scheduler-day-header-table-container\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable() || allDayAppointments()[0].readonly || readonly()\"\n          [dragData]=\"allDayAppointments()[0]\"\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\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    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\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          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragData]=\"appointment\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\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.inset-block-start]=\"getAppointmentTop(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.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n    </div>\n    <div aria-hidden=\"true\" class=\"ax-scheduler-day-slot\">\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <div\n          axDropZone\n          #zone=\"axDropZone\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time)\"\n          [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n          (click)=\"handleSingleSlotEvent($event, time)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time)\"\n        ></div>\n        <div\n          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleSingleDayDrop($event, time.add('minute', 30))\"\n          (click)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (dblclick)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time.add('minute', 30))\"\n        ></div>\n      }\n    </div>\n  </div>\n</div>\n", styles: ["ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:3;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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{z-index:3;position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table div{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}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-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%;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-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-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:2;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}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-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;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-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot{width:100%}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div{height:var(--ax-comp-scheduler-basic-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-slot div:first-child{border-block-start-width:0}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-header-day-appointment,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-appointment{cursor:pointer}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-header-table-container:hover,ax-scheduler-day-view:not(.ax-state-readonly) .ax-scheduler-day-slot>div:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
         }], propDecorators: { isReadonly: [{
                 type: HostBinding,
                 args: ['class.ax-state-readonly']
@@ -687,16 +904,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class AXSchedulerMonthViewComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.formatService = inject(AXFormatService);
         this.calendarService = inject(AXCalendarService);
         this.schedulerService = inject(AXSchedulerService);
         // --- Inputs ---
         this.readonly = input(false);
         this.draggable = input(true);
         this.calendar = input();
-        this.date = input.required(); // A date within the target month
+        this.date = input.required();
+        this.firstDayOfWeek = input('Saturday');
         this.appointments = input([]);
-        this.firstDayOfWeek = input('Saturday'); // Match scheduler component default
         // --- Constants ---
         this.DAYS_IN_WEEK = 7;
         this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 2;
@@ -729,18 +945,17 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
         });
         // Generate the list of weekday names based on the firstDayOfWeek
         this.daysArray = computed(() => {
-            const firstDayNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
             const dayNames = [];
-            const currentDate = this.date();
+            const currentDate = this.date(); // Use a stable date for generating week headers
             const currentDayOfWeek = currentDate.dayOfWeek;
             const desiredFirstDayName = this.firstDayOfWeek();
             const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
+            // Calculate days to subtract to get to the start of the week based on firstDayOfWeek
             const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
-            let date = currentDate.add('day', -daysToSubtract);
-            date = date.add('day', firstDayNum - 1);
+            let headerStartDate = currentDate.add('day', -daysToSubtract);
             for (let i = 0; i < 7; i++) {
-                dayNames.push(date);
-                date = date.add('day', 1);
+                dayNames.push(headerStartDate);
+                headerStartDate = headerStartDate.add('day', 1);
             }
             return dayNames;
         });
@@ -748,37 +963,42 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
         this.calendarDaysInfo = computed(() => {
             const monthStart = this.monthStartDate();
             if (!monthStart)
-                return { days: [], weeksNeeded: 0 }; // Return object
+                return { days: [], weeksNeeded: 0 };
             const firstDayOfMonth = monthStart;
             const lastDayOfMonth = monthStart.endOf('month');
-            const daysInMonth = lastDayOfMonth.dayOfMonth; // Get number of days in the month
             const firstDayGridNum = this.schedulerService.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));
+            // Determine how many total days to show to fill out the weeks
+            // A common approach is 6 weeks to ensure consistency, but your dynamic weeksNeeded is fine too.
+            // Let's stick to your dynamic `weeksNeeded` and `totalDaysToGenerate`
+            const daysInMonth = lastDayOfMonth.dayOfMonth;
+            const totalCellsMinimum = leadingDays + daysInMonth;
+            const weeksNeededDynamic = Math.ceil(totalCellsMinimum / this.DAYS_IN_WEEK);
+            const actualWeeksToShow = Math.max(4, Math.min(weeksNeededDynamic, 6)); // Clamp weeks
             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++) {
+                const isHoliday = this.schedulerService.isHoliday(currentDay) || this.schedulerService.isWeekend(currentDay, this.calendar());
+                let holidayTitle = null;
+                if (isHoliday) {
+                    const holiday = this.calendarService.holidays.filter((d) => currentDay.equal(d.date, 'day'))[0];
+                    if (holiday) {
+                        holidayTitle = holiday.title;
+                    }
+                }
                 days.push({
                     date: currentDay,
                     isCurrentMonth: currentDay.monthOfYear === monthStart.monthOfYear,
                     isToday: currentDay.equal(today, 'day'),
-                    appointments: [],
-                    visibleAppointments: [],
-                    hiddenAppointments: [],
-                    overflowCount: 0,
+                    isHoliday,
+                    holidayTitle,
                 });
                 currentDay = currentDay.add('day', 1);
             }
-            // Return both days array and weeks needed
             return { days: days, weeksNeeded: actualWeeksToShow };
         });
         // --- Appointment Grouping ---
@@ -793,28 +1013,47 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
         });
         // --- 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();
+            const allOriginalAppointments = this.appointments();
+            if (initialDaysInfo.length === 0) {
+                return []; // Return empty array if no days to process
+            }
+            if (!allOriginalAppointments || allOriginalAppointments.length === 0) {
+                // If no appointments, map initialDaysInfo to the full structure with empty appointment arrays
+                return initialDaysInfo.map((dayInfo) => ({
+                    ...dayInfo,
+                    appointments: [],
+                    visibleAppointments: [],
+                    hiddenAppointments: [],
+                    overflowCount: 0,
+                }));
+            }
             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
+                const dayAsStartOfDay = dayInfo.date.startOf('day');
+                const segmentsForThisDay = [];
+                for (const appt of allOriginalAppointments) {
+                    const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, dayAsStartOfDay, 0, // viewStartHour for month cell context (full day)
+                    24, // viewEndHour for month cell context (full day)
+                    true);
+                    if (segment) {
+                        segmentsForThisDay.push(segment);
+                    }
+                }
+                const sortedSegments = orderBy(segmentsForThisDay, [
+                    (s) => (s.allDay ? 0 : 1), // Segments marked as allDay first
+                    (s) => s.originalStartDate.date.getTime(), // Then by original start time
+                    (s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(), // Then by duration (longer first)
+                    (s) => s.title?.toLowerCase() ?? '', // Then by title
+                ], ['asc', 'asc', 'desc', 'asc']);
+                const visibleAppointments = sortedSegments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
+                const hiddenAppointments = sortedSegments.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
+                const overflowCount = hiddenAppointments.length;
                 return {
-                    ...dayInfo, // Keep date, isCurrentMonth, isToday
-                    appointments: sortedAppointments, // Store all sorted appointments
-                    visibleAppointments: visibleAppointments,
-                    hiddenAppointments: hiddenAppointments, // **** STORE HIDDEN APPOINTMENTS ****
-                    overflowCount: overflowCount,
+                    ...dayInfo,
+                    appointments: sortedSegments,
+                    visibleAppointments,
+                    hiddenAppointments,
+                    overflowCount,
                 };
             });
         });
@@ -822,34 +1061,36 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
         this.gridTemplateRowsStyle = computed(() => {
             const { weeksNeeded } = this.calendarDaysInfo();
             if (!weeksNeeded || weeksNeeded <= 0) {
-                return `repeat(6, minmax(5rem, 1fr))`; // Default fallback
+                return `repeat(6, minmax(0, 1fr))`; // Fallback, ensures grid is at least somewhat sensible
             }
-            // Use the calculated number of weeks
-            return `repeat(${weeksNeeded}, minmax(5rem, 1fr))`;
+            return `repeat(${weeksNeeded}, minmax(0, 1fr))`; // Use 1fr for equal distribution
         });
     }
-    handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    handleAppointmentEvent(mouseEvent, appointmentSegmentOrOriginal) {
+        const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentSegmentOrOriginal);
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
     }
     handleSlotEvent(mouseEvent, date) {
-        const slotData = this.schedulerService.getSlotData(date, 'month');
+        const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'month'); // Ensure it's start of day
         if (slotData) {
             this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
         }
     }
     handleDrop(e, date) {
-        const slotData = this.schedulerService.getSlotData(date, 'month');
+        const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'month');
+        const droppedItem = e.dropped.dragData();
+        const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalAppointment,
         });
     }
     get isReadonly() {
         return this.readonly();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\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              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"appointment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable()\"\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\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\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"appointment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable()\"\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\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", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}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-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}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-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-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-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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}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-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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{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-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-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-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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 }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\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 -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-state-today]=\"dayCell.isToday\"\n        [class.ax-state-holiday]=\"dayCell.isHoliday\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n        [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n            {{ dayCell.date.dayOfMonth }}\n\n            @if (dayCell.holidayTitle) {\n              ( {{ dayCell.holidayTitle }} )\n            }\n          </span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Segments -->\n          @for (segment of dayCell.visibleAppointments; track segment.key + segment.originalStartDate) {\n            <div\n              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"segment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n              (click)=\"handleAppointmentEvent($event, segment)\"\n              (dblclick)=\"handleAppointmentEvent($event, segment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n              [title]=\"\n                segment.title +\n                (segment.allDay\n                  ? ''\n                  : ' (' +\n                    (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                    ' - ' +\n                    (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                    ')')\n              \"\n              [style.color]=\"segment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [class.all-day-segment]=\"segment.allDay\"\n              [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n              [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n              [style.background-color]=\"segment.backgroundColor\"\n            >\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n              @if (!segment.allDay) {\n                <span>\n                  {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  -\n                  {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              }\n            </div>\n          }\n          <!-- Overflow Badge and Popover -->\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n              <!-- Stop propagation to prevent slot click -->\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n              <div\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (segment of dayCell.hiddenAppointments; track segment.key + segment.originalStartDate) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"segment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n                    (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    [title]=\"\n                      segment.title +\n                      (segment.allDay\n                        ? ''\n                        : ' (' +\n                          (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                          ' - ' +\n                          (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                          ')')\n                    \"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [class.all-day-segment]=\"segment.allDay\"\n                    [style.color]=\"segment.textColor\"\n                    [style.background-color]=\"segment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n                    @if (!segment.allDay) {\n                      <span>\n                        {{\n                          segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                        -\n                        {{\n                          segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}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-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}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-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-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-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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{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-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-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-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}\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" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
@@ -861,7 +1102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AsyncPipe,
                         AXDragDirective,
                         AXDropZoneDirective,
-                    ], 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        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\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              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"appointment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable()\"\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\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\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"appointment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable()\"\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\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", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}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-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}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-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-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-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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}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-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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{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-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-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-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
+                        AXTooltipDirective,
+                    ], template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\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 -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-state-today]=\"dayCell.isToday\"\n        [class.ax-state-holiday]=\"dayCell.isHoliday\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n        [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n            {{ dayCell.date.dayOfMonth }}\n\n            @if (dayCell.holidayTitle) {\n              ( {{ dayCell.holidayTitle }} )\n            }\n          </span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Segments -->\n          @for (segment of dayCell.visibleAppointments; track segment.key + segment.originalStartDate) {\n            <div\n              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"segment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n              (click)=\"handleAppointmentEvent($event, segment)\"\n              (dblclick)=\"handleAppointmentEvent($event, segment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n              [title]=\"\n                segment.title +\n                (segment.allDay\n                  ? ''\n                  : ' (' +\n                    (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                    ' - ' +\n                    (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                    ')')\n              \"\n              [style.color]=\"segment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [class.all-day-segment]=\"segment.allDay\"\n              [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n              [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n              [style.background-color]=\"segment.backgroundColor\"\n            >\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n              @if (!segment.allDay) {\n                <span>\n                  {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  -\n                  {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              }\n            </div>\n          }\n          <!-- Overflow Badge and Popover -->\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n              <!-- Stop propagation to prevent slot click -->\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n              <div\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (segment of dayCell.hiddenAppointments; track segment.key + segment.originalStartDate) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"segment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n                    (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    [title]=\"\n                      segment.title +\n                      (segment.allDay\n                        ? ''\n                        : ' (' +\n                          (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                          ' - ' +\n                          (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                          ')')\n                    \"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [class.all-day-segment]=\"segment.allDay\"\n                    [style.color]=\"segment.textColor\"\n                    [style.background-color]=\"segment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n                    @if (!segment.allDay) {\n                      <span>\n                        {{\n                          segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                        -\n                        {{\n                          segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                      </span>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}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-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}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-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-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-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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}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-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{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-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-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-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}\n"] }]
         }], propDecorators: { isReadonly: [{
                 type: HostBinding,
                 args: ['class.ax-state-readonly']
@@ -879,7 +1121,30 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
         this.date = input.required();
         this.startHour = input.required();
         this.appointments = input([]);
-        this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
+        /**
+         * Processes original appointments to get segments relevant to this specific day and its viewable hours.
+         * Filters out original all-day events.
+         */
+        this.processedSegmentsForLayout = computed(() => {
+            const viewDate = this.date();
+            const allOriginalAppointments = this.appointments();
+            const viewConfigStartHour = this.startHour();
+            const viewConfigEndHour = this.endHour();
+            if (!viewDate || !allOriginalAppointments || allOriginalAppointments.length === 0) {
+                return [];
+            }
+            const segmentsOnThisDay = [];
+            for (const appt of allOriginalAppointments) {
+                if (appt.allDay) {
+                    continue;
+                }
+                const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, viewDate, viewConfigStartHour, viewConfigEndHour, false);
+                if (segment) {
+                    segmentsOnThisDay.push(segment);
+                }
+            }
+            return segmentsOnThisDay;
+        });
         // Internal outputs to be caught by parent AXSchedulerComponent
         this.slotClickedInternal = output();
         this.slotDblClickedInternal = output();
@@ -905,9 +1170,9 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
             let time = this.date();
             if (!time)
                 return [];
-            time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
+            time = time.set('hour', this.startHour()).startOf('hour');
             const hours = [time];
-            while (time.hour < this.endHour()) {
+            while (time.hour < this.endHour() - 1) {
                 time = time.add('hour', 1);
                 hours.push(time);
             }
@@ -916,71 +1181,58 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
         // --- Appointment Layout Calculation ---
         this.appointmentLayouts = computed(() => {
             const finalLayouts = [];
-            const startH = this.startHour();
-            const endH = this.endHour();
-            const appointmentsToLayout = this.singleDayAppointments(); // Use filtered appointments
-            if (typeof startH !== 'number' || typeof endH !== 'number' || appointmentsToLayout.length === 0) {
+            const viewConfigStartHour = this.startHour();
+            const viewConfigEndHour = this.endHour();
+            const appointmentsToLayout = this.processedSegmentsForLayout(); // USE SEGMENTS
+            if (typeof viewConfigStartHour !== 'number' ||
+                typeof viewConfigEndHour !== 'number' ||
+                appointmentsToLayout.length === 0) {
                 return finalLayouts;
             }
-            // Sort by start time first for processing order
-            const sortedAppointments = orderBy(appointmentsToLayout, [(a) => a.startDate.date.getTime(), (a) => a.endDate.date.getTime()], ['asc', 'desc']);
-            const rowEndTimes = []; // Stores end minute (relative to view start) of last appt in each row
-            for (const appointment of sortedAppointments) {
-                // Calculate horizontal percentage position and width using the service
-                const horiz = this.schedulerService.calculateTimelineLayout(appointment, startH, endH);
-                // Skip if appointment is outside the viewable hour range horizontally
-                if (!horiz)
-                    continue;
-                // Calculate start/end minutes relative to the start of the view hours for overlap check
-                const apptStartMinutes = Math.max(0, appointment.startDate.hour * 60 + appointment.startDate.minute - startH * 60);
-                // Ensure duration is calculated correctly based on potentially clamped start/end within view hours
-                const effectiveStartMinutes = Math.max(startH * 60, appointment.startDate.hour * 60 + appointment.startDate.minute);
-                const effectiveEndMinutes = Math.min(endH * 60, appointment.endDate.hour * 60 + appointment.endDate.minute);
-                const durationMinutes = Math.max(0, effectiveEndMinutes - effectiveStartMinutes);
-                const apptEndMinutes = apptStartMinutes + durationMinutes; // End minute relative to startHour
-                // Find the first available vertical row (rowIndex) for stacking
+            const sortedAppointments = orderBy(appointmentsToLayout, [(seg) => seg.startDate.date.getTime(), (seg) => seg.originalEndDate.date.getTime()], ['asc', 'desc']);
+            const rowEndTimes = [];
+            for (const segment of sortedAppointments) {
+                const horizLayout = this.schedulerService.calculateTimelineLayout(segment, // Pass the segment
+                viewConfigStartHour, viewConfigEndHour);
+                if (!horizLayout)
+                    continue; // Segment is outside the viewable hour range or invalid
+                // For overlap check, use the segment's start and end times
+                const segmentStartTime = segment.startDate;
+                const segmentEndTime = segment.endDate;
                 let assignedRowIndex = -1;
                 for (let i = 0; i < rowEndTimes.length; i++) {
-                    // If this appointment starts AFTER OR AT the time the row becomes free
-                    // Using >= allows appointments starting exactly when another ends to potentially share a row if desired.
-                    // Using > would force a new row if they touch exactly. Let's use >= for packing.
-                    if (apptStartMinutes >= rowEndTimes[i]) {
+                    // If this segment starts AFTER OR AT the time the row becomes free
+                    if (segmentStartTime.compare(rowEndTimes[i], 'minute') >= 0) {
                         assignedRowIndex = i;
                         break;
                     }
                 }
-                // If no available row found, add a new row
                 if (assignedRowIndex === -1) {
                     assignedRowIndex = rowEndTimes.length;
-                    rowEndTimes.push(apptEndMinutes); // Add end time for the new row
+                    rowEndTimes.push(segmentEndTime); // Add segment's end time for the new row
                 }
                 else {
-                    // Update the end time for the assigned row ONLY if this one ends later
-                    rowEndTimes[assignedRowIndex] = Math.max(rowEndTimes[assignedRowIndex], apptEndMinutes);
+                    // Update the end time for the assigned row with this segment's end time
+                    rowEndTimes[assignedRowIndex] = segmentEndTime;
                 }
-                // Height is directly the CSS variable
-                const layoutHeight = 'var(--ax-comp-scheduler-timeline-view-blocks-height)';
-                // Calculate layout styles
-                const layoutLeft = horiz.left;
-                // Apply the 1px gap by subtracting it from the width
-                const layoutWidth = `calc(${horiz.width} - ${this.GAP_PX}px)`;
-                // Calculate top using calc() with the CSS variable and the VERTICAL gap
-                const layoutTop = `calc(${assignedRowIndex} * (${layoutHeight} + ${this.GAP_PX}px))`;
+                const layoutHeight = 'var(--ax-comp-scheduler-timeline-view-blocks-height)'; // CSS variable for height
+                const layoutLeft = horizLayout.left;
+                const layoutWidth = `calc(${horizLayout.width} - ${this.GAP_PX}px)`; // Apply horizontal gap if items are side-by-side within a row (not typical for this stacking)
+                const layoutTop = `calc(${assignedRowIndex} * (${layoutHeight} + ${this.GAP_PX}px))`; // Vertical stacking with gap
                 finalLayouts.push({
-                    appointment: appointment, // Store original appointment data
+                    appointment: segment, // Store the segment data
                     layoutLeft,
                     layoutWidth,
                     layoutTop,
                     layoutHeight,
                 });
             }
-            // No second pass implemented here for simplicity, greedy approach used.
-            // If vertical packing needs further optimization, a second pass could be added.
             return finalLayouts;
         });
     }
-    handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    handleAppointmentEvent(mouseEvent, appointmentItem) {
+        const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentItem);
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
     }
     handleSlotEvent(mouseEvent, startDate) {
         const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
@@ -989,21 +1241,23 @@ class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
     }
     handleDrop(e, startDate) {
         const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
+        const droppedItem = e.dropped.dragData();
+        const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalAppointment,
         });
     }
     get isReadonly() {
         return this.readonly();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-header\">\n  @for (hour of hoursArray(); track hour.date.getTime()) {\n    <div class=\"ax-scheduler-timeline-header-hours\">\n      <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n    </div>\n  }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n  <div class=\"ax-scheduler-timeline-appointment-container\">\n    @for (layout of appointmentLayouts(); track layout.appointment.key) {\n      <div\n        axDrag\n        [dragCursor]=\"'grab'\"\n        [dragElementClone]=\"true\"\n        [dragDisabled]=\"!draggable()\"\n        [dragData]=\"layout.appointment\"\n        (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n        [title]=\"layout.appointment.title\"\n        [style.width]=\"layout.layoutWidth\"\n        [style.height]=\"layout.layoutHeight\"\n        class=\"ax-scheduler-timeline-appointment\"\n        [style.insetBlockStart]=\"layout.layoutTop\"\n        [style.color]=\"layout.appointment.textColor\"\n        [style.insetInlineStart]=\"layout.layoutLeft\"\n        [style.background-color]=\"layout.appointment.backgroundColor\"\n      >\n        <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</ax-title>\n        <ax-subtitle>\n          {{ layout.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n          {{ layout.appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n        </ax-subtitle>\n      </div>\n    }\n  </div>\n  <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, time)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-slot-cell\"\n        (click)=\"handleSlotEvent($event, time)\"\n        (dblclick)=\"handleSlotEvent($event, time)\"\n        (contextmenu)=\"handleSlotEvent($event, time)\"\n      ></div>\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-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-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;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-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-day-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-header\">\n  @for (hour of hoursArray(); track hour.date.getTime()) {\n    <div class=\"ax-scheduler-timeline-header-hours\">\n      <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n    </div>\n  }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n  <div class=\"ax-scheduler-timeline-appointment-container\">\n    @for (layout of appointmentLayouts(); track layout.appointment.key) {\n      <div\n        axDrag\n        [dragCursor]=\"'grab'\"\n        [dragElementClone]=\"true\"\n        [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n        [dragData]=\"layout.appointment\"\n        (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n        [title]=\"layout.appointment.title\"\n        [style.width]=\"layout.layoutWidth\"\n        [style.height]=\"layout.layoutHeight\"\n        class=\"ax-scheduler-timeline-appointment\"\n        [style.insetBlockStart]=\"layout.layoutTop\"\n        [style.color]=\"layout.appointment.textColor\"\n        [style.insetInlineStart]=\"layout.layoutLeft\"\n        [style.background-color]=\"layout.appointment.backgroundColor\"\n      >\n        <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</ax-title>\n        <ax-subtitle>\n          {{\n            layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n          }}\n          -\n          {{ layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n        </ax-subtitle>\n      </div>\n    }\n  </div>\n  <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, time)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-slot-cell\"\n        (click)=\"handleSlotEvent($event, time)\"\n        (dblclick)=\"handleSlotEvent($event, time)\"\n        (contextmenu)=\"handleSlotEvent($event, time)\"\n      ></div>\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-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-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;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-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-timeline-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe, AXDragDirective, AXDropZoneDirective], template: "<div class=\"ax-scheduler-timeline-header\">\n  @for (hour of hoursArray(); track hour.date.getTime()) {\n    <div class=\"ax-scheduler-timeline-header-hours\">\n      <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n    </div>\n  }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n  <div class=\"ax-scheduler-timeline-appointment-container\">\n    @for (layout of appointmentLayouts(); track layout.appointment.key) {\n      <div\n        axDrag\n        [dragCursor]=\"'grab'\"\n        [dragElementClone]=\"true\"\n        [dragDisabled]=\"!draggable()\"\n        [dragData]=\"layout.appointment\"\n        (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n        [title]=\"layout.appointment.title\"\n        [style.width]=\"layout.layoutWidth\"\n        [style.height]=\"layout.layoutHeight\"\n        class=\"ax-scheduler-timeline-appointment\"\n        [style.insetBlockStart]=\"layout.layoutTop\"\n        [style.color]=\"layout.appointment.textColor\"\n        [style.insetInlineStart]=\"layout.layoutLeft\"\n        [style.background-color]=\"layout.appointment.backgroundColor\"\n      >\n        <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</ax-title>\n        <ax-subtitle>\n          {{ layout.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n          {{ layout.appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n        </ax-subtitle>\n      </div>\n    }\n  </div>\n  <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, time)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-slot-cell\"\n        (click)=\"handleSlotEvent($event, time)\"\n        (dblclick)=\"handleSlotEvent($event, time)\"\n        (contextmenu)=\"handleSlotEvent($event, time)\"\n      ></div>\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-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-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;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-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
+            args: [{ selector: 'ax-scheduler-timeline-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe, AXDragDirective, AXDropZoneDirective], template: "<div class=\"ax-scheduler-timeline-header\">\n  @for (hour of hoursArray(); track hour.date.getTime()) {\n    <div class=\"ax-scheduler-timeline-header-hours\">\n      <span>{{ hour | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}</span>\n    </div>\n  }\n</div>\n\n<div class=\"ax-scheduler-timeline-content\">\n  <div class=\"ax-scheduler-timeline-appointment-container\">\n    @for (layout of appointmentLayouts(); track layout.appointment.key) {\n      <div\n        axDrag\n        [dragCursor]=\"'grab'\"\n        [dragElementClone]=\"true\"\n        [dragDisabled]=\"!draggable() || layout.appointment.readonly || readonly()\"\n        [dragData]=\"layout.appointment\"\n        (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n        [title]=\"layout.appointment.title\"\n        [style.width]=\"layout.layoutWidth\"\n        [style.height]=\"layout.layoutHeight\"\n        class=\"ax-scheduler-timeline-appointment\"\n        [style.insetBlockStart]=\"layout.layoutTop\"\n        [style.color]=\"layout.appointment.textColor\"\n        [style.insetInlineStart]=\"layout.layoutLeft\"\n        [style.background-color]=\"layout.appointment.backgroundColor\"\n      >\n        <ax-title class=\"ax-scheduler-truncate\">{{ layout.appointment.title }}</ax-title>\n        <ax-subtitle>\n          {{\n            layout.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n          }}\n          -\n          {{ layout.appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n        </ax-subtitle>\n      </div>\n    }\n  </div>\n  <div class=\"ax-scheduler-timeline-slot-row\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, time)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-slot-cell\"\n        (click)=\"handleSlotEvent($event, time)\"\n        (dblclick)=\"handleSlotEvent($event, time)\"\n        (contextmenu)=\"handleSlotEvent($event, time)\"\n      ></div>\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler-timeline-day-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-day-view .ax-scheduler-timeline-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-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours{position:relative;padding:.25rem .5rem;width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view .ax-scheduler-timeline-header .ax-scheduler-timeline-header-hours span{position:sticky;inset-inline-start:.5rem}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content{height:100%;position:relative}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{top:0;width:100%;height:100%;position:absolute}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;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-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row{height:100%;display:flex}ax-scheduler-timeline-day-view .ax-scheduler-timeline-content .ax-scheduler-timeline-slot-row .ax-scheduler-timeline-slot-cell{width:var(--ax-comp-scheduler-timeline-view-blocks-width);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{z-index:1;cursor:pointer}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell{z-index:0;cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-day-view:not(.ax-state-readonly) .ax-scheduler-timeline-slot-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
         }], propDecorators: { isReadonly: [{
                 type: HostBinding,
                 args: ['class.ax-state-readonly']
@@ -1018,34 +1272,54 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
         this.readonly = input(false);
         this.draggable = input(true);
         this.calendar = input();
-        this.endHour = input.required();
         this.date = input.required();
-        this.startHour = input.required();
         this.appointments = input([]);
-        this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
-        this.monthAppointments = computed(() => {
-            const mapped = this.appointments();
-            const current = this.date().startOf('month');
-            const daysCount = current.endOf('month').dayOfMonth;
-            return Array.from({ length: daysCount }, (_, i) => {
-                const dayStart = current.add('day', i).add('hour', this.startHour());
-                const dayEnd = dayStart.add('day', 1).add('hour', this.endHour() - this.startHour());
-                const appointmentsForDay = mapped.filter((appt) => !appt.allDay &&
-                    appt.singleDay &&
-                    appt.endDate.compare(dayStart, 'day') >= 0 &&
-                    appt.startDate.compare(dayEnd, 'day') < 0 &&
-                    appt.endDate.compare(dayStart, 'hour') >= 0 &&
-                    appt.startDate.compare(dayEnd, 'hour') < 0);
-                const visibleAppointments = appointmentsForDay.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
-                const hiddenAppointments = appointmentsForDay.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY, appointmentsForDay.length);
-                return {
-                    date: dayStart,
-                    visibleAppointments,
-                    hiddenAppointments,
+        this.processedDayData = computed(() => {
+            const allOriginalAppointments = this.appointments();
+            const monthStartDate = this.date().startOf('month');
+            const daysInMonth = monthStartDate.endOf('month').dayOfMonth;
+            if (!allOriginalAppointments) {
+                return Array.from({ length: daysInMonth }, (_, i) => {
+                    const dayDate = monthStartDate.add('day', i);
+                    return {
+                        date: dayDate,
+                        visibleAppointments: [],
+                        hiddenAppointments: [],
+                        moreCount: 0,
+                    };
+                });
+            }
+            const result = [];
+            for (let i = 0; i < daysInMonth; i++) {
+                const currentDayDate = monthStartDate.add('day', i).startOf('day'); // Ensure it's start of day
+                const segmentsForThisDay = [];
+                for (const appt of allOriginalAppointments) {
+                    // For Timeline Month View, each day is a row. We want segments for the full 24h of that day.
+                    // The view's startHour/endHour are NOT used to clip segments here,
+                    // as it's not a horizontal time scale *within* the day row.
+                    const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, currentDayDate, 0, 24, true);
+                    if (segment) {
+                        segmentsForThisDay.push(segment);
+                    }
+                }
+                // Sort segments: all-day first, then by segment start time (which is clipped to the day)
+                const sortedSegments = orderBy(segmentsForThisDay, [
+                    (s) => (s.allDay ? 0 : 1), // Segments marked as allDay first
+                    (s) => s.startDate.date.getTime(), // Segment's start time on this day
+                    (s) => s.endDate.date.getTime() - s.startDate.date.getTime(), // Segment's duration on this day
+                    (s) => s.title?.toLowerCase() ?? '',
+                ], ['asc', 'asc', 'desc', 'asc']);
+                const visibleAppointments = sortedSegments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
+                const hiddenAppointments = sortedSegments.slice(this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
+                result.push({
+                    date: currentDayDate,
+                    visibleAppointments: visibleAppointments,
+                    hiddenAppointments: hiddenAppointments,
                     moreCount: hiddenAppointments.length,
-                };
-            });
-            return [];
+                    holiday: this.isHoliday(currentDayDate),
+                });
+            }
+            return result;
         });
         // Internal outputs to be caught by parent AXSchedulerComponent
         this.slotClickedInternal = output();
@@ -1069,32 +1343,51 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
             },
         };
     }
-    handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    handleAppointmentEvent(mouseEvent, appointmentItem) {
+        const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentItem);
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
     }
     handleSlotEvent(mouseEvent, date) {
-        const slotData = this.schedulerService.getSlotData(date, 'timelineMonth');
-        if (slotData) {
+        // date is the specific day
+        const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'timelineMonth');
+        if (slotData)
             this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
-        }
     }
     handleDrop(e, date) {
-        const slotData = this.schedulerService.getSlotData(date, 'timelineMonth');
+        // date is the specific day
+        const slotData = this.schedulerService.getSlotData(date.startOf('day'), 'timelineMonth');
+        const droppedItem = e.dropped.dragData();
+        const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalAppointment,
         });
     }
     isToday(date) {
         const today = this.calendarService.create(new Date());
         return date.equal(today, 'day');
     }
+    isHoliday(date) {
+        const isHoliday = this.schedulerService.isHoliday(date);
+        if (isHoliday) {
+            const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
+            return {
+                state: 'holiday',
+                holiday,
+            };
+        }
+        const isWeekend = this.schedulerService.isWeekend(date, this.calendar());
+        if (isWeekend) {
+            return { state: 'weekend' };
+        }
+        return { state: 'none' };
+    }
     get isReadonly() {
         return this.readonly();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n  @for (appt of monthAppointments(); track appt.visibleAppointments) {\n    <div>\n      <div class=\"ax-scheduler-timeline-header\">\n        <div class=\"ax-scheduler-month-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n          <span class=\"ax-scheduler-month-header-date-day-char\">\n            {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          </span>\n          <span class=\"ax-scheduler-month-header-date-day-num\">\n            {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </div>\n      </div>\n\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, appt.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-content\"\n        (click)=\"handleSlotEvent($event, appt.date)\"\n        (dblclick)=\"handleSlotEvent($event, appt.date)\"\n        (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n      >\n        <div class=\"ax-scheduler-timeline-appointment-container\">\n          @for (appointment of appt.visibleAppointments; track appointment.key) {\n            <div\n              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"appointment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable()\"\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-timeline-appointment\"\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          @if (appt.moreCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: appt.moreCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (appointment of appt.hiddenAppointments; track appointment.key) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"appointment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable()\"\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [style.color]=\"appointment.textColor\"\n                    class=\"ax-scheduler-popover-appointment\"\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    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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: AXFormatPipe, name: "format" }, { 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: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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 } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n  @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n    <div>\n      <div class=\"ax-scheduler-timeline-header\">\n        <div\n          class=\"ax-scheduler-month-header-date-day\"\n          [class.ax-state-today]=\"isToday(dayData.date)\"\n          [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n        >\n          <span\n            class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n            [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n          >\n            {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n            @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n              ( {{ dayData.holiday.holiday.title }} )\n            }\n          </span>\n          <span class=\"ax-scheduler-month-header-date-day-num\">\n            {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </div>\n      </div>\n\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, dayData.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-content\"\n        (click)=\"handleSlotEvent($event, dayData.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n      >\n        <div class=\"ax-scheduler-timeline-appointment-container\">\n          @for (segment of dayData.visibleAppointments; track segment.key + segment.originalStartDate.date.getTime()) {\n            <div\n              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"segment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n              (click)=\"handleAppointmentEvent($event, segment)\"\n              (dblclick)=\"handleAppointmentEvent($event, segment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n              [title]=\"\n                segment.allDay\n                  ? segment.title\n                  : segment.title +\n                    ' (' +\n                    (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                    ' - ' +\n                    (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                    ')'\n              \"\n              [style.color]=\"segment.textColor\"\n              class=\"ax-scheduler-timeline-appointment\"\n              [class.all-day-segment]=\"segment.allDay\"\n              [style.background-color]=\"segment.backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n              <!-- Display segment's start/end times if not allDay for this segment -->\n              @if (!segment.allDay) {\n                <ax-subtitle>\n                  {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n                  {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </ax-subtitle>\n              }\n            </div>\n          }\n          @if (dayData.moreCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n              +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n              <div\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (\n                  segment of dayData.hiddenAppointments;\n                  track segment.key + segment.originalStartDate.date.getTime()\n                ) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"segment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n                    (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    [title]=\"\n                      segment.allDay\n                        ? segment.title\n                        : segment.title +\n                          ' (' +\n                          (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                          ' - ' +\n                          (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                          ')'\n                    \"\n                    [style.color]=\"segment.textColor\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [class.all-day-segment]=\"segment.allDay\"\n                    [style.background-color]=\"segment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n                    @if (!segment.allDay) {\n                      <ax-subtitle>\n                        {{\n                          segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                        -\n                        {{\n                          segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                      </ax-subtitle>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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: AXFormatPipe, name: "format" }, { 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: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
             type: Component,
@@ -1106,7 +1399,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXPopoverComponent,
                         AXDragDirective,
                         AXDropZoneDirective,
-                    ], template: "<div class=\"ax-scheduler-timeline-month-container\">\n  @for (appt of monthAppointments(); track appt.visibleAppointments) {\n    <div>\n      <div class=\"ax-scheduler-timeline-header\">\n        <div class=\"ax-scheduler-month-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n          <span class=\"ax-scheduler-month-header-date-day-char\">\n            {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          </span>\n          <span class=\"ax-scheduler-month-header-date-day-num\">\n            {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </div>\n      </div>\n\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, appt.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-content\"\n        (click)=\"handleSlotEvent($event, appt.date)\"\n        (dblclick)=\"handleSlotEvent($event, appt.date)\"\n        (contextmenu)=\"handleSlotEvent($event, appt.date)\"\n      >\n        <div class=\"ax-scheduler-timeline-appointment-container\">\n          @for (appointment of appt.visibleAppointments; track appointment.key) {\n            <div\n              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"appointment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable()\"\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-timeline-appointment\"\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          @if (appt.moreCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: appt.moreCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (appointment of appt.hiddenAppointments; track appointment.key) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"appointment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable()\"\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [style.color]=\"appointment.textColor\"\n                    class=\"ax-scheduler-popover-appointment\"\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    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
+                        AXTooltipDirective,
+                    ], template: "<div class=\"ax-scheduler-timeline-month-container\">\n  @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n    <div>\n      <div class=\"ax-scheduler-timeline-header\">\n        <div\n          class=\"ax-scheduler-month-header-date-day\"\n          [class.ax-state-today]=\"isToday(dayData.date)\"\n          [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n        >\n          <span\n            class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n            [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n          >\n            {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n            @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n              ( {{ dayData.holiday.holiday.title }} )\n            }\n          </span>\n          <span class=\"ax-scheduler-month-header-date-day-num\">\n            {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </div>\n      </div>\n\n      <div\n        axDropZone\n        #zone=\"axDropZone\"\n        (onElementDrop)=\"handleDrop($event, dayData.date)\"\n        [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n        class=\"ax-scheduler-timeline-content\"\n        (click)=\"handleSlotEvent($event, dayData.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n      >\n        <div class=\"ax-scheduler-timeline-appointment-container\">\n          @for (segment of dayData.visibleAppointments; track segment.key + segment.originalStartDate.date.getTime()) {\n            <div\n              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragData]=\"segment\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n              (click)=\"handleAppointmentEvent($event, segment)\"\n              (dblclick)=\"handleAppointmentEvent($event, segment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n              [title]=\"\n                segment.allDay\n                  ? segment.title\n                  : segment.title +\n                    ' (' +\n                    (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                    ' - ' +\n                    (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                    ')'\n              \"\n              [style.color]=\"segment.textColor\"\n              class=\"ax-scheduler-timeline-appointment\"\n              [class.all-day-segment]=\"segment.allDay\"\n              [style.background-color]=\"segment.backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n              <!-- Display segment's start/end times if not allDay for this segment -->\n              @if (!segment.allDay) {\n                <ax-subtitle>\n                  {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n                  {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </ax-subtitle>\n              }\n            </div>\n          }\n          @if (dayData.moreCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n              +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n              <div\n                [class.ax-state-readonly]=\"readonly()\"\n                class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n              >\n                @for (\n                  segment of dayData.hiddenAppointments;\n                  track segment.key + segment.originalStartDate.date.getTime()\n                ) {\n                  <div\n                    axDrag\n                    [dragCursor]=\"'grab'\"\n                    [dragData]=\"segment\"\n                    [dragElementClone]=\"true\"\n                    [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n                    (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n                    [title]=\"\n                      segment.allDay\n                        ? segment.title\n                        : segment.title +\n                          ' (' +\n                          (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n                          ' - ' +\n                          (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n                          ')'\n                    \"\n                    [style.color]=\"segment.textColor\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [class.all-day-segment]=\"segment.allDay\"\n                    [style.background-color]=\"segment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n                    @if (!segment.allDay) {\n                      <ax-subtitle>\n                        {{\n                          segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                        -\n                        {{\n                          segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                        }}\n                      </ax-subtitle>\n                    }\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .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-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
         }], propDecorators: { isReadonly: [{
                 type: HostBinding,
                 args: ['class.ax-state-readonly']
@@ -1116,6 +1410,7 @@ class AXSchedulerTimelineMultiDayViewComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.calendarService = inject(AXCalendarService);
+        this.schedulerService = inject(AXSchedulerService);
         this.daysCount = input(7);
         this.readonly = input(false);
         this.draggable = input(true);
@@ -1124,25 +1419,31 @@ class AXSchedulerTimelineMultiDayViewComponent extends MXBaseComponent {
         this.date = input.required();
         this.startHour = input.required();
         this.appointments = input([]);
-        this.multiDayAppointments = computed(() => {
-            const mapped = this.appointments();
-            const current = this.date();
-            const daysCount = this.daysCount();
-            return Array.from({ length: daysCount }, (_, i) => {
-                const dayStart = current.add('day', i).add('hour', this.startHour());
-                const dayEnd = dayStart.add('day', 1).add('hour', this.endHour() - this.startHour());
-                const appointmentsForDay = mapped.filter((appt) => !appt.allDay &&
-                    appt.singleDay &&
-                    appt.endDate.compare(dayStart, 'day') >= 0 &&
-                    appt.startDate.compare(dayEnd, 'day') < 0 &&
-                    appt.endDate.compare(dayStart, 'hour') >= 0 &&
-                    appt.startDate.compare(dayEnd, 'hour') < 0);
-                return {
-                    appointments: appointmentsForDay,
-                    date: dayStart,
-                };
-            });
-            return [];
+        this.daysDataForTimelineViews = computed(() => {
+            const allOriginalAppointments = this.appointments();
+            const multiViewStartDate = this.date();
+            const numberOfDays = this.daysCount();
+            if (!multiViewStartDate || !allOriginalAppointments) {
+                return [];
+            }
+            const result = [];
+            for (let i = 0; i < numberOfDays; i++) {
+                const currentDayDate = multiViewStartDate.add('day', i);
+                const currentDayStart = currentDayDate.startOf('day');
+                const currentDayEnd = currentDayDate.endOf('day'); // Use full day for overlap check
+                const appointmentsOverlappingThisDay = allOriginalAppointments.filter((appt) => {
+                    if (appt.allDay) {
+                        return false;
+                    }
+                    return appt.endDate.compare(currentDayStart, 'day') >= 0 && appt.startDate.compare(currentDayEnd, 'day') <= 0;
+                });
+                result.push({
+                    date: currentDayDate,
+                    holiday: this.isHoliday(currentDayDate),
+                    originalAppointmentsForThisDay: appointmentsOverlappingThisDay,
+                });
+            }
+            return result;
         });
         this.slotClickedInternal = output();
         this.slotDblClickedInternal = output();
@@ -1156,12 +1457,27 @@ class AXSchedulerTimelineMultiDayViewComponent extends MXBaseComponent {
         const today = this.calendarService.create(new Date());
         return date.equal(today, 'day');
     }
+    isHoliday(date) {
+        const isHoliday = this.schedulerService.isHoliday(date);
+        if (isHoliday) {
+            const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
+            return {
+                state: 'holiday',
+                holiday,
+            };
+        }
+        const isWeekend = this.schedulerService.isWeekend(date, this.calendar());
+        if (isWeekend) {
+            return { state: 'weekend' };
+        }
+        return { state: 'none' };
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineMultiDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-multi-day-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n  @for (appt of multiDayAppointments(); track appt.appointments) {\n    <div>\n      <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n        <span class=\"ax-scheduler-week-header-date-day-char\">\n          {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n        </span>\n        <span class=\"ax-scheduler-week-header-date-day-num\">\n          {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <ax-scheduler-timeline-day-view\n        [date]=\"appt.date\"\n        [endHour]=\"endHour()\"\n        [readonly]=\"readonly()\"\n        [startHour]=\"startHour()\"\n        [draggable]=\"draggable()\"\n        [appointments]=\"appt.appointments\"\n        (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n        (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n        (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n        (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n        (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n        (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n        (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n      >\n      </ax-scheduler-timeline-day-view>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"], dependencies: [{ kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerTimelineMultiDayViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-multi-day-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n  @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n    <div class=\"ax-scheduler-timeline-multi-day-column\">\n      <div\n        class=\"ax-scheduler-week-header-date-day\"\n        [class.ax-state-today]=\"isToday(daySlot.date)\"\n        [class.ax-state-holiday]=\"daySlot.holiday.state !== 'none'\"\n      >\n        <span\n          class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n          [axTooltip]=\"daySlot.holiday?.holiday?.title ?? ''\"\n        >\n          {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n            ( {{ daySlot.holiday.holiday.title }} )\n          }\n        </span>\n        <span class=\"ax-scheduler-week-header-date-day-num\">\n          {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <ax-scheduler-timeline-day-view\n        [date]=\"daySlot.date\"\n        [endHour]=\"endHour()\"\n        [readonly]=\"readonly()\"\n        [startHour]=\"startHour()\"\n        [draggable]=\"draggable()\"\n        [appointments]=\"daySlot.originalAppointmentsForThisDay\"\n        (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n        (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n        (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n        (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n        (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n        (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n        (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n      >\n      </ax-scheduler-timeline-day-view>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"], dependencies: [{ kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-timeline-multi-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerTimelineDayViewComponent, AsyncPipe, AXFormatPipe], template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n  @for (appt of multiDayAppointments(); track appt.appointments) {\n    <div>\n      <div class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(appt.date)\">\n        <span class=\"ax-scheduler-week-header-date-day-char\">\n          {{ appt.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n        </span>\n        <span class=\"ax-scheduler-week-header-date-day-num\">\n          {{ appt.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <ax-scheduler-timeline-day-view\n        [date]=\"appt.date\"\n        [endHour]=\"endHour()\"\n        [readonly]=\"readonly()\"\n        [startHour]=\"startHour()\"\n        [draggable]=\"draggable()\"\n        [appointments]=\"appt.appointments\"\n        (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n        (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n        (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n        (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n        (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n        (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n        (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n      >\n      </ax-scheduler-timeline-day-view>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"] }]
+            args: [{ selector: 'ax-scheduler-timeline-multi-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXSchedulerTimelineDayViewComponent, AsyncPipe, AXFormatPipe, AXTooltipDirective], template: "<div class=\"ax-scheduler-timeline-day-view-container\">\n  @for (daySlot of daysDataForTimelineViews(); track daySlot.date.date.getTime()) {\n    <div class=\"ax-scheduler-timeline-multi-day-column\">\n      <div\n        class=\"ax-scheduler-week-header-date-day\"\n        [class.ax-state-today]=\"isToday(daySlot.date)\"\n        [class.ax-state-holiday]=\"daySlot.holiday.state !== 'none'\"\n      >\n        <span\n          class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n          [axTooltip]=\"daySlot.holiday?.holiday?.title ?? ''\"\n        >\n          {{ daySlot.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          @if (daySlot.holiday.state === 'holiday' && daySlot.holiday.holiday.title) {\n            ( {{ daySlot.holiday.holiday.title }} )\n          }\n        </span>\n        <span class=\"ax-scheduler-week-header-date-day-num\">\n          {{ daySlot.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n        </span>\n      </div>\n      <ax-scheduler-timeline-day-view\n        [date]=\"daySlot.date\"\n        [endHour]=\"endHour()\"\n        [readonly]=\"readonly()\"\n        [startHour]=\"startHour()\"\n        [draggable]=\"draggable()\"\n        [appointments]=\"daySlot.originalAppointmentsForThisDay\"\n        (slotClickedInternal)=\"slotClickedInternal.emit($event)\"\n        (slotDblClickedInternal)=\"slotDblClickedInternal.emit($event)\"\n        (slotRightClickedInternal)=\"slotRightClickedInternal.emit($event)\"\n        (onAppointmentDropInternal)=\"onAppointmentDropInternal.emit($event)\"\n        (appointmentClickedInternal)=\"appointmentClickedInternal.emit($event)\"\n        (appointmentDblClickedInternal)=\"appointmentDblClickedInternal.emit($event)\"\n        (appointmentRightClickedInternal)=\"appointmentRightClickedInternal.emit($event)\"\n      >\n      </ax-scheduler-timeline-day-view>\n    </div>\n  }\n</div>\n", styles: ["ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container{height:100%;display:flex;flex-direction:row}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view .ax-scheduler-timeline-day-view-container .ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-multi-day-view ax-scheduler-timeline-day-view{height:calc(100% - 4rem)}\n"] }]
         }] });
 
 class AXSchedulerWeekViewComponent extends MXBaseComponent {
@@ -1177,8 +1493,57 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
         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) ?? []);
+        /**
+         * Processes all original appointments and generates day-specific segments for the entire week.
+         * Each segment represents the visible part of an appointment on a particular day.
+         * The segment's 'allDay' flag indicates if it should be in the all-day slot or timed grid for that day.
+         */
+        this.processedAppointmentsForLayout = computed(() => {
+            const viewDays = this.daysArray().map((e) => e.date); // Array of AXDateTime for each day in the week
+            const allOriginalAppointments = this.appointments(); // Raw appointments from input
+            const viewConfigStartHour = this.startHour(); // Configured start hour for the timed grid
+            const viewConfigEndHour = this.endHour(); // Configured end hour for the timed grid
+            if (!viewDays || viewDays.length === 0 || !allOriginalAppointments || allOriginalAppointments.length === 0) {
+                return [];
+            }
+            const allSegmentsInView = [];
+            for (const day of viewDays) {
+                // For each day in the week
+                const dayAsStartOfDay = day.startOf('day'); // Use startOf('day') for consistent cache key if AXDateTime interns
+                for (const appt of allOriginalAppointments) {
+                    // Determine segmentation boundaries for this specific 'day':
+                    // - If original appt is allDay, segment across the full 0-24h of 'day'.
+                    //   The service method will ensure segment.allDay is true.
+                    // - If original appt is timed, segment across viewConfigStartHour-viewConfigEndHour.
+                    //   The service method will set segment.allDay=true if this timed segment fills that window.
+                    const effectiveSegmentStartHour = appt.allDay ? 0 : viewConfigStartHour;
+                    const effectiveSegmentEndHour = appt.allDay ? 24 : viewConfigEndHour;
+                    const segment = this.schedulerService.getClonedAppointmentSegmentOnDay(appt, dayAsStartOfDay, // Pass the AXDateTime object for the current day in loop
+                    effectiveSegmentStartHour, effectiveSegmentEndHour);
+                    if (segment) {
+                        allSegmentsInView.push(segment);
+                    }
+                }
+            }
+            // Deduplicate segments. A segment is unique by its original key and its specific start/end on a day.
+            // The service method already produces day-specific start/end times.
+            const uniqueSegmentsMap = new Map();
+            allSegmentsInView.forEach((seg) => {
+                // Create a unique key for the segment based on original appt key and segment's own date range
+                const mapKey = `${seg.key}-${seg.startDate.format('YYYYMMDDHHmmssSSS')}-${seg.endDate.format('YYYYMMDDHHmmssSSS')}`;
+                if (!uniqueSegmentsMap.has(mapKey)) {
+                    uniqueSegmentsMap.set(mapKey, seg);
+                }
+            });
+            return Array.from(uniqueSegmentsMap.values());
+        });
+        /**
+         * Segments that are to be displayed in the timed grid area of the week view.
+         * These are segments from processedAppointmentsForLayout where segment.allDay is false.
+         */
+        this.timedGridSegments = computed(() => {
+            return this.processedAppointmentsForLayout()?.filter((segment) => !segment.allDay) ?? [];
+        });
         // Internal outputs to be caught by parent AXSchedulerComponent
         this.slotClickedInternal = output();
         this.slotDblClickedInternal = output();
@@ -1204,9 +1569,9 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             let time = this.date();
             if (!time)
                 return [];
-            time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
+            time = time.set('hour', this.startHour()).startOf('hour');
             const hours = [time];
-            while (time.hour < this.endHour()) {
+            while (time.hour < this.endHour() - 1) {
                 time = time.add('hour', 1);
                 hours.push(time);
             }
@@ -1216,9 +1581,10 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             const time = this.date();
             if (!time)
                 return [];
-            const days = [time];
+            const days = [{ date: time, holiday: this.isHoliday(time) }];
             for (let index = 1; index <= 6; index++) {
-                days.push(time.add('day', index));
+                const date = time.add('day', index);
+                days.push({ date, holiday: this.isHoliday(date) });
             }
             return days;
         });
@@ -1230,20 +1596,24 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             return Math.max(0, (endH - startH) * (60 / 30));
         });
         this.appointmentsByStartBlock = computed(() => {
-            const viewDate = this.date();
+            const viewDate = this.date(); // This should be the start date of the week
             const startH = this.startHour();
             const endH = this.endHour();
             if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
                 return {};
-            return this.schedulerService.calculateWeekViewAppointmentsByStartBlock(this.singleDayAppointments(), viewDate, startH, endH);
+            // Pass the timedGridSegments to the service method
+            return this.schedulerService.calculateWeekViewAppointmentsByStartBlock(this.timedGridSegments(), // CHANGED from singleDayAppointments
+            viewDate, startH, endH);
         });
         this.activeAppointmentsInBlock = computed(() => {
-            const viewDate = this.date();
+            const viewDate = this.date(); // Start date of the week
             const startH = this.startHour();
             const endH = this.endHour();
             if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
                 return {};
-            return this.schedulerService.calculateActiveAppointmentsInBlock(this.singleDayAppointments(), viewDate, startH, endH, 7);
+            // Pass the timedGridSegments to the service method
+            return this.schedulerService.calculateActiveAppointmentsInBlock(this.timedGridSegments(), // CHANGED from singleDayAppointments
+            viewDate, startH, endH, 7);
         });
         this.visibleAppointmentsLayout = computed(() => {
             const layouts = [];
@@ -1367,27 +1737,29 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             }
             return badges;
         });
+        /**
+         * Structures all-day (or "becomes all-day") segments for rendering in the all-day slots for each day of the week.
+         */
         this.allDayAppointmentsPerDay = computed(() => {
-            const days = this.daysArray();
-            const allDayAppointments = this.allDayAppointments(); // Use renamed type if needed
+            const daysInWeek = this.daysArray().map((e) => e.date); // AXDateTime objects for each day in the week
+            const allSegmentsInView = this.processedAppointmentsForLayout(); // All processed segments
             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());
+            if (!daysInWeek || daysInWeek.length === 0)
+                return result;
+            daysInWeek.forEach((dayDate) => {
+                const currentDayStart = dayDate.startOf('day'); // For accurate day comparison
+                // Filter segments that are marked as 'allDay' AND belong to the current 'dayDate'
+                const allDaySegmentsForThisDay = allSegmentsInView.filter((segment) => segment.allDay && segment.startDate.startOf('day').equal(currentDayStart, 'day'));
+                // Sort these segments for consistent display
+                // Primarily by original start time, then by duration of original appointment, then title
+                const sortedAppointmentsForThisDay = orderBy(allDaySegmentsForThisDay, [
+                    (s) => s.originalStartDate.date.getTime(),
+                    (s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(),
+                    (s) => s.title?.toLowerCase() ?? '',
+                ], ['asc', 'desc', 'asc']);
                 result.push({
-                    day: day, // Include the AXDateTime object for the day
-                    appointments: appointmentsForThisDay,
+                    day: dayDate, // The AXDateTime for this day column
+                    appointments: sortedAppointmentsForThisDay, // Array of segments for the all-day slot
                 });
             });
             return result;
@@ -1446,8 +1818,10 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             return badgesInfo;
         });
     }
-    handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    handleAppointmentEvent(mouseEvent, appointmentSegment) {
+        // 'appointmentSegment' here is the segment that was interacted with
+        const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentSegment);
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment: originalAppointment }, this.eventOutputMap, 'appointment');
     }
     handleSingleSlotEvent(mouseEvent, hour, day, minuteIndex) {
         const startDate = day.set('hour', hour.hour).set('minute', minuteIndex * 30);
@@ -1466,30 +1840,49 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
         const endDate = day.endOf('day');
         const startDate = day.startOf('day');
         const slotData = { startDate, endDate, view: 'week' };
+        const droppedItem = e.dropped.dragData();
+        const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalAppointment,
         });
     }
     handleSingleDayDrop(e, hour, day, minuteIndex) {
         const startDate = day.set('hour', hour.hour).set('minute', minuteIndex * 30);
         const slotData = this.schedulerService.getSlotData(startDate, 'week');
+        const droppedItem = e.dropped.dragData();
+        const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
         this.onAppointmentDropInternal.emit({
             event: e,
             slot: slotData,
-            appointment: e.dropped.dragData(),
+            appointment: originalAppointment,
         });
     }
     isToday(date) {
         const today = this.calendarService.create(new Date());
         return date.equal(today, 'day');
     }
+    isHoliday(date) {
+        const isHoliday = this.schedulerService.isHoliday(date);
+        if (isHoliday) {
+            const holiday = this.calendarService.holidays.filter((d) => date.equal(d.date, 'day'))[0];
+            return {
+                state: 'holiday',
+                holiday,
+            };
+        }
+        const isWeekend = this.schedulerService.isWeekend(date, this.calendar());
+        if (isWeekend) {
+            return { state: 'weekend' };
+        }
+        return { state: 'none' };
+    }
     get isReadonly() {
         return this.readonly();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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 class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(day)\">\n          <span class=\"ax-scheduler-week-header-date-day-char\">\n            {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          </span>\n          <span class=\"ax-scheduler-week-header-date-day-num\">\n            {{ day | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </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          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\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              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable()\"\n              [dragData]=\"slotData.appointments[0]\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      axDrag\n                      [dragCursor]=\"'grab'\"\n                      [dragData]=\"appointment\"\n                      [dragElementClone]=\"true\"\n                      [dragDisabled]=\"!draggable()\"\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\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 (appt of visibleAppointmentsLayout(); track appt.appointment.key) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable()\"\n          [dragData]=\"appt.appointment\"\n          (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n          [title]=\"appt.appointment.title\"\n          [style.height]=\"appt.layoutHeight\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.color]=\"appt.appointment.textColor\"\n          [style.inset-block-start]=\"appt.layoutTop\"\n          [style.inset-inline-start]=\"appt.layoutLeft\"\n          [style.background-color]=\"appt.appointment.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{ appt.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appt.appointment.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          style=\"position: absolute\"\n          class=\"ax-scheduler-badge-wrapper\"\n          [style.inset-block-start]=\"badge.badgeTop\"\n          [style.inset-inline-start]=\"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 ax-scheduler-popover\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [style.color]=\"appointment.textColor\"\n                  class=\"ax-scheduler-popover-appointment\"\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                axDropZone\n                #zone=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day, 0)\"\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                axDropZone\n                #zone2=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day, 1)\"\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", styles: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}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-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-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-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-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}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-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{font-weight:300}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-weight:500;font-size:1.25rem}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-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-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;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-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}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-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-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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-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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, 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", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, 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.date.getTime()) {\n        <div\n          [class.ax-state-today]=\"isToday(day.date)\"\n          class=\"ax-scheduler-week-header-date-day\"\n          [class.ax-state-holiday]=\"day.holiday.state !== 'none'\"\n        >\n          <span\n            class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n            [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n          >\n            {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n            @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n              ( {{ day.holiday.holiday.title }} )\n            }\n          </span>\n          <span class=\"ax-scheduler-week-header-date-day-num\">\n            {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </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          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\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              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n              [dragData]=\"slotData.appointments[0]\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      axDrag\n                      [dragCursor]=\"'grab'\"\n                      [dragData]=\"appointment\"\n                      [dragElementClone]=\"true\"\n                      [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\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 (appt of visibleAppointmentsLayout(); track appt.appointment.key) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n          [dragData]=\"appt.appointment\"\n          (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n          [title]=\"appt.appointment.title\"\n          [style.height]=\"appt.layoutHeight\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.color]=\"appt.appointment.textColor\"\n          [style.inset-block-start]=\"appt.layoutTop\"\n          [style.inset-inline-start]=\"appt.layoutLeft\"\n          [style.background-color]=\"appt.appointment.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{\n              appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n            }}\n            -\n            {{ appt.appointment.originalEndDate | 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          style=\"position: absolute\"\n          class=\"ax-scheduler-badge-wrapper\"\n          [style.inset-block-start]=\"badge.badgeTop\"\n          [style.inset-inline-start]=\"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 ax-scheduler-popover\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [style.color]=\"appointment.textColor\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                  <ax-subtitle>\n                    {{\n                      appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                    }}\n                    -\n                    {{\n                      appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                    }}\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.date.getTime()) {\n              <td\n                axDropZone\n                #zone=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n                (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.date.getTime()) {\n              <td\n                axDropZone\n                #zone2=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n                (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}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-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-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-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-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}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-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{gap:.25rem;display:grid;align-items:center;padding-inline:.5rem;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-weight:500;font-size:1.25rem}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-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-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;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-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}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-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-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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-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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\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" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
             type: Component,
@@ -1501,7 +1894,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXFormatPipe,
                         AXDragDirective,
                         AXDropZoneDirective,
-                    ], 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 class=\"ax-scheduler-week-header-date-day\" [class.ax-today]=\"isToday(day)\">\n          <span class=\"ax-scheduler-week-header-date-day-char\">\n            {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n          </span>\n          <span class=\"ax-scheduler-week-header-date-day-num\">\n            {{ day | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </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          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\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              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable()\"\n              [dragData]=\"slotData.appointments[0]\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      axDrag\n                      [dragCursor]=\"'grab'\"\n                      [dragData]=\"appointment\"\n                      [dragElementClone]=\"true\"\n                      [dragDisabled]=\"!draggable()\"\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\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 (appt of visibleAppointmentsLayout(); track appt.appointment.key) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable()\"\n          [dragData]=\"appt.appointment\"\n          (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n          [title]=\"appt.appointment.title\"\n          [style.height]=\"appt.layoutHeight\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.color]=\"appt.appointment.textColor\"\n          [style.inset-block-start]=\"appt.layoutTop\"\n          [style.inset-inline-start]=\"appt.layoutLeft\"\n          [style.background-color]=\"appt.appointment.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{ appt.appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appt.appointment.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          style=\"position: absolute\"\n          class=\"ax-scheduler-badge-wrapper\"\n          [style.inset-block-start]=\"badge.badgeTop\"\n          [style.inset-inline-start]=\"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 ax-scheduler-popover\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [style.color]=\"appointment.textColor\"\n                  class=\"ax-scheduler-popover-appointment\"\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                axDropZone\n                #zone=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day, 0)\"\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                axDropZone\n                #zone2=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day, 1)\"\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", styles: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}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-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-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-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-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}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-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{font-weight:300}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-weight:500;font-size:1.25rem}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-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-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;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-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}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-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-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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-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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
+                        AXTooltipDirective,
+                    ], 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.date.getTime()) {\n        <div\n          [class.ax-state-today]=\"isToday(day.date)\"\n          class=\"ax-scheduler-week-header-date-day\"\n          [class.ax-state-holiday]=\"day.holiday.state !== 'none'\"\n        >\n          <span\n            class=\"ax-scheduler-week-header-date-day-char ax-scheduler-truncate\"\n            [axTooltip]=\"day.holiday?.holiday?.title ?? ''\"\n          >\n            {{ day.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n            @if (day.holiday.state === 'holiday' && day.holiday.holiday.title) {\n              ( {{ day.holiday.holiday.title }} )\n            }\n          </span>\n          <span class=\"ax-scheduler-week-header-date-day-num\">\n            {{ day.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n          </span>\n        </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          axDropZone\n          #zone2=\"axDropZone\"\n          [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n          (onElementDrop)=\"handleAllDayDrop($event, slotData.day)\"\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              axDrag\n              [dragCursor]=\"'grab'\"\n              [dragElementClone]=\"true\"\n              [dragDisabled]=\"!draggable() || slotData.appointments[0].readonly || readonly()\"\n              [dragData]=\"slotData.appointments[0]\"\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 ax-scheduler-popover\" [class.ax-state-readonly]=\"readonly()\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      axDrag\n                      [dragCursor]=\"'grab'\"\n                      [dragData]=\"appointment\"\n                      [dragElementClone]=\"true\"\n                      [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\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 (appt of visibleAppointmentsLayout(); track appt.appointment.key) {\n        <div\n          axDrag\n          [dragCursor]=\"'grab'\"\n          [dragElementClone]=\"true\"\n          [dragDisabled]=\"!draggable() || appt.appointment.readonly || readonly()\"\n          [dragData]=\"appt.appointment\"\n          (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n          [title]=\"appt.appointment.title\"\n          [style.height]=\"appt.layoutHeight\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.color]=\"appt.appointment.textColor\"\n          [style.inset-block-start]=\"appt.layoutTop\"\n          [style.inset-inline-start]=\"appt.layoutLeft\"\n          [style.background-color]=\"appt.appointment.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appt.appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{\n              appt.appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n            }}\n            -\n            {{ appt.appointment.originalEndDate | 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          style=\"position: absolute\"\n          class=\"ax-scheduler-badge-wrapper\"\n          [style.inset-block-start]=\"badge.badgeTop\"\n          [style.inset-inline-start]=\"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 ax-scheduler-popover\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  axDrag\n                  [dragCursor]=\"'grab'\"\n                  [dragData]=\"appointment\"\n                  [dragElementClone]=\"true\"\n                  [dragDisabled]=\"!draggable() || appointment.readonly || readonly()\"\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [style.color]=\"appointment.textColor\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                  <ax-subtitle>\n                    {{\n                      appointment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                    }}\n                    -\n                    {{\n                      appointment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n                    }}\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.date.getTime()) {\n              <td\n                axDropZone\n                #zone=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 0)\"\n                (click)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.date.getTime()) {\n              <td\n                axDropZone\n                #zone2=\"axDropZone\"\n                [class.ax-scheduler-slot-hovered]=\"zone2.isHovered()\"\n                (onElementDrop)=\"handleSingleDayDrop($event, time, day.date, 1)\"\n                (click)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day.date, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", styles: ["ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}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-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-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-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-basic-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}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-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day{gap:.25rem;display:grid;align-items:center;padding-inline:.5rem;justify-content:center}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-char{font-weight:500}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-today .ax-scheduler-week-header-date-day-num{font-weight:700}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div.ax-scheduler-week-header-date-day .ax-scheduler-week-header-date-day-num{font-weight:500;font-size:1.25rem}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-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-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;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-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}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-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-basic-view-blocks-width);height:calc(var(--ax-comp-scheduler-basic-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-basic-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}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-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-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-appointment,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-header-week-appointment{cursor:pointer}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-all-day-slot:hover,ax-scheduler-week-view:not(.ax-state-readonly) .ax-scheduler-week-table-container>table td:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
         }], propDecorators: { isReadonly: [{
                 type: HostBinding,
                 args: ['class.ax-state-readonly']
@@ -1530,17 +1924,13 @@ class AXSchedulerComponent extends MXBaseComponent {
         this.calendar = input();
         this.calendarType = linkedSignal(() => this.calendar() ?? this.localeService.activeProfile().calendar.system);
         this.startingDate = input(new Date());
-        this.currentDate = linkedSignal(() => this.calendarService
-            .create(this.startingDate(), this.calendarType())
-            .set('hour', 0)
-            .set('minute', 0)
-            .set('second', 0));
+        this.currentDate = linkedSignal(() => this.calendarService.create(this.startingDate(), this.calendarType()).startOf('day'));
         this.rtl = signal(false);
         this.isLoading = signal(false);
         this.isFullScreen = signal(false);
         this.viewsDataSource = signal([]);
         this.oldDate = signal(this.calendarService.create(new Date(), this.calendarType()));
-        this.endHour = input(23);
+        this.endHour = input(24);
         this.startHour = input(8);
         this.keyField = input('id');
         this.readonly = input(false);
@@ -1873,7 +2263,7 @@ class AXSchedulerComponent extends MXBaseComponent {
         this.isFullScreen.set(!this.isFullScreen());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", 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 }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", 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", onAppointmentDrop: "onAppointmentDrop", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber], 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=\"blank\" (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=\"blank\" (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      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane\">\n          <ax-calendar\n            [type]=\"calendarType()\"\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]=\"200\"\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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n      @case ('timelineDay') {\n        <ax-scheduler-timeline-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-day-view>\n      }\n      @case ('timelineMultiDay') {\n        <ax-scheduler-timeline-multi-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          [daysCount]=\"multiDayViewDaysCount()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-multi-day-view>\n      }\n      @case ('timelineMonth') {\n        <ax-scheduler-timeline-month-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-month-view>\n      }\n      @case ('agenda') {\n        <ax-scheduler-agenda-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-agenda-view>\n      }\n    }\n  </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{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;overflow-x:auto;overflow-y:hidden;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-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;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 .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .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: "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"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments", "firstDayOfWeek"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", 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 }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", 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", onAppointmentDrop: "onAppointmentDrop", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber], 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=\"blank\" (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=\"blank\" (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      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane\">\n          <ax-calendar\n            [type]=\"calendarType()\"\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]=\"200\"\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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n      @case ('timelineDay') {\n        <ax-scheduler-timeline-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-day-view>\n      }\n      @case ('timelineMultiDay') {\n        <ax-scheduler-timeline-multi-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          [daysCount]=\"multiDayViewDaysCount()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-multi-day-view>\n      }\n      @case ('timelineMonth') {\n        <ax-scheduler-timeline-month-view\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-month-view>\n      }\n      @case ('agenda') {\n        <ax-scheduler-agenda-view\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-agenda-view>\n      }\n    }\n  </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{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;overflow-x:auto;overflow-y:hidden;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-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;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 .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .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: "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"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "firstDayOfWeek", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,
@@ -1892,7 +2282,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AXSchedulerTimelineMultiDayViewComponent,
                         AXSchedulerTimelineMonthViewComponent,
                         AXSchedulerAgendaViewComponent,
-                    ], providers: [AXUnsubscriber], template: "<div class=\"ax-scheduler-container\">\n  <div class=\"ax-scheduler-header\">\n    <div class=\"ax-scheduler-date\">\n      <ax-button look=\"blank\" (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=\"blank\" (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      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane\">\n          <ax-calendar\n            [type]=\"calendarType()\"\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]=\"200\"\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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n      @case ('timelineDay') {\n        <ax-scheduler-timeline-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-day-view>\n      }\n      @case ('timelineMultiDay') {\n        <ax-scheduler-timeline-multi-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          [daysCount]=\"multiDayViewDaysCount()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-multi-day-view>\n      }\n      @case ('timelineMonth') {\n        <ax-scheduler-timeline-month-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-month-view>\n      }\n      @case ('agenda') {\n        <ax-scheduler-agenda-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-agenda-view>\n      }\n    }\n  </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{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;overflow-x:auto;overflow-y:hidden;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-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;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 .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"] }]
+                    ], providers: [AXUnsubscriber], template: "<div class=\"ax-scheduler-container\">\n  <div class=\"ax-scheduler-header\">\n    <div class=\"ax-scheduler-date\">\n      <ax-button look=\"blank\" (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=\"blank\" (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      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane\">\n          <ax-calendar\n            [type]=\"calendarType()\"\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]=\"200\"\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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($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          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n      @case ('timelineDay') {\n        <ax-scheduler-timeline-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\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          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-day-view>\n      }\n      @case ('timelineMultiDay') {\n        <ax-scheduler-timeline-multi-day-view\n          [endHour]=\"endHour()\"\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          [daysCount]=\"multiDayViewDaysCount()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-multi-day-view>\n      }\n      @case ('timelineMonth') {\n        <ax-scheduler-timeline-month-view\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-timeline-month-view>\n      }\n      @case ('agenda') {\n        <ax-scheduler-agenda-view\n          [date]=\"currentDate()\"\n          [readonly]=\"readonly()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        >\n        </ax-scheduler-agenda-view>\n      }\n    }\n  </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{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;overflow-x:auto;overflow-y:hidden;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-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;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 .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"] }]
         }] });
 
 const COMPONENT = [