@acorex/components 19.13.0-next.0 → 19.13.0-next.10

package/fesm2022/acorex-components-scheduler.mjs

@@ -7,12 +7,11 @@ import { AXSelectBoxComponent } from '@acorex/components/select-box';
 import { AXCalendarService } from '@acorex/core/date-time';
 import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
 import { AXLocaleService } from '@acorex/core/locale';
-import { AXPlatform } from '@acorex/core/platform';
 import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
-import { AsyncPipe, NgClass } from '@angular/common';
+import { AsyncPipe, isPlatformBrowser, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, viewChild, linkedSignal, signal, model, effect, untracked } from '@angular/core';
+import { inject, Injectable, input, computed, output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, PLATFORM_ID, viewChild, linkedSignal, signal, model, effect, untracked, NgModule } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -304,12 +303,16 @@ class AXSchedulerService {
         let endDate;
         switch (view) {
             case 'day':
-                endDate = startDate.add('minute', 30);
-                break;
             case 'week':
-                endDate = startDate.add('minute', 30);
+                endDate = startDate.add('minute', this.BLOCK_DURATION_MINUTES);
+                break;
+            case 'timelineDay':
+            case 'timelineMultiDay':
+                endDate = startDate.add('minute', this.BLOCK_DURATION_MINUTES * 2);
                 break;
             case 'month':
+            case 'agenda':
+            case 'timelineMonth':
                 startDate = startDate.startOf('day');
                 endDate = startDate.endOf('day');
                 break;
@@ -333,21 +336,123 @@ class AXSchedulerService {
                 emitter.emit(event);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
+    // --- Timeline Specific Helpers ---
+    calculateTimelineLayout(appt, startHour, endHour) {
+        if (!appt?.startDate ||
+            !appt.endDate ||
+            typeof startHour !== 'number' ||
+            typeof endHour !== 'number' ||
+            startHour >= endHour) {
+            console.warn('calculateTimelinePixelLayout: Invalid input', { appt, startHour, endHour });
+            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 };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root', // Provide service application-wide
                 }]
         }] });
 
+class AXSchedulerAgendaViewComponent 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);
+        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 [];
+        });
+        // Internal outputs to be caught by parent AXSchedulerComponent
+        this.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+        // --- Event Handlers ---
+        this.eventOutputMap = {
+            slot: {
+                click: this.slotClickedInternal,
+                dblclick: this.slotDblClickedInternal,
+                contextmenu: this.slotRightClickedInternal,
+            },
+            appointment: {
+                click: this.appointmentClickedInternal,
+                dblclick: this.appointmentDblClickedInternal,
+                contextmenu: this.appointmentRightClickedInternal,
+            },
+        };
+    }
+    handleAppointmentEvent(mouseEvent, appointment) {
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    }
+    handleSlotEvent(mouseEvent, date) {
+        const slotData = this.schedulerService.getSlotData(date, 'month');
+        if (slotData) {
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+        }
+    }
+    isToday(date) {
+        const today = this.calendarService.create(new Date());
+        return date.equal(today, 'day');
+    }
+    get isReadonly() {
+        return this.readonly();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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      [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            (click)=\"handleAppointmentEvent($event, appointment)\"\n            (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n            (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n            [title]=\"appointment.title\"\n            [class.ax-draggable]=\"draggable()\"\n            [style.color]=\"appointment.textColor\"\n            class=\"ax-scheduler-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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-agenda-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXFormatPipe, AXDecoratorGenericComponent], template: "<div class=\"ax-scheduler-agenda-container\">\n  @for (appt of multiDayAppointments(); track appt.appointments) {\n    <div\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            (click)=\"handleAppointmentEvent($event, appointment)\"\n            (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n            (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n            [title]=\"appointment.title\"\n            [class.ax-draggable]=\"draggable()\"\n            [style.color]=\"appointment.textColor\"\n            class=\"ax-scheduler-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"] }]
+        }], propDecorators: { isReadonly: [{
+                type: HostBinding,
+                args: ['class.ax-state-readonly']
+            }] } });
+
 class AXSchedulerDayViewComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.schedulerCalcService = inject(AXSchedulerService);
-        this.GAP_WIDTH_PX = 1;
+        this.schedulerService = inject(AXSchedulerService);
+        this.GAP_PX = 1;
+        this.readonly = input(false);
         this.draggable = input(true);
         this.calendar = input();
         this.endHour = input.required();
@@ -399,7 +504,7 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
                 return layouts;
             }
             // Pass viewDate to the service method
-            const concurrencyInfo = this.schedulerCalcService.calculateDayViewConcurrencyInfo(sAppointments, viewDate, startH, endH);
+            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) ---
@@ -454,20 +559,20 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
         });
     }
     handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerCalcService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
     }
     handleSingleSlotEvent(mouseEvent, startDate, minuteIndex) {
         startDate = startDate.add('minute', minuteIndex * 30);
-        const slotData = this.schedulerCalcService.getSlotData(startDate, 'day');
+        const slotData = this.schedulerService.getSlotData(startDate, 'day');
         if (slotData)
-            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
     }
     handleAllDaySlotEvent(mouseEvent) {
         const endDate = this.date().endOf('day');
         const startDate = this.date().startOf('day');
-        const slotData = { startDate, endDate, view: 'week' };
+        const slotData = { startDate, endDate, view: 'day' };
         if (slotData)
-            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
     }
     // --- Style Calculation Functions (depend on appointmentLayouts - no change needed) ---
     getAppointmentLayout(key) {
@@ -481,7 +586,7 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
             if (C === 0 || N <= 1)
                 return '0px';
             const leftPercent = C * (100 / N);
-            const gapOffsetPx = C * this.GAP_WIDTH_PX;
+            const gapOffsetPx = C * this.GAP_PX;
             return `calc(${leftPercent}% + ${gapOffsetPx}px)`;
         }
         return '0px';
@@ -498,24 +603,23 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
             const widthPercent = (1 / N) * 100;
             const isLastColumn = C + 1 === N;
             if (!isLastColumn) {
-                return `calc(${widthPercent}% - ${this.GAP_WIDTH_PX}px)`;
+                return `calc(${widthPercent}% - ${this.GAP_PX}px)`;
             }
             else {
-                const cumulativeGapPx = (N - 1) * this.GAP_WIDTH_PX;
+                const cumulativeGapPx = (N - 1) * this.GAP_PX;
                 return `calc(${widthPercent}% - ${cumulativeGapPx}px)`;
             }
         }
         return '0%';
     }
-    getAppointmentTransform(key) {
+    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 startBlockOffset = startMinutes - this.startHour() * 60;
             const yBlock = startBlockOffset / 30;
-            const translateY = `calc(var(--ax-comp-scheduler-view-blocks-height) * ${yBlock} + 1px)`;
-            return `translateY(${translateY})`;
+            return `calc(var(--ax-comp-scheduler-basic-view-blocks-height) * ${yBlock} + 1px)`;
         }
         return '';
     }
@@ -525,34 +629,41 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
             const durationMillis = appointment.endDate.date.getTime() - appointment.startDate.date.getTime();
             const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
             const heightBlock = durationMinutes / 30;
