@acorex/components 19.15.0-next.16 → 19.15.0-next.18
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/drawer/lib/drawer/drawer-container/drawer-container.component.d.ts +3 -3
- package/drawer/lib/drawer/drawer-item/drawer.component.d.ts +14 -50
- package/fesm2022/acorex-components-drawer.mjs +51 -136
- package/fesm2022/acorex-components-drawer.mjs.map +1 -1
- package/fesm2022/acorex-components-file-explorer.mjs +1 -1
- package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
- package/fesm2022/acorex-components-menu.mjs +4 -19
- package/fesm2022/acorex-components-menu.mjs.map +1 -1
- package/fesm2022/acorex-components-scheduler.mjs +113 -131
- package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
- package/menu/lib/context-menu.component.d.ts +1 -1
- package/package.json +20 -20
- package/scheduler/lib/scheduler.class.d.ts +21 -6
- package/scheduler/lib/scheduler.component.d.ts +3 -6
- package/scheduler/lib/scheduler.service.d.ts +10 -10
- package/scheduler/lib/views/agenda/scheduler-agenda-view.component.d.ts +3 -3
- package/scheduler/lib/views/day/scheduler-day-view.component.d.ts +4 -5
- package/scheduler/lib/views/month/scheduler-month-view.component.d.ts +4 -4
- package/scheduler/lib/views/timeline-day/scheduler-timeline-day-view.component.d.ts +3 -4
- package/scheduler/lib/views/timeline-month/scheduler-timeline-month-view.component.d.ts +3 -3
- package/scheduler/lib/views/timeline-multi-day/scheduler-timeline-multi-day-view.component.d.ts +3 -3
- package/scheduler/lib/views/week/scheduler-week-view.component.d.ts +3 -3
|
@@ -11,7 +11,7 @@ import { AXTranslatorPipe, AXTranslationService } from '@acorex/core/translation
|
|
|
11
11
|
import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
|
|
12
12
|
import { AsyncPipe, isPlatformBrowser, NgClass } from '@angular/common';
|
|
13
13
|
import * as i0 from '@angular/core';
|
|
14
|
-
import { inject, Injectable, input, computed, output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, PLATFORM_ID, viewChild, linkedSignal, signal, model, effect,
|
|
14
|
+
import { inject, Injectable, input, computed, output, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, PLATFORM_ID, viewChild, linkedSignal, signal, model, effect, NgModule } from '@angular/core';
|
|
15
15
|
import * as i1 from '@angular/forms';
|
|
16
16
|
import { FormsModule } from '@angular/forms';
|
|
17
17
|
import { AXDragDirective, AXDropZoneDirective } from '@acorex/cdk/drag-drop';
|
|
@@ -20,8 +20,8 @@ import { orderBy } from 'lodash-es';
|
|
|
20
20
|
|
|
21
21
|
class AXSchedulerService {
|
|
22
22
|
constructor() {
|
|
23
|
-
this.formatService = inject(AXFormatService);
|
|
24
23
|
this.calendarService = inject(AXCalendarService);
|
|
24
|
+
this.formatService = inject(AXFormatService);
|
|
25
25
|
this.HOURS_PER_DAY = 24;
|
|
26
26
|
this.MINUTES_PER_HOUR = 60;
|
|
27
27
|
this.BLOCK_DURATION_MINUTES = 30;
|
|
@@ -35,10 +35,10 @@ class AXSchedulerService {
|
|
|
35
35
|
if (!appointmentA?.startDate || !appointmentA.endDate || !appointmentB?.startDate || !appointmentB.endDate) {
|
|
36
36
|
return false;
|
|
37
37
|
}
|
|
38
|
-
const startA = appointmentA.startDate.getTime();
|
|
39
|
-
const endA = appointmentA.endDate.getTime();
|
|
40
|
-
const startB = appointmentB.startDate.getTime();
|
|
41
|
-
const endB = appointmentB.endDate.getTime();
|
|
38
|
+
const startA = appointmentA.startDate.date.getTime();
|
|
39
|
+
const endA = appointmentA.endDate.date.getTime();
|
|
40
|
+
const startB = appointmentB.startDate.date.getTime();
|
|
41
|
+
const endB = appointmentB.endDate.date.getTime();
|
|
42
42
|
// Uses strict overlap check (change < / > to <= / >= if touching boundaries count)
|
|
43
43
|
return startA < endB && endA > startB;
|
|
44
44
|
}
|
|
@@ -48,7 +48,7 @@ class AXSchedulerService {
|
|
|
48
48
|
calculateDurationInMinutes(Appointment) {
|
|
49
49
|
if (!Appointment?.startDate || !Appointment.endDate)
|
|
50
50
|
return 0;
|
|
51
|
-
const durationMillis = Appointment.endDate.getTime() - Appointment.startDate.getTime();
|
|
51
|
+
const durationMillis = Appointment.endDate.date.getTime() - Appointment.startDate.date.getTime();
|
|
52
52
|
return Math.max(0, durationMillis / this.MILLISECONDS_PER_MINUTE);
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
@@ -105,13 +105,11 @@ class AXSchedulerService {
|
|
|
105
105
|
singleDayAppointments.forEach((appointment) => {
|
|
106
106
|
if (!appointment.startDate || !appointment.endDate || !appointment.id)
|
|
107
107
|
return;
|
|
108
|
-
const appointmentEndDate = this.calendarService.create(appointment.endDate);
|
|
109
|
-
const appointmentStartDate = this.calendarService.create(appointment.startDate);
|
|
110
108
|
// Clamp appointment start/end times to the view boundaries (days and hours)
|
|
111
|
-
let effectiveStart =
|
|
109
|
+
let effectiveStart = appointment.startDate.compare(viewStartDate) < 0 ? viewStartDate : appointment.startDate;
|
|
112
110
|
if (effectiveStart.hour < startHour)
|
|
113
111
|
effectiveStart = effectiveStart.set('hour', startHour).startOf('hour');
|
|
114
|
-
let effectiveEnd =
|
|
112
|
+
let effectiveEnd = appointment.endDate.compare(viewEndDate) >= 0 ? viewEndDate : appointment.endDate;
|
|
115
113
|
if (effectiveEnd.hour >= endHour) {
|
|
116
114
|
const endDayBase = effectiveEnd.compare(viewEndDate) >= 0 ? viewEndDate.add('day', -1) : effectiveEnd;
|
|
117
115
|
effectiveEnd = endDayBase.set('hour', endHour).startOf('hour');
|
|
@@ -169,8 +167,8 @@ class AXSchedulerService {
|
|
|
169
167
|
const maxConcurrencyMap = new Map();
|
|
170
168
|
singleDayAppointments.forEach((segment) => {
|
|
171
169
|
let maxOverlapInSegmentBlocks = 0;
|
|
172
|
-
const segmentStartMinutes = segment.startDate.
|
|
173
|
-
const segmentEndMinutes = segment.endDate.
|
|
170
|
+
const segmentStartMinutes = segment.startDate.hour * this.MINUTES_PER_HOUR + segment.startDate.minute;
|
|
171
|
+
const segmentEndMinutes = segment.endDate.hour * this.MINUTES_PER_HOUR + segment.endDate.minute;
|
|
174
172
|
// Determine blocks this segment occupies relative to view's startHour
|
|
175
173
|
const viewRelativeStartMinutes = Math.max(0, segmentStartMinutes - startHour * this.MINUTES_PER_HOUR);
|
|
176
174
|
const viewRelativeEndMinutes = Math.min((endHour - startHour) * this.MINUTES_PER_HOUR, segmentEndMinutes - startHour * this.MINUTES_PER_HOUR);
|
|
@@ -229,7 +227,7 @@ class AXSchedulerService {
|
|
|
229
227
|
singleDayAppointments.forEach((appointment) => {
|
|
230
228
|
if (!appointment.startDate)
|
|
231
229
|
return;
|
|
232
|
-
const startInfo = this.getBlockIdentifier(
|
|
230
|
+
const startInfo = this.getBlockIdentifier(appointment.startDate, viewStartDate, startHour, endHour, 7);
|
|
233
231
|
if (startInfo) {
|
|
234
232
|
const { dayIndex, blockIndex } = startInfo;
|
|
235
233
|
if (!blocks[dayIndex])
|
|
@@ -257,8 +255,8 @@ class AXSchedulerService {
|
|
|
257
255
|
if (!appointment.startDate || !appointment.endDate || !appointment.id)
|
|
258
256
|
return;
|
|
259
257
|
// Determine the effective start and end dates of the appointment clamped by the view range
|
|
260
|
-
const appointmentStart =
|
|
261
|
-
const appointmentEnd =
|
|
258
|
+
const appointmentStart = appointment.startDate;
|
|
259
|
+
const appointmentEnd = appointment.endDate;
|
|
262
260
|
// Skip if appointment ends before the view starts or starts after the view ends
|
|
263
261
|
if (appointmentEnd.compare(viewStartDate, 'day') < 0 ||
|
|
264
262
|
appointmentStart.compare(exclusiveViewEndDate, 'day') >= 0) {
|
|
@@ -368,7 +366,7 @@ class AXSchedulerService {
|
|
|
368
366
|
const segmentEnd = appt.endDate;
|
|
369
367
|
// --- Calculate Start Position (left) ---
|
|
370
368
|
// Effective start of the segment within the view's hours for THIS day
|
|
371
|
-
let effectiveSegmentStartMinutesInDay = segmentStart.
|
|
369
|
+
let effectiveSegmentStartMinutesInDay = segmentStart.hour * 60 + segmentStart.minute;
|
|
372
370
|
// Clamp to viewStartHour for calculation if segment starts before viewable hours (shouldn't happen if segmenter worked)
|
|
373
371
|
effectiveSegmentStartMinutesInDay = Math.max(effectiveSegmentStartMinutesInDay, viewStartHour * 60);
|
|
374
372
|
// Clamp to viewEndHour for calculation if segment starts after viewable hours (shouldn't happen)
|
|
@@ -383,8 +381,8 @@ class AXSchedulerService {
|
|
|
383
381
|
const leftPercentage = (Math.max(0, minutesFromViewStartToSegmentStart) / totalViewDurationMinutes) * 100;
|
|
384
382
|
// --- Calculate Duration and Width ---
|
|
385
383
|
// Effective end of the segment within the view's hours for THIS day
|
|
386
|
-
let effectiveSegmentEndMinutesInDay = segmentEnd.
|
|
387
|
-
if (segmentEnd.
|
|
384
|
+
let effectiveSegmentEndMinutesInDay = segmentEnd.hour * 60 + segmentEnd.minute;
|
|
385
|
+
if (segmentEnd.hour === 0 && segmentEnd.minute === 0 && segmentEnd.date.getTime() > segmentStart.date.getTime()) {
|
|
388
386
|
// If segment ends exactly at midnight (00:00 of next day, meaning it filled up to 24:00 of current day)
|
|
389
387
|
effectiveSegmentEndMinutesInDay = 24 * 60;
|
|
390
388
|
}
|
|
@@ -429,34 +427,32 @@ class AXSchedulerService {
|
|
|
429
427
|
if (!appointment || !appointment.startDate || !appointment.endDate) {
|
|
430
428
|
return null;
|
|
431
429
|
}
|
|
432
|
-
const appointmentStartDate = this.calendarService.create(appointment.startDate);
|
|
433
|
-
const appointmentEndDate = this.calendarService.create(appointment.endDate);
|
|
434
430
|
if (appointment.allDay) {
|
|
435
431
|
const dayStartOf = day.clone().startOf('day');
|
|
436
|
-
if (
|
|
432
|
+
if (appointment.startDate.startOf('day').equal(dayStartOf, 'day')) {
|
|
437
433
|
return {
|
|
438
434
|
...appointment,
|
|
439
|
-
startDate: dayStartOf
|
|
440
|
-
endDate: dayStartOf.clone().add('day', 1).startOf('day')
|
|
435
|
+
startDate: dayStartOf,
|
|
436
|
+
endDate: dayStartOf.clone().add('day', 1).startOf('day'),
|
|
441
437
|
allDay: true,
|
|
442
|
-
originalStartDate:
|
|
443
|
-
originalEndDate:
|
|
438
|
+
originalStartDate: appointment.startDate,
|
|
439
|
+
originalEndDate: appointment.endDate,
|
|
444
440
|
isContinuationFromPreviousDay: false,
|
|
445
|
-
isContinuationToNextDay:
|
|
441
|
+
isContinuationToNextDay: appointment.endDate.startOf('day').compare(dayStartOf, 'day') > 0,
|
|
446
442
|
originalAppointmentRef: appointment,
|
|
447
443
|
};
|
|
448
444
|
}
|
|
449
|
-
else if (
|
|
450
|
-
|
|
445
|
+
else if (appointment.startDate.startOf('day').compare(dayStartOf, 'day') < 0 &&
|
|
446
|
+
appointment.endDate.startOf('day').compare(dayStartOf, 'day') >= 0) {
|
|
451
447
|
return {
|
|
452
448
|
...appointment,
|
|
453
|
-
startDate: dayStartOf
|
|
454
|
-
endDate: dayStartOf.clone().add('day', 1).startOf('day')
|
|
449
|
+
startDate: dayStartOf,
|
|
450
|
+
endDate: dayStartOf.clone().add('day', 1).startOf('day'),
|
|
455
451
|
allDay: true,
|
|
456
|
-
originalStartDate:
|
|
457
|
-
originalEndDate:
|
|
452
|
+
originalStartDate: appointment.startDate,
|
|
453
|
+
originalEndDate: appointment.endDate,
|
|
458
454
|
isContinuationFromPreviousDay: true,
|
|
459
|
-
isContinuationToNextDay:
|
|
455
|
+
isContinuationToNextDay: appointment.endDate.startOf('day').compare(dayStartOf, 'day') > 0,
|
|
460
456
|
originalAppointmentRef: appointment,
|
|
461
457
|
};
|
|
462
458
|
}
|
|
@@ -472,25 +468,25 @@ class AXSchedulerService {
|
|
|
472
468
|
: viewEndHour === 24 || (viewEndHour === 0 && viewStartHour === 0)
|
|
473
469
|
? day.clone().add('day', 1).startOf('day')
|
|
474
470
|
: day.clone().set('hour', viewEndHour).startOf('hour');
|
|
475
|
-
if (
|
|
476
|
-
|
|
471
|
+
if (appointment.endDate.compare(dayStartBoundary, 'second') <= 0 ||
|
|
472
|
+
appointment.startDate.compare(dayEndBoundary, 'second') >= 0) {
|
|
477
473
|
return null;
|
|
478
474
|
}
|
|
479
|
-
const segmentStartDate =
|
|
480
|
-
const segmentEndDate =
|
|
475
|
+
const segmentStartDate = appointment.startDate.compare(dayStartBoundary, 'second') > 0 ? appointment.startDate : dayStartBoundary;
|
|
476
|
+
const segmentEndDate = appointment.endDate.compare(dayEndBoundary, 'second') < 0 ? appointment.endDate : dayEndBoundary;
|
|
481
477
|
if (segmentStartDate.compare(segmentEndDate, 'second') >= 0) {
|
|
482
478
|
return null;
|
|
483
479
|
}
|
|
484
|
-
const isContinuationFromPreviousDay =
|
|
485
|
-
const isContinuationToNextDay =
|
|
486
|
-
const duration =
|
|
480
|
+
const isContinuationFromPreviousDay = appointment.startDate.compare(segmentStartDate, 'second') < 0;
|
|
481
|
+
const isContinuationToNextDay = appointment.endDate.compare(segmentEndDate, 'second') > 0;
|
|
482
|
+
const duration = appointment.startDate.duration(appointment.endDate);
|
|
487
483
|
return {
|
|
488
484
|
...appointment,
|
|
489
|
-
startDate: segmentStartDate
|
|
490
|
-
endDate: segmentEndDate
|
|
491
|
-
allDay: appointment.allDay || duration.total.
|
|
492
|
-
originalStartDate:
|
|
493
|
-
originalEndDate:
|
|
485
|
+
startDate: segmentStartDate,
|
|
486
|
+
endDate: segmentEndDate,
|
|
487
|
+
allDay: appointment.allDay || duration.total.days >= 1,
|
|
488
|
+
originalStartDate: appointment.startDate,
|
|
489
|
+
originalEndDate: appointment.endDate,
|
|
494
490
|
isContinuationFromPreviousDay,
|
|
495
491
|
isContinuationToNextDay,
|
|
496
492
|
originalAppointmentRef: appointment,
|
|
@@ -551,8 +547,8 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
551
547
|
}
|
|
552
548
|
const sortedSegments = orderBy(segmentsForThisDay, [
|
|
553
549
|
(s) => (s.allDay ? 0 : 1),
|
|
554
|
-
(s) => s.startDate.getTime(),
|
|
555
|
-
(s) => s.originalEndDate.getTime() - s.originalStartDate.getTime(),
|
|
550
|
+
(s) => s.startDate.date.getTime(),
|
|
551
|
+
(s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(),
|
|
556
552
|
], ['asc', 'asc', 'desc']);
|
|
557
553
|
result.push({
|
|
558
554
|
date: currentDay,
|
|
@@ -588,8 +584,8 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
588
584
|
const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentItem);
|
|
589
585
|
const appointmentRef = {
|
|
590
586
|
...originalAppointment,
|
|
591
|
-
endDate: originalAppointment.endDate,
|
|
592
|
-
startDate: originalAppointment.startDate,
|
|
587
|
+
endDate: originalAppointment.endDate.date,
|
|
588
|
+
startDate: originalAppointment.startDate.date,
|
|
593
589
|
};
|
|
594
590
|
this.schedulerService.handleEvent({ nativeEvent: mouseEvent, appointment: appointmentRef, sender: this.scheduler }, this.eventOutputMap, 'appointment');
|
|
595
591
|
}
|
|
@@ -605,8 +601,8 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
605
601
|
const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
|
|
606
602
|
const appointmentRef = {
|
|
607
603
|
...originalAppointment,
|
|
608
|
-
endDate: originalAppointment.endDate,
|
|
609
|
-
startDate: originalAppointment.startDate,
|
|
604
|
+
endDate: originalAppointment.endDate.date,
|
|
605
|
+
startDate: originalAppointment.startDate.date,
|
|
610
606
|
};
|
|
611
607
|
this.onAppointmentDropInternal.emit({
|
|
612
608
|
dropEvent: e,
|
|
@@ -638,7 +634,7 @@ class AXSchedulerAgendaViewComponent extends NXComponent {
|
|
|
638
634
|
return this.readonly();
|
|
639
635
|
}
|
|
640
636
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerAgendaViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
641
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ 'noRecord' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
637
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXSchedulerAgendaViewComponent, isStandalone: true, selector: "ax-scheduler-agenda-view", inputs: { daysCount: { classPropertyName: "daysCount", publicName: "daysCount", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ 'noRecord' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
642
638
|
}
|
|
643
639
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerAgendaViewComponent, decorators: [{
|
|
644
640
|
type: Component,
|
|
@@ -650,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
650
646
|
AXDropZoneDirective,
|
|
651
647
|
AXTranslatorPipe,
|
|
652
648
|
AXTooltipDirective,
|
|
653
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ 'noRecord' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
|
|
649
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerAgendaViewComponent }], template: "<div class=\"ax-scheduler-agenda-container\">\n @for (dayData of agendaDaysLayout(); track dayData.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n class=\"ax-scheduler-agenda-view-container\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-agenda-header-date-day\">\n <span\n class=\"ax-scheduler-agenda-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n [axTooltipPlacement]=\"'top-start'\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-agenda-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n <div class=\"ax-scheduler-agenda-appointment-container\">\n @for (segment of dayData.appointments; track segment.id + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ' (All Day)'\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-agenda-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <div class=\"ax-scheduler-agenda-appointment-time\">\n @if (segment.allDay) {\n <span>{{ 'dateTime.duration.all-day' | translate | async }}</span>\n } @else {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n <ax-title class=\"ax-scheduler-agenda-appointment-title ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Description could go here if needed -->\n <!-- <ax-subtitle *ngIf=\"segment.description\">{{ segment.description }}</ax-subtitle> -->\n </div>\n }\n @if (dayData.appointments.length === 0) {\n <div class=\"ax-scheduler-agenda-no-appointments\">\n {{ 'noRecord' | translate | async }}\n </div>\n }\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-agenda-view .ax-scheduler-agenda-container{height:100%;display:flex;flex-direction:column}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container{gap:1rem;display:flex;position:relative;padding-inline:1rem;padding-block:.25rem;border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container:last-child{border-block-end-width:0}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-today .ax-scheduler-agenda-header-date-day .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day{gap:.25rem;display:flex;height:3.5rem;min-width:6rem;max-width:6rem;position:sticky;align-items:start;flex-direction:column;inset-block-start:1rem;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-char{max-width:100%;font-weight:300}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-view-container .ax-scheduler-agenda-header-date-day .ax-scheduler-agenda-header-date-day-num{font-weight:500;font-size:1.25rem}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container{width:100%;gap:.25rem;display:flex;align-items:center;flex-direction:column;justify-content:center}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment{gap:.5rem;width:100%;display:flex;overflow:hidden;align-items:center;flex-direction:row;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment.all-day-segment .ax-scheduler-agenda-appointment-time{font-weight:500}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-time{flex-shrink:0;min-width:120px;font-size:.9em;opacity:.9}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-appointment .ax-scheduler-agenda-appointment-title{flex-grow:1}ax-scheduler-agenda-view .ax-scheduler-agenda-container .ax-scheduler-agenda-appointment-container .ax-scheduler-agenda-no-appointments{text-align:center;font-style:italic;color:rgba(var(--ax-sys-color-on-surface),.6)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-appointment{cursor:pointer}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-agenda-view:not(.ax-state-readonly) .ax-scheduler-agenda-view-container:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
|
|
654
650
|
}], propDecorators: { isReadonly: [{
|
|
655
651
|
type: HostBinding,
|
|
656
652
|
args: ['class.ax-state-readonly']
|
|
@@ -660,7 +656,6 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
660
656
|
constructor() {
|
|
661
657
|
super(...arguments);
|
|
662
658
|
this.scheduler = inject(AXSchedulerComponent);
|
|
663
|
-
this.calendarService = inject(AXCalendarService);
|
|
664
659
|
this.schedulerService = inject(AXSchedulerService);
|
|
665
660
|
this.GAP_PX = 1;
|
|
666
661
|
this.readonly = input(false);
|
|
@@ -743,7 +738,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
743
738
|
return layouts;
|
|
744
739
|
}
|
|
745
740
|
const concurrencyInfoMap = this.schedulerService.calculateDayViewConcurrencyInfo(appointmentsToLayout, viewDate, startH, endH);
|
|
746
|
-
const sortedAppointments = orderBy(appointmentsToLayout, [(e) => e.startDate.getTime(), (e) => e.originalEndDate.getTime() - e.originalStartDate.getTime()], ['asc', 'desc']);
|
|
741
|
+
const sortedAppointments = orderBy(appointmentsToLayout, [(e) => e.startDate.date.getTime(), (e) => e.originalEndDate.date.getTime() - e.originalStartDate.date.getTime()], ['asc', 'desc']);
|
|
747
742
|
const columnsData = [];
|
|
748
743
|
for (const appointmentSegment of sortedAppointments) {
|
|
749
744
|
let assignedCol = -1;
|
|
@@ -753,10 +748,8 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
753
748
|
}
|
|
754
749
|
let conflict = false;
|
|
755
750
|
for (const placedSegment of columnsData[c].appointments) {
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
if (startDate.compare(placedSegment.endDate, 'minute') < 0 &&
|
|
759
|
-
endDate.compare(placedSegment.startDate, 'minute') > 0) {
|
|
751
|
+
if (appointmentSegment.startDate.compare(placedSegment.endDate, 'minute') < 0 &&
|
|
752
|
+
appointmentSegment.endDate.compare(placedSegment.startDate, 'minute') > 0) {
|
|
760
753
|
conflict = true;
|
|
761
754
|
break;
|
|
762
755
|
}
|
|
@@ -795,8 +788,8 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
795
788
|
: appointment;
|
|
796
789
|
const appointmentRef = {
|
|
797
790
|
...originalAppointment,
|
|
798
|
-
endDate: originalAppointment.endDate,
|
|
799
|
-
startDate: originalAppointment.startDate,
|
|
791
|
+
endDate: originalAppointment.endDate.date,
|
|
792
|
+
startDate: originalAppointment.startDate.date,
|
|
800
793
|
};
|
|
801
794
|
this.schedulerService.handleEvent({ nativeEvent: mouseEvent, appointment: appointmentRef, sender: this.scheduler }, this.eventOutputMap, 'appointment');
|
|
802
795
|
}
|
|
@@ -826,8 +819,8 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
826
819
|
: droppedAppt;
|
|
827
820
|
const appointmentRef = {
|
|
828
821
|
...originalDroppedAppt,
|
|
829
|
-
endDate: originalDroppedAppt.endDate,
|
|
830
|
-
startDate: originalDroppedAppt.startDate,
|
|
822
|
+
endDate: originalDroppedAppt.endDate.date,
|
|
823
|
+
startDate: originalDroppedAppt.startDate.date,
|
|
831
824
|
};
|
|
832
825
|
this.onAppointmentDropInternal.emit({
|
|
833
826
|
dropEvent: e,
|
|
@@ -848,8 +841,8 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
848
841
|
: droppedAppt;
|
|
849
842
|
const appointmentRef = {
|
|
850
843
|
...originalDroppedAppt,
|
|
851
|
-
endDate: originalDroppedAppt.endDate,
|
|
852
|
-
startDate: originalDroppedAppt.startDate,
|
|
844
|
+
endDate: originalDroppedAppt.endDate.date,
|
|
845
|
+
startDate: originalDroppedAppt.startDate.date,
|
|
853
846
|
};
|
|
854
847
|
this.onAppointmentDropInternal.emit({
|
|
855
848
|
dropEvent: e,
|
|
@@ -894,7 +887,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
894
887
|
getAppointmentTop(key) {
|
|
895
888
|
const appointmentSegment = this.singleDayAppointments().find((e) => e.id === key);
|
|
896
889
|
if (appointmentSegment) {
|
|
897
|
-
const startMinutes = appointmentSegment.startDate.
|
|
890
|
+
const startMinutes = appointmentSegment.startDate.hour * 60 + appointmentSegment.startDate.minute;
|
|
898
891
|
const startBlockOffset = startMinutes - this.startDayHour() * 60;
|
|
899
892
|
const yBlock = startBlockOffset / 30;
|
|
900
893
|
return `calc(var(--ax-comp-scheduler-basic-view-blocks-height) * ${yBlock} + 1px)`;
|
|
@@ -904,7 +897,7 @@ class AXSchedulerDayViewComponent extends NXComponent {
|
|
|
904
897
|
getAppointmentHeight(key) {
|
|
905
898
|
const appointmentSegment = this.singleDayAppointments().find((e) => e.id === key);
|
|
906
899
|
if (appointmentSegment) {
|
|
907
|
-
const durationMillis = appointmentSegment.endDate.getTime() - appointmentSegment.startDate.getTime();
|
|
900
|
+
const durationMillis = appointmentSegment.endDate.date.getTime() - appointmentSegment.startDate.date.getTime();
|
|
908
901
|
const durationMinutes = Math.max(0, durationMillis / (1000 * 60));
|
|
909
902
|
if (durationMinutes <= 0)
|
|
910
903
|
return '0px';
|
|
@@ -1077,8 +1070,8 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1077
1070
|
}
|
|
1078
1071
|
const sortedSegments = orderBy(segmentsForThisDay, [
|
|
1079
1072
|
(s) => (s.allDay ? 0 : 1), // Segments marked as allDay first
|
|
1080
|
-
(s) => s.originalStartDate.getTime(), // Then by original start time
|
|
1081
|
-
(s) => s.originalEndDate.getTime() - s.originalStartDate.getTime(), // Then by duration (longer first)
|
|
1073
|
+
(s) => s.originalStartDate.date.getTime(), // Then by original start time
|
|
1074
|
+
(s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(), // Then by duration (longer first)
|
|
1082
1075
|
(s) => s.title?.toLowerCase() ?? '', // Then by title
|
|
1083
1076
|
], ['asc', 'asc', 'desc', 'asc']);
|
|
1084
1077
|
const visibleAppointments = sortedSegments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
|
|
@@ -1106,8 +1099,8 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1106
1099
|
const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentSegmentOrOriginal);
|
|
1107
1100
|
const appointmentRef = {
|
|
1108
1101
|
...originalAppointment,
|
|
1109
|
-
endDate: originalAppointment.endDate,
|
|
1110
|
-
startDate: originalAppointment.startDate,
|
|
1102
|
+
endDate: originalAppointment.endDate.date,
|
|
1103
|
+
startDate: originalAppointment.startDate.date,
|
|
1111
1104
|
};
|
|
1112
1105
|
this.schedulerService.handleEvent({ nativeEvent: mouseEvent, appointment: appointmentRef, sender: this.scheduler }, this.eventOutputMap, 'appointment');
|
|
1113
1106
|
}
|
|
@@ -1123,8 +1116,8 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1123
1116
|
const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
|
|
1124
1117
|
const appointmentRef = {
|
|
1125
1118
|
...originalAppointment,
|
|
1126
|
-
endDate: originalAppointment.endDate,
|
|
1127
|
-
startDate: originalAppointment.startDate,
|
|
1119
|
+
endDate: originalAppointment.endDate.date,
|
|
1120
|
+
startDate: originalAppointment.startDate.date,
|
|
1128
1121
|
};
|
|
1129
1122
|
this.onAppointmentDropInternal.emit({
|
|
1130
1123
|
dropEvent: e,
|
|
@@ -1137,7 +1130,7 @@ class AXSchedulerMonthViewComponent extends NXComponent {
|
|
|
1137
1130
|
return this.readonly();
|
|
1138
1131
|
}
|
|
1139
1132
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-state-holiday]=\"dayCell.isHoliday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n }\n <!-- Overflow Badge and Popover -->\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n <!-- Stop propagation to prevent slot click -->\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.color]=\"segment.textColor\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:2;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXSchedulerMonthViewComponent, isStandalone: true, selector: "ax-scheduler-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, firstDayOfWeek: { classPropertyName: "firstDayOfWeek", publicName: "firstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-state-holiday]=\"dayCell.isHoliday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n }\n <!-- Overflow Badge and Popover -->\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n <!-- Stop propagation to prevent slot click -->\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.color]=\"segment.textColor\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1141
1134
|
}
|
|
1142
1135
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerMonthViewComponent, decorators: [{
|
|
1143
1136
|
type: Component,
|
|
@@ -1150,7 +1143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1150
1143
|
AXDragDirective,
|
|
1151
1144
|
AXDropZoneDirective,
|
|
1152
1145
|
AXTooltipDirective,
|
|
1153
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-state-holiday]=\"dayCell.isHoliday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n }\n <!-- Overflow Badge and Popover -->\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n <!-- Stop propagation to prevent slot click -->\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.color]=\"segment.textColor\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:2;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}\n"] }]
|
|
1146
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerMonthViewComponent }], template: "<div class=\"ax-scheduler-month-container\">\n <!-- Weekday Header -->\n <div class=\"ax-scheduler-month-weekdays\">\n @for (day of daysArray(); track day.date.getTime()) {\n <div class=\"ax-scheduler-month-weekday\">\n {{ day | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n </div>\n }\n </div>\n\n <!-- Calendar Grid -->\n <div class=\"ax-scheduler-month-grid\" [style.gridTemplateRows]=\"gridTemplateRowsStyle()\">\n @for (dayCell of dayCellLayouts(); track dayCell.date.date.getTime()) {\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayCell.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n (click)=\"handleSlotEvent($event, dayCell.date)\"\n (dblclick)=\"handleSlotEvent($event, dayCell.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayCell.date)\"\n class=\"ax-scheduler-month-day-cell\"\n [class.ax-state-today]=\"dayCell.isToday\"\n [class.ax-state-holiday]=\"dayCell.isHoliday\"\n [class.ax-other-month]=\"!dayCell.isCurrentMonth\"\n [attr.data-date]=\"dayCell.date | format: 'date' : { format: 'YYYY-MM-DD' }\"\n >\n <div class=\"ax-scheduler-month-day-header\">\n <span class=\"ax-scheduler-month-day-number ax-scheduler-truncate\" [axTooltip]=\"dayCell.holidayTitle ?? ''\">\n {{ dayCell.date.dayOfMonth }}\n\n @if (dayCell.holidayTitle) {\n ( {{ dayCell.holidayTitle }} )\n }\n </span>\n </div>\n <div class=\"ax-scheduler-month-day-appointments\">\n <!-- Visible Appointment Segments -->\n @for (segment of dayCell.visibleAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-month-appointment-chip\"\n [class.all-day-segment]=\"segment.allDay\"\n [class.continuation-from-prev]=\"segment.isContinuationFromPreviousDay && !segment.allDay\"\n [class.continuation-to-next]=\"segment.isContinuationToNextDay && !segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </span>\n }\n </div>\n }\n <!-- Overflow Badge and Popover -->\n @if (dayCell.overflowCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n <!-- Stop propagation to prevent slot click -->\n +{{ 'more-items' | translate: { params: { number: dayCell.overflowCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayCell.hiddenAppointments; track segment.id + segment.originalStartDate) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.title +\n (segment.allDay\n ? ''\n : ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')')\n \"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.color]=\"segment.textColor\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <span>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </span>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n }\n </div>\n</div>\n", styles: ["ax-scheduler-month-view{height:100%;display:block;background-color:inherit;min-width:var(--ax-comp-scheduler-width)}ax-scheduler-month-view .ax-scheduler-month-container{height:100%;display:flex;flex-direction:column;background-color:inherit}ax-scheduler-month-view .ax-scheduler-month-weekdays{top:0;z-index:1;width:100%;display:grid;flex-shrink:0;position:sticky;padding:.5rem 0;text-align:center;grid-template-columns:repeat(7,minmax(0,1fr));background-color:var(--ax-comp-scheduler-all-day-bg, inherit);border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-weekdays .ax-scheduler-month-weekday{font-weight:500;font-size:.875rem}ax-scheduler-month-view .ax-scheduler-month-grid{width:100%;flex-grow:1;display:grid;grid-auto-rows:minmax(5rem,auto);grid-template-columns:repeat(7,minmax(0,1fr));border-left:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell{padding:.25rem;overflow:hidden;position:relative;border-right:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-bottom:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month{background-color:rgba(var(--ax-sys-color-border-lightest-surface),.2)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-on-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today{background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month{background-color:rgba(var(--ax-sys-color-primary-surface),.025)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-today.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-primary-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday .ax-scheduler-month-day-number{font-weight:700;color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell.ax-state-holiday.ax-other-month .ax-scheduler-month-day-number{color:rgba(var(--ax-sys-color-danger-surface),.5)}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header{text-align:center;margin-bottom:.25rem}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-header .ax-scheduler-month-day-number{max-width:100%;font-size:.875rem;display:inline-block}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments{gap:.125rem;display:flex;overflow:hidden;flex-direction:column}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-appointment-chip{overflow:hidden;font-size:.75rem;white-space:nowrap;border-radius:.25rem;text-overflow:ellipsis;padding:.125rem .25rem;color:rgba(var(--ax-sys-color-on-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-month-view .ax-scheduler-month-grid .ax-scheduler-month-day-cell .ax-scheduler-month-day-appointments .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-appointment-chip{cursor:pointer}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}ax-scheduler-month-view:not(.ax-state-readonly) .ax-scheduler-month-day-cell:hover.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.1)}\n"] }]
|
|
1154
1147
|
}], propDecorators: { isReadonly: [{
|
|
1155
1148
|
type: HostBinding,
|
|
1156
1149
|
args: ['class.ax-state-readonly']
|
|
@@ -1160,7 +1153,6 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1160
1153
|
constructor() {
|
|
1161
1154
|
super(...arguments);
|
|
1162
1155
|
this.scheduler = inject(AXSchedulerComponent);
|
|
1163
|
-
this.calendarService = inject(AXCalendarService);
|
|
1164
1156
|
this.schedulerService = inject(AXSchedulerService);
|
|
1165
1157
|
this.GAP_PX = 1;
|
|
1166
1158
|
this.readonly = input(false);
|
|
@@ -1238,7 +1230,7 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1238
1230
|
appointmentsToLayout.length === 0) {
|
|
1239
1231
|
return finalLayouts;
|
|
1240
1232
|
}
|
|
1241
|
-
const sortedAppointments = orderBy(appointmentsToLayout, [(seg) => seg.startDate.getTime(), (seg) => seg.originalEndDate.getTime()], ['asc', 'desc']);
|
|
1233
|
+
const sortedAppointments = orderBy(appointmentsToLayout, [(seg) => seg.startDate.date.getTime(), (seg) => seg.originalEndDate.date.getTime()], ['asc', 'desc']);
|
|
1242
1234
|
const rowEndTimes = [];
|
|
1243
1235
|
for (const segment of sortedAppointments) {
|
|
1244
1236
|
const horizLayout = this.schedulerService.calculateTimelineLayout(segment, // Pass the segment
|
|
@@ -1246,8 +1238,8 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1246
1238
|
if (!horizLayout)
|
|
1247
1239
|
continue; // Segment is outside the viewable hour range or invalid
|
|
1248
1240
|
// For overlap check, use the segment's start and end times
|
|
1249
|
-
const segmentStartTime =
|
|
1250
|
-
const segmentEndTime =
|
|
1241
|
+
const segmentStartTime = segment.startDate;
|
|
1242
|
+
const segmentEndTime = segment.endDate;
|
|
1251
1243
|
let assignedRowIndex = -1;
|
|
1252
1244
|
for (let i = 0; i < rowEndTimes.length; i++) {
|
|
1253
1245
|
// If this segment starts AFTER OR AT the time the row becomes free
|
|
@@ -1283,8 +1275,8 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1283
1275
|
const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentItem);
|
|
1284
1276
|
const appointmentRef = {
|
|
1285
1277
|
...originalAppointment,
|
|
1286
|
-
endDate: originalAppointment.endDate,
|
|
1287
|
-
startDate: originalAppointment.startDate,
|
|
1278
|
+
endDate: originalAppointment.endDate.date,
|
|
1279
|
+
startDate: originalAppointment.startDate.date,
|
|
1288
1280
|
};
|
|
1289
1281
|
this.schedulerService.handleEvent({ nativeEvent: mouseEvent, appointment: appointmentRef, sender: this.scheduler }, this.eventOutputMap, 'appointment');
|
|
1290
1282
|
}
|
|
@@ -1299,8 +1291,8 @@ class AXSchedulerTimelineDayViewComponent extends NXComponent {
|
|
|
1299
1291
|
const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
|
|
1300
1292
|
const appointmentRef = {
|
|
1301
1293
|
...originalAppointment,
|
|
1302
|
-
endDate: originalAppointment.endDate,
|
|
1303
|
-
startDate: originalAppointment.startDate,
|
|
1294
|
+
endDate: originalAppointment.endDate.date,
|
|
1295
|
+
startDate: originalAppointment.startDate.date,
|
|
1304
1296
|
};
|
|
1305
1297
|
this.onAppointmentDropInternal.emit({
|
|
1306
1298
|
dropEvent: e,
|
|
@@ -1366,8 +1358,8 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
1366
1358
|
// Sort segments: all-day first, then by segment start time (which is clipped to the day)
|
|
1367
1359
|
const sortedSegments = orderBy(segmentsForThisDay, [
|
|
1368
1360
|
(s) => (s.allDay ? 0 : 1), // Segments marked as allDay first
|
|
1369
|
-
(s) => s.startDate.getTime(), // Segment's start time on this day
|
|
1370
|
-
(s) => s.endDate.getTime() - s.startDate.getTime(), // Segment's duration on this day
|
|
1361
|
+
(s) => s.startDate.date.getTime(), // Segment's start time on this day
|
|
1362
|
+
(s) => s.endDate.date.getTime() - s.startDate.date.getTime(), // Segment's duration on this day
|
|
1371
1363
|
(s) => s.title?.toLowerCase() ?? '',
|
|
1372
1364
|
], ['asc', 'asc', 'desc', 'asc']);
|
|
1373
1365
|
const visibleAppointments = sortedSegments.slice(0, this.MAX_VISIBLE_APPOINTMENTS_PER_DAY);
|
|
@@ -1408,8 +1400,8 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
1408
1400
|
const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentItem);
|
|
1409
1401
|
const appointmentRef = {
|
|
1410
1402
|
...originalAppointment,
|
|
1411
|
-
endDate: originalAppointment.endDate,
|
|
1412
|
-
startDate: originalAppointment.startDate,
|
|
1403
|
+
endDate: originalAppointment.endDate.date,
|
|
1404
|
+
startDate: originalAppointment.startDate.date,
|
|
1413
1405
|
};
|
|
1414
1406
|
this.schedulerService.handleEvent({ nativeEvent: mouseEvent, appointment: appointmentRef, sender: this.scheduler }, this.eventOutputMap, 'appointment');
|
|
1415
1407
|
}
|
|
@@ -1426,8 +1418,8 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
1426
1418
|
const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
|
|
1427
1419
|
const appointmentRef = {
|
|
1428
1420
|
...originalAppointment,
|
|
1429
|
-
endDate: originalAppointment.endDate,
|
|
1430
|
-
startDate: originalAppointment.startDate,
|
|
1421
|
+
endDate: originalAppointment.endDate.date,
|
|
1422
|
+
startDate: originalAppointment.startDate.date,
|
|
1431
1423
|
};
|
|
1432
1424
|
this.onAppointmentDropInternal.emit({
|
|
1433
1425
|
dropEvent: e,
|
|
@@ -1459,7 +1451,7 @@ class AXSchedulerTimelineMonthViewComponent extends NXComponent {
|
|
|
1459
1451
|
return this.readonly();
|
|
1460
1452
|
}
|
|
1461
1453
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n class=\"ax-scheduler-month-header-date-day\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayData.hiddenAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1454
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: AXSchedulerTimelineMonthViewComponent, isStandalone: true, selector: "ax-scheduler-timeline-month-view", inputs: { readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, calendar: { classPropertyName: "calendar", publicName: "calendar", isSignal: true, isRequired: false, transformFunction: null }, date: { classPropertyName: "date", publicName: "date", isSignal: true, isRequired: true, transformFunction: null }, appointments: { classPropertyName: "appointments", publicName: "appointments", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { slotClickedInternal: "slotClickedInternal", slotDblClickedInternal: "slotDblClickedInternal", slotRightClickedInternal: "slotRightClickedInternal", appointmentClickedInternal: "appointmentClickedInternal", appointmentDblClickedInternal: "appointmentDblClickedInternal", appointmentRightClickedInternal: "appointmentRightClickedInternal", onAppointmentDropInternal: "onAppointmentDropInternal" }, host: { properties: { "class.ax-state-readonly": "this.isReadonly" } }, providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n class=\"ax-scheduler-month-header-date-day\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.date.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"], dependencies: [{ kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "pipe", type: AXFormatPipe, name: "format" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["dragData", "dragDisabled", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragCursor", "dragBoundary"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropZoneDirective, selector: "[axDropZone]", inputs: ["dropZoneGroup"], outputs: ["onElementDrop", "onElementHover"], exportAs: ["axDropZone"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1463
1455
|
}
|
|
1464
1456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerTimelineMonthViewComponent, decorators: [{
|
|
1465
1457
|
type: Component,
|
|
@@ -1472,7 +1464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImpo
|
|
|
1472
1464
|
AXDragDirective,
|
|
1473
1465
|
AXDropZoneDirective,
|
|
1474
1466
|
AXTooltipDirective,
|
|
1475
|
-
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n class=\"ax-scheduler-month-header-date-day\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (segment of dayData.hiddenAppointments; track segment.id + segment.originalStartDate.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
|
|
1467
|
+
], providers: [{ provide: AXComponent, useExisting: AXSchedulerTimelineMonthViewComponent }], template: "<div class=\"ax-scheduler-timeline-month-container\">\n @for (dayData of processedDayData(); track dayData.date.date.getTime()) {\n <div>\n <div class=\"ax-scheduler-timeline-header\">\n <div\n class=\"ax-scheduler-month-header-date-day\"\n [class.ax-state-today]=\"isToday(dayData.date)\"\n [class.ax-state-holiday]=\"dayData.holiday.state !== 'none'\"\n >\n <span\n class=\"ax-scheduler-month-header-date-day-char ax-scheduler-truncate\"\n [axTooltip]=\"dayData.holiday?.holiday?.title ?? ''\"\n >\n {{ dayData.date | format: 'date' : { format: 'dddd', calendar: calendar() } | async }}\n @if (dayData.holiday.state === 'holiday' && dayData.holiday.holiday.title) {\n ( {{ dayData.holiday.holiday.title }} )\n }\n </span>\n <span class=\"ax-scheduler-month-header-date-day-num\">\n {{ dayData.date | format: 'date' : { format: 'DD', calendar: calendar() } | async }}\n </span>\n </div>\n </div>\n\n <div\n axDropZone\n #zone=\"axDropZone\"\n (onElementDrop)=\"handleDrop($event, dayData.date)\"\n [class.ax-scheduler-slot-hovered]=\"zone.isHovered()\"\n class=\"ax-scheduler-timeline-content\"\n (click)=\"handleSlotEvent($event, dayData.date)\"\n (dblclick)=\"handleSlotEvent($event, dayData.date)\"\n (contextmenu)=\"handleSlotEvent($event, dayData.date)\"\n >\n <div class=\"ax-scheduler-timeline-appointment-container\">\n @for (segment of dayData.visibleAppointments; track segment.id + segment.originalStartDate.date.getTime()) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment)\"\n (dblclick)=\"handleAppointmentEvent($event, segment)\"\n (contextmenu)=\"handleAppointmentEvent($event, segment)\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-timeline-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <ax-title class=\"ax-scheduler-truncate\">{{ segment.title }}</ax-title>\n <!-- Display segment's start/end times if not allDay for this segment -->\n @if (!segment.allDay) {\n <ax-subtitle>\n {{ segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }} -\n {{ segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async }}\n </ax-subtitle>\n }\n </div>\n }\n @if (dayData.moreCount > 0) {\n <div #moreAppointments class=\"ax-scheduler-month-overflow-badge\" (click)=\"$event.stopPropagation()\">\n +{{ 'more-items' | translate: { params: { number: dayData.moreCount } } | async }}\n </div>\n <ax-popover [target]=\"moreAppointments\" placement=\"bottom-start\" trigger=\"click\">\n <div\n [class.ax-state-readonly]=\"readonly()\"\n class=\"ax-overlay-pane ax-scheduler-popover ax-scheduler-month-popover-appointment\"\n >\n @for (\n segment of dayData.hiddenAppointments;\n track segment.id + segment.originalStartDate.date.getTime()\n ) {\n <div\n axDrag\n [dragCursor]=\"'grab'\"\n [dragData]=\"segment\"\n [dragElementClone]=\"true\"\n [dragDisabled]=\"!draggable() || segment.readonly || readonly()\"\n (click)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (dblclick)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n (contextmenu)=\"handleAppointmentEvent($event, segment); $event.stopPropagation()\"\n [title]=\"\n segment.allDay\n ? segment.title\n : segment.title +\n ' (' +\n (segment.originalStartDate | format: 'time' : { calendar: calendar() } | async) +\n ' - ' +\n (segment.originalEndDate | format: 'time' : { calendar: calendar() } | async) +\n ')'\n \"\n [style.color]=\"segment.textColor\"\n class=\"ax-scheduler-popover-appointment\"\n [class.all-day-segment]=\"segment.allDay\"\n [style.background-color]=\"segment.backgroundColor\"\n >\n <span class=\"ax-appointment-chip-title ax-scheduler-truncate\">{{ segment.title }}</span>\n @if (!segment.allDay) {\n <ax-subtitle>\n {{\n segment.originalStartDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n -\n {{\n segment.originalEndDate | format: 'time' : { format: 'HH:mm', calendar: calendar() } | async\n }}\n </ax-subtitle>\n }\n </div>\n }\n </div>\n </ax-popover>\n }\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["ax-scheduler-timeline-month-view{height:100%;position:relative;display:inline-flex;flex-direction:column;background-color:inherit}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container{height:100%;display:flex}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header{width:100%;display:flex;background-color:var(--ax-comp-scheduler-all-day-bg, inherit)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day{gap:.25rem;height:4rem;display:flex;position:relative;align-items:start;padding-inline:1rem;flex-direction:column;padding-block:.25rem;justify-content:center;width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-block-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface),.05)}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-char{font-weight:500}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-today .ax-scheduler-month-header-date-day-num{font-weight:700}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday{color:rgba(var(--ax-sys-color-danger-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day.ax-state-holiday.ax-state-today{color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-char{max-width:100%;position:sticky;font-weight:300;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-header .ax-scheduler-month-header-date-day .ax-scheduler-month-header-date-day-num{position:sticky;font-weight:500;font-size:1.25rem;inset-inline-start:1rem}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content{padding:.125rem .25rem;position:relative;height:calc(100% - 4rem);width:var(--ax-comp-scheduler-timeline-month-view-blocks-width, calc(var(--ax-comp-scheduler-timeline-view-blocks-width) / 2));border-inline-end:1px solid rgba(var(--ax-sys-color-border-lightest-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container{gap:1px;display:flex;flex-direction:column}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-timeline-appointment{width:100%;display:flex;overflow:hidden;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge{cursor:pointer;text-align:left;font-size:.75rem;padding:.125rem 0;margin-top:.125rem;color:rgba(var(--ax-sys-color-primary-text))}ax-scheduler-timeline-month-view .ax-scheduler-timeline-month-container .ax-scheduler-timeline-content .ax-scheduler-timeline-appointment-container .ax-scheduler-month-overflow-badge:hover{text-decoration:underline}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-appointment{cursor:pointer}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content{cursor:pointer;transition-property:background-color;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-scheduler-timeline-month-view:not(.ax-state-readonly) .ax-scheduler-timeline-content:hover{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}\n"] }]
|
|
1476
1468
|
}], propDecorators: { isReadonly: [{
|
|
1477
1469
|
type: HostBinding,
|
|
1478
1470
|
args: ['class.ax-state-readonly']
|
|
@@ -1507,9 +1499,7 @@ class AXSchedulerTimelineMultiDayViewComponent extends NXComponent {
|
|
|
1507
1499
|
if (appt.allDay) {
|
|
1508
1500
|
return false;
|
|
1509
1501
|
}
|
|
1510
|
-
|
|
1511
|
-
const apptEnd = this.calendarService.create(appt.endDate, this.calendar());
|
|
1512
|
-
return apptStart.compare(currentDayStart, 'day') >= 0 && apptEnd.compare(currentDayEnd, 'day') <= 0;
|
|
1502
|
+
return appt.endDate.compare(currentDayStart, 'day') >= 0 && appt.startDate.compare(currentDayEnd, 'day') <= 0;
|
|
1513
1503
|
});
|
|
1514
1504
|
result.push({
|
|
1515
1505
|
date: currentDayDate,
|
|
@@ -1605,9 +1595,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1605
1595
|
const uniqueSegmentsMap = new Map();
|
|
1606
1596
|
allSegmentsInView.forEach((seg) => {
|
|
1607
1597
|
// Create a unique key for the segment based on original appt key and segment's own date range
|
|
1608
|
-
const
|
|
1609
|
-
const segEnd = this.calendarService.create(seg.endDate, this.calendar());
|
|
1610
|
-
const mapKey = `${seg.id}-${segStart.format('YYYYMMDDHHmmssSSS')}-${segEnd.format('YYYYMMDDHHmmssSSS')}`;
|
|
1598
|
+
const mapKey = `${seg.id}-${seg.startDate.format('YYYYMMDDHHmmssSSS')}-${seg.endDate.format('YYYYMMDDHHmmssSSS')}`;
|
|
1611
1599
|
if (!uniqueSegmentsMap.has(mapKey)) {
|
|
1612
1600
|
uniqueSegmentsMap.set(mapKey, seg);
|
|
1613
1601
|
}
|
|
@@ -1707,7 +1695,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1707
1695
|
continue;
|
|
1708
1696
|
const startingAppointments = dayBlocks[blockIndex] ?? [];
|
|
1709
1697
|
if (startingAppointments.length > 0) {
|
|
1710
|
-
const appointmentToShow = orderBy(startingAppointments, [(e) => e.endDate.getTime()], ['desc'])[0];
|
|
1698
|
+
const appointmentToShow = orderBy(startingAppointments, [(e) => e.endDate.date.getTime()], ['desc'])[0];
|
|
1711
1699
|
const C = dayIndex;
|
|
1712
1700
|
let layoutLeft = '0px';
|
|
1713
1701
|
if (C > 0 && N > 1)
|
|
@@ -1758,7 +1746,7 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1758
1746
|
if (!viewStartDate || typeof startH !== 'number' || typeof endH !== 'number')
|
|
1759
1747
|
return map;
|
|
1760
1748
|
for (const appointmentLayout of visibleLayouts) {
|
|
1761
|
-
const startInfo = this.schedulerService.getBlockIdentifier(
|
|
1749
|
+
const startInfo = this.schedulerService.getBlockIdentifier(appointmentLayout.appointment.startDate, viewStartDate, startH, endH, 7);
|
|
1762
1750
|
if (!startInfo)
|
|
1763
1751
|
continue;
|
|
1764
1752
|
const durationMinutes = this.schedulerService.calculateDurationInMinutes(appointmentLayout.appointment);
|
|
@@ -1826,13 +1814,12 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1826
1814
|
daysInWeek.forEach((dayDate) => {
|
|
1827
1815
|
const currentDayStart = dayDate.startOf('day'); // For accurate day comparison
|
|
1828
1816
|
// Filter segments that are marked as 'allDay' AND belong to the current 'dayDate'
|
|
1829
|
-
const allDaySegmentsForThisDay = allSegmentsInView.filter((segment) => segment.allDay &&
|
|
1830
|
-
this.calendarService.create(segment.startDate, this.calendar()).startOf('day').equal(currentDayStart, 'day'));
|
|
1817
|
+
const allDaySegmentsForThisDay = allSegmentsInView.filter((segment) => segment.allDay && segment.startDate.startOf('day').equal(currentDayStart, 'day'));
|
|
1831
1818
|
// Sort these segments for consistent display
|
|
1832
1819
|
// Primarily by original start time, then by duration of original appointment, then title
|
|
1833
1820
|
const sortedAppointmentsForThisDay = orderBy(allDaySegmentsForThisDay, [
|
|
1834
|
-
(s) => s.originalStartDate.getTime(),
|
|
1835
|
-
(s) => s.originalEndDate.getTime() - s.originalStartDate.getTime(),
|
|
1821
|
+
(s) => s.originalStartDate.date.getTime(),
|
|
1822
|
+
(s) => s.originalEndDate.date.getTime() - s.originalStartDate.date.getTime(),
|
|
1836
1823
|
(s) => s.title?.toLowerCase() ?? '',
|
|
1837
1824
|
], ['asc', 'desc', 'asc']);
|
|
1838
1825
|
result.push({
|
|
@@ -1901,8 +1888,8 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1901
1888
|
const originalAppointment = this.schedulerService.getOriginalAppointment(appointmentSegment);
|
|
1902
1889
|
const appointmentRef = {
|
|
1903
1890
|
...originalAppointment,
|
|
1904
|
-
endDate: originalAppointment.endDate,
|
|
1905
|
-
startDate: originalAppointment.startDate,
|
|
1891
|
+
endDate: originalAppointment.endDate.date,
|
|
1892
|
+
startDate: originalAppointment.startDate.date,
|
|
1906
1893
|
};
|
|
1907
1894
|
this.schedulerService.handleEvent({ nativeEvent: mouseEvent, appointment: appointmentRef, sender: this.scheduler }, this.eventOutputMap, 'appointment');
|
|
1908
1895
|
}
|
|
@@ -1927,8 +1914,8 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1927
1914
|
const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
|
|
1928
1915
|
const appointmentRef = {
|
|
1929
1916
|
...originalAppointment,
|
|
1930
|
-
endDate: originalAppointment.endDate,
|
|
1931
|
-
startDate: originalAppointment.startDate,
|
|
1917
|
+
endDate: originalAppointment.endDate.date,
|
|
1918
|
+
startDate: originalAppointment.startDate.date,
|
|
1932
1919
|
};
|
|
1933
1920
|
this.onAppointmentDropInternal.emit({
|
|
1934
1921
|
dropEvent: e,
|
|
@@ -1944,8 +1931,8 @@ class AXSchedulerWeekViewComponent extends NXComponent {
|
|
|
1944
1931
|
const originalAppointment = this.schedulerService.getOriginalAppointment(droppedItem);
|
|
1945
1932
|
const appointmentRef = {
|
|
1946
1933
|
...originalAppointment,
|
|
1947
|
-
endDate: originalAppointment.endDate,
|
|
1948
|
-
startDate: originalAppointment.startDate,
|
|
1934
|
+
endDate: originalAppointment.endDate.date,
|
|
1935
|
+
startDate: originalAppointment.startDate.date,
|
|
1949
1936
|
};
|
|
1950
1937
|
this.onAppointmentDropInternal.emit({
|
|
1951
1938
|
dropEvent: e,
|
|
@@ -2045,9 +2032,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2045
2032
|
'agenda',
|
|
2046
2033
|
]);
|
|
2047
2034
|
this.selectedView = model(this.views()[0]);
|
|
2048
|
-
this.prevView = signal(this.selectedView());
|
|
2049
2035
|
// --- Public Outputs ---
|
|
2050
|
-
this.onDataLoaded = output();
|
|
2051
2036
|
this.onRangeChanged = output();
|
|
2052
2037
|
this.onSlotClicked = output();
|
|
2053
2038
|
this.onSlotDblClicked = output();
|
|
@@ -2070,7 +2055,6 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2070
2055
|
const list = this.dataSource();
|
|
2071
2056
|
this._appointments.set(list);
|
|
2072
2057
|
}
|
|
2073
|
-
this.onDataLoaded.emit();
|
|
2074
2058
|
});
|
|
2075
2059
|
this.currentDateText = computed(() => {
|
|
2076
2060
|
switch (this.selectedView()) {
|
|
@@ -2140,7 +2124,20 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2140
2124
|
console.warn('Scheduler: Skipping item due to invalid parsed date (NaN):', item);
|
|
2141
2125
|
return null;
|
|
2142
2126
|
}
|
|
2143
|
-
|
|
2127
|
+
// Calculate singleDay based on *calendar day*, not just time
|
|
2128
|
+
const appointment = {
|
|
2129
|
+
endDate,
|
|
2130
|
+
startDate,
|
|
2131
|
+
id: item.id,
|
|
2132
|
+
data: item.data,
|
|
2133
|
+
title: item.title,
|
|
2134
|
+
allDay: !!item.allDay,
|
|
2135
|
+
readonly: !!item.readonly,
|
|
2136
|
+
textColor: item.textColor,
|
|
2137
|
+
description: item.description,
|
|
2138
|
+
backgroundColor: item.backgroundColor,
|
|
2139
|
+
};
|
|
2140
|
+
return appointment;
|
|
2144
2141
|
})
|
|
2145
2142
|
.filter((appt) => appt !== null); // Filter out nulls from invalid dates
|
|
2146
2143
|
});
|
|
@@ -2178,12 +2175,6 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2178
2175
|
this.#rangeChangedEffect = effect(() => {
|
|
2179
2176
|
this.onRangeChanged.emit(this.range());
|
|
2180
2177
|
});
|
|
2181
|
-
this.#viewChangedEffect = effect(() => {
|
|
2182
|
-
const view = this.selectedView();
|
|
2183
|
-
untracked(() => {
|
|
2184
|
-
this.handleViewChanged(this.prevView(), view);
|
|
2185
|
-
});
|
|
2186
|
-
});
|
|
2187
2178
|
this.viewAppointments = computed(() => {
|
|
2188
2179
|
const current = this.currentDate();
|
|
2189
2180
|
const mapped = this.mappedAppointments();
|
|
@@ -2191,8 +2182,7 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2191
2182
|
const rangeEnd = this.range().end;
|
|
2192
2183
|
if (!current || mapped.length === 0)
|
|
2193
2184
|
return [];
|
|
2194
|
-
return mapped.filter((appt) =>
|
|
2195
|
-
this.calendarService.create(appt.endDate, this.calendarType()).compare(rangeStart, 'second') >= 0);
|
|
2185
|
+
return mapped.filter((appt) => appt.startDate.compare(rangeEnd, 'second') <= 0 && appt.endDate.compare(rangeStart, 'second') >= 0);
|
|
2196
2186
|
});
|
|
2197
2187
|
}
|
|
2198
2188
|
// --- Internal Handlers for View Outputs ---
|
|
@@ -2256,14 +2246,10 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2256
2246
|
return { gridStartDate, gridEndDate };
|
|
2257
2247
|
}
|
|
2258
2248
|
#rangeChangedEffect;
|
|
2259
|
-
#viewChangedEffect;
|
|
2260
2249
|
viewChanged(e) {
|
|
2261
2250
|
const newView = e.value;
|
|
2262
2251
|
const oldView = e.oldValue;
|
|
2263
2252
|
this.selectedView.set(newView);
|
|
2264
|
-
this.handleViewChanged(oldView, newView);
|
|
2265
|
-
}
|
|
2266
|
-
handleViewChanged(oldView, newView) {
|
|
2267
2253
|
if (oldView === 'week') {
|
|
2268
2254
|
const oldDayOfWeek = this.prevDate().dayOfWeek % 7;
|
|
2269
2255
|
const date = this.currentDate().add('day', oldDayOfWeek - 1);
|
|
@@ -2279,7 +2265,6 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2279
2265
|
const startOfWeekDate = currentDate.add('day', -daysToSubtract);
|
|
2280
2266
|
this.currentDate.set(startOfWeekDate);
|
|
2281
2267
|
}
|
|
2282
|
-
this.prevView.set(newView);
|
|
2283
2268
|
}
|
|
2284
2269
|
nextClick() {
|
|
2285
2270
|
switch (this.selectedView()) {
|
|
@@ -2345,7 +2330,6 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2345
2330
|
return appointments.find((a) => a.id === appt.id) ?? appt;
|
|
2346
2331
|
});
|
|
2347
2332
|
this._appointments.set(newAppointments);
|
|
2348
|
-
this.onDataLoaded.emit();
|
|
2349
2333
|
return;
|
|
2350
2334
|
}
|
|
2351
2335
|
if (typeof this.dataSource() === 'function') {
|
|
@@ -2356,15 +2340,13 @@ class AXSchedulerComponent extends NXComponent {
|
|
|
2356
2340
|
};
|
|
2357
2341
|
const list = await func({ range });
|
|
2358
2342
|
this._appointments.set(list);
|
|
2359
|
-
this.onDataLoaded.emit();
|
|
2360
2343
|
return;
|
|
2361
2344
|
}
|
|
2362
2345
|
const list = this.dataSource();
|
|
2363
2346
|
this._appointments.set(list);
|
|
2364
|
-
this.onDataLoaded.emit();
|
|
2365
2347
|
}
|
|
2366
2348
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
2367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", 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", onDataLoaded: "onDataLoaded", onRangeChanged: "onRangeChanged", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n @if (hasHeader()) {\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"200\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n }\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timeline-day') {\n <ax-scheduler-timeline-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timeline-multi-day') {\n <ax-scheduler-timeline-multi-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;font-size:.875rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:61;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;overflow:hidden;border-width:1px;flex-direction:column;background-color:inherit;border-radius:var(--ax-sys-border-radius)}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;overflow-x:auto;overflow-y:hidden;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "firstDayOfWeek", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", 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 }, endDayHour: { classPropertyName: "endDayHour", publicName: "endDayHour", isSignal: true, isRequired: false, transformFunction: null }, startDayHour: { classPropertyName: "startDayHour", publicName: "startDayHour", isSignal: true, isRequired: false, transformFunction: null }, hasHeader: { classPropertyName: "hasHeader", publicName: "hasHeader", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, allowFullScreen: { classPropertyName: "allowFullScreen", publicName: "allowFullScreen", isSignal: true, isRequired: false, transformFunction: null }, multiDayViewDaysCount: { classPropertyName: "multiDayViewDaysCount", publicName: "multiDayViewDaysCount", 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", onRangeChanged: "onRangeChanged", onSlotClicked: "onSlotClicked", onSlotDblClicked: "onSlotDblClicked", onSlotRightClick: "onSlotRightClick", onAppointmentDrop: "onAppointmentDrop", onAppointmentClicked: "onAppointmentClicked", onAppointmentDblClicked: "onAppointmentDblClicked", onAppointmentRightClick: "onAppointmentRightClick" }, providers: [AXUnsubscriber, { provide: AXComponent, useExisting: AXSchedulerComponent }], viewQueries: [{ propertyName: "viewModeSelectbox", first: true, predicate: AXSelectBoxComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-scheduler-container\">\n @if (hasHeader()) {\n <div class=\"ax-scheduler-header\">\n <div class=\"ax-scheduler-date\">\n <ax-button look=\"blank\" (onClick)=\"prevClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-left': !rtl(),\n 'ax-icon-chevron-right': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-button look=\"blank\" [text]=\"currentDateText()\" #date></ax-button>\n <ax-button look=\"blank\" (onClick)=\"nextClick()\">\n <ax-icon\n class=\"ax-icon ax-text-xl\"\n [ngClass]=\"{\n 'ax-icon-chevron-right': !rtl(),\n 'ax-icon-chevron-left': rtl(),\n }\"\n ></ax-icon>\n </ax-button>\n <ax-popover [target]=\"date\" [placement]=\"'bottom'\">\n <div class=\"ax-overlay-pane\">\n <ax-calendar\n [type]=\"calendarType()\"\n [depth]=\"calendarDepth()\"\n [ngModel]=\"currentDate()\"\n (onValueChanged)=\"calendarDateChanged($event)\"\n ></ax-calendar>\n </div>\n </ax-popover>\n </div>\n <div class=\"ax-scheduler-actions\">\n <ax-select-box\n [dropdownWidth]=\"200\"\n [ngModel]=\"selectedView()\"\n [dataSource]=\"viewsDataSource()\"\n (onValueChanged)=\"viewChanged($event)\"\n ></ax-select-box>\n\n @if (allowFullScreen()) {\n <ax-button look=\"blank\" (onClick)=\"handleFullScreen()\">\n <ax-icon>\n <i\n class=\"fa-solid fa-expand\"\n [ngClass]=\"{ 'fa-compress': isFullScreen(), 'fa-expand': !isFullScreen() }\"\n ></i>\n </ax-icon>\n </ax-button>\n }\n </div>\n </div>\n }\n <div class=\"ax-scheduler-views-container\">\n @switch (selectedView()) {\n @case ('day') {\n <ax-scheduler-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-day-view>\n }\n @case ('week') {\n <ax-scheduler-week-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-week-view>\n }\n @case ('month') {\n <ax-scheduler-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n ></ax-scheduler-month-view>\n }\n @case ('timeline-day') {\n <ax-scheduler-timeline-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-day-view>\n }\n @case ('timeline-multi-day') {\n <ax-scheduler-timeline-multi-day-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [endDayHour]=\"endDayHour()\"\n [startDayHour]=\"startDayHour()\"\n [appointments]=\"viewAppointments()\"\n [daysCount]=\"multiDayViewDaysCount()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-multi-day-view>\n }\n @case ('timeline-month') {\n <ax-scheduler-timeline-month-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-timeline-month-view>\n }\n @case ('agenda') {\n <ax-scheduler-agenda-view\n [date]=\"currentDate()\"\n [readonly]=\"readonly()\"\n [draggable]=\"draggable()\"\n [calendar]=\"calendarType()\"\n [appointments]=\"viewAppointments()\"\n (slotClickedInternal)=\"handleSlotClickInternal($event)\"\n (slotDblClickedInternal)=\"handleSlotDblClickInternal($event)\"\n (slotRightClickedInternal)=\"handleSlotRightClickInternal($event)\"\n (onAppointmentDropInternal)=\"handleAppointmentDropInternal($event)\"\n (appointmentClickedInternal)=\"handleAppointmentClickInternal($event)\"\n (appointmentDblClickedInternal)=\"handleAppointmentDblClickInternal($event)\"\n (appointmentRightClickedInternal)=\"handleAppointmentRightClickInternal($event)\"\n >\n </ax-scheduler-agenda-view>\n }\n }\n </div>\n</div>\n", styles: [":root{--ax-comp-scheduler-width: 57.5rem;--ax-comp-scheduler-basic-view-blocks-height: 3rem;--ax-comp-scheduler-basic-view-blocks-width: 3.5rem;--ax-comp-scheduler-timeline-view-blocks-width: 20rem;--ax-comp-scheduler-timeline-view-blocks-height: 3rem}ax-scheduler{width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none;font-size:.875rem;background-color:inherit}ax-scheduler.ax-full-screen-container{top:0;left:0;z-index:61;width:100vw;height:100vh;position:fixed}ax-scheduler .ax-scheduler-container{height:100%;display:flex;overflow:hidden;border-width:1px;flex-direction:column;background-color:inherit;border-radius:var(--ax-sys-border-radius)}ax-scheduler .ax-scheduler-container .ax-scheduler-header{display:flex;padding:1rem;overflow-x:auto;overflow-y:hidden;align-items:center;border-bottom-width:1px;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date{display:flex;min-width:20.5rem;align-items:center;justify-content:space-between}ax-scheduler .ax-scheduler-container .ax-scheduler-header .ax-scheduler-date p{margin:0;font-size:1rem;min-width:10rem;font-weight:500;text-align:center}ax-scheduler .ax-scheduler-container .ax-scheduler-actions{gap:.75rem;display:flex;align-items:center;justify-content:center}ax-scheduler .ax-scheduler-container .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}ax-scheduler .ax-scheduler-container ax-subtitle{font-size:.75rem}ax-scheduler .ax-scheduler-container .ax-scheduler-views-container{height:100%;overflow:auto;background-color:inherit}ax-scheduler .ax-scheduler-slot-hovered{background-color:rgba(var(--ax-comp-scheduler-slot-hover-bg, var(--ax-sys-color-primary-surface), .1))}.ax-overlay-pane.ax-scheduler-popover{gap:.25rem;display:grid;overflow:auto;padding:.25rem;max-height:10rem;font-size:.875rem;border-radius:.5rem}.ax-overlay-pane.ax-scheduler-popover.ax-scheduler-month-popover-appointment{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover:not(.ax-state-readonly) .ax-scheduler-popover-appointment{cursor:pointer}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment{display:flex;overflow:hidden;-webkit-user-select:none;user-select:none;flex-direction:column;padding-block:.25rem;padding-inline:.5rem;color:rgba(var(--ax-sys-color-on-primary-surface));border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-primary-surface))}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment ax-subtitle{font-size:.75rem}.ax-overlay-pane.ax-scheduler-popover .ax-scheduler-popover-appointment .ax-scheduler-truncate{display:block;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "cellTemplate", "cellClass", "showNavigation", "count", "id"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXSchedulerDayViewComponent, selector: "ax-scheduler-day-view", inputs: ["readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerWeekViewComponent, selector: "ax-scheduler-week-view", inputs: ["readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerMonthViewComponent, selector: "ax-scheduler-month-view", inputs: ["readonly", "draggable", "calendar", "date", "firstDayOfWeek", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineDayViewComponent, selector: "ax-scheduler-timeline-day-view", inputs: ["readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMultiDayViewComponent, selector: "ax-scheduler-timeline-multi-day-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "date", "endDayHour", "startDayHour", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerTimelineMonthViewComponent, selector: "ax-scheduler-timeline-month-view", inputs: ["readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }, { kind: "component", type: AXSchedulerAgendaViewComponent, selector: "ax-scheduler-agenda-view", inputs: ["daysCount", "readonly", "draggable", "calendar", "date", "appointments"], outputs: ["slotClickedInternal", "slotDblClickedInternal", "slotRightClickedInternal", "appointmentClickedInternal", "appointmentDblClickedInternal", "appointmentRightClickedInternal", "onAppointmentDropInternal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2368
2350
|
}
|
|
2369
2351
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: AXSchedulerComponent, decorators: [{
|
|
2370
2352
|
type: Component,
|