@acorex/components 19.13.0-next.3 → 19.13.0-next.5

package/fesm2022/acorex-components-scheduler.mjs

@@ -9,9 +9,9 @@ import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
 import { AXLocaleService } from '@acorex/core/locale';
 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, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, viewChild, linkedSignal, signal, model, effect, untracked, NgModule } 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';
@@ -423,10 +423,11 @@ class AXSchedulerAgendaViewComponent extends MXBaseComponent {
     handleAppointmentEvent(mouseEvent, appointment) {
         this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
     }
-    handleSlotEvent(mouseEvent, startDate) {
-        const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
-        if (slotData)
+    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());
@@ -1008,10 +1009,11 @@ class AXSchedulerTimelineMonthViewComponent extends MXBaseComponent {
     handleAppointmentEvent(mouseEvent, appointment) {
         this.schedulerService.handleEvent({ event: mouseEvent, appointment }, this.eventOutputMap, 'appointment');
     }
-    handleSlotEvent(mouseEvent, startDate) {
-        const slotData = this.schedulerService.getSlotData(startDate, 'timelineDay');
-        if (slotData)
+    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());
@@ -1400,6 +1402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
 class AXSchedulerComponent extends MXBaseComponent {
     constructor() {
         super(...arguments);
+        this.platformId = inject(PLATFORM_ID);
         this.unsubscriber = inject(AXUnsubscriber);
         this.formatService = inject(AXFormatService);
         this.localeService = inject(AXLocaleService);
@@ -1418,7 +1421,7 @@ class AXSchedulerComponent extends MXBaseComponent {
         };
         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)
@@ -1444,7 +1447,7 @@ class AXSchedulerComponent extends MXBaseComponent {
         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',
@@ -1658,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() {
@@ -1757,7 +1761,7 @@ class AXSchedulerComponent extends MXBaseComponent {
         this.isFullScreen.set(!this.isFullScreen());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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=\"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      <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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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.8", ngImport: i0, type: AXSchedulerComponent, decorators: [{
             type: Component,
@@ -1776,7 +1780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         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=\"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      <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"] }]
+                    ], 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 = [