-            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height)`;
-            return `calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_WIDTH_PX}px)`;
+            const blockHeightExpr = `var(--ax-comp-scheduler-basic-view-blocks-height)`;
+            return `calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_PX}px)`;
         }
         return '0px';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerDayViewComponent, isStandalone: true, selector: "ax-scheduler-day-view", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-day-header\">\n  <table class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      <tr>\n        {{\n          'dateTime.duration.all-day' | translate | async\n        }}\n      </tr>\n    </tbody>\n  </table>\n  <div\n    class=\"ax-scheduler-day-header-table-container\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          [class.ax-draggable]=\"draggable()\"\n          [title]=\"allDayAppointments()[0].title\"\n          class=\"ax-scheduler-header-day-appointment\"\n          [style.color]=\"allDayAppointments()[0].textColor\"\n          [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n        </div>\n      }\n      @if (allDayAppointments().length > 1) {\n        <div\n          #moreAppointments\n          class=\"ax-scheduler-day-header-more-tag\"\n          [style.color]=\"allDayAppointments()[1].textColor\"\n          [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n        >\n          {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n        </div>\n        <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n          <div class=\"ax-overlay-pane\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                </div>\n              }\n            }\n          </div>\n        </ax-popover>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n  <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <tr>\n          {{\n            time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n          }}\n        </tr>\n      }\n    </tbody>\n  </table>\n  <div class=\"ax-scheduler-day-table-container\">\n    <div class=\"ax-scheduler-day-appointment-container\">\n      @for (appointment of singleDayAppointments(); track appointment.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-day-appointment\"\n          [style.color]=\"appointment.textColor\"\n          [style.width]=\"getAppointmentWidth(appointment.key)\"\n          [style.height]=\"getAppointmentHeight(appointment.key)\"\n          [style.background-color]=\"appointment.backgroundColor\"\n          [style.transform]=\"getAppointmentTransform(appointment.key)\"\n          [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n    </div>\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 0)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n          ></tr>\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 1)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\n          ></tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    get isReadonly() {
+        return this.readonly();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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    class=\"ax-scheduler-day-header-table-container\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          [class.ax-draggable]=\"draggable()\"\n          [title]=\"allDayAppointments()[0].title\"\n          class=\"ax-scheduler-header-day-appointment\"\n          [style.color]=\"allDayAppointments()[0].textColor\"\n          [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n        </div>\n      }\n      @if (allDayAppointments().length > 1) {\n        <div\n          #moreAppointments\n          class=\"ax-scheduler-day-header-more-tag\"\n          [style.color]=\"allDayAppointments()[1].textColor\"\n          [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n        >\n          {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n        </div>\n        <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n          <div class=\"ax-overlay-pane 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                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                </div>\n              }\n            }\n          </div>\n        </ax-popover>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n  <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n    @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          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-day-appointment\"\n          [style.color]=\"appointment.textColor\"\n          [style.width]=\"getAppointmentWidth(appointment.key)\"\n          [style.height]=\"getAppointmentHeight(appointment.key)\"\n          [style.background-color]=\"appointment.backgroundColor\"\n          [style.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          (click)=\"handleSingleSlotEvent($event, time, 0)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n        ></div>\n        <div\n          (click)=\"handleSingleSlotEvent($event, time, 1)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\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: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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{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:1;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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-day-header\">\n  <table class=\"ax-scheduler-day-header-table\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      <tr>\n        {{\n          'dateTime.duration.all-day' | translate | async\n        }}\n      </tr>\n    </tbody>\n  </table>\n  <div\n    class=\"ax-scheduler-day-header-table-container\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          [class.ax-draggable]=\"draggable()\"\n          [title]=\"allDayAppointments()[0].title\"\n          class=\"ax-scheduler-header-day-appointment\"\n          [style.color]=\"allDayAppointments()[0].textColor\"\n          [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n        </div>\n      }\n      @if (allDayAppointments().length > 1) {\n        <div\n          #moreAppointments\n          class=\"ax-scheduler-day-header-more-tag\"\n          [style.color]=\"allDayAppointments()[1].textColor\"\n          [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n        >\n          {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n        </div>\n        <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n          <div class=\"ax-overlay-pane\">\n            @for (appointment of allDayAppointments(); track appointment.key; let first = $first) {\n              @if (!first) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                </div>\n              }\n            }\n          </div>\n        </ax-popover>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n  <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n    <tbody>\n      @for (time of hoursArray(); track time.date.getTime()) {\n        <tr>\n          {{\n            time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n          }}\n        </tr>\n      }\n    </tbody>\n  </table>\n  <div class=\"ax-scheduler-day-table-container\">\n    <div class=\"ax-scheduler-day-appointment-container\">\n      @for (appointment of singleDayAppointments(); track appointment.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-day-appointment\"\n          [style.color]=\"appointment.textColor\"\n          [style.width]=\"getAppointmentWidth(appointment.key)\"\n          [style.height]=\"getAppointmentHeight(appointment.key)\"\n          [style.background-color]=\"appointment.backgroundColor\"\n          [style.transform]=\"getAppointmentTransform(appointment.key)\"\n          [style.inset-inline-start]=\"getAppointmentLeft(appointment.key)\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n    </div>\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 0)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n          ></tr>\n          <tr\n            (click)=\"handleSingleSlotEvent($event, time, 1)\"\n            (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n            (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\n          ></tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n" }]
-        }] });
+            args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-day-header\">\n  <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    class=\"ax-scheduler-day-header-table-container\"\n    (click)=\"handleAllDaySlotEvent($event)\"\n    (dblclick)=\"handleAllDaySlotEvent($event)\"\n    (contextmenu)=\"handleAllDaySlotEvent($event)\"\n  >\n    <div class=\"ax-scheduler-day-header-appointment-container\">\n      @if (allDayAppointments().length) {\n        <div\n          (click)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (dblclick)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          (contextmenu)=\"handleAppointmentEvent($event, allDayAppointments()[0])\"\n          [class.ax-draggable]=\"draggable()\"\n          [title]=\"allDayAppointments()[0].title\"\n          class=\"ax-scheduler-header-day-appointment\"\n          [style.color]=\"allDayAppointments()[0].textColor\"\n          [style.background-color]=\"allDayAppointments()[0].backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ allDayAppointments()[0].title }}</ax-title>\n        </div>\n      }\n      @if (allDayAppointments().length > 1) {\n        <div\n          #moreAppointments\n          class=\"ax-scheduler-day-header-more-tag\"\n          [style.color]=\"allDayAppointments()[1].textColor\"\n          [style.background-color]=\"allDayAppointments()[1].backgroundColor\"\n        >\n          {{ 'more-items' | translate: { params: { number: allDayAppointments().length - 1 } } | async }}\n        </div>\n        <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n          <div class=\"ax-overlay-pane 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                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                </div>\n              }\n            }\n          </div>\n        </ax-popover>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-day-time-container\">\n  <table class=\"ax-scheduler-day-time\" aria-hidden=\"true\" [border]=\"1\">\n    @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          (click)=\"handleAppointmentEvent($event, appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n          [title]=\"appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-day-appointment\"\n          [style.color]=\"appointment.textColor\"\n          [style.width]=\"getAppointmentWidth(appointment.key)\"\n          [style.height]=\"getAppointmentHeight(appointment.key)\"\n          [style.background-color]=\"appointment.backgroundColor\"\n          [style.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          (click)=\"handleSingleSlotEvent($event, time, 0)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time, 0)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time, 0)\"\n        ></div>\n        <div\n          (click)=\"handleSingleSlotEvent($event, time, 1)\"\n          (dblclick)=\"handleSingleSlotEvent($event, time, 1)\"\n          (contextmenu)=\"handleSingleSlotEvent($event, time, 1)\"\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: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-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{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:1;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']
+            }] } });
 
 class AXSchedulerMonthViewComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
         this.formatService = inject(AXFormatService);
         this.calendarService = inject(AXCalendarService);
-        this.schedulerCalcService = inject(AXSchedulerService);
+        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.appointments = input([]);
         this.firstDayOfWeek = input('Saturday'); // Match scheduler component default
         // --- Constants ---
-        this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 2;
         this.DAYS_IN_WEEK = 7;
+        this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 2;
         // Internal outputs to be caught by parent AXSchedulerComponent
         this.slotClickedInternal = output();
         this.slotDblClickedInternal = output();
@@ -581,12 +692,12 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
         });
         // Generate the list of weekday names based on the firstDayOfWeek
         this.daysArray = computed(() => {
-            const firstDayNum = this.schedulerCalcService.getDayOfWeekNumber(this.firstDayOfWeek());
+            const firstDayNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
             const dayNames = [];
             const currentDate = this.date();
             const currentDayOfWeek = currentDate.dayOfWeek;
             const desiredFirstDayName = this.firstDayOfWeek();
-            const desiredFirstDayNumber = this.schedulerCalcService.getDayOfWeekNumber(desiredFirstDayName);
+            const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
             const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
             let date = currentDate.add('day', -daysToSubtract);
             date = date.add('day', firstDayNum - 1);
@@ -604,7 +715,7 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
             const firstDayOfMonth = monthStart;
             const lastDayOfMonth = monthStart.endOf('month');
             const daysInMonth = lastDayOfMonth.dayOfMonth; // Get number of days in the month
-            const firstDayGridNum = this.schedulerCalcService.getDayOfWeekNumber(this.firstDayOfWeek());
+            const 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);
@@ -641,7 +752,7 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
             const viewStartDate = days[0].date;
             const viewEndDate = days[days.length - 1].date;
             const relevantAppointments = this.appointments();
-            return this.schedulerCalcService.groupAppointmentsByDay(relevantAppointments, viewStartDate, viewEndDate);
+            return this.schedulerService.groupAppointmentsByDay(relevantAppointments, viewStartDate, viewEndDate);
         });
         // --- Day Cell Layout Calculation ---
         this.dayCellLayouts = computed(() => {
@@ -681,33 +792,41 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
         });
     }
     handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerCalcService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
     }
     handleSlotEvent(mouseEvent, date) {
-        const slotData = this.schedulerCalcService.getSlotData(date, 'month');
+        const slotData = this.schedulerService.getSlotData(date, 'month');
         if (slotData) {
-            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\n    <!-- Use daysArray for header, assuming it provides correct names/order -->\n    @for (day of daysArray(); track day.date.getTime()) {\n      <div class=\"ax-scheduler-month-weekday\">\n        {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <!-- Calendar Grid - Add dynamic style -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    <!-- Iterate over the final layout data -->\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        [class.ax-today]=\"dayCell.isToday\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Chips -->\n          @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n            <div\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [style.background-color]=\"appointment.backgroundColor\"\n            >\n              <!-- Optionally show time for non-all-day appointments -->\n              <!-- @if (!appointment.allDay) {\n                <span class=\"ax-appointment-chip-time\">\n                  {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              } -->\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n            </div>\n          }\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane ax-scheduler-month-popover-appointment\">\n                @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n                  <div\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [style.color]=\"appointment.textColor\"\n                    [style.background-color]=\"appointment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    get isReadonly() {
+        return this.readonly();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        [class.ax-today]=\"dayCell.isToday\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Chips -->\n          @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n            <div\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [style.background-color]=\"appointment.backgroundColor\"\n            >\n              <!-- Optionally show time for non-all-day appointments -->\n              <!-- @if (!appointment.allDay) {\n                <span class=\"ax-appointment-chip-time\">\n                  {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              } -->\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n            </div>\n          }\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div\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                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [style.color]=\"appointment.textColor\"\n                    [style.background-color]=\"appointment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", 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-appointment-chip.ax-draggable{cursor:grab}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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe, AsyncPipe], template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\n    <!-- Use daysArray for header, assuming it provides correct names/order -->\n    @for (day of daysArray(); track day.date.getTime()) {\n      <div class=\"ax-scheduler-month-weekday\">\n        {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <!-- Calendar Grid - Add dynamic style -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    <!-- Iterate over the final layout data -->\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        [class.ax-today]=\"dayCell.isToday\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Chips -->\n          @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n            <div\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [style.background-color]=\"appointment.backgroundColor\"\n            >\n              <!-- Optionally show time for non-all-day appointments -->\n              <!-- @if (!appointment.allDay) {\n                <span class=\"ax-appointment-chip-time\">\n                  {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              } -->\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n            </div>\n          }\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane ax-scheduler-month-popover-appointment\">\n                @for (appointment of dayCell.hiddenAppointments; track appointment.key) {\n                  <div\n                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [style.color]=\"appointment.textColor\"\n                    [style.background-color]=\"appointment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n" }]
-        }] });
+            args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe, AsyncPipe], template: "<div class=\"ax-scheduler-month-container\">\n  <!-- Weekday Header -->\n  <div class=\"ax-scheduler-month-weekdays\">\n    <!-- Use daysArray for header, assuming it provides correct names/order -->\n    @for (day of daysArray(); track day.date.getTime()) {\n      <div class=\"ax-scheduler-month-weekday\">\n        {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <!-- Calendar Grid - Add dynamic style -->\n  <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n    <!-- Iterate over the final layout data -->\n    @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n      <div\n        (click)=\"handleSlotEvent($event, dayCell.date)\"\n        (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n        (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n        [class.ax-today]=\"dayCell.isToday\"\n        class=\"ax-scheduler-month-day-cell\"\n        [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n      >\n        <div class=\"ax-scheduler-month-day-header\">\n          <span class=\"ax-scheduler-month-day-number\">{{ dayCell.date.dayOfMonth }}</span>\n        </div>\n        <div class=\"ax-scheduler-month-day-appointments\">\n          <!-- Visible Appointment Chips -->\n          @for (appointment of dayCell.visibleAppointments; track appointment.key) {\n            <div\n              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-month-appointment-chip\"\n              [style.background-color]=\"appointment.backgroundColor\"\n            >\n              <!-- Optionally show time for non-all-day appointments -->\n              <!-- @if (!appointment.allDay) {\n                <span class=\"ax-appointment-chip-time\">\n                  {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                </span>\n              } -->\n              <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n            </div>\n          }\n          @if (dayCell.overflowCount > 0) {\n            <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\">\n              +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n            </div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div\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                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    class=\"ax-scheduler-popover-appointment\"\n                    [style.color]=\"appointment.textColor\"\n                    [style.background-color]=\"appointment.backgroundColor\"\n                  >\n                    <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ appointment.title }}</span>\n                  </div>\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", 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-appointment-chip.ax-draggable{cursor:grab}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"] }]
+        }], propDecorators: { isReadonly: [{
+                type: HostBinding,
+                args: ['class.ax-state-readonly']
+            }] } });
 
-class AXSchedulerWeekViewComponent extends MXBaseComponent {
+class AXSchedulerTimelineDayViewComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.schedulerCalcService = inject(AXSchedulerService);
-        this.GAP_WIDTH_PX = 1;
+        this.schedulerService = inject(AXSchedulerService);
+        this.GAP_PX = 1;
+        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) ?? []);
         // Internal outputs to be caught by parent AXSchedulerComponent
         this.slotClickedInternal = output();
         this.slotDblClickedInternal = output();
@@ -728,8 +847,278 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
                 contextmenu: this.appointmentRightClickedInternal,
             },
         };
+        this.hoursArray = computed(() => {
+            let time = this.date();
+            if (!time)
+                return [];
+            time = time.set('hour', this.startHour()).set('minute', 0).set('second', 0);
+            const hours = [time];
+            while (time.hour < this.endHour()) {
+                time = time.add('hour', 1);
+                hours.push(time);
+            }
+            return hours;
+        });
+        // --- 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) {
+                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
+                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]) {
+                        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
+                }
+                else {
+                    // Update the end time for the assigned row ONLY if this one ends later
+                    rowEndTimes[assignedRowIndex] = Math.max(rowEndTimes[assignedRowIndex], apptEndMinutes);
+                }
+                // 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))`;
+                finalLayouts.push({
+                    appointment: appointment, // Store original appointment 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');
+    }
+    handleSlotEvent(mouseEvent, startDate) {
+        const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
+        if (slotData)
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+    }
+    get isReadonly() {
+        return this.readonly();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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        (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n        [title]=\"layout.appointment.title\"\n        [class.ax-draggable]=\"draggable()\"\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        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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineDayViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-timeline-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe], 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        (click)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (dblclick)=\"handleAppointmentEvent($event, layout.appointment)\"\n        (contextmenu)=\"handleAppointmentEvent($event, layout.appointment)\"\n        [title]=\"layout.appointment.title\"\n        [class.ax-draggable]=\"draggable()\"\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        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']
+            }] } });
+
+class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.calendarService = inject(AXCalendarService);
+        this.schedulerService = inject(AXSchedulerService);
+        this.MAX_VISIBLE_APPOINTMENTS_PER_DAY = 3;
+        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,
+                    moreCount: hiddenAppointments.length,
+                };
+            });
+            return [];
+        });
+        // Internal outputs to be caught by parent AXSchedulerComponent
+        this.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+        // --- Event Handlers ---
+        this.eventOutputMap = {
+            slot: {
+                click: this.slotClickedInternal,
+                dblclick: this.slotDblClickedInternal,
+                contextmenu: this.slotRightClickedInternal,
+            },
+            appointment: {
+                click: this.appointmentClickedInternal,
+                dblclick: this.appointmentDblClickedInternal,
+                contextmenu: this.appointmentRightClickedInternal,
+            },
+        };
+    }
+    handleAppointmentEvent(mouseEvent, appointment) {
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+    }
+    handleSlotEvent(mouseEvent, date) {
+        const slotData = this.schedulerService.getSlotData(date, 'month');
+        if (slotData) {
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+        }
+    }
+    isToday(date) {
+        const today = this.calendarService.create(new Date());
+        return date.equal(today, 'day');
+    }
+    get isReadonly() {
+        return this.readonly();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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        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              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-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                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    [style.color]=\"appointment.textColor\"\n                    class=\"ax-scheduler-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-scheduler-timeline-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AXFormatPipe, AsyncPipe, AXTranslatorPipe, AXPopoverComponent], 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        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              (click)=\"handleAppointmentEvent($event, appointment)\"\n              (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n              (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n              [title]=\"appointment.title\"\n              [class.ax-draggable]=\"draggable()\"\n              [style.color]=\"appointment.textColor\"\n              class=\"ax-scheduler-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                    (click)=\"handleAppointmentEvent($event, appointment)\"\n                    (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                    (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                    [title]=\"appointment.title\"\n                    [class.ax-draggable]=\"draggable()\"\n                    [style.color]=\"appointment.textColor\"\n                    class=\"ax-scheduler-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"] }]
+        }], propDecorators: { isReadonly: [{
+                type: HostBinding,
+                args: ['class.ax-state-readonly']
+            }] } });
+
+class AXSchedulerTimelineMultiDayViewComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.calendarService = inject(AXCalendarService);
+        this.daysCount = input(7);
+        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 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.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+    }
+    isToday(date) {
+        const today = this.calendarService.create(new Date());
+        return date.equal(today, 'day');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerTimelineMultiDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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        (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"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", 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        (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"] }]
+        }] });
+
+class AXSchedulerWeekViewComponent extends MXBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.calendarService = inject(AXCalendarService);
+        this.schedulerService = inject(AXSchedulerService);
+        this.GAP_PX = 1;
+        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.allDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.allDay) ?? []);
         this.singleDayAppointments = computed(() => this.appointments()?.filter((e) => e && e.singleDay && !e.allDay) ?? []);
