@acorex/components 19.12.0-next.2 → 19.12.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/calendar/lib/calendar-range.component.d.ts +4 -1
- package/calendar/lib/calendar.class.d.ts +8 -0
- package/calendar/lib/calendar.component.d.ts +2 -0
- package/datetime-box/lib/datetime-box.component.d.ts +11 -13
- package/datetime-input/lib/datetime-input.component.d.ts +21 -84
- package/datetime-picker/lib/datetime-picker.component.d.ts +13 -31
- package/fesm2022/acorex-components-calendar.mjs +65 -37
- package/fesm2022/acorex-components-calendar.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-box.mjs +28 -26
- package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-input.mjs +113 -181
- package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
- package/fesm2022/acorex-components-datetime-picker.mjs +79 -81
- package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
- package/fesm2022/{acorex-components-modal-acorex-components-modal-Bs1CnBt8.mjs → acorex-components-modal-acorex-components-modal-BzlZIwq8.mjs} +116 -26
- package/fesm2022/acorex-components-modal-acorex-components-modal-BzlZIwq8.mjs.map +1 -0
- package/fesm2022/acorex-components-modal-modal-content.component-zmFWBaiD.mjs +187 -0
- package/fesm2022/acorex-components-modal-modal-content.component-zmFWBaiD.mjs.map +1 -0
- package/fesm2022/acorex-components-modal.mjs +1 -1
- package/fesm2022/acorex-components-query-builder.mjs +1 -1
- package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +63 -30
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/modal/lib/modal-content/modal-content.component.d.ts +11 -8
- package/modal/lib/modal-state.service.d.ts +8 -7
- package/modal/lib/modal.component.d.ts +2 -0
- package/modal/lib/modal.service.d.ts +4 -2
- package/modal/lib/modal.types.d.ts +15 -1
- package/package.json +1 -1
- package/scheduler/lib/scheduler.component.d.ts +8 -4
- package/scheduler/lib/scheduler.service.d.ts +3 -2
- package/scheduler/lib/views/day/scheduler-day-view.component.d.ts +2 -1
- package/scheduler/lib/views/month/scheduler-month-view.component.d.ts +4 -2
- package/scheduler/lib/views/week/scheduler-week-view.component.d.ts +2 -1
- package/fesm2022/acorex-components-modal-acorex-components-modal-Bs1CnBt8.mjs.map +0 -1
- package/fesm2022/acorex-components-modal-modal-content.component-DhpujG4d.mjs +0 -181
- package/fesm2022/acorex-components-modal-modal-content.component-DhpujG4d.mjs.map +0 -1
|
@@ -5,12 +5,14 @@ import { AXDecoratorGenericComponent, AXDecoratorIconComponent } from '@acorex/c
|
|
|
5
5
|
import { AXPopoverComponent } from '@acorex/components/popover';
|
|
6
6
|
import { AXSelectBoxComponent } from '@acorex/components/select-box';
|
|
7
7
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
8
|
+
import { AXFormatService, AXFormatPipe } from '@acorex/core/format';
|
|
9
|
+
import { AXLocaleService } from '@acorex/core/locale';
|
|
8
10
|
import { AXPlatform } from '@acorex/core/platform';
|
|
9
11
|
import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation';
|
|
10
12
|
import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
|
|
11
13
|
import { AsyncPipe, NgClass } from '@angular/common';
|
|
12
14
|
import * as i0 from '@angular/core';
|
|
13
|
-
import {
|
|
15
|
+
import { inject, Injectable, input, computed, output, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, viewChild, linkedSignal, signal, model, effect, untracked } from '@angular/core';
|
|
14
16
|
import { toSignal } from '@angular/core/rxjs-interop';
|
|
15
17
|
import * as i1 from '@angular/forms';
|
|
16
18
|
import { FormsModule } from '@angular/forms';
|
|
@@ -19,10 +21,11 @@ import { orderBy } from 'lodash-es';
|
|
|
19
21
|
|
|
20
22
|
class AXSchedulerService {
|
|
21
23
|
constructor() {
|
|
24
|
+
this.formatService = inject(AXFormatService);
|
|
25
|
+
this.HOURS_PER_DAY = 24;
|
|
26
|
+
this.MINUTES_PER_HOUR = 60;
|
|
22
27
|
this.BLOCK_DURATION_MINUTES = 30;
|
|
23
28
|
this.MILLISECONDS_PER_MINUTE = 60 * 1000;
|
|
24
|
-
this.MINUTES_PER_HOUR = 60;
|
|
25
|
-
this.HOURS_PER_DAY = 24;
|
|
26
29
|
this.MILLISECONDS_PER_DAY = this.HOURS_PER_DAY * this.MINUTES_PER_HOUR * this.MILLISECONDS_PER_MINUTE;
|
|
27
30
|
}
|
|
28
31
|
/**
|
|
@@ -259,7 +262,7 @@ class AXSchedulerService {
|
|
|
259
262
|
while (currentDay.compare(appointmentEnd, 'day') <= 0 &&
|
|
260
263
|
currentDay.compare(exclusiveViewEndDate, 'day') < 0 &&
|
|
261
264
|
safeCount < 100) {
|
|
262
|
-
const dateString =
|
|
265
|
+
const dateString = this.formatService.format(currentDay, 'datetime', { format: 'YYYY-MM-DD' }); // Use a consistent key format
|
|
263
266
|
if (!groupedAppointments.has(dateString)) {
|
|
264
267
|
groupedAppointments.set(dateString, []);
|
|
265
268
|
}
|
|
@@ -346,6 +349,7 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
|
|
|
346
349
|
this.schedulerCalcService = inject(AXSchedulerService);
|
|
347
350
|
this.GAP_WIDTH_PX = 1;
|
|
348
351
|
this.draggable = input(true);
|
|
352
|
+
this.calendar = input();
|
|
349
353
|
this.endHour = input.required();
|
|
350
354
|
this.date = input.required();
|
|
351
355
|
this.startHour = input.required();
|
|
@@ -527,20 +531,22 @@ class AXSchedulerDayViewComponent extends MXBaseComponent {
|
|
|
527
531
|
return '0px';
|
|
528
532
|
}
|
|
529
533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerDayViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
530
|
-
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 }, 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
|
|
534
|
+
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 }); }
|
|
531
535
|
}
|
|
532
536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerDayViewComponent, decorators: [{
|
|
533
537
|
type: Component,
|
|
534
|
-
args: [{ selector: 'ax-scheduler-day-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent], 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
|
|
538
|
+
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" }]
|
|
535
539
|
}] });
|
|
536
540
|
|
|
537
541
|
class AXSchedulerMonthViewComponent extends MXBaseComponent {
|
|
538
542
|
constructor() {
|
|
539
543
|
super(...arguments);
|
|
544
|
+
this.formatService = inject(AXFormatService);
|
|
545
|
+
this.calendarService = inject(AXCalendarService);
|
|
540
546
|
this.schedulerCalcService = inject(AXSchedulerService);
|
|
541
|
-
this.calendarService = inject(AXCalendarService); // Inject if needed for 'today' comparison
|
|
542
547
|
// --- Inputs ---
|
|
543
548
|
this.draggable = input(true);
|
|
549
|
+
this.calendar = input();
|
|
544
550
|
this.date = input.required(); // A date within the target month
|
|
545
551
|
this.appointments = input([]);
|
|
546
552
|
this.firstDayOfWeek = input('Saturday'); // Match scheduler component default
|
|
@@ -644,7 +650,10 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
|
|
|
644
650
|
// Get appointments grouped by YYYY-MM-DD string
|
|
645
651
|
const groupedAppointments = this.appointmentsGroupedByDay();
|
|
646
652
|
return initialDaysInfo.map((dayInfo) => {
|
|
647
|
-
const dateString =
|
|
653
|
+
const dateString = this.formatService.format(dayInfo.date, 'datetime', {
|
|
654
|
+
format: 'YYYY-MM-DD',
|
|
655
|
+
calendar: this.calendar(),
|
|
656
|
+
});
|
|
648
657
|
const appointmentsForDay = groupedAppointments.get(dateString) ?? [];
|
|
649
658
|
// Sort appointments (all-day first, then by time)
|
|
650
659
|
const sortedAppointments = orderBy(appointmentsForDay, [(e) => (e.allDay ? 0 : 1), (e) => e.startDate.date.getTime()], ['asc', 'asc']);
|
|
@@ -681,11 +690,11 @@ class AXSchedulerMonthViewComponent extends MXBaseComponent {
|
|
|
681
690
|
}
|
|
682
691
|
}
|
|
683
692
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
684
|
-
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 }, 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\"
|
|
693
|
+
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 }); }
|
|
685
694
|
}
|
|
686
695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
|
|
687
696
|
type: Component,
|
|
688
|
-
args: [{ selector: 'ax-scheduler-month-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AsyncPipe, AXTranslatorPipe, AXPopoverComponent], 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\"
|
|
697
|
+
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" }]
|
|
689
698
|
}] });
|
|
690
699
|
|
|
691
700
|
class AXSchedulerWeekViewComponent extends MXBaseComponent {
|
|
@@ -694,6 +703,7 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
|
|
|
694
703
|
this.schedulerCalcService = inject(AXSchedulerService);
|
|
695
704
|
this.GAP_WIDTH_PX = 1;
|
|
696
705
|
this.draggable = input(true);
|
|
706
|
+
this.calendar = input();
|
|
697
707
|
this.endHour = input.required();
|
|
698
708
|
this.date = input.required();
|
|
699
709
|
this.startHour = input.required();
|
|
@@ -977,11 +987,11 @@ class AXSchedulerWeekViewComponent extends MXBaseComponent {
|
|
|
977
987
|
this.schedulerCalcService.handleEvent({ event: mouseEvent, slot: slotData }, this.eventOutputMap, 'slot');
|
|
978
988
|
}
|
|
979
989
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerWeekViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
980
|
-
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 }, 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
|
|
990
|
+
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 }); }
|
|
981
991
|
}
|
|
982
992
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerWeekViewComponent, decorators: [{
|
|
983
993
|
type: Component,
|
|
984
|
-
args: [{ selector: 'ax-scheduler-week-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDecoratorGenericComponent, AsyncPipe, AXTranslatorPipe, AXPopoverComponent], 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
|
|
994
|
+
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" }]
|
|
985
995
|
}] });
|
|
986
996
|
|
|
987
997
|
const COMPONENT = [
|
|
@@ -1015,9 +1025,11 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1015
1025
|
super(...arguments);
|
|
1016
1026
|
this.platform = inject(AXPlatform);
|
|
1017
1027
|
this.unsubscriber = inject(AXUnsubscriber);
|
|
1028
|
+
this.formatService = inject(AXFormatService);
|
|
1029
|
+
this.localeService = inject(AXLocaleService);
|
|
1018
1030
|
this.calendarService = inject(AXCalendarService);
|
|
1031
|
+
this.schedulerService = inject(AXSchedulerService);
|
|
1019
1032
|
this.translationService = inject(AXTranslationService);
|
|
1020
|
-
this.schedulerCalcService = inject(AXSchedulerService);
|
|
1021
1033
|
this.viewModeSelectbox = viewChild(AXSelectBoxComponent);
|
|
1022
1034
|
this.displayViews = {
|
|
1023
1035
|
day: 'daily',
|
|
@@ -1025,19 +1037,25 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1025
1037
|
month: 'monthly',
|
|
1026
1038
|
year: 'yearly',
|
|
1027
1039
|
};
|
|
1040
|
+
this.calendar = input();
|
|
1041
|
+
this.calendarType = linkedSignal(() => this.calendar() ?? this.localeService.activeProfile().calendar.system);
|
|
1042
|
+
this.startingDate = input();
|
|
1043
|
+
this.currentDate = linkedSignal(() => this.calendarService
|
|
1044
|
+
.create(this.startingDate(), this.calendarType())
|
|
1045
|
+
.set('hour', 0)
|
|
1046
|
+
.set('minute', 0)
|
|
1047
|
+
.set('second', 0));
|
|
1028
1048
|
this.draggable = signal(false); // TODO
|
|
1029
1049
|
this.rtl = signal(false);
|
|
1030
1050
|
this.isLoading = signal(false);
|
|
1031
1051
|
this.isFullScreen = signal(false);
|
|
1032
1052
|
this.size = signal(null);
|
|
1033
1053
|
this.viewsDataSource = signal([]);
|
|
1034
|
-
this.oldDate = signal(this.calendarService.create(new Date()));
|
|
1035
|
-
this.currentDate = linkedSignal(() => this.calendarService.create(this.startingDate()).set('hour', 0).set('minute', 0).set('second', 0));
|
|
1054
|
+
this.oldDate = signal(this.calendarService.create(new Date(), this.calendarType()));
|
|
1036
1055
|
this.endHour = input(23);
|
|
1037
1056
|
this.startHour = input(8);
|
|
1038
1057
|
this.keyField = input('id');
|
|
1039
1058
|
this.titleField = input('title');
|
|
1040
|
-
this.startingDate = input();
|
|
1041
1059
|
this.allDayField = input('allDay');
|
|
1042
1060
|
this.allowFullScreen = input(true);
|
|
1043
1061
|
this.endDateField = input('endDate');
|
|
@@ -1092,11 +1110,26 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1092
1110
|
this.currentDateText = computed(() => {
|
|
1093
1111
|
switch (this.selectedView()) {
|
|
1094
1112
|
case 'day':
|
|
1095
|
-
return this.currentDate()
|
|
1096
|
-
|
|
1097
|
-
|
|
1113
|
+
return this.formatService.format(this.currentDate(), 'datetime', {
|
|
1114
|
+
format: 'DD MMMM yyyy',
|
|
1115
|
+
calendar: this.calendarType(),
|
|
1116
|
+
});
|
|
1117
|
+
case 'week': {
|
|
1118
|
+
const startOfWeek = this.formatService.format(this.currentDate(), 'datetime', {
|
|
1119
|
+
format: 'DD MMMM yyyy',
|
|
1120
|
+
calendar: this.calendarType(),
|
|
1121
|
+
});
|
|
1122
|
+
const endOfWeek = this.formatService.format(this.currentDate().add('week', 1).add('day', -1), 'datetime', {
|
|
1123
|
+
format: 'DD MMMM yyyy',
|
|
1124
|
+
calendar: this.calendarType(),
|
|
1125
|
+
});
|
|
1126
|
+
return `${startOfWeek} - ${endOfWeek}`;
|
|
1127
|
+
}
|
|
1098
1128
|
case 'month':
|
|
1099
|
-
return this.currentDate()
|
|
1129
|
+
return this.formatService.format(this.currentDate(), 'datetime', {
|
|
1130
|
+
format: 'MMMM yyyy',
|
|
1131
|
+
calendar: this.calendarType(),
|
|
1132
|
+
});
|
|
1100
1133
|
}
|
|
1101
1134
|
return '';
|
|
1102
1135
|
});
|
|
@@ -1118,8 +1151,8 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1118
1151
|
const endDateField = this.endDateField();
|
|
1119
1152
|
return items
|
|
1120
1153
|
.map((item) => {
|
|
1121
|
-
const startDate = this.calendarService.create(item[startDateField]);
|
|
1122
|
-
const endDate = this.calendarService.create(item[endDateField]);
|
|
1154
|
+
const startDate = this.calendarService.create(item[startDateField], this.calendarType());
|
|
1155
|
+
const endDate = this.calendarService.create(item[endDateField], this.calendarType());
|
|
1123
1156
|
// Basic validation
|
|
1124
1157
|
if (!startDate?.date || !endDate?.date) {
|
|
1125
1158
|
console.warn('Scheduler: Skipping item due to invalid date fields:', item);
|
|
@@ -1202,13 +1235,13 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1202
1235
|
super.cdr.markForCheck();
|
|
1203
1236
|
});
|
|
1204
1237
|
this.calendarService.calendarChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(() => {
|
|
1205
|
-
this.currentDate.set(this.calendarService.create(this.currentDate().date));
|
|
1238
|
+
this.currentDate.set(this.calendarService.create(this.currentDate().date, this.calendarType()));
|
|
1206
1239
|
this.appointmentsList().refresh();
|
|
1207
1240
|
});
|
|
1208
1241
|
this.translationService.langChanges$.pipe(this.unsubscriber.takeUntilDestroy).subscribe(async () => {
|
|
1209
1242
|
await this.fillDataSource();
|
|
1210
1243
|
this.viewModeSelectbox().selectItems(this.viewsDataSource().find((c) => c.id == this.selectedView()));
|
|
1211
|
-
this.currentDate.set(this.calendarService.create(this.currentDate().date));
|
|
1244
|
+
this.currentDate.set(this.calendarService.create(this.currentDate().date, this.calendarType()));
|
|
1212
1245
|
});
|
|
1213
1246
|
this.rtl.set(AXHtmlUtil.isRtl(this.getHostElement()));
|
|
1214
1247
|
this.fillDataSource();
|
|
@@ -1226,7 +1259,7 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1226
1259
|
}
|
|
1227
1260
|
getGridDateRange(dateInMonth) {
|
|
1228
1261
|
const firstDayOfMonth = dateInMonth.startOf('month');
|
|
1229
|
-
const firstDayGridNum = this.
|
|
1262
|
+
const firstDayGridNum = this.schedulerService.getDayOfWeekNumber(this.firstDayOfWeek());
|
|
1230
1263
|
const firstDisplayedDayOfWeek = firstDayOfMonth.dayOfWeek;
|
|
1231
1264
|
const daysFromPrevMonth = (firstDisplayedDayOfWeek - firstDayGridNum + 7) % 7;
|
|
1232
1265
|
const gridStartDate = firstDayOfMonth.add('day', -daysFromPrevMonth);
|
|
@@ -1249,7 +1282,7 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1249
1282
|
const currentDate = this.currentDate();
|
|
1250
1283
|
const currentDayOfWeek = currentDate.dayOfWeek;
|
|
1251
1284
|
const desiredFirstDayName = this.firstDayOfWeek();
|
|
1252
|
-
const desiredFirstDayNumber = this.
|
|
1285
|
+
const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
|
|
1253
1286
|
const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
|
|
1254
1287
|
const startOfWeekDate = currentDate.add('day', -daysToSubtract);
|
|
1255
1288
|
this.currentDate.set(startOfWeekDate);
|
|
@@ -1282,11 +1315,11 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1282
1315
|
}
|
|
1283
1316
|
}
|
|
1284
1317
|
calendarDateChanged(e) {
|
|
1285
|
-
let currentDate = this.calendarService.create(e);
|
|
1318
|
+
let currentDate = this.calendarService.create(e, this.calendarType());
|
|
1286
1319
|
if (this.selectedView() === 'week') {
|
|
1287
1320
|
const currentDayOfWeek = currentDate.dayOfWeek;
|
|
1288
1321
|
const desiredFirstDayName = this.firstDayOfWeek();
|
|
1289
|
-
const desiredFirstDayNumber = this.
|
|
1322
|
+
const desiredFirstDayNumber = this.schedulerService.getDayOfWeekNumber(desiredFirstDayName);
|
|
1290
1323
|
const daysToSubtract = (currentDayOfWeek - desiredFirstDayNumber + 7) % 7;
|
|
1291
1324
|
currentDate = currentDate.add('day', -daysToSubtract);
|
|
1292
1325
|
}
|
|
@@ -1300,7 +1333,7 @@ class AXSchedulerComponent extends MXBaseComponent {
|
|
|
1300
1333
|
this.isFullScreen.set(!this.isFullScreen());
|
|
1301
1334
|
}
|
|
1302
1335
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1303
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AXSchedulerComponent, isStandalone: true, selector: "ax-scheduler", inputs: { 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 }, startingDate: { classPropertyName: "startingDate", publicName: "startingDate", 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 [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", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["draggable", "endHour", "date", "startHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["draggable", "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 }); }
|
|
1336
|
+
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 }); }
|
|
1304
1337
|
}
|
|
1305
1338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AXSchedulerComponent, decorators: [{
|
|
1306
1339
|
type: Component,
|
|
@@ -1313,7 +1346,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImpor
|
|
|
1313
1346
|
NgClass,
|
|
1314
1347
|
AXPopoverComponent,
|
|
1315
1348
|
AXCalendarComponent,
|
|
1316
|
-
], 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 [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"] }]
|
|
1349
|
+
], 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"] }]
|
|
1317
1350
|
}] });
|
|
1318
1351
|
|
|
1319
1352
|
/**
|