+        // Internal outputs to be caught by parent AXSchedulerComponent
+        this.slotClickedInternal = output();
+        this.slotDblClickedInternal = output();
+        this.slotRightClickedInternal = output();
+        this.appointmentClickedInternal = output();
+        this.appointmentDblClickedInternal = output();
+        this.appointmentRightClickedInternal = output();
+        // --- Event Handlers ---
+        this.eventOutputMap = {
+            slot: {
+                click: this.slotClickedInternal,
+                dblclick: this.slotDblClickedInternal,
+                contextmenu: this.slotRightClickedInternal,
+            },
+            appointment: {
+                click: this.appointmentClickedInternal,
+                dblclick: this.appointmentDblClickedInternal,
+                contextmenu: this.appointmentRightClickedInternal,
+            },
+        };
         this.hoursArray = computed(() => {
             let time = this.date();
             if (!time)
@@ -765,7 +1154,7 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             const endH = this.endHour();
             if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
                 return {};
-            return this.schedulerCalcService.calculateWeekViewAppointmentsByStartBlock(this.singleDayAppointments(), viewDate, startH, endH);
+            return this.schedulerService.calculateWeekViewAppointmentsByStartBlock(this.singleDayAppointments(), viewDate, startH, endH);
         });
         this.activeAppointmentsInBlock = computed(() => {
             const viewDate = this.date();
@@ -773,14 +1162,14 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             const endH = this.endHour();
             if (!viewDate || typeof startH !== 'number' || typeof endH !== 'number')
                 return {};
-            return this.schedulerCalcService.calculateActiveAppointmentsInBlock(this.singleDayAppointments(), viewDate, startH, endH, 7);
+            return this.schedulerService.calculateActiveAppointmentsInBlock(this.singleDayAppointments(), viewDate, startH, endH, 7);
         });
         this.visibleAppointmentsLayout = computed(() => {
             const layouts = [];
             const startingBlocks = this.appointmentsByStartBlock();
             const daysCount = 7;
             const totalBlocksPerDay = this.totalBlocksPerViewDay();
-            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height, 30px)`;
+            const blockHeightExpr = `var(--ax-comp-scheduler-basic-view-blocks-height, 30px)`;
             const N = daysCount;
             const occupiedBlocks = {};
             for (let dayIndex = 0; dayIndex < daysCount; dayIndex++) {
@@ -799,13 +1188,19 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
                         let layoutHeight = '0px';
                         let appointmentDurationMinutes = 0;
                         if (appointmentToShow.endDate && appointmentToShow.startDate) {
-                            appointmentDurationMinutes = this.schedulerCalcService.calculateDurationInMinutes(appointmentToShow);
+                            appointmentDurationMinutes = this.schedulerService.calculateDurationInMinutes(appointmentToShow);
                             if (appointmentDurationMinutes > 0) {
                                 const heightBlock = appointmentDurationMinutes / 30;
-                                layoutHeight = `max(0px, calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_WIDTH_PX}px))`;
+                                layoutHeight = `max(0px, calc(${blockHeightExpr} * ${heightBlock} - ${this.GAP_PX}px))`;
                             }
                         }
-                        layouts.push({ ...appointmentToShow, layoutTop, layoutLeft, layoutHeight });
+                        layouts.push({
+                            layoutTop,
+                            layoutLeft,
+                            layoutHeight,
+                            appointment: appointmentToShow,
+                            layoutWidth: 'calc(100% / 7 - 2rem)',
+                        });
                         const blocksToOccupy = Math.ceil(appointmentDurationMinutes / 30);
                         for (let i = 0; i < blocksToOccupy; i++) {
                             const occupiedBlockIndex = blockIndex + i;
@@ -835,17 +1230,17 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             if (!viewStartDate || typeof startH !== 'number' || typeof endH !== 'number')
                 return map;
             for (const appointmentLayout of visibleLayouts) {
-                const startInfo = this.schedulerCalcService.getBlockIdentifier(appointmentLayout.startDate, viewStartDate, startH, endH, 7);
+                const startInfo = this.schedulerService.getBlockIdentifier(appointmentLayout.appointment.startDate, viewStartDate, startH, endH, 7);
                 if (!startInfo)
                     continue;
-                const durationMinutes = this.schedulerCalcService.calculateDurationInMinutes(appointmentLayout);
+                const durationMinutes = this.schedulerService.calculateDurationInMinutes(appointmentLayout.appointment);
                 const blocksToOccupy = Math.ceil(durationMinutes / 30);
                 for (let i = 0; i < blocksToOccupy; i++) {
                     const occupiedBlockIndex = startInfo.blockIndex + i;
                     if (occupiedBlockIndex >= 0 && occupiedBlockIndex < totalBlocksPerDay) {
                         const mapKey = `${startInfo.dayIndex}-${occupiedBlockIndex}`;
                         if (!map.has(mapKey)) {
-                            map.set(mapKey, appointmentLayout.key);
+                            map.set(mapKey, appointmentLayout.appointment.key);
                         }
                     }
                     else {
@@ -861,7 +1256,7 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             const occupancyMap = this.visualOccupancyMap();
             const daysCount = 7;
             const totalBlocksPerDay = this.totalBlocksPerViewDay();
-            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height, 30px)`;
+            const blockHeightExpr = `var(--ax-comp-scheduler-basic-view-blocks-height, 30px)`;
             const N = daysCount;
             if (!activeBlocks || !occupancyMap || totalBlocksPerDay === 0)
                 return badges;
@@ -922,7 +1317,7 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
             const occupancyMap = this.visualOccupancyMap();
             const daysCount = 7;
             const totalBlocksPerDay = this.totalBlocksPerViewDay();
-            const blockHeightExpr = `var(--ax-comp-scheduler-view-blocks-height, 30px)`;
+            const blockHeightExpr = `var(--ax-comp-scheduler-basic-view-blocks-height, 30px)`;
             const N = daysCount;
             if (!activeBlocks || !occupancyMap || totalBlocksPerDay === 0)
                 return badgesInfo;
@@ -971,59 +1366,43 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
         });
     }
     handleAppointmentEvent(mouseEvent, appointment) {
-        this.schedulerCalcService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
+        this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
     }
     handleSingleSlotEvent(mouseEvent, hour, day, minuteIndex) {
         const startDate = day.set('hour', hour.hour).set('minute', minuteIndex * 30);
-        const slotData = this.schedulerCalcService.getSlotData(startDate, 'week');
+        const slotData = this.schedulerService.getSlotData(startDate, 'week');
         if (slotData)
-            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
     }
     handleAllDaySlotEvent(mouseEvent, day) {
         const startDate = day.startOf('day');
         const endDate = day.endOf('day');
         const slotData = { startDate, endDate, view: 'week' };
         if (slotData)
-            this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+            this.schedulerService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
+    }
+    isToday(date) {
+        const today = this.calendarService.create(new Date());
+        return date.equal(today, 'day');
+    }
+    get isReadonly() {
+        return this.readonly();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerWeekViewComponent, isStandalone: true, selector: "ax-scheduler-week-view", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: true, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal" }, usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-week-header\">\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\"></div>\n    <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n      @for (day of daysArray(); track day.date.getTime()) {\n        <div>{{ day | format: 'date' : { format: 'ddd DD', calendar: calendar() } | async }}</div>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\">{{ 'dateTime.duration.all-day' | translate | async }}</div>\n    <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n      @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n        <div\n          class=\"ax-scheduler-all-day-slot\"\n          (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n        >\n          @if (slotData.appointments.length > 0) {\n            <div\n              (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              [title]=\"slotData.appointments[0].title\"\n              class=\"ax-scheduler-header-week-appointment\"\n              [style.color]=\"slotData.appointments[0].textColor\"\n              [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n            </div>\n          }\n          @if (slotData.appointments.length > 1) {\n            <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\n                      [class.ax-draggable]=\"draggable()\"\n                      class=\"ax-scheduler-popover-appointment\"\n                      [style.color]=\"appointment.textColor\"\n                      [style.background-color]=\"appointment.backgroundColor\"\n                    >\n                      <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                    </div>\n                  }\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n  <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-scheduler-week-table-container\">\n    <div class=\"ax-scheduler-week-appointment-container\">\n      @for (appointmentLayout of visibleAppointmentsLayout(); track appointmentLayout.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          [title]=\"appointmentLayout.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.top]=\"appointmentLayout.layoutTop\"\n          [style.left]=\"appointmentLayout.layoutLeft\"\n          [style.color]=\"appointmentLayout.textColor\"\n          [style.height]=\"appointmentLayout.layoutHeight\"\n          [style.background-color]=\"appointmentLayout.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointmentLayout.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointmentLayout.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointmentLayout.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n\n      <!-- Overflow Badges with Popovers -->\n      @for (badge of overflowBadgesWithData(); track badge.key) {\n        <!-- Wrap badge and popover for targeting -->\n        <div\n          class=\"ax-scheduler-badge-wrapper\"\n          style=\"position: absolute\"\n          [style.top]=\"badge.badgeTop\"\n          [style.left]=\"badge.badgeLeft\"\n        >\n          <!-- The Badge itself -->\n          <div #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n          <!-- The Popover -->\n          <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n            <div class=\"ax-overlay-pane\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                  <ax-subtitle>\n                    {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n                    {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  </ax-subtitle>\n                </div>\n              }\n            </div>\n          </ax-popover>\n        </div>\n      }\n    </div>\n\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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" }, 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          class=\"ax-scheduler-all-day-slot\"\n          (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n        >\n          @if (slotData.appointments.length > 0) {\n            <div\n              (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              [title]=\"slotData.appointments[0].title\"\n              class=\"ax-scheduler-header-week-appointment\"\n              [style.color]=\"slotData.appointments[0].textColor\"\n              [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n            </div>\n          }\n          @if (slotData.appointments.length > 1) {\n            <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane 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                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\n                      [class.ax-draggable]=\"draggable()\"\n                      class=\"ax-scheduler-popover-appointment\"\n                      [style.color]=\"appointment.textColor\"\n                      [style.background-color]=\"appointment.backgroundColor\"\n                    >\n                      <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                    </div>\n                  }\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n  <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-scheduler-week-table-container\">\n    <div class=\"ax-scheduler-week-appointment-container\">\n      @for (appt of visibleAppointmentsLayout(); track appt.appointment.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n          [title]=\"appt.appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\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                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  [style.color]=\"appointment.textColor\"\n                  class=\"ax-scheduler-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                (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-week-header\">\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\"></div>\n    <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n      @for (day of daysArray(); track day.date.getTime()) {\n        <div>{{ day | format: 'date' : { format: 'ddd DD', calendar: calendar() } | async }}</div>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\">{{ 'dateTime.duration.all-day' | translate | async }}</div>\n    <div aria-hidden=\"true\" class=\"ax-scheduler-week-header-date\">\n      @for (slotData of allDayAppointmentsPerDay(); track slotData.day.date.getTime()) {\n        <div\n          class=\"ax-scheduler-all-day-slot\"\n          (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n        >\n          @if (slotData.appointments.length > 0) {\n            <div\n              (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              [title]=\"slotData.appointments[0].title\"\n              class=\"ax-scheduler-header-week-appointment\"\n              [style.color]=\"slotData.appointments[0].textColor\"\n              [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n            </div>\n          }\n          @if (slotData.appointments.length > 1) {\n            <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane\">\n                @for (appointment of slotData.appointments; track appointment.key; let first = $first) {\n                  @if (!first) {\n                    <div\n                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\n                      [class.ax-draggable]=\"draggable()\"\n                      class=\"ax-scheduler-popover-appointment\"\n                      [style.color]=\"appointment.textColor\"\n                      [style.background-color]=\"appointment.backgroundColor\"\n                    >\n                      <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                    </div>\n                  }\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n  <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-scheduler-week-table-container\">\n    <div class=\"ax-scheduler-week-appointment-container\">\n      @for (appointmentLayout of visibleAppointmentsLayout(); track appointmentLayout.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (dblclick)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appointmentLayout)\"\n          [title]=\"appointmentLayout.title\"\n          [class.ax-draggable]=\"draggable()\"\n          class=\"ax-scheduler-week-appointment\"\n          [style.top]=\"appointmentLayout.layoutTop\"\n          [style.left]=\"appointmentLayout.layoutLeft\"\n          [style.color]=\"appointmentLayout.textColor\"\n          [style.height]=\"appointmentLayout.layoutHeight\"\n          [style.background-color]=\"appointmentLayout.backgroundColor\"\n        >\n          <ax-title class=\"ax-scheduler-truncate\">{{ appointmentLayout.title }}</ax-title>\n          <ax-subtitle>\n            {{ appointmentLayout.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n            {{ appointmentLayout.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n          </ax-subtitle>\n        </div>\n      }\n\n      <!-- Overflow Badges with Popovers -->\n      @for (badge of overflowBadgesWithData(); track badge.key) {\n        <!-- Wrap badge and popover for targeting -->\n        <div\n          class=\"ax-scheduler-badge-wrapper\"\n          style=\"position: absolute\"\n          [style.top]=\"badge.badgeTop\"\n          [style.left]=\"badge.badgeLeft\"\n        >\n          <!-- The Badge itself -->\n          <div #actionButton class=\"ax-scheduler-appointment-badge\">+{{ badge.count }}</div>\n          <!-- The Popover -->\n          <ax-popover [target]=\"actionButton\" [placement]=\"'bottom'\">\n            <div class=\"ax-overlay-pane\">\n              @for (appointment of badge.hiddenAppointments; track appointment.key) {\n                <div\n                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  class=\"ax-scheduler-popover-appointment\"\n                  [style.color]=\"appointment.textColor\"\n                  [style.background-color]=\"appointment.backgroundColor\"\n                >\n                  <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                  <ax-subtitle>\n                    {{ appointment.startDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n                    {{ appointment.endDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n                  </ax-subtitle>\n                </div>\n              }\n            </div>\n          </ax-popover>\n        </div>\n      }\n    </div>\n\n    <table aria-hidden=\"true\" [border]=\"1\">\n      <tbody>\n        @for (time of hoursArray(); track time.date.getTime()) {\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n" }]
-        }] });
-
-const COMPONENT = [
-    AXSchedulerComponent,
-    AXSchedulerDayViewComponent,
-    AXSchedulerWeekViewComponent,
-    AXSchedulerMonthViewComponent,
-];
-class AXSchedulerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, imports: [AXSchedulerComponent,
-            AXSchedulerDayViewComponent,
-            AXSchedulerWeekViewComponent,
-            AXSchedulerMonthViewComponent], exports: [AXSchedulerComponent,
-            AXSchedulerDayViewComponent,
-            AXSchedulerWeekViewComponent,
-            AXSchedulerMonthViewComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, imports: [COMPONENT] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [...COMPONENT],
-                    exports: [...COMPONENT],
-                    providers: [],
-                }]
-        }] });
+            args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent, AXFormatPipe], template: "<div class=\"ax-scheduler-week-header\">\n  <div class=\"ax-scheduler-week-header-days\">\n    <div class=\"ax-scheduler-week-header-table\"></div>\n    <div class=\"ax-scheduler-week-header-date\" aria-hidden=\"true\">\n      @for (day of daysArray(); track day.date.getTime()) {\n        <div 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          class=\"ax-scheduler-all-day-slot\"\n          (click)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (dblclick)=\"handleAllDaySlotEvent($event, slotData.day)\"\n          (contextmenu)=\"handleAllDaySlotEvent($event, slotData.day)\"\n        >\n          @if (slotData.appointments.length > 0) {\n            <div\n              (click)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (dblclick)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              (contextmenu)=\"handleAppointmentEvent($event, slotData.appointments[0])\"\n              [title]=\"slotData.appointments[0].title\"\n              class=\"ax-scheduler-header-week-appointment\"\n              [style.color]=\"slotData.appointments[0].textColor\"\n              [style.background-color]=\"slotData.appointments[0].backgroundColor\"\n            >\n              <ax-title class=\"ax-scheduler-truncate\">{{ slotData.appointments[0].title }}</ax-title>\n            </div>\n          }\n          @if (slotData.appointments.length > 1) {\n            <div #moreAppointments class=\"ax-scheduler-appointment-badge\">+{{ slotData.appointments.length - 1 }}</div>\n            <ax-popover [target]=\"moreAppointments\" [placement]=\"'bottom'\">\n              <div class=\"ax-overlay-pane 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                      (click)=\"handleAppointmentEvent($event, appointment)\"\n                      (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                      (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                      [title]=\"appointment.title\"\n                      [class.ax-draggable]=\"draggable()\"\n                      class=\"ax-scheduler-popover-appointment\"\n                      [style.color]=\"appointment.textColor\"\n                      [style.background-color]=\"appointment.backgroundColor\"\n                    >\n                      <ax-title class=\"ax-scheduler-truncate\">{{ appointment.title }}</ax-title>\n                    </div>\n                  }\n                }\n              </div>\n            </ax-popover>\n          }\n        </div>\n      }\n    </div>\n  </div>\n</div>\n\n<div class=\"ax-scheduler-week-time-container\">\n  <div class=\"ax-scheduler-week-time\" aria-hidden=\"true\">\n    @for (time of hoursArray(); track time.date.getTime()) {\n      <div>\n        {{ time | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n      </div>\n    }\n  </div>\n\n  <div class=\"ax-scheduler-week-table-container\">\n    <div class=\"ax-scheduler-week-appointment-container\">\n      @for (appt of visibleAppointmentsLayout(); track appt.appointment.key) {\n        <div\n          (click)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (dblclick)=\"handleAppointmentEvent($event, appt.appointment)\"\n          (contextmenu)=\"handleAppointmentEvent($event, appt.appointment)\"\n          [title]=\"appt.appointment.title\"\n          [class.ax-draggable]=\"draggable()\"\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                  (click)=\"handleAppointmentEvent($event, appointment)\"\n                  (dblclick)=\"handleAppointmentEvent($event, appointment)\"\n                  (contextmenu)=\"handleAppointmentEvent($event, appointment)\"\n                  [title]=\"appointment.title\"\n                  [class.ax-draggable]=\"draggable()\"\n                  [style.color]=\"appointment.textColor\"\n                  class=\"ax-scheduler-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                (click)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 0)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 0)\"\n              ></td>\n            }\n          </tr>\n          <tr>\n            @for (day of daysArray(); track day.date.getTime()) {\n              <td\n                (click)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (dblclick)=\"handleSingleSlotEvent($event, time, day, 1)\"\n                (contextmenu)=\"handleSingleSlotEvent($event, time, day, 1)\"\n              ></td>\n            }\n          </tr>\n        }\n      </tbody>\n    </table>\n  </div>\n</div>\n", 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"] }]
+        }], propDecorators: { isReadonly: [{
+                type: HostBinding,
+                args: ['class.ax-state-readonly']
+            }] } });
 
 class AXSchedulerComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
-        this.platform = inject(AXPlatform);
+        this.platformId = inject(PLATFORM_ID);
         this.unsubscriber = inject(AXUnsubscriber);
         this.formatService = inject(AXFormatService);
         this.localeService = inject(AXLocaleService);
@@ -1035,11 +1414,14 @@ class AXSchedulerComponent extends MXBaseComponent {
             day: 'daily',
             week: 'weekly',
             month: 'monthly',
-            year: 'yearly',
+            timelineDay: 'daily-timeline',
+            timelineMultiDay: 'multi-day-timeline',
+            timelineMonth: 'monthly-timeline',
+            agenda: 'agenda',
         };
         this.calendar = input();
         this.calendarType = linkedSignal(() => this.calendar() ?? this.localeService.activeProfile().calendar.system);
-        this.startingDate = input();
+        this.startingDate = input(new Date());
         this.currentDate = linkedSignal(() => this.calendarService
             .create(this.startingDate(), this.calendarType())
             .set('hour', 0)
@@ -1049,24 +1431,33 @@ class AXSchedulerComponent extends MXBaseComponent {
         this.rtl = signal(false);
         this.isLoading = signal(false);
         this.isFullScreen = signal(false);
-        this.size = signal(null);
         this.viewsDataSource = signal([]);
         this.oldDate = signal(this.calendarService.create(new Date(), this.calendarType()));
         this.endHour = input(23);
         this.startHour = input(8);
         this.keyField = input('id');
+        this.readonly = input(false);
         this.titleField = input('title');
         this.allDayField = input('allDay');
         this.allowFullScreen = input(true);
         this.endDateField = input('endDate');
+        this.multiDayViewDaysCount = input(7);
         this.readonlyField = input('readonly');
         this.startDateField = input('startDate');
         this.textColorField = input('textColor');
         this.descriptionField = input('description');
         this.backgroundColorField = input('backgroundColor');
-        this.dataSource = input();
+        this.dataSource = input([]);
         this.firstDayOfWeek = input('Sunday');
-        this.views = input(['day', 'week', 'month']);
+        this.views = input([
+            'day',
+            'week',
+            'month',
+            'timelineDay',
+            'timelineMultiDay',
+            'timelineMonth',
+            'agenda',
+        ]);
         this.selectedView = model(this.views()[0]);
         // --- Public Outputs ---
         this.onSlotClicked = output();
@@ -1084,7 +1475,7 @@ class AXSchedulerComponent extends MXBaseComponent {
             else {
                 ds = v;
             }
-            ds.refresh();
+            // ds.refresh();
             return ds;
         });
         this.dataSourceItemsSignal = toSignal(new Observable((subscriber) => {
@@ -1110,6 +1501,7 @@ class AXSchedulerComponent extends MXBaseComponent {
         this.currentDateText = computed(() => {
             switch (this.selectedView()) {
                 case 'day':
+                case 'timelineDay':
                     return this.formatService.format(this.currentDate(), 'datetime', {
                         format: 'DD MMMM yyyy',
                         calendar: this.calendarType(),
@@ -1125,18 +1517,39 @@ class AXSchedulerComponent extends MXBaseComponent {
                     });
                     return `${startOfWeek} - ${endOfWeek}`;
                 }
+                case 'agenda':
+                case 'timelineMultiDay': {
+                    const startOfWeek = this.formatService.format(this.currentDate(), 'datetime', {
+                        format: 'DD MMMM yyyy',
+                        calendar: this.calendarType(),
+                    });
+                    const endOfWeek = this.formatService.format(this.currentDate().add('day', this.multiDayViewDaysCount() - 1), 'datetime', {
+                        format: 'DD MMMM yyyy',
+                        calendar: this.calendarType(),
+                    });
+                    return `${startOfWeek} - ${endOfWeek}`;
+                }
                 case 'month':
+                case 'timelineMonth':
                     return this.formatService.format(this.currentDate(), 'datetime', {
                         format: 'MMMM yyyy',
                         calendar: this.calendarType(),
                     });
             }
-            return '';
         });
         this.calendarDepth = computed(() => {
-            if (this.selectedView() === 'week')
-                return 'day';
-            return this.selectedView();
+            switch (this.selectedView()) {
+                case 'day':
+                case 'week':
+                case 'agenda':
+                case 'timelineMultiDay':
+                    return 'day';
+                case 'month':
+                case 'timelineMonth':
+                    return 'month';
+                case 'timelineDay':
+                    return 'day';
+            }
         });
         this.mappedAppointments = computed(() => {
             const items = this.dataSourceItemsSignal();
@@ -1188,7 +1601,8 @@ class AXSchedulerComponent extends MXBaseComponent {
             if (!current || mapped.length === 0)
                 return [];
             switch (view) {
-                case 'day': {
+                case 'day':
+                case 'timelineDay': {
                     const dayStart = current.startOf('day');
                     const dayEnd = current.endOf('day');
                     return mapped.filter((appt) => appt.endDate.compare(dayStart, 'day') >= 0 && appt.startDate.compare(dayEnd, 'day') <= 0);
@@ -1203,8 +1617,17 @@ class AXSchedulerComponent extends MXBaseComponent {
                     const exclusiveGridEndDate = gridEndDate.add('day', 1);
                     return mapped.filter((appt) => appt.startDate.compare(exclusiveGridEndDate, 'day') < 0 && appt.endDate.compare(gridStartDate, 'day') >= 0);
                 }
-                default:
-                    return [];
+                case 'timelineMonth': {
+                    const dayStart = current.startOf('month');
+                    const dayEnd = dayStart.endOf('month');
+                    return mapped.filter((appt) => appt.startDate.compare(dayEnd, 'day') < 0 && appt.endDate.compare(dayStart, 'day') >= 0);
+                }
+                case 'agenda':
+                case 'timelineMultiDay': {
+                    const dayStart = current;
+                    const dayEnd = dayStart.add('day', this.multiDayViewDaysCount());
+                    return mapped.filter((appt) => appt.startDate.compare(dayEnd, 'day') < 0 && appt.endDate.compare(dayStart, 'day') >= 0);
+                }
             }
         });
     }
@@ -1229,11 +1652,6 @@ class AXSchedulerComponent extends MXBaseComponent {
     }
     ngOnInit() {
         super.ngOnInit();
-        this.detectSize();
-        this.platform.resize.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
-            this.detectSize();
-            super.cdr.markForCheck();
-        });
         this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
             this.currentDate.set(this.calendarService.create(this.currentDate().date, this.calendarType()));
             this.appointmentsList().refresh();
@@ -1243,7 +1661,8 @@ class AXSchedulerComponent extends MXBaseComponent {
             this.viewModeSelectbox().selectItems(this.viewsDataSource().find((c) => c.id == this.selectedView()));
             this.currentDate.set(this.calendarService.create(this.currentDate().date, this.calendarType()));
         });
-        this.rtl.set(AXHtmlUtil.isRtl(this.getHostElement()));
+        if (isPlatformBrowser(this.platformId))
+            this.rtl.set(AXHtmlUtil.isRtl(this.getHostElement()));
         this.fillDataSource();
     }
     async fillDataSource() {
@@ -1254,9 +1673,6 @@ class AXSchedulerComponent extends MXBaseComponent {
         }
         this.viewsDataSource.set(result);
     }
-    detectSize() {
-        this.size.set(this.platform.screenSize);
-    }
     getGridDateRange(dateInMonth) {
         const firstDayOfMonth = dateInMonth.startOf('month');
         const firstDayGridNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
@@ -1291,12 +1707,18 @@ class AXSchedulerComponent extends MXBaseComponent {
     nextClick() {
         switch (this.selectedView()) {
             case 'day':
+            case 'timelineDay':
                 this.currentDate.set(this.currentDate().add('day', 1));
                 break;
             case 'week':
                 this.currentDate.set(this.currentDate().add('week', 1));
                 break;
+            case 'agenda':
+            case 'timelineMultiDay':
+                this.currentDate.set(this.currentDate().add('day', this.multiDayViewDaysCount()));
+                break;
             case 'month':
+            case 'timelineMonth':
                 this.currentDate.set(this.currentDate().add('month', 1));
                 break;
         }
@@ -1304,12 +1726,18 @@ class AXSchedulerComponent extends MXBaseComponent {
     prevClick() {
         switch (this.selectedView()) {
             case 'day':
+            case 'timelineDay':
                 this.currentDate.set(this.currentDate().add('day', -1));
                 break;
             case 'week':
                 this.currentDate.set(this.currentDate().add('week', -1));
                 break;
+            case 'agenda':
+            case 'timelineMultiDay':
+                this.currentDate.set(this.currentDate().add('day', -this.multiDayViewDaysCount()));
+                break;
             case 'month':
+            case 'timelineMonth':
                 this.currentDate.set(this.currentDate().add('month', -1));
                 break;
         }
@@ -1332,26 +1760,61 @@ class AXSchedulerComponent extends MXBaseComponent {
             this.getHostElement().classList.remove('ax-full-screen-container');
         this.isFullScreen.set(!this.isFullScreen());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", isSignal: true, isRequired: false, transformFunction: null }, endHour: { classPropertyName: "endHour", publicName: "endHour", isSignal: true, isRequired: false, transformFunction: null }, startHour: { classPropertyName: "startHour", publicName: "startHour", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, allDayField: { classPropertyName: "allDayField", publicName: "allDayField", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, endDateField: { classPropertyName: "endDateField", publicName: "endDateField", isSignal: true, isRequired: false, transformFunction: null }, readonlyField: { classPropertyName: "readonlyField", publicName: "readonlyField", isSignal: true, isRequired: false, transformFunction: null }, startDateField: { classPropertyName: "startDateField", publicName: "startDateField", isSignal: true, isRequired: false, transformFunction: null }, textColorField: { classPropertyName: "textColorField", publicName: "textColorField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, backgroundColorField: { classPropertyName: "backgroundColorField", publicName: "backgroundColorField", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedView: "selectedViewChange", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n  <div class=\"ax-scheduler-header\">\n    <div class=\"ax-scheduler-date\">\n      <ax-button look=\"link\" (onClick)=\"prevClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-left': !rtl(),\n            'ax-icon-chevron-right': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n      <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n      <ax-button look=\"link\" (onClick)=\"nextClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-right': !rtl(),\n            'ax-icon-chevron-left': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n\n      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane ax-scheduler-calendar-container\">\n          <ax-calendar\n            [depth]=\"calendarDepth()\"\n            [ngModel]=\"currentDate()\"\n            (ngModelChange)=\"calendarDateChanged($event)\"\n          ></ax-calendar>\n        </div>\n      </ax-popover>\n    </div>\n    <div class=\"ax-scheduler-actions\">\n      <ax-select-box\n        [dropdownWidth]=\"100\"\n        [ngModel]=\"selectedView()\"\n        [dataSource]=\"viewsDataSource()\"\n        (onValueChanged)=\"viewChanged($event)\"\n      ></ax-select-box>\n\n      @if (allowFullScreen()) {\n        <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n          <ax-icon>\n            <i\n              class=\"fa-solid fa-expand\"\n              [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n            ></i>\n          </ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-views-container\">\n    @switch (selectedView()) {\n      @case ('day') {\n        <ax-scheduler-day-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-day-view>\n      }\n      @case ('week') {\n        <ax-scheduler-week-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-week-view>\n      }\n      @case ('month') {\n        <ax-scheduler-month-view\n          [date]=\"currentDate()\"\n          [draggable]=\"draggable()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-view-blocks-width: 3.5rem;--ax-comp-scheduler-view-blocks-height: 3rem;width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container .ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table tr{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;cursor:pointer;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time tr{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;cursor:pointer;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr{height:var(--ax-comp-scheduler-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;cursor:pointer;overflow:hidden;text-align:start;padding-inline:.5rem;width:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;cursor:pointer;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{font-size:.875rem;display:inline-block}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{cursor:pointer;overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip.ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}.ax-overlay-pane{gap:.25rem;display:grid;overflow:auto;max-height:7.5rem;font-size:.875rem;flex-direction:column}.ax-overlay-pane.ax-scheduler-calendar-container{max-height:unset}.ax-overlay-pane.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment{display:flex;cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;max-width:12.5rem;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSchedulerModule }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["draggable", "calendar", "date", "appointments", "firstDayOfWeek"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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 }, 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", 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          (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          (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          (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          (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          (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          (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          (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: ["ax-scheduler{--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;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-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}.ax-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"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments", "firstDayOfWeek"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { 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"] }, { 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"] }, { 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"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-scheduler', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                         FormsModule,
-                        AXSchedulerModule,
                         AXSelectBoxComponent,
                         AXDecoratorIconComponent,
                         AXButtonComponent,
                         NgClass,
                         AXPopoverComponent,
                         AXCalendarComponent,
-                    ], template: "<div class=\"ax-scheduler-container\">\n  <div class=\"ax-scheduler-header\">\n    <div class=\"ax-scheduler-date\">\n      <ax-button look=\"link\" (onClick)=\"prevClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-left': !rtl(),\n            'ax-icon-chevron-right': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n      <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n      <ax-button look=\"link\" (onClick)=\"nextClick()\">\n        <ax-icon\n          class=\"ax-icon ax-text-xl\"\n          [ngClass]=\"{\n            'ax-icon-chevron-right': !rtl(),\n            'ax-icon-chevron-left': rtl(),\n          }\"\n        ></ax-icon>\n      </ax-button>\n\n      <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n        <div class=\"ax-overlay-pane ax-scheduler-calendar-container\">\n          <ax-calendar\n            [depth]=\"calendarDepth()\"\n            [ngModel]=\"currentDate()\"\n            (ngModelChange)=\"calendarDateChanged($event)\"\n          ></ax-calendar>\n        </div>\n      </ax-popover>\n    </div>\n    <div class=\"ax-scheduler-actions\">\n      <ax-select-box\n        [dropdownWidth]=\"100\"\n        [ngModel]=\"selectedView()\"\n        [dataSource]=\"viewsDataSource()\"\n        (onValueChanged)=\"viewChanged($event)\"\n      ></ax-select-box>\n\n      @if (allowFullScreen()) {\n        <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n          <ax-icon>\n            <i\n              class=\"fa-solid fa-expand\"\n              [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n            ></i>\n          </ax-icon>\n        </ax-button>\n      }\n    </div>\n  </div>\n  <div class=\"ax-scheduler-views-container\">\n    @switch (selectedView()) {\n      @case ('day') {\n        <ax-scheduler-day-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [calendar]=\"calendarType()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-day-view>\n      }\n      @case ('week') {\n        <ax-scheduler-week-view\n          [date]=\"currentDate()\"\n          [endHour]=\"endHour()\"\n          [startHour]=\"startHour()\"\n          [draggable]=\"draggable()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-week-view>\n      }\n      @case ('month') {\n        <ax-scheduler-month-view\n          [date]=\"currentDate()\"\n          [draggable]=\"draggable()\"\n          [firstDayOfWeek]=\"firstDayOfWeek()\"\n          [appointments]=\"viewAppointments()\"\n          (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n          (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n          (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n          (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n          (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n          (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n        ></ax-scheduler-month-view>\n      }\n    }\n  </div>\n</div>\n", styles: ["ax-scheduler{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-view-blocks-width: 3.5rem;--ax-comp-scheduler-view-blocks-height: 3rem;width:100%;height:100%;display:block;overflow:hidden;-webkit-user-select:none;user-select:none;border-width:1px;font-size:.875rem;border-radius:.75rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:50;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container .ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header{top:0;z-index:2;width:100%;display:flex;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table{position:sticky;inset-inline-start:0;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table tr{display:flex;align-items:center;justify-content:center;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) / 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container{gap:1rem;display:flex;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-header-day-appointment{width:100%;cursor:pointer;overflow:hidden;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-header .ax-scheduler-day-header-table-container .ax-scheduler-day-header-appointment-container .ax-scheduler-day-header-more-tag{cursor:pointer;text-wrap:nowrap;padding-inline:.5rem;border-radius:var(--ax-sys-border-radius);color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-time tr{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container{top:0;position:absolute;width:calc(100% - 2.5rem)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container .ax-scheduler-day-appointment-container .ax-scheduler-day-appointment{width:100%;display:flex;cursor:pointer;overflow:hidden;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr{height:var(--ax-comp-scheduler-view-blocks-height);display:block;padding-inline:.5rem;border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-day-view .ax-scheduler-day-time-container .ax-scheduler-day-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view{display:block;position:relative;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-appointment-badge{display:flex;height:1.5rem;cursor:pointer;font-size:.75rem;align-items:center;border-radius:9999px;justify-content:center;width:1.5rem!important;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header{top:0;z-index:2;width:100%;position:sticky;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days{display:flex;background-color:inherit;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-table{flex-shrink:0;position:sticky;text-align:center;inset-inline-start:0;width:var(--ax-comp-scheduler-view-blocks-width);background-color:inherit;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date{width:100%;display:flex}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date div:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot{gap:.25rem;display:flex;width:14.2857142857%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-header .ax-scheduler-week-header-days .ax-scheduler-week-header-date .ax-scheduler-all-day-slot .ax-scheduler-header-week-appointment{display:block;cursor:pointer;overflow:hidden;text-align:start;padding-inline:.5rem;width:calc(100% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container{width:100%;display:flex;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time{z-index:1;position:sticky;inset-inline-start:0;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-time div{display:block;text-align:center;padding-inline:.5rem;width:var(--ax-comp-scheduler-view-blocks-width);height:calc(var(--ax-comp-scheduler-view-blocks-height) * 2);border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container{width:100%;position:relative}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container{top:0;width:100%;position:absolute}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container .ax-scheduler-week-appointment-container .ax-scheduler-week-appointment{display:flex;cursor:pointer;position:absolute;inset-inline-start:0;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;width:calc(14.2857142857% - 2rem);color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table{width:100%}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr{display:flex;height:var(--ax-comp-scheduler-view-blocks-height);border-block-start:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr:first-child{border-block-start-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td{width:100%;text-align:center;border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-week-view .ax-scheduler-week-time-container .ax-scheduler-week-table-container table tr td:last-child{border-inline-end-width:0}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today{background-color:rgba(var(--ax-sys-color-primary-surface),.1)}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{font-size:.875rem;display:inline-block}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{cursor:pointer;overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip.ax-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}.ax-overlay-pane{gap:.25rem;display:grid;overflow:auto;max-height:7.5rem;font-size:.875rem;flex-direction:column}.ax-overlay-pane.ax-scheduler-calendar-container{max-height:unset}.ax-overlay-pane.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment{display:flex;cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;max-width:12.5rem;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"] }]
+                        AXSchedulerDayViewComponent,
+                        AXSchedulerWeekViewComponent,
+                        AXSchedulerMonthViewComponent,
+                        AXSchedulerTimelineDayViewComponent,
+                        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          (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          (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          (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          (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          (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          (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          (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: ["ax-scheduler{--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;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-draggable{cursor:grab}ax-scheduler .ax-scheduler-container .ax-draggable:active{cursor:grabbing}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}.ax-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 = [
+    AXSchedulerComponent,
+    AXSchedulerDayViewComponent,
+    AXSchedulerWeekViewComponent,
+    AXSchedulerMonthViewComponent,
+    AXSchedulerTimelineDayViewComponent,
+];
+class AXSchedulerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, imports: [AXSchedulerComponent,
+            AXSchedulerDayViewComponent,
+            AXSchedulerWeekViewComponent,
+            AXSchedulerMonthViewComponent,
+            AXSchedulerTimelineDayViewComponent], exports: [AXSchedulerComponent,
+            AXSchedulerDayViewComponent,
+            AXSchedulerWeekViewComponent,
+            AXSchedulerMonthViewComponent,
+            AXSchedulerTimelineDayViewComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, imports: [COMPONENT] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXSchedulerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...COMPONENT],
+                    exports: [...COMPONENT],
+                    providers: [],
+                }]
         }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AXSchedulerComponent, AXSchedulerDayViewComponent, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerService, AXSchedulerWeekViewComponent };
+export { AXSchedulerAgendaViewComponent, AXSchedulerComponent, AXSchedulerDayViewComponent, AXSchedulerModule, AXSchedulerMonthViewComponent, AXSchedulerService, AXSchedulerTimelineDayViewComponent, AXSchedulerTimelineMonthViewComponent, AXSchedulerTimelineMultiDayViewComponent, AXSchedulerWeekViewComponent };
 //# sourceMappingURL=acorex-components-scheduler.mjs